Viele Leute fragten mich, wie viel Zeit ich dafür aufwenden werde. Ich dachte, es könnten 2 oder 3 Wochen sein. Aber diese Frage hat mich dazu gebracht, zu überdenken, wie viel Zeit ich auf der Website verbringe. Ich habe 8 Stunden allein mit der Homepage verbracht. Deshalb habe ich beschlossen, schnell Inhalte zu erstellen und mich nicht auf winzige Details zu konzentrieren, wie ich es in den Tagen zuvor getan habe. Ich habe viel von Ihrer Aufmerksamkeit verschwendet, jetzt fangen wir direkt mit dem Prozess an.
Ich beginne mit der Erstellung der Datei periodicity-of-elements-qa.html im Verzeichnis Chemistry/3/. Auf dieser Seite finden Sie Fragen und Antworten zum Thema Periodizität von Elementen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Questions and Answers</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>As usual, I included a basic HTML boilerplate with links to necessary scripts and styles, along with navigation to main pages. I am using a container div, aside element with the id table-of-contents, which will be populated using javascript, and finally the main tag.</p>
<p>Next, I added the content, formatted with heading tags and some paragraph tags for the main body. For formulas and symbols I used the LaTeX syntax, LaTeX is used because it is the go-to standard:<br>
</p>
<pre class="brush:php;toolbar:false"> <h2>
<p>This contains a lot of content, which is formatted using headings and sub-headings, some lists and tables. I also added an "About the Author" tag for authenticity.</p>
<p>I needed to style this page so that the text can be readable, and it doesn't look too bad. I will add an additional css file into this page, keeping style.css and style-main.css for common elements.</p>
<h2>
Hour 20: Styling the content page and adding JS for dynamic Table of Contents
</h2>
<p>I created an style tag inside the head element, and added basic style to it:<br>
</p>
<pre class="brush:php;toolbar:false"> <style>
header {
background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
padding: 1.2rem 0; /* Slightly increased padding */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index for better layering */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
transform: translateY(0); /* Initial state for smooth sticky animation */
}
header.sticky-active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
transform: translateY(-5px); /* Slight lift when sticky */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; /* Slightly increased side padding */
}
.logo {
font-size: 2rem; /* Slightly larger logo */
font-weight: 700; /* Bolder logo */
color: #7db4ff; /* Updated logo color, slightly lighter */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: scale(1.05); /* Gentle scale on hover */
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px; /* Use gap for spacing between list items */
}
nav ul li a {
text-decoration: none;
color: #f0f0f0; /* Slightly brighter text color */
position: relative; /* For the underline effect */
padding-bottom: 4px; /* Space for the underline */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow: hidden; /* Clip the pseudo-element */
}
nav ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #7db4ff; /* Same as logo color for consistency */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.4s ease-out;
}
nav ul li a:hover {
color: #90caf9; /* Lighter hover color */
transform: translateY(-2px); /* Slight lift on hover */
}
nav ul li a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Optional: Add an active state highlight */
nav ul li a.active {
color: #90caf9;
font-weight: 600;
}
nav ul li a.active::before {
transform: scaleX(1);
}
/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
header {
display: hidden;
}
}
:root {
--primary-bg: #f9f9f9; /* Very light grey for a softer white */
--secondary-bg: #ffffff; /* Pure white for content areas */
--text-primary: #212121; /* Dark grey for primary text */
--text-secondary: #757575; /* Medium grey for secondary text */
--accent-color: #2962ff; /* A vibrant blue */
--hover-color: #5393ff; /* Lighter blue for hover states */
--border-color: #e0e0e0; /* Light grey for borders */
--code-bg: #f0f0f0; /* Very light grey for code backgrounds */
--code-text: #333333; /* Dark grey for code text */
--toc-active: #2962ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
}
body {
font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
line-height: 1.6;
margin: 0;
background-color: var(--primary-bg);
color: var(--text-primary);
padding-bottom: 40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #bdbdbd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 60px;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-md);
border-radius: 8px;
display: grid;
grid-template-columns: minmax(250px, 300px) 1fr;
gap: 40px;
}
#table-of-contents {
padding: 30px;
background-color: var(--secondary-bg);
border-radius: 6px;
position: sticky;
top: 30px;
height: fit-content;
border: 1px solid var(--border-color);
}
/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
width: 6px; /* Thinner scrollbar */
}
#table-of-contents::-webkit-scrollbar-track {
background: #f1f1f1; /* Light background for the track */
border-radius: 3px; /* Slightly rounded track */
}
#table-of-contents::-webkit-scrollbar-thumb {
background-color: #bdbdbd; /* Medium grey for the thumb */
border-radius: 3px; /* Slightly rounded thumb */
}
#table-of-contents::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e; /* Darker grey on hover */
}
#table-of-contents > h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-align: left;
}
#table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
#table-of-contents li {
margin-bottom: 10px;
padding-left: 0;
border-left: 3px solid transparent;
transition: border-left-color var(--transition-fast), color var(--transition-fast);
}
#table-of-contents li:hover,
#table-of-contents li.active {
border-left-color: var(--toc-active);
}
#table-of-contents li.active > a {
color: var(--toc-active);
font-weight: 500;
}
#table-of-contents a {
text-decoration: none;
color: var(--text-secondary);
display: block;
padding: 6px 0;
transition: color var(--transition-fast);
}
#table-of-contents a:hover {
color: var(--hover-color);
}
#table-of-contents ul ul {
margin-left: 15px;
margin-top: 6px;
}
/* Main content styles - Focus on readability */
main {
padding: 40px;
border-radius: 6px;
overflow: hidden;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-sm);
}
main > *:not(:last-child) {
margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.4em;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.9em;
color: var(--accent-color);
}
h3 {
font-size: 1.6rem;
margin-bottom: 0.7em;
}
h4 {
font-size: 1.4rem;
margin-bottom: 0.6em;
}
p {
margin-bottom: 1.5em;
color: var(--text-secondary);
orphans: 3;
widows: 3;
word-break: break-word;
}
ul, ol {
margin-left: 25px;
margin-bottom: 1.7em;
}
li {
margin-bottom: 0.7em;
color: var(--text-secondary);
line-height: 1.5;
word-break: break-word;
}
strong {
font-weight: 600;
color: var(--text-primary);
}
em {
font-style: italic;
color: var(--accent-color);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent; /* Subtle underline on hover */
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--secondary-bg);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
}
th {
background-color: #f5f5f5; /* Lighter header background */
font-weight: 600;
color: var(--text-primary);
}
tbody tr:nth-child(even) {
background-color: #fafafa; /* Very light grey for even rows */
}
/* Code blocks - Light theme styling */
pre {
background-color: var(--code-bg);
color: var(--code-text);
padding: 12px 18px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.6em;
white-space: pre-wrap;
border: 1px solid var(--border-color);
}
code {
font-family: 'Menlo', monospace;
background-color: #e8e8e8; /* Even lighter background for inline code */
color: var(--code-text);
padding: 3px 6px;
border-radius: 3px;
word-break: break-word;
}
pre code {
background-color: transparent;
padding: 0;
}
/* Horizontal rules - Simpler style */
hr {
border: none;
height: 1px;
background-color: var(--border-color);
margin: 2em 0;
}
/* Blockquotes - Clean separation */
blockquote {
border-left: 3px solid var(--accent-color);
padding: 10px 15px;
margin: 1.5em 0;
font-style: italic;
background-color: #f5f5f5;
border-radius: 3px;
color: var(--text-secondary);
}
blockquote p {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
padding: 50px;
grid-template-columns: 1fr;
gap: 30px;
}
#table-of-contents {
position: static;
margin-bottom: 30px;
}
#table-of-contents > h2 {
text-align: center;
}
}
@media (max-width: 768px) {
main {
padding: 30px;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 22px;
}
nav{
display:none;
}
}
@media (max-width: 480px) {
.container {
padding: 30px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
}
</style>
Dies ist nur ein grundlegender Stil mit einigen Änderungen an der Kopfzeile und dem Hauptinhalt, um sicherzustellen, dass die Elemente lesbar, nicht zu ablenkend und auf der gesamten Website konsistent sind.
Ich habe außerdem CSS für Tabellen, Anführungszeichen und Codeblöcke hinzugefügt, um die Lesbarkeit zu verbessern.
Ich wollte außerdem ein Skript hinzufügen, um das Inhaltsverzeichnis auf der linken Seite interaktiv zu gestalten. Also habe ich dieses Skript am Ende des Body-Tags hinzugefügt:
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main');
const tableOfContents = document.getElementById('table-of-contents');
if (!mainContent || !tableOfContents) {
console.error('Main content or table of contents element not found.');
return;
}
const headings = mainContent.querySelectorAll('h2, h3, h4');
const tocList = document.createElement('ul');
let currentList = tocList;
const stack = [currentList];
headings.forEach(heading => {
const tagName = heading.tagName;
const id = heading.id;
const text = heading.textContent;
if (id) {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = `#${id}`;
link.textContent = text;
listItem.appendChild(link);
if (tagName === 'H2') {
while (stack.length > 1) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H3') {
while (stack.length > 2) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H4') {
while (stack.length > 3) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
}
}
});
// Remove any empty ul elements that might have been created
function removeEmptyLists(list) {
Array.from(list.children).forEach(item => {
if (item.tagName === 'UL' && item.children.length === 0) {
item.remove();
} else if (item.tagName === 'LI') {
const childUl = item.querySelector('ul');
if (childUl) {
removeEmptyLists(childUl);
}
}
});
}
removeEmptyLists(tocList);
const tocTitle = document.createElement('h2');
tocTitle.textContent = 'Table of Contents';
tableOfContents.appendChild(tocTitle);
tableOfContents.appendChild(tocList);
});
</script>
Dieses Skript generiert automatisch ein verschachteltes Inhaltsverzeichnis aus den Überschriften im Hauptelement, was nahtlos funktioniert. Das Skript füllt automatisch das Table-of-Contents-Aside-Tag aus, das ich zuvor erstellt habe.
Schließlich habe ich Unterstützung für LaTeX-Formeln und -Gleichungen hinzugefügt, indem ich diese Skript- und Link-Tags in das Head-Tag eingefügt habe.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$", right: "$", display: false },
{ left: "$$", right: "$$", display: true }
]
});
});
</script>
Und damit ist die Inhaltsseite fertig. Mir gefällt, dass das Design sehr minimalistisch ist, nicht vom Inhalt ablenkt und dennoch über alle notwendigen Funktionen verfügt.
Wenn Sie sehen möchten, wie es in der Live-Version aussieht, anstatt Inhalte einfach selbst zu kopieren, sehen Sie sich hier an: Periodizität der Elemente – Fragen und Antworten
Ich erstelle die Datei periodicity-of-elements-notes.html im Ordner Chemistry/3/. Dies enthält Hinweise zur Periodizität von Elementen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Notes</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>This is the same base HTML structure as the previous file, periodicity-of-elements-qa.html. </p>
<p>Now, for the most time consuming part, copying over the massive text of the notes and formating it with headings, paragraphs, and lists. I've also used LaTeX syntax where appropriate.<br>
</p>
<pre class="brush:php;toolbar:false"> <h1>
Structure of Periodic Table
</h1>
<h2>
<p>I've added the base CSS from before, but I also added new CSS to style the calculator container, did I mention, this page also has a calculator, for interactivity:<br>
</p>
<pre class="brush:php;toolbar:false"> <style for="Calculator">
/* Light Mode Styles */
.calculator-container {
background-color: #f5f5f5; /* Light background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
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 #ccc; /* Light border */
background-color: #fff; /* White background */
color: #333; /* Dark text */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.calculator-controls input:focus,
.calculator-controls button:focus {
outline: none;
box-shadow: 0 0 5px #3498db; /* Focus highlight (same as dark mode) */
}
.calculator-controls input {
flex: 2;
}
.calculator-controls button {
flex: 1;
}
.calculator-controls button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
cursor: pointer;
}
#calculator-output {
overflow-x: auto;
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
#calculator-output th,
#calculator-output td {
border: 1px solid #ccc; /* Light border */
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db; /* Header color (same as dark mode) */
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #f0f0f0; /* Slightly darker for even rows */
}
#calculator-output tr:hover {
background-color: #e8e8e8; /* Slightly darker on hover */
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #ccc; /* Light border */
border-top: 4px solid #3498db; /* Spinner color (same as dark mode) */
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;
color: #333; /* Darker text color for heading */
}
</style>
Dies ist ein sehr einfacher Stil, aber für den Moment ist er in Ordnung.
Dann habe ich wie zuvor das JavaScript für das Inhaltsverzeichnis hinzugefügt und ein Skript hinzugefügt, um die Tabelle der Eigenschaften von Elementen zu generieren:
<script>
document.addEventListener('DOMContentLoaded', function () {
let elementInput = document.getElementById('element-input');
let calculeBtn = document.getElementById('calculate-btn');
let calculatorOutput = document.getElementById('calculator-output');
const elementData = {
"H": {
„Hfg_298_15K“: -241,8,
„Hfg_0K“: -217,8,
„Entropy_298_15K“: 130,7,
„Integrated_Heat_Capacity_0_to_298_15K“: 25,7,
„Heat_Capacity_298_15K“: 28,8,
„Electronic_Energy_Levels“: [1216,5, 1025,7],
„Ionization_Energies“: 13,6,
„Elektronenaffinität“: 0,75
},
"Er": {
„Hfg_298_15K“: 0,
„Hfg_0K“: 0,
„Entropy_298_15K“: 126,1,
„Integrated_Heat_Capacity_0_to_298_15K“: 20,8,
„Heat_Capacity_298_15K“: 20,8,
„Electronic_Energy_Levels“: [159850, 169084, 171133],
„Ionization_Energies“: 24,6,
„Elektronenaffinität“: -0,08
},
„Li“: {
„Hfg_298_15K“: 159,3,
„Hfg_0K“: 155,3,
„Entropy_298_15K“: 29,1,
„Integrated_Heat_Capacity_0_to_298_15K“: 22,8,
„Heat_Capacity_298_15K“: 24,8,
„Electronic_Energy_Levels“: [14908, 17159],
„Ionization_Energies“: 5,39,
„Elektronenaffinität“: 0,61
},
"Sei": {
„Hfg_298_15K“: 324,3,
„Hfg_0K“: 315,3,
„Entropy_298_15K“: 9,5,
„Integrated_Heat_Capacity_0_to_298_15K“: 16,8,
„Heat_Capacity_298_15K“: 16,7,
„Electronic_Energy_Levels“: [21978, 38178],
„Ionization_Energies“: 9.32,
„Elektronenaffinität“: -0,20
},
"B": {
„Hfg_298_15K“: 565,
„Hfg_0K“: 561,5,
„Entropy_298_15K“: 5,9,
„Integrated_Heat_Capacity_0_to_298_15K“: 11.1,
„Heat_Capacity_298_15K“: 11,1,
„Electronic_Energy_Levels“: [38144, 38178],
„Ionization_Energies“: 8.30 Uhr,
„Elektronenaffinität“: 0,28
},
"C": {
„Hfg_298_15K“: 716,7,
„Hfg_0K“: 711,2,
„Entropy_298_15K“: 5,7,
„Integrated_Heat_Capacity_0_to_298_15K“: 8,5,
„Heat_Capacity_298_15K“: 8,5,
„Electronic_Energy_Levels“: [10193, 21648],
„Ionization_Energies“: 11.3,
„Electron_Affinity“: 1.26
},
"N": {
„Hfg_298_15K“: 472,7,
„Hfg_0K“: 472,7,
„Entropy_298_15K“: 153,3,
„Integrated_Heat_Capacity_0_to_298_15K“: 29.1,
„Heat_Capacity_298_15K“: 29,1,
„Electronic_Energy_Levels“: [19233, 28838],
„Ionization_Energies“: 14,5,
„Elektronenaffinität“: -0,07
},
„O“: {
„Hfg_298_15K“: 249,2,
„Hfg_0K“: 246,7,
„Entropy_298_15K“: 161,1,
„Integrated_Heat_Capacity_0_to_298_15K“: 29,4,
„Heat_Capacity_298_15K“: 29,4,
„Electronic_Energy_Levels“: [15867, 22698],
„Ionization_Energies“: 13,6,
„Electron_Affinity“: 1,46
},
"F": {
„Hfg_298_15K“: 79,4,
„Hfg_0K“: 77,2,
„Entropy_298_15K“: 158,8,
„Integrated_Heat_Capacity_0_to_298_15K“: 30.2,
„Heat_Capacity_298_15K“: 30,2,
„Electronic_Energy_Levels“: [404, 40889],
„Ionization_Energies“: 17.4,
„Electron_Affinity“: 3,40
},
„Ne“: {
„Hfg_298_15K“: 0,
„Hfg_0K“: 0,
„Entropy_298_15K“: 146,3,
„Integrated_Heat_Capacity_0_to_298_15K“: 20,8,
„Heat_Capacity_298_15K“: 20,8,
„Electronic_Energy_Levels“: [134041, 136541, 138892],
„Ionization_Energies“: 21,6,
„Elektronenaffinität“: -0,08
},
"N / A":{
„Hfg_298_15K“: 107,3,
„Hfg_0K“: 107,7,
„Entropy_298_15K“: 153,7,
„Integrated_Heat_Capacity_0_to_298_15K“: 44,4,
„Heat_Capacity_298_15K“: 44,4,
„Electronic_Energy_Levels“: [16956, 17293],
„Ionization_Energies“: 5.14,
„Elektronenaffinität“: 0,54
},
„Mg“:{
„Hfg_298_15K“: 147,7,
„Hfg_0K“: 146,2,
„Entropy_298_15K“: 32,7,
„Integrated_Heat_Capacity_0_to_298_15K“: 24,9,
„Heat_Capacity_298_15K“: 24,9,
„Electronic_Energy_Levels“: [24581, 30994],
„Ionization_Energies“: 7,65,
„Elektronenaffinität“: -0,30
},
„Al“:{
„Hfg_298_15K“: 324,3,
„Hfg_0K“: 324,1,
„Entropy_298_15K“: 28,3,
„Integrated_Heat_Capacity_0_to_298_15K“: 24,4,
„Heat_Capacity_298_15K“: 24,4,
„Electronic_Energy_Levels“: [25057, 33951],
„Ionization_Energies“: 5,99,
„Elektronenaffinität“: 0,43
},
„Si“:{
„Hfg_298_15K“: 450,0,
„Hfg_0K“: 447,6,
„Entropy_298_15K“: 18,8,
„Integrated_Heat_Capacity_0_to_298_15K“: 20.2,
„Heat_Capacity_298_15K“: 20,2,
„Electronic_Energy_Levels“: [6209, 14300],
„Ionization_Energies“: 8.15,
„Electron_Affinity“: 1,39
},
"P":{
„Hfg_298_15K“: 314,6,
„Hfg_0K“: 314,6,
„Entropy_298_15K“: 163,2,
„Integrated_Heat_Capacity_0_to_298_15K“: 27,3,
„Heat_Capacity_298_15K“: 27,3,
„Electronic_Energy_Levels“: [11828, 19553],
„Ionization_Energies“: 10,5,
„Elektronenaffinität“: 0,75
},
"S":{
„Hfg_298_15K“: 278,3,
„Hfg_0K“: 275,2,
„Entropy_298_15K“: 167,7,
„Integrated_Heat_Capacity_0_to_298_15K“: 29.2,
„Heat_Capacity_298_15K“: 29,2,
„Electronic_Energy_Levels“: [21394, 29394],
„Ionization_Energies“: 10.4,
„Electron_Affinity“: 2.08
},
„Cl“:{
„Hfg_298_15K“: 121,3,
„Hfg_0K“: 119,1,
„Entropy_298_15K“: 165,2,
„Integrated_Heat_Capacity_0_to_298_15K“: 33,3,
„Heat_Capacity_298_15K“: 33,3,
„Electronic_Energy_Levels“: [882, 8823],
„Ionization_Energies“: 13.0,
„Electron_Affinity“: 3,62
},
„Ar“: {
„Hfg_298_15K“: 0,
„Hfg_0K“: 0,
„Entropy_298_15K“: 154,8,
„Integrated_Heat_Capacity_0_to_298_15K“: 20,8,
„Heat_Capacity_298_15K“: 20,8,
„Electronic_Energy_Levels“: [93144, 93751, 95282],
„Ionization_Energies“: 15,8,
„Elektronenaffinität“: -0,08
},
„K“:{
„Hfg_298_15K“: 89,2,
„Hfg_0K“: 89,2,
„Entropy_298_15K“: 160,3,
„Integrated_Heat_Capacity_0_to_298_15K“: 46,2,
„Heat_Capacity_298_15K“: 46,2,
„Electronic_Energy_Levels“: [12985, 13042],
„Ionization_Energies“: 4,34,
„Elektronenaffinität“: 0,50
},
„Ca“:{
„Hfg_298_15K“: 178,2,
„Hfg_0K“: 177,3,
„Entropy_298_15K“: 41,6,
„Integrated_Heat_Capacity_0_to_298_15K“: 25,9,
„Heat_Capacity_298_15K“: 25,9,
„Electronic_Energy_Levels“: [15315, 23652],
„Ionization_Energies“: 6.11,
„Elektronenaffinität“: -0,02
},
"Sc":{
„Hfg_298_15K“: 0,
„Hfg_0K“: 0,
„Entropy_298_15K“: 33,2,
„Integrated_Heat_Capacity_0_to_298_15K“: 3,80,
„Heat_Capacity_298_15K“: 25,52,
„Electronic_Energy_Levels“: [0, 11519,99],
„Ionization_Energies“: 6.561,
„Electron_Affinity“: 0,189
},
„Ti“:{
„Hfg_298_15K“: 473,00,
„Hfg_0K“: 470,00 ,
„Entropy_298_15K“: 180,30,
„Integrated_Heat_Capacity_0_to_298_15K“: 7,54,
„Heat_Capacity_298_15K“: 24,43,
„Electronic_Energy_Levels“: [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34],
„Ionization_Energies“: 6.828,
„Elektronenaffinität“: 0,087
},
„Ti“:{
„Hfg_298_15K“: 473,00,
„Hfg_0K“: 470,00 ,
„Entropy_298_15K“: 180,30,
„Integrated_Heat_Capacity_0_to_298_15K“: 7,54,
„Heat_Capacity_298_15K“: 24,43,
„Electronic_Energy_Levels“: [0, 170.132, 386.874, 6556.833, 6598.765, 6661.006, 6742.756, 6842.962, 7255.355, 8436.618, 8492.421, 8602.34],
„Ionization_Energies“: 6.828,
„Elektronenaffinität“: 0,087
},
};
berechnenBtn.addEventListener('click', function() {
let selectedElement = elementInput.value.trim();
if (!selectedElement) {
Alert('Bitte geben Sie ein Elementsymbol ein.');
zurückkehren;
}let normalizedElement = selectedElement.charAt(0).toUpperCase() selectedElement.slice(1).toLowerCase();
RechnerOutput.innerHTML = '<div>
<p>Ich habe viele Inhalte hinzugefügt, zusammen mit der Logik zum dynamischen Generieren des Inhaltsverzeichnisses und der Logik zum Berechnen der Werte für jedes Element für den Rechner. Noah fragte mich, ob ich einen einfachen Rechner für Elemente und ihre kovalenten Radien und Bindungslängen integrieren könnte. Die Seite ist nun fertig! Willst du es sehen, es ist hier:<br>
Periodizität der Elemente – Notizen</p>
<p>Dies markiert das Ende der Codierung für diesen Tag. Ich weiß, es fühlt sich etwas gehetzt an, weil es so ist. Ich konnte nicht genau beschreiben, was ich alles getan habe und warum, weil ich mich an das meiste davon auch nicht erinnern kann. Ich erinnere mich nur an die grundlegenden Änderungen.</p>
Das obige ist der detaillierte Inhalt vonIch habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
