Building an Interactive Disco Lamps Panel with HTML, CSS, and JavaScript

Islam AboamhIslam Aboamh
5 min read

Have you ever wanted to create your own colorful, interactive light display? In this tutorial, I'll walk you through building a disco lamps panel where you can toggle individual colored lamps or make them all flash in a dazzling pattern. This project is perfect for beginners learning web development fundamentals!

Project Overview

We'll create a web page with:

  • 6 colorful lamp circles

  • Toggle buttons for each lamp

  • Flash buttons for individual lamps

  • A master "Flash All" button

  • Smooth animations and glowing effects

Let's break it down into three parts: HTML structure, CSS styling, and JavaScript functionality.

HTML Structure

First, let's set up our HTML document with all the necessary elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disco Lamp Panel</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Disco Lamp Panel</h1>
    <button id="flashAllBtn" onclick="toggleFlashAll()">Flash All Lamps</button>

    <div class="lamp-grid">
        <div class="lamp-block">
            <div class="lamp" id="lamp1"></div>
            <button onclick="toggleLamp('lamp1', 'red')">Toggle Red</button>
            <button onclick="flashLamp('lamp1', 'red')">Flash Red</button>
        </div>

        <div class="lamp-block">
            <div class="lamp" id="lamp2"></div>
            <button onclick="toggleLamp('lamp2', 'blue')">Toggle Blue</button>
            <button onclick="flashLamp('lamp2', 'blue')">Flash Blue</button>
        </div>

        <div class="lamp-block">
            <div class="lamp" id="lamp3"></div>
            <button onclick="toggleLamp('lamp3', 'green')">Toggle Green</button>
            <button onclick="flashLamp('lamp3', 'green')">Flash Green</button>
        </div>

        <div class="lamp-block">
            <div class="lamp" id="lamp4"></div>
            <button onclick="toggleLamp('lamp4', 'yellow')">Toggle Yellow</button>
            <button onclick="flashLamp('lamp4', 'yellow')">Flash Yellow</button>
        </div>

        <div class="lamp-block">
            <div class="lamp" id="lamp5"></div>
            <button onclick="toggleLamp('lamp5', 'purple')">Toggle Purple</button>
            <button onclick="flashLamp('lamp5', 'purple')">Flash Purple</button>
        </div>

        <div class="lamp-block">
            <div class="lamp" id="lamp6"></div>
            <button onclick="toggleLamp('lamp6', 'cyan')">Toggle Cyan</button>
            <button onclick="flashLamp('lamp6', 'cyan')">Flash Cyan</button>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

HTML Explanation:

  1. Basic Structure: We start with a standard HTML5 document structure

  2. Title: "Disco Lamp Panel" appears in the browser tab

  3. Master Button: The "Flash All Lamps" button controls all lamps at once

  4. Lamp Grid: Contains 6 lamp blocks, each with:

    • A visual lamp (div with lamp class)

    • A toggle button (turns lamp on/off)

    • A flash button (makes lamp blink)

  5. JavaScript Connection: The app.js script is loaded at the end

CSS Styling

Now let's make our lamps look beautiful with CSS:

body {
  font-family: sans-serif;
  background: #fff;
  color: #3c3b3b;
  text-align: center;
  padding: 20px;
}

#flashAllBtn {
  padding: 10px 20px;
  margin-bottom: 20px;
  background: crimson;
  color: white;
  border: none;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
}

#flashAllBtn:hover {
  background: darkred;
}

.lamp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.lamp-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lamp {
  width: 80px;
  height: 80px;
  background-color: transparent;
  border-radius: 50%;
  margin-bottom: 10px;
  box-shadow: 0 0 10px #000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button {
  margin: 3px;
  padding: 6px 10px;
  background: #444;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Lamp color states */
.lamp.on-red {
  background-color: red;
  box-shadow: 0 0 20px red;
}

.lamp.on-blue {
  background-color: blue;
  box-shadow: 0 0 20px blue;
}

.lamp.on-green {
  background-color: green;
  box-shadow: 0 0 20px green;
}

.lamp.on-yellow {
  background-color: yellow;
  box-shadow: 0 0 20px yellow;
}

.lamp.on-purple {
  background-color: purple;
  box-shadow: 0 0 20px purple;
}

.lamp.on-cyan {
  background-color: cyan;
  box-shadow: 0 0 20px cyan;
}

CSS Explanation:

  1. Page Styling: Basic body styles for a clean look

  2. Button Styles: Attractive buttons with hover effects

  3. Layout: Flexbox creates a responsive grid layout

  4. Lamp Design:

    • Circular shape using border-radius: 50%

    • Initial transparent background

    • Smooth transitions for color changes

  5. Color States: Different classes for each lamp color with glowing effects

JavaScript Functionality

Finally, let's add the interactive behavior with JavaScript:

// Track which lamps are flashing
let flashing = {};
let flashAllInterval = null;
const allLampIds = ["lamp1", "lamp2", "lamp3", "lamp4", "lamp5", "lamp6"];

// Toggle individual lamp on/off
function toggleLamp(id, color) {
  const lamp = document.getElementById(id);

  // Stop flashing if this lamp is already flashing
  if (flashing[id]) {
    clearInterval(flashing[id]);
    flashing[id] = null;
  }

  // Toggle lamp state
  if (lamp.classList.contains(`on-${color}`)) {
    lamp.className = "lamp"; // Turn off
  } else {
    lamp.className = "lamp on-" + color; // Turn on with color
  }
}

// Flash individual lamp
function flashLamp(id, color) {
  const lamp = document.getElementById(id);

  // If already flashing, stop it
  if (flashing[id]) {
    clearInterval(flashing[id]);
    flashing[id] = null;
    lamp.className = "lamp"; // Turn off
  } else {
    // Start flashing (toggle every 500ms)
    flashing[id] = setInterval(() => {
      lamp.classList.toggle(`on-${color}`);
    }, 500);
  }
}

// Helper function to get color based on lamp index
function getLampColor(index) {
  const colors = ["red", "blue", "green", "yellow", "purple", "cyan"];
  return colors[index % colors.length];
}

// Flash all lamps simultaneously
function toggleFlashAll() {
  if (flashAllInterval) {
    // Stop all flashing
    clearInterval(flashAllInterval);
    flashAllInterval = null;

    // Turn off all lamps
    allLampIds.forEach((id) => {
      document.getElementById(id).className = "lamp";
    });

    // Update button text
    document.getElementById("flashAllBtn").innerText = "Flash All Lamps";
  } else {
    // Start flashing all lamps
    let on = false; // Toggle state

    flashAllInterval = setInterval(() => {
      on = !on; // Flip state

      allLampIds.forEach((id, index) => {
        const color = getLampColor(index);
        const lamp = document.getElementById(id);
        lamp.className = on ? `lamp on-${color}` : "lamp";
      });
    }, 500);

    // Update button text
    document.getElementById("flashAllBtn").innerText = "Stop Flashing";
  }
}

JavaScript Explanation:

  1. State Tracking:

    • flashing object tracks which lamps are flashing

    • flashAllInterval controls the master flash effect

    • allLampIds array stores all lamp IDs

  2. Individual Lamp Control:

    • toggleLamp() turns a lamp on/off with its specified color

    • flashLamp() makes a lamp blink by toggling it every 500ms

  3. Master Control:

    • toggleFlashAll() starts/stops all lamps flashing together

    • Uses an interval to toggle all lamps simultaneously

    • Updates button text to reflect current state

  4. Helper Function:

    • getLampColor() returns the appropriate color based on lamp position

How It All Works Together

  1. When you click a "Toggle" button:

    • JavaScript finds the corresponding lamp element

    • Adds or removes the color class

    • The CSS transition creates a smooth color change

  2. When you click a "Flash" button:

    • JavaScript sets up an interval

    • The lamp toggles on/off every 500ms

    • Creates a blinking effect

  3. When you click "Flash All Lamps":

    • All lamps begin flashing in unison

    • Each lamp uses its designated color

    • The button text updates to "Stop Flashing"

Conclusion

Congratulations! You've built an interactive disco lamps panel with:

  • Clean HTML structure

  • Attractive CSS styling with animations

  • JavaScript-powered interactivity

Try extending this project by:

  • Adding more lamps with different colors

  • Implementing random flash patterns

  • Adding sound effects that sync with the lights

  • Creating preset light sequences

The complete code is available on GitHub:

https://github.com/I-A11/disco-lamps

Happy coding, and enjoy your dazzling disco lights!

0
Subscribe to my newsletter

Read articles from Islam Aboamh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5CSSJavaScriptWeb DevelopmentFrontend Developmentproject

Written by

Islam Aboamh
Islam Aboamh

Inventive Front-End Developer with experience building responsive websites and apps in a fast-paced, collaborative environment. Talented in HTML/CSS/JavaScript/React.js and Next.js.