ULTIMATE 教育 Web サイトを一から構築しました — 4 日目

3 日目は、Web サイトに必要なコンテンツそのものに取り組みました。厳密には6日目なので、これを4日目と呼ぶのは奇妙に感じるかもしれません。

ええ、奇妙に聞こえるかもしれませんが、土曜日と日曜日は仕事をしません。仕事ではなく、家族と時間を過ごし、リラックスしています。開発者として、ワークライフ バランスを保つことが不可欠であることを念頭に置いてください。

今日は共有結合半径計算機を開発します。これは 3 日目に Noah Kleij によって与えられた提案で、私はその日だけその基本バージョンを実装しましたが、今日はディレクトリ Chemistry/3/covalent-radii- 内に専用のページを作成します。 and-bond-length.html。共有結合半径を計算できるツールは市場に存在せず、少なくとも Google では検索できません。

それでは、電卓ページの作成に取り掛かりましょう。

22 時間目: 電卓の追加

Chemistry/3/ ディレクトリ内に covalent-radii-and-bond-length.html ファイルを作成します。このページには、昨日取り組んだ共有結合半径計算機が含まれます。

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Covalent Radii Calculator </title>
       <!-- styles and scripts -->


    <main>
       <!-- Content goes here -->
    </main>
     <!-- script for molecule calculation and styles -->

これには通常の基本的な HTML が含まれていますが、このページでは意図的に最小限に留めました。

それでは、テキストと電卓をコピーして、すべてが機能するかどうかを確認してみましょう。一度では終了しないため、ChatGPT を使用して説明を何度も書きました。プロンプトを表示するのに時間がかかりました。

    <main>
        <div>



<p>This contains all the text, and also the calculator container.</p>

<p>Now, I'll add the styling for this, inline for now since I don't want to create a new style file, and also since we don't have much time left.<br>
</p>

<pre class="brush:php;toolbar:false"><style>
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
            color: #d0d0d0;
            background-color: #1e1e1e;
            transition: background-color 0.3s ease;
            position: relative;
            display: flex;
        }

        h2 {
            color: #95a5a6;
            border-bottom: 2px solid #3498db;
            padding-bottom: 5px;
            margin-top: 30px;
            transition: color 0.3s ease;
            position: relative;
        }

        h2:hover {
            color: #3498db;
        }

        h2:first-of-type {
            margin-top: 0;
        }

        p {
            margin-bottom: 15px;
            transition: color 0.3s ease;
        }

        p strong {
            font-weight: 600;
            color: #e74c3c;
        }

        p:hover {
            color: #bbb;
        }

        ul,
        ol {
            margin-bottom: 15px;
            padding-left: 20px;
        }

        li {
            margin-bottom: 5px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
            background-color: #2c2c2c;
        }

        th,
        td {
            border: 1px solid #555;
            padding: 8px;
            text-align: left;
            transition: background-color 0.3s ease;
        }

        th {
            background-color: #3498db;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #333;
        }

        tr:hover {
            background-color: #444;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease;
        }

        img:hover {
            transform: scale(1.05);
        }

        a {
            color: #3498db;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #217dbb;
        }

        /* Progress Bar */
        #progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 5px;
            background-color: #3498db;
            transition: width 0.3s ease;
            z-index: 1000;
        }

        /* Completed Checkmark */
        h2::after {
            content: '13';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #3498db;
            font-size: 1.2em;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        h2.completed::after {
            opacity: 1;
        }

        /* Sidebar Styles */
        #sidebar {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 220px;
            height: calc(100vh - 40px);
            background-color: #2c2c2c;
            padding: 15px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
            overflow-y: auto;
            z-index: 999;
        }

        #sidebar::-webkit-scrollbar {
            width: 0px;
        }

        #sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #sidebar li {
            margin-bottom: 10px;
        }

        #sidebar a {
            display: block;
            color: #95a5a6;
            padding: 10px 12px;
            transition: background-color 0.3s ease;
            border-radius: 4px;
        }

        #sidebar a:hover,
        #sidebar a.active {
            background-color: #333;
            color: #fff;
        }

        /* Main content area adjustment */
        main {
            flex: 1;
            padding: 10px;
            margin-right: 60px;
        }

        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        body,
        h2,
        p,
        ul,
        ol,
        table,
        img {
            animation: fadeIn 0.5s ease-out;
        }

        /* Right sidebar */
        #right-sidebar {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 40px;
            /* Adjusted width */
            height: calc(100vh - 40px);
            background-color: #2c2c2c;
            padding: 15px 0;
            /* Adjusted padding */
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 999;
            border-radius: 0.5rem;
        }

        #right-sidebar a {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #95a5a6;
            padding: 10px;
            transition: background-color 0.3s ease;
            border-radius: 4px;
            margin-bottom: 5px;
            height: 40px;
            /* Set height for a circular look */
            width: 40px;
            /* Set width for a circular look */
        }


        #right-sidebar a:hover,
        #right-sidebar a.active {
            background-color: #333;
            color: #fff;
        }

        #right-sidebar img {
            max-width: 20px;
            height: auto;
            display: block;
            margin: 0 auto;
            filter: invert(65%) sepia(3%) saturate(69%) hue-rotate(185deg) brightness(87%) contrast(86%);
            transition: transform 0.3s ease;
        }

        #right-sidebar a:hover img,
        #right-sidebar a.active img {
            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(105%) contrast(102%);
            transform: scale(1.1);
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            body {
                flex-direction: column;
                /* Stack elements vertically */
                margin: 10px;
                /* Reduce margin */
            }

            main {
                padding: 5px;
            }

            #sidebar {
                position: static;
                /* Make sidebar static */
                width: 100%;
                /* Full width */
                height: auto;
                margin-bottom: 10px;
                /* Add margin below sidebar */
                box-shadow: none;
            }

            #sidebar ul {
                display: flex;
                overflow-x: auto;
                padding: 0px 10px;
                margin-bottom: 10px;

            }

            #sidebar li {
                margin-bottom: 0px;
            }

            #sidebar a {
                padding: 10px 10px;
                margin: 0px 5px;
                white-space: nowrap;
                border-radius: 10px;
            }

            #right-sidebar {
                position: fixed;
                top: initial;
                /* Remove top position */
                bottom: 0;
                /* Stick to bottom */
                right: 0;
                width: 100%;
                height: auto;
                /* Adjust height */
                flex-direction: row;
                padding: 0;
                border-radius: 0;
                box-shadow: none;

            }


            #right-sidebar a {
                margin-bottom: 0;
                /* Remove bottom margin */
                width: auto;
                height: 40px;
            }

            #right-sidebar img {
                max-width: 20px;
            }

        }


        @media (min-width: 769px) {

            /* Adjust main content for larger screens to reduce gap if needed */
            main {
                margin-left: 50px;
                /* Further reduce the margin */
            }
        }
    </style>
    <style for="Calculator">
        .calculator-container {
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.calculator-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.calculator-controls input,
.calculator-controls button {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #333;
    color: #d0d0d0;
    transition: background-color 0.3s ease;
}

.calculator-controls input:focus,
.calculator-controls button:focus{
    outline: none;
     box-shadow: 0 0 5px #3498db;
}

.calculator-controls input{
    flex: 2;
}

.calculator-controls button{
    flex: 1;
}

.calculator-controls button:hover {
    background-color: #3498db;
    color: white;
    cursor: pointer;
}

#calculator-output {
    overflow-x: auto; /* Enable horizontal scrolling for wider tables */
}

#calculator-output table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
}

#calculator-output th,
#calculator-output td {
    border: 1px solid #555;
    padding: 8px;
    text-align: left;
}

#calculator-output th {
    background-color: #3498db;
    color: white;
}

#calculator-output tr:nth-child(even) {
    background-color: #333;
}

#calculator-output tr:hover {
    background-color: #444;
}

/* Loading Spinner */
.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.calculator-container h2 {
    margin-top: 0; /* Remove top margin for calculator heading */
}

.calculator-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center; /* Align input, SVG, and button vertically */
}

#molecule-svg-container {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    border: 1px solid #555; /* Optional border */
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#molecule-svg-container svg {
    max-width: 100%;
    max-height: 100%;
}
    </style>

これは、計算機とメイン コンテンツを含むコンテンツ ページ全体のスタイルを処理します。前のものとは異なり、このバージョンではコンテンツにダークテーマがあり、サイトの右側にナビゲーション バーが表示されます。 「共有結合半径計算」という目的で検索している人は、計算機が必要で、特定の計算を行ってからサイトを離れます。実際にサイト内を移動する時間があるのは主に彼らです。

通常、化学の高等教育を受けている学生は、これらの用語を検索します。したがって、時間を無駄にしないのは良いことです。そして、ナビゲーションは維持し、デスクトップでは右に、モバイルでは下に移動しただけです。私たちは彼らに電卓を直接見せただけで、ナビゲーションを見て時間を無駄にすることはありませんでした。ただ彼らが望むものを与えるだけです。覚えておいてください: 検索意図の一致を優先する必要があります。そうしないと、どの検索エンジンでも宣伝されなくなります。

最後に、JavaScript を追加しましょう。これには、計算機のロジックと、SVG の更新が含まれています。私には時間も SVG のスキルもなかったので、現在はいくつかの分子のみで利用可能です。

 
        document.addEventListener('DOMContentLoaded', function () {
        let 分子入力 = document.getElementById('分子入力');
        let CalculateBtn = document.getElementById('calculate-btn-56');
        let calculatorOutput = document.getElementById('calculator-output-56');
         let 分子SvgContainer = document.getElementById('分子-svg-コンテナ');

        const covalentRadii = {
            「ひ」：31、「彼」：28、「り」：128、「べ」：96、「B」：84、「C」：73、「N」：71、「O」：66、「F」 ': 57、'ね': 58、
            「Na」：166、「Mg」：141、「Al」：121、「Si」：111、「P」：107、「S」：105、「Cl」：102、「Ar」：106、
            「K」：203、「Ca」：176、「Sc」：170、「Ti」：160、「V」：153、「Cr」：139、「Mn」：139、「Fe」：132、「Co」 ':126、
            「Ni」: 124、「Cu」: 132、「Zn」: 122、「Ga」: 122、「Ge」: 120、「As」: 119、「Se」: 120、「Br」: 120、「Kr」 ':116、
            「Rb」：220、「Sr」：195、「Y」：190、「Zr」：175、「Nb」：164、「Mo」：154、「Tc」：147、「Ru」：146、「Rh」 ':142、
            「Pd」: 139、「Ag」: 145、「Cd」: 144、「In」: 142、「Sn」: 139、「Sb」: 139、「Te」: 138、「I」: 139、「Xe」 ': 140、
            「Cs」: 244、「Ba」: 215、「La」: 207、「Ce」: 204、「Pr」: 203、「Nd」: 201、「Pm」: 199、「Sm」: 198、「Eu」 ': 198、
            「Gd」：196、「Tb」：194、「Dy」：192、「Ho」：192、「Er」：189、「Tm」：190、「Yb」：187、「Lu」：187、
            「Hf」：175、「Ta」：170、「W」：162、「Re」：151、「Os」：144、「Ir」：141、「Pt」：138、「Au」：138、「Hg」 ':149、
            「Tl」: 148、「Pb」: 146、「Bi」: 148、「Po」: 140、「At」: 150、「Rn」: 145
        };

        const 電気陰性度 = {
            「H」：2.20、「Li」：0.98、「Be」：1.57、「B」：2.04、「C」：2.55、「N」：3.04、「O」：3.44、「F」：3.98、「Na」 ': 0.93、
            「Mg」：1.31、「Al」：1.61、「Si」：1.90、「P」：2.19、「S」：2.58、「Cl」：3.16、「K」：0.82、「Ca」：1.00、「Sc」 ': 1.36、
            「Ti」: 1.54、「V」: 1.63、「Cr」: 1.66、「Mn」: 1.55、「Fe」: 1.83、「Co」: 1.88、「Ni」: 1.91、「Cu」: 1.90、
            「Zn」：1.65、「Ga」：1.81、「Ge」：2.01、「As」：2.18、「Se」：2.55、「Br」：2.96、「Rb」：0.82、「Sr」：0.95、
            「Y」：1.22、「Zr」：1.33、「Nb」：1.60、「Mo」：2.16、「Tc」：1.90、「Ru」：2.20、「Rh」：2.28、「Pd」：2.20、
            「Ag」: 1.93、「Cd」: 1.69、「In」: 1.78、「Sn」: 1.96、「Sb」: 2.05、「Te」: 2.10、「I」: 2.66、「Cs」: 0.79、
            「Ba」：0.89、「La」：1.10、「Ce」：1.12、「Pr」：1.13、「Nd」：1.14、「Pm」：1.13、「Sm」：1.17、「Eu」：1.20、
            「Gd」：1.20、「Tb」：1.20、「Dy」：1.22、「Ho」：1.23、「Er」：1.24、「Tm」：1.25、「Yb」：1.1、「Lu」：1.27、
             「Hf」：1.3、「Ta」：1.5、「W」：2.36、「Re」：1.9、「Os」：2.2、「Ir」：2.2、「Pt」：2.28、「Au」：2.54、
            「Hg」: 2.00、「Tl」: 1.62、「Pb」: 2.33、「Bi」: 2.02、「Po」: 2.0、「At」: 2.0、「Rn」: 2.2
        };

        関数 parseMolecule(式) {
            const regex = /([A-Z][a-z]*)(d*)/g;
            一致させてください。
            const 要素 = {};
            while ((match = regex.exec(formula)) !== null) {
                const 要素 = match[1];
                const count = parseInt(match[2] || 1, 10);
                要素[要素] = (要素[要素] || 0) カウント;
            }
            要素を返します。
        }

        関数 CalculateBondLengths(分子) {
            const 要素 = parseMolecule(分子);
            const elementSymbols = Object.keys(elements);
            const 結果 = [];
            const 結合 = [];
            const radiiInfo = [];

            //まず、さまざまな原子の共有結合半径を結果に追加します。
            for (elementSymbols の const 要素) {
                if (covalentRadii[要素]) {
                    radiiInfo.push({
                        要素: 要素、
                        半径: covalentRadii[要素]
                    });
                }
            }

            for (let i = 0; i <elementsymbols.length i for j="i" elementsymbols.length const elementa="elementSymbols[i];" elementb="elementSymbols[j];" if covalentradii ra="covalentRadii[elementA];" rb="covalentRadii[要素B];" deltachi="Math.abs(電気陰性度[要素A]" bondlength="rA" bonddata="{" bondlength: bondlength.tofixed bonds.push radiiinfo.length="=="> 0) {
                results.push({
                    radiiData: 半径情報、
                    タイプ: "covalentRadius"
                });

            }

            if (bonds.length > 0) {
                Bonds.forEach(bond => {
                    results.push({
                        結合: 結合.結合、
                        BondLength: Bond.bondLength,
                        タイプ: "結合の長さ"
                    });
                });
            }
            結果を返します。
        }

        CalculateBtn.addEventListener('click', function () {
            const 分子 = 分子入力.値.trim();
            if (!分子) {
                alert('分子を入力してください。');
                戻る;
            }
            calculatorOutput.innerHTML = '<div>


          </div>

            
  

            
        </elementsymbols.length>