社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 我從頭開始建立了終極教育網站 — 第 4 天

我從頭開始建立了終極教育網站 — 第 4 天

Susan Sarandon
發布： 2025-01-14 09:16:41
原創
480 人瀏覽過

I Built the ULTIMATE Educational Website from Scratch — Day 4

第三天，我們研究了內容本身，這是任何網站都需要的。將其稱為第 4 天可能會感覺很奇怪，因為嚴格來說這是第 6 天。

是的，我知道這聽起來很奇怪，但周六和周日我不工作。我花時間與家人在一起放鬆，而不是工作。請記住，作為開發人員，保持工作與生活的平衡至關重要。

今天我將開發共價半徑計算器。這是Noah Kleij 在第3 天提出的建議，我僅在那天實現了該建議的基本版本，但是，今天我將在Chemistry/3/covalent-radii 目錄中為其創建一個專用頁面-和-bond- length.html。市面上沒有共價半徑計算器，至少在 Google 上搜尋不到。

好的，現在讓我們開始建立計算器頁面。

第 22 小時：新增計算器

我將在 Chemistry/3/ 目錄中建立 covalent-radii-and-bond-length.html 檔案。此頁面將包括我們昨天使用的共價半徑計算器。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Covalent Radii Calculator </title>
       <!-- styles and scripts -->
</head>
<body>
    <main>
       <!-- Content goes here -->
    </main>
     <!-- script for molecule calculation and styles -->
</body>
</html>
登入後複製

這具有通常的基本 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 () {
        令 molecularInput = document.getElementById('分子輸入');
        讓calculateBtn = document.getElementById('calculate-btn-56');
        讓calculatorOutput = document.getElementById('calculator-output-56');
         設 molecularSvgContainer = document.getElementById('molecule-svg-container');

        常量共價半徑 = {
            'H': 31, 'He': 28, 'Li': 128, 'Be': 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
        };

        常量電負性 = {
            '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，
            '鎂'：1.31，'鋁'：1.61，'矽'：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
        };

        函數解析分子（公式）{
            const 正規表示式 = /([A-Z][a-z]*)(d*)/g;
            讓匹配；
            常數元素 = {};
            while ((match = regex.exec(公式)) !== null) {
                const 元素 = match[1];
                const count = parseInt(match[2] || 1, 10);
                元素[元素] = (元素[元素] || 0) 計數；
            }
            返回元素；
        }

        函數計算BondLengths（分子）{
            const 元素 = parseMolecule(分子);
            const elementSymbols = Object.keys(elements);
            常量結果 = [];
            常量債券=[]；
            const 半徑資訊 = [];

            //首先將不同原子的共價半徑加到結果中。
            for (elementSymbols 的 const 元素) {
                if (covalentRadii[元素]) {
                    半徑資訊.push({
                        元素： 元素，
                        半徑：covalentRadii[元素]
                    });
                }
            }

            for (設 i = 0; i  0) {
                結果.push({
                    半徑數據：半徑信息，
                    類型：“共價半徑”
                });

            }

            if (bonds.length > 0) {
                bond.forEach(債券 => {
                    結果.push({
                        債券：債券.債券，
                        鍵長：鍵.鍵長，
                        類型：“鍵長”
                    });
                });
            }
            返回結果；
        }

        calculateBtn.addEventListener('點選', function () {
            const 分子 = molecularInput.value.trim();
            如果（！分子）{
                Alert('請輸入一個分子。');
                返回;
            }
            CalculatorOutput.innerHTML = '<div>


          </div>
登入後複製

以上是我從頭開始建立了終極教育網站 — 第 4 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：dev.to
上一篇：掌握 React 中的導入順序：深入探討最佳實務與工具 下一篇：每日 JavaScript 挑戰 #JS - 計算陣列中每個唯一元素的頻率
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2479
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2622
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2212
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
2081
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
2185
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板