Control and manipulate HTML with JavaScript
Build an image gallery with thumbnails that change the main image, create an FAQ accordion with toggle functionality, and build a character counter for textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Gallery & FAQ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interactive Components Demo</h1>
</header>
<main>
<!-- Image Gallery Section -->
<section class="gallery-section">
<h2>Image Gallery</h2>
<div class="gallery">
<div class="main-image-container">
<img id="mainImage" src="images/gallery-1.jpg" alt="Gallery Image" class="main-image">
<p id="imageCaption" class="image-caption">Beautiful landscape view</p>
</div>
<div class="thumbnails">
<img src="images/gallery-1.jpg" alt="Landscape" class="thumbnail active"
data-large="images/gallery-1.jpg" data-caption="Beautiful landscape view">
<img src="images/gallery-2.jpg" alt="City" class="thumbnail"
data-large="images/gallery-2.jpg" data-caption="Modern city skyline">
<img src="images/gallery-3.jpg" alt="Nature" class="thumbnail"
data-large="images/gallery-3.jpg" data-caption="Peaceful nature scene">
<img src="images/gallery-4.jpg" alt="Ocean" class="thumbnail"
data-large="images/gallery-4.jpg" data-caption="Crystal clear ocean">
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="faq-section">
<h2>Frequently Asked Questions</h2>
<div class="faq-container">
<div class="faq-item">
<button class="faq-question">What is DOM manipulation?</button>
<div class="faq-answer">
<p>DOM manipulation is the process of changing the structure, style, or content of a webpage using JavaScript after it has loaded.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">How do I select elements?</button>
<div class="faq-answer">
<p>You can use querySelector(), querySelectorAll(), getElementById(), and other selection methods to target specific elements.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">What are event listeners?</button>
<div class="faq-answer">
<p>Event listeners are functions that wait for specific events (like clicks or key presses) and then execute code in response.</p>
</div>
</div>
</div>
</section>
<!-- Character Counter Section -->
<section class="counter-section">
<h2>Character Counter</h2>
<div class="textarea-container">
<label for="userText">Enter your message:</label>
<textarea id="userText" placeholder="Type your message here..." maxlength="200"></textarea>
<div class="counter-info">
<span id="charCount">0</span> / 200 characters
<span id="wordCount">0 words</span>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>A fully interactive web application featuring an image gallery with thumbnail navigation, an accordion FAQ section, and a character counter with real-time updates.
Try different device sizes using the buttons above. Click maximize for full-screen preview.
Pro tip: Copy the code above and practice building it yourself! Check out the GitHub repo for the complete project files and additional resources.