recherche

Maison >interface Web >js tutoriel >J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 5

J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 5

Susan Sarandon
Susan Sarandonoriginal
2025-01-15 11:08:44681parcourir

I Built the ULTIMATE Educational Website from Scratch — Day 5

Hier, nous avons travaillé sur les propriétés périodiques, un article spécifique. Aujourd’hui, revenons à la conception et aux pages du site.

Nous allons créer la page chimie organique. Nous commencerons par configurer la structure HTML de base, y compris les espaces réservés pour les éléments interactifs.

Heure 23 : Créer la page de chimie organique

Tout d’abord, j’ai créé organique.html dans le dossier Chimie. Voici la structure de base :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Organic Chemistry</title>
    <meta name="description" content="Explore the fascinating world of organic chemistry with interactive articles, quizzes, and 3D molecule visualizations.">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Stylesheets (Consider using a CSS preprocessor like Sass for better organization) -->
    <link rel="stylesheet" href="css/style-main.css">
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/specific-chemistry.css">
</head>
<body>
    <header>
        <nav>
            <div>



<p>I've added basic structure, links to the main stylesheets, and CDN link to a 3D molecule viewer library molGL. I've also added a basic header and footer, consistent with our previous pages, and a button for hamburger menu.</p>

<p>Now, I'll add the main content area, divided into sections for articles, key topics, and an interactive molecule viewer.<br>
</p>

<pre class="brush:php;toolbar:false"><section>



<p>This code adds a three-column layout. The left column will house the article list with a search bar. The middle column will have a hero section with a call-to-action button and a grid of topic cards with images. Finally, the right column will feature the interactive 3D molecule viewer.</p>

<p>I've also added placeholders for images within the topic cards (images/hydrocarbons.jpg, etc.). We'll need to replace these with actual images later.</p>

<h2>
  
  
  Hour 24: Adding JavaScript for Interactivity
</h2>

<p>Now, let's add some basic JavaScript to handle the hamburger menu, the article search functionality, and the 3D molecule viewer. I'll add the following inside the <script> tag at the end of the body:<br>


<pre class="brush:php;toolbar:false">        // Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

// 3D Molecule Viewer (MolGL Example)
const molContainer = document.getElementById('mol-container');
const moleculeSelect = document.getElementById('molecule-select');

// Initialize MolGL viewer 
let viewer = new MolGL({
  container: molContainer,
  style: {
    stick: {},
    sphere: { scale: 0.3 }
  }
});

// Load a default molecule
viewer.load('pdb:1crn'); // Example: Load a PDB structure

// Change molecule on selection
moleculeSelect.addEventListener('change', () => {
  const selectedMolecule = moleculeSelect.value;
  // We'll need to map molecule names to appropriate data sources (e.g., PDB IDs, SDF files)
  if (selectedMolecule === 'methane') {
    viewer.load('sdf:./molecules/methane.sdf'); // Example: Load from an SDF file
  } else if (selectedMolecule === 'ethanol') {
    viewer.load('pdb:1etn');
  } else if (selectedMolecule === 'benzene') {
    viewer.load('sdf:./molecules/benzene.sdf');
  }
});

Voici ce que fait ce JavaScript :

  1. Basculement du menu Hamburger : Ajoute un écouteur d'événement au bouton hamburger pour basculer la classe d'affichage dans le menu de navigation, la rendant visible ou masquée sur les petits écrans.
  2. Recherche d'articles : Implémente une fonctionnalité de recherche simple qui filtre les liens d'articles en fonction de la saisie de l'utilisateur dans la barre de recherche.
  3. Visionneuse de molécules 3D :
    • Initialise une instance de visionneuse MolGL dans l'élément mol-container.
    • Charge une molécule par défaut (protéine crambin, 1crn) au format PDB à partir d'un lien externe.
    • Ajoute un écouteur d'événement à la liste déroulante de sélection de molécules pour charger différentes molécules lorsque l'utilisateur effectue une sélection.
    • Utilise des sources de données de molécules d'espace réservé (./molecules/methane.sdf, etc.). Nous devrons fournir les données réelles des molécules dans le format correct (SDF, PDB, etc.) et mapper les noms des molécules en conséquence.

La page Live est par ici, si vous voulez voir :

Chimie Organique - NeuronIQ

Heure 25 : Création de la page de chimie inorganique

Créons une nouvelle page pour la chimie inorganique, de structure similaire à la page de chimie organique.

Tout d'abord, j'ai créé inorganic.html dans le dossier Chemistry avec la structure de base suivante :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Inorganic Chemistry</title>
    <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style-main.css">
      <link rel="stylesheet" href="specific-chemistry.css">
</head>
<body>
    <header>
        <nav>
            <div>



<p>This code sets up the HTML for the page with:</p>

<ul>
<li>  A basic header with navigation links.</li>
<li>  An aside element for the article list.</li>
<li>  A main content area with a heading, introductory text, and a grid for key topics.</li>
<li>  Placeholder links for articles and topics.</li>
<li>  A footer.</li>
</ul>

<p>We are using style.css, style-main.css and specific-chemistry.css for the styling.</p>

<p>Next, I added some content to the page:<br>
</p>

<pre class="brush:php;toolbar:false"><section>



<p>I also added a search bar and some links, that we will add later.</p>

<h2>
  
  
  Hour 26: Adding JavaScript for Search Functionality
</h2>

<p>Since we used a similar structure to the organic chemistry page, I copied over the JavaScript code for the hamburger menu and the article search functionality from organic.html to this inorganic chemistry page, removing the 3D molecule viewer part.<br>
</p>

<pre class="brush:php;toolbar:false">// Hamburger Menu Toggle
const hamburgerBtn = document.getElementById('hamburger-btn');
const navMenu = document.getElementById('nav-menu');

hamburgerBtn.addEventListener('click', () => {
  navMenu.classList.toggle('show'); 
});

// Article Search Functionality (Basic Example)
const articleSearch = document.getElementById('article-search');
const articleLinks = document.getElementById('article-links').querySelectorAll('a');

articleSearch.addEventListener('input', () => {
  const searchTerm = articleSearch.value.toLowerCase();

  articleLinks.forEach(link => {
    const linkText = link.textContent.toLowerCase();
    if (linkText.includes(searchTerm)) {
      link.style.display = 'block';
    } else {
      link.style.display = 'none';
    }
  });
});

J'ai dû ajuster les sélecteurs pour qu'ils correspondent aux identifiants utilisés dans cette page. Ce script gère désormais le basculement de base du menu hamburger et le filtrage de la recherche d'articles.

Nous avons maintenant une page inorganic.html de base avec une structure similaire à la page de chimie organique. Nous pouvons l'améliorer davantage en :

  1. Ajout de contenu :
    • Rédigez les articles réels sur les sujets répertoriés.
    • Ajoutez des images ou des diagrammes à la grille thématique.
  2. Style :
    • Améliorez la présentation visuelle avec CSS.
    • Garantissez la réactivité pour différentes tailles d'écran.
  3. Plus d'interactivité :
    • Ajoutez des quiz ou des diagrammes interactifs selon vos besoins.
  4. Navigation :
    • Implémenter un système de navigation plus robuste si le site devient plus complexe, car celui actuel est assez basique

Étant donné que notre objectif principal d'aujourd'hui était de configurer la structure et les fonctionnalités de base, nous pouvons envisager ces améliorations dans les prochaines étapes. Nous pouvons également améliorer cela en ajoutant du contenu plus pertinent, et en travaillant sur la réactivité de la page.

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 css html if for format class Event map default this input
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：Défi JavaScript quotidien #JS – Valider la permutation du palindromeArticle suivant：Défi JavaScript quotidien #JS – Valider la permutation du palindrome

Articles Liés

Voir plus