我从头开始构建了终极教育网站 — 第 4 天
- Susan Sarandon原创
- 2025-01-14 09:16:41475浏览
第三天，我们研究了内容本身，这是任何网站都需要的。将其称为第 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中文网其他相关文章！
JavaScript html Object NULL if count for while foreach include Directory math const using Length Regex finally copy function this innerHTML alert input li chatgpt ar everything
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn