社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > 我从头开始构建了终极教育网站 — 第 4 天

我从头开始构建了终极教育网站 — 第 4 天

Susan Sarandon
发布： 2025-01-14 09:16:41
原创
479 人浏览过

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
2478
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2621
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2211
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2079
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2183
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板