Heim >Web-Frontend >js-Tutorial >Ich habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 4
Ich habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 4
- Susan SarandonOriginal
- 2025-01-14 09:16:41519Durchsuche
Am dritten Tag haben wir an den Inhalten selbst gearbeitet, die für jede Website erforderlich sind. Es mag seltsam erscheinen, dies als Tag 4 zu bezeichnen, da es sich technisch gesehen um Tag 6 handelt.
Ja, ich weiß, es klingt seltsam, aber samstags und sonntags arbeite ich nicht. Ich verbringe Zeit mit meiner Familie und entspanne mich, anstatt zu arbeiten. Denken Sie daran, dass es als Entwickler wichtig ist, die Work-Life-Balance aufrechtzuerhalten.
Heute werde ich den Rechner für kovalente Radien entwickeln. Dies war ein Vorschlag von Noah Kleij am dritten Tag, und ich hatte erst an diesem Tag eine Basisversion davon implementiert, aber heute werde ich eine eigene Seite dafür im Verzeichnis Chemistry/3/covalent-radii- erstellen. and-bond-length.html. Es gibt keine Rechner für kovalente Radien auf dem Markt, zumindest nicht auf Google durchsuchbar.
Okay, jetzt lasst uns an der Erstellung der Rechnerseite arbeiten.
Stunde 22: Einen Rechner hinzufügen
Ich erstelle die Datei „covalent-radii-and-bond-length.html“ im Verzeichnis Chemistry/3/. Diese Seite enthält den Rechner für kovalente Radien, an dem wir gestern gearbeitet haben.
<!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>
Dies hat das übliche grundlegende HTML, aber ich habe es für diese Seite absichtlich minimal gehalten.
Jetzt kopieren wir den Text und auch den Rechner und schauen, ob alles funktioniert. Ich hatte die Beschreibung mehrmals mit ChatGPT geschrieben, da sie einfach nicht auf einmal funktionierte und es viel Zeit in Anspruch nahm, sie zu erstellen.
<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>
Dies übernimmt das Styling für die gesamte Inhaltsseite, mit dem Rechner und dem Hauptinhalt. Anders als die vorherige hat diese ein dunkles Thema für den Inhalt und die Navigationsleiste für die Website auf der rechten Seite. Als Person, die mit der Absicht „Kovalentradien-Rechner“ sucht, möchte sie den Rechner aufrufen, bestimmte Berechnungen durchführen und dann die Website verlassen. Sie sind in erster Linie diejenigen, die Zeit haben, sich tatsächlich auf der Website zurechtzufinden.
Normalerweise suchen Studierende, die eine höhere Ausbildung in Chemie anstreben, nach diesen Begriffen. Es ist also gut, ihre Zeit nicht zu verschwenden. Und wir haben die Navigation beibehalten, sie nur auf dem Desktop nach rechts und auf Mobilgeräten nach unten verschoben. Wir haben ihnen einfach direkt den Taschenrechner gezeigt und keine Zeit damit verschwendet, einen Blick auf die Navigation zu werfen. Gib ihnen einfach, was sie wollen. Denken Sie daran: Die Übereinstimmung mit der Suchabsicht sollte Ihre Priorität sein. Wenn dies nicht der Fall ist, wird es von keiner Suchmaschine beworben.
Zuletzt fügen wir noch das Javascript hinzu, das die Logik für den Rechner enthält, und aktualisieren die SVG-Datei, die derzeit nur für einige Moleküle verfügbar ist, da ich weder die Zeit noch die Kenntnisse von SVGs hatte:
<script>
document.addEventListener('DOMContentLoaded', function () {
let moleculeInput = document.getElementById('molecule-input');
let calculateBtn = document.getElementById('calculate-btn-56');
let calculatorOutput = document.getElementById('calculator-output-56');
let moleculeSvgContainer = document.getElementById('molecule-svg-container');
const covalentRadii = {
'H': 31, 'He': 28, 'Li': 128, 'Be': 96, 'B': 84, 'C': 73, 'N': 71, 'O': 66, 'F ': 57, 'Ne': 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
};
konstante Elektronegativität = {
'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
};
Funktion parseMolecule(formula) {
const regex = /([A-Z][a-z]*)(d*)/g;
zusammenpassen lassen;
const-Elemente = {};
while ((match = regex.exec(formel)) !== null) {
const element = match[1];
const count = parseInt(match[2] || 1, 10);
elements[element] = (elemente[element] || 0) count;
}
Rückgabeelemente;
}
Funktion berechneBondLengths(Molekül) {
const elements = parseMolecule(molecule);
const elementSymbols = Object.keys(elements);
const Ergebnisse = [];
const Bonds = [];
const radiiInfo = [];
//Füge zunächst die Kovalenzradien der verschiedenen Atome zum Ergebnis hinzu.
for (const element of elementSymbols) {
if (covalentRadii[element]) {
radiiInfo.push({
Element: Element,
Radius: kovalentRadii[Element]
});
}
}
for (let i = 0; i < elementSymbols.length; i ) {
for (let j = i 1; j < elementSymbols.length; j ) {
const elementA = elementSymbols[i];
const elementB = elementSymbols[j];
if (covalentRadii[elementA] && covalentRadii[elementB] && Elektronegativität[elementA] && Elektronegativität[elementB]) {
const rA = covalentRadii[elementA];
const rB = covalentRadii[elementB];
const deltaChi = Math.abs(Elektronegativität[elementA] - Elektronegativität[elementB]);
const bondLength = rA rB - 9 * deltaChi;
const bondData = {
Bindung: `${elementA}-${elementB}`,
BondLength: BondLength.toFixed(2),
};
Anleihen.push(bondData);
}
}
}
if (bonds.length === 0 && radiiInfo.length === 0) {
Ergebnisse zurückgeben; //Es müssen keine Berechnungen durchgeführt werden.
}
if (radiiInfo.length > 0) {
results.push({
radiiData: radiiInfo,
Typ: „covalentRadius“
});
}
if (bonds.length > 0) {
bonds.forEach(bond => {
results.push({
Bindung: Bindung. Bindung,
BondLength: Bond.bondLength,
Typ: „bondLength“
});
});
}
Ergebnisse zurückgeben;
}
berechnenBtn.addEventListener('click', function () {
const Molekül = MolekülInput.value.trim();
if (!molecule) {
Alert('Bitte geben Sie ein Molekül ein.');
zurückkehren;
}
RechnerOutput.innerHTML = '<div>
Das obige ist der detaillierte Inhalt vonIch habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beherrschen der Importreihenfolge in React: Ein tiefer Einblick in Best Practices und ToolsNächster Artikel：Beherrschen der Importreihenfolge in React: Ein tiefer Einblick in Best Practices und Tools
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse