HTML, CSS, and JavaScript: Building a Light Bulb Toggle from Scratch

blagues courtes

by c7595060 il y a 4 mois 134 Views comments

Creating interactive web elements can be a fun and rewarding experience, especially when using core technologies like HTML, CSS, and JavaScript. One engaging project for beginners is building a light bulb toggle—a feature that simulates turning a light bulb on and off. This simple yet effective project demonstrates how HTML structures content, CSS styles it, and JavaScript adds interactivity. fsiblog how to create it step by step.

Step 1: Setting Up the HTML Structure

The HTML structure serves as the foundation of the project. We'll need a button to toggle the light and an image to represent the light bulb.

html

Copy code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Light Bulb Toggle</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Light Bulb Toggle</h1> <img id="lightBulb" src="bulb-off.png" alt="Light Bulb"> <button id="toggleButton">Turn On</button> </div> <script src="script.js"></script> </body> </html>

Here’s what’s happening:

  • The img tag displays the light bulb image. Initially, it uses a "bulb-off.png" image to indicate the bulb is off.
  • The button tag creates a clickable button to toggle the bulb.

Step 2: Adding Styles with CSS

CSS styles the page and makes it visually appealing. Save this code in a file named styles.css.

css

Copy code

body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } .container { margin-top: 50px; } h1 { color: #333; } img { width: 150px; height: auto; margin: 20px 0; transition: transform 0.3s ease; } button { padding: 10px 20px; font-size: 16px; color: white; background-color: #007bff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; }

The transition property in the img and button styles adds smooth animations for image scaling and button hover effects.

Step 3: Adding Interactivity with JavaScript

Now, let’s make the button functional with JavaScript. Save the following code in a file named script.js.

javascript

Copy code

const lightBulb = document.getElementById('lightBulb'); const toggleButton = document.getElementById('toggleButton'); toggleButton.addEventListener('click', () => { if (lightBulb.src.includes('bulb-off.png')) { lightBulb.src = 'bulb-on.png'; toggleButton.textContent = 'Turn Off'; document.body.style.backgroundColor = '#ffff99'; // Light background when the bulb is on } else { lightBulb.src = 'bulb-off.png'; toggleButton.textContent = 'Turn On'; document.body.style.backgroundColor = '#f0f0f0'; // Default background when the bulb is off } });

How It Works:

  1. getElementById grabs the image and button elements by their IDs.
  2. The addEventListener method listens for clicks on the button.
  3. When clicked, the script checks the current image source (src) of the light bulb.
    • If it's bulb-off.png, it switches to bulb-on.png, changes the button text, and updates the background color.
    • If it’s already bulb-on.png, it reverses these changes.

Step 4: Adding the Light Bulb Images

Ensure you have the following two images in your project folder:

  1. bulb-off.png: An image of a light bulb turned off.
  2. bulb-on.png: An image of a light bulb turned on.

You can create these images using design software or download them from free image resources.

Final Thoughts

With just a few lines of HTML, CSS, and JavaScript, you can create a fun and interactive light bulb toggle. This project is a great way to practice manipulating the DOM, handling events, and enhancing user experience with styling and animations. Experiment further by adding more features, such as a dimmer slider or sound effects when toggling the light.

Comments