Maison >interface Web >js tutoriel >J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 4
J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 4
- Susan Sarandonoriginal
- 2025-01-14 09:16:41519parcourir
Le troisième jour, nous avons travaillé sur le contenu lui-même, requis pour tout site Web. Cela peut sembler étrange d'appeler cela le jour 4, car il s'agit techniquement du jour 6.
Ouais, je sais que ça paraît bizarre, mais le samedi et le dimanche, je ne travaille pas. Je passe du temps avec ma famille et je me détends au lieu de travailler. Gardez à l’esprit qu’en tant que développeur, il est essentiel de maintenir un équilibre travail-vie personnelle.
Aujourd'hui, je vais développer le calculateur de rayons covalents. C'était une suggestion donnée par Noah Kleij, le jour 3, et j'en avais implémenté une version de base ce jour-là seulement, mais, aujourd'hui, je vais lui créer une page dédiée dans le répertoire Chemistry/3/covalent-radii- et-bond-length.html. Il n'existe pas de calculateurs de rayons covalents sur le marché, du moins impossibles à rechercher sur Google.
D'accord, travaillons maintenant à la création de la page de la calculatrice.
Heure 22 : Ajouter une calculatrice
Je vais créer le fichier covalent-radii-and-bond-length.html dans le répertoire Chemistry/3/. Cette page comprendra le calculateur de rayons covalents sur lequel nous avons travaillé hier.
<!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>
Ceci contient le code HTML de base habituel, mais je l'ai intentionnellement gardé minimal pour cette page.
Maintenant, copions le texte, ainsi que la calculatrice, et voyons si tout fonctionne. J'avais écrit la description en utilisant ChatGPT plusieurs fois, car cela ne tuerait tout simplement pas d'un seul coup, il fallait beaucoup de temps pour la demander.
<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>
Cela gérera le style de toute la page de contenu, avec la calculatrice et le contenu principal. Différent du précédent, celui-ci a un thème sombre pour le contenu et la barre de navigation pour le site sur le côté droit. En tant que personne effectuant une recherche dans le but de « Calculateur de rayons covalents », elle veut la calculatrice, effectue certains calculs, puis quitte le site. C'est avant tout celui qui a le temps de naviguer réellement sur le site.
Habituellement, les étudiants poursuivant des études supérieures en chimie recherchent ces termes. Il est donc bon de ne pas perdre leur temps. Et nous avons conservé la navigation, nous l'avons simplement déplacée vers la droite sur ordinateur et vers le bas sur mobile. Nous leur avons simplement montré la calculatrice, sans perdre de temps à regarder la navigation. Il suffit de leur donner ce qu'ils veulent. N'oubliez pas : faire correspondre l'intention de recherche devrait être votre priorité. Si ce n'est pas le cas, il ne sera promu par aucun moteur de recherche.
Enfin, ajoutons le javascript, celui-ci contient la logique du calculateur, et la mise à jour du svg, qui n'est actuellement disponible que pour quelques molécules, car je n'ai ni le temps ni les compétences des SVG :
<script>
document.addEventListener('DOMContentLoaded', fonction () {
let moléculeInput = document.getElementById('molecule-input');
laissez calculateBtn = document.getElementById('calculate-btn-56');
let calculatorOutput = document.getElementById('calculator-output-56');
laissez moléculeSvgContainer = document.getElementById('molecule-svg-container');
const covalentRadii = {
'H' : 31, 'Il' : 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
} ;
const électronégativité = {
'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.
} ;
fonction parseMolecule (formule) {
const regex = /([A-Z][a-z]*)(d*)/g;
laissez correspondre;
éléments const = {};
while ((match = regex.exec(formula)) !== null) {
élément const = match[1];
const count = parseInt(match[2] || 1, 10);
éléments[élément] = (éléments[élément] || 0) nombre ;
}
renvoyer des éléments ;
}
fonction calculerBondLengths (molécule) {
éléments const = parseMolecule (molécule);
const elementSymbols = Object.keys(elements);
const résultats = [];
obligations const = [];
const rayonsInfo = [];
//Ajoutez d'abord les rayons covalents des différents atomes au résultat.
pour (élément const de elementSymbols) {
if (covalentRadii[element]) {
rayonsInfo.push({
élément : élément,
rayon : covalentRadii[élément]
});
}
}
pour (soit i = 0; i < elementSymbols.length; i ) {
pour (soit j = i 1; j < elementSymbols.length; j ) {
const elementA = elementSymbols[i];
const elementB = elementSymbols[j];
if (covalentRadii[elementA] && covalentRadii[elementB] && électronégativité[elementA] && électronégativité[elementB]) {
const rA = covalentRadii[elementA];
const rB = covalentRadii[elementB];
const deltaChi = Math.abs(électronégativité[élémentA] - électronégativité[élémentB]);
const bondLength = rA rB - 9 * deltaChi;
const bondData = {
liaison : `${elementA}-${elementB}`,
bondLength : bondLength.toFixed(2),
} ;
obligations.push(bondData);
}
}
}
if (bonds.length === 0 && radiiInfo.length === 0) {
renvoyer les résultats ; //Aucun calcul à faire.
}
si (radiiInfo.length > 0) {
résultats.push({
RayiData : RadiiInfo,
tapez : "rayoncovalent"
});
}
si (obligations.longueur > 0) {
obligations.forEach(bond => {
résultats.push({
lien : bond.bond,
bondLength: bond.bondLength,
tapez : "bondLongueur"
});
});
}
renvoyer les résultats ;
}
calculateBtn.addEventListener('clic', fonction () {
const molécule = moléculeInput.value.trim();
si (!molécule) {
alert('Veuillez saisir une molécule.');
retour;
}
calculatorOutput.innerHTML = '<div>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
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
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Maîtriser l'ordre d'importation dans React : une plongée approfondie dans les meilleures pratiques et outilsArticle suivant：Maîtriser l'ordre d'importation dans React : une plongée approfondie dans les meilleures pratiques et outils
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript