3 日目は、Web サイトに必要なコンテンツそのものに取り組みました。厳密には6日目なので、これを4日目と呼ぶのは奇妙に感じるかもしれません。
ええ、奇妙に聞こえるかもしれませんが、土曜日と日曜日は仕事をしません。仕事ではなく、家族と時間を過ごし、リラックスしています。開発者として、ワークライフ バランスを保つことが不可欠であることを念頭に置いてください。
今日は共有結合半径計算機を開発します。これは 3 日目に Noah Kleij によって与えられた提案で、私はその日だけその基本バージョンを実装しましたが、今日はディレクトリ Chemistry/3/covalent-radii- 内に専用のページを作成します。 and-bond-length.html。共有結合半径を計算できるツールは市場に存在せず、少なくとも Google では検索できません。
それでは、電卓ページの作成に取り掛かりましょう。
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 () {
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>以上がULTIMATE 教育 Web サイトを一から構築しました — 4 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
