집 >웹 프론트엔드 >JS 튜토리얼 >나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 5일차

나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 5일차

Susan Sarandon원래의: 2025-01-15 11:08:44726검색

I Built the ULTIMATE Educational Website from Scratch — Day 5

어제는 특정 글인 Periodic Properties에 대해 작업했습니다. 오늘은 실제 사이트 디자인과 페이지에 다시 집중해 보겠습니다.

유기화학 페이지를 만들어 보겠습니다. 대화형 요소에 대한 자리 표시자를 포함하여 기본 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 뷰어 인스턴스를 초기화합니다.
- 외부 링크에서 PDB 형식의 기본 분자(크람빈 단백질, 1crn)를 로드합니다.
- 사용자가 선택할 때 다양한 분자를 로드하기 위해 분자 선택 드롭다운에 이벤트 리스너를 추가합니다.
- 자리표시자 분자 데이터 소스(./molecules/mether.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로 시각적 표현을 개선하세요.
- 다양한 화면 크기에 대한 반응성을 보장합니다.
더 많은 상호작용:
- 필요에 따라 퀴즈나 대화형 다이어그램을 추가하세요.
내비게이션:
- 현재 탐색 시스템은 매우 기본이므로 사이트가 복잡해지면 더욱 강력한 탐색 시스템을 구현하세요.

오늘의 주요 초점은 구조와 기본 기능을 설정하는 것이므로 다음 단계에서 이러한 개선 사항을 고려할 수 있습니다. 또한 관련성 높은 콘텐츠를 추가하고 페이지의 반응성을 개선하여 이 문제를 개선할 수도 있습니다.

위 내용은 나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 5일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html if for format class Event map default this input

성명：

이전 기사：일일 JavaScript 챌린지 #JS - 회문 순열 검증다음 기사：일일 JavaScript 챌린지 #JS - 회문 순열 검증