ULTIMATE 教育 Web サイトを一から構築しました — 5 日目

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

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

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

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

    <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">


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

// 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 の機能は次のとおりです:

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

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

有機化学 - NeuronIQ

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

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

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

    <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">


    <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 ページができました。次の方法でさらに強化できます:

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

今日の主な焦点は構造と基本機能の設定であったため、次のステップでこれらの機能強化を検討できます。関連性の高いコンテンツを追加し、ページの応答性を高めることで、この問題を改善することもできます。