ULTIMATE 教育 Web サイトを一から構築しました — 5 日目-jsチュートリアル-php.cn

I Built the ULTIMATE Educational Website from Scratch — Day 5

昨日、私たちは特定の記事である「周期的プロパティ」に取り組みました。今日は、実際のサイトのデザインとページに焦点を当ててみましょう。

有機化学のページを作成します。まず、インタラクティブな要素のプレースホルダーを含む、基本的な HTML 構造を設定します。

23 時間目: 有機化学ページの構築

まず、Chemistryフォルダー内にorganic.htmlを作成しました。これは基本的な構造です:

<!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');
  }
});

ログイン後にコピー

この JavaScript の機能は次のとおりです:

ハンバーガーメニューの切り替え: ハンバーガーボタンにイベントリスナーを追加して、ナビゲーションメニューの表示クラスを切り替え、小さな画面で表示または非表示にします。
記事検索: 検索バーへのユーザーの入力に基づいて記事リンクをフィルタリングする単純な検索機能を実装します。
3D 分子ビューア:
- mol-container 要素内の MolGL ビューアインスタンスを初期化します。
- 外部リンクからデフォルトの分子 (クランビンタンパク質、1crn) を PDB 形式でロードします。
- ユーザーが選択したときに異なる分子をロードするために、分子選択ドロップダウンにイベントリスナーを追加します。
- プレースホルダー分子データソース (./molecules/methane.sdf など) を使用します。実際の分子データを正しい形式 (SDF、PDB など) で提供し、それに応じて分子名をマッピングする必要があります。

ご覧になりたい場合は、ライブページがここにあります:

有機化学 - NeuronIQ

25 時間目: 無機化学ページの作成

有機化学のページと構造が似た、無機化学の新しいページを作成しましょう。

まず、Chemistry フォルダー内に次の基本構造を持つ inorganic.html を作成しました。

<!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';
    }
  });
});

ログイン後にコピー

このページで使用されている ID と一致するようにセレクターを調整する必要がありました。このスクリプトは、基本的なハンバーガーメニューの切り替えと記事検索のフィルタリングを処理するようになりました。

これで、有機化学のページと同様の構造を持つ、基本的な inorganic.html ページができました。次の方法でさらに強化できます:

コンテンツの追加:
- リストされているトピックについて実際の記事を書きます。
- 画像または図をトピックグリッドに追加します。
スタイリング:
- CSS を使用して視覚的なプレゼンテーションを改善します。
- さまざまな画面サイズに対する応答性を確保します。
さらなるインタラクティブ性:
- 必要に応じて、クイズやインタラクティブな図を追加します。
ナビゲーション:
- 現在のナビゲーションシステムは非常に基本的なものであるため、サイトがより複雑になる場合は、より堅牢なナビゲーションシステムを実装します