나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 4일차

3일차에는 모든 웹사이트에 필요한 콘텐츠 자체를 작업했습니다. 엄밀히 말하면 Day 6이기 때문에 Day 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>

이것은 계산기와 기본 콘텐츠를 포함하여 전체 콘텐츠 페이지의 스타일을 처리합니다. 이전 버전과 다르게 콘텐츠에 어두운 테마가 있고 오른쪽에 사이트 탐색 모음이 있습니다. "공유결합 반지름 계산기"를 검색하는 사람으로서 그들은 계산기를 원하고 특정 계산을 수행한 다음 사이트를 떠납니다. 주로 사이트를 실제로 탐색할 시간이 있는 사람입니다.

일반적으로 화학에서 고등 교육을 받고자 하는 학생들은 다음 용어를 검색합니다. 따라서 시간을 낭비하지 않는 것이 좋습니다. 그리고 우리는 탐색 기능을 그대로 유지했습니다. 데스크톱에서는 오른쪽으로, 모바일에서는 아래쪽으로 옮겼습니다. 우리는 그들에게 계산기를 보여주었고, 내비게이션을 보느라 시간을 낭비하지 않았습니다. 단지 그들이 원하는 것을 주는 것뿐입니다. 기억하세요: 검색 의도를 일치시키는 것이 우선순위여야 합니다. 그렇지 않으면 어떤 검색 엔진에서도 홍보되지 않습니다.

마지막으로 자바스크립트를 추가해 보겠습니다. 여기에는 계산기 논리와 svg 업데이트가 포함되어 있습니다. 저는 시간도 없고 SVG 기술도 없었기 때문에 현재 몇 가지 분자에만 사용할 수 있습니다.

 
        document.addEventListener('DOMContentLoaded', function () {
        let MoleculeInput = document.getElementById('molecule-input');
        계산Btn = document.getElementById('calculate-btn-56');
        let CalculatorOutput = document.getElementById('calculator-output-56');
         let MoleculeSvgContainer = document.getElementById('molecule-svg-container');

        const covalentRadii = {
            'H': 31, '그': 28, '리': 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
        };

        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
        };

        함수 parsMolecule(공식) {
            const 정규식 = /([A-Z][a-z]*)(d*)/g;
            일치시키다;
            const 요소 = {};
            while ((match = regex.exec(formula)) !== null) {
                const 요소 = 일치[1];
                const count = parsInt(match[2] || 1, 10);
                요소[요소] = (요소[요소] || 0) 개수;
            }
            요소를 반환합니다.
        }

        함수 계산BondLengths(분자) {
            const 요소 =parseMolecule(분자);
            const elementSymbols = Object.keys(요소);
            const 결과 = [];
            const 채권 = [];
            const radiiInfo = [];

            //먼저 다른 원자의 공유 반지름을 결과에 추가합니다.
            for(elementSymbols의 const 요소) {
                if (covalentRadii[요소]) {
                    radiiInfo.push({
                        요소: 요소,
                        반경: covalentRadii[요소]
                    });
                }
            }

            for (let i = 0; i  0) {
                결과.푸시({
                    반경데이터: 반경정보,
                    유형: "covalentRadius"
                });

            }

            if (본드 길이 > 0) {
                bond.forEach(본드 => {
                    결과.푸시({
                        채권: 채권.채권,
                        본드길이: bond.bondLength,
                        유형: "본드길이"
                    });
                });
            }
            결과를 반환합니다.
        }

        계산Btn.addEventListener('클릭', function () {
            const 분자 = MolecularInput.value.trim();
            만약 (!분자) {
                Alert('분자를 입력해주세요.');
                반품;
            }
            CalculatorOutput.innerHTML = '<div>


          </div>