Home
and JavaScript
Create a Colorful Mosaic Grid Using HTML

Create a Colorful Mosaic Grid Using HTML, CSS, and JavaScript

Learn how to build a vibrant and interactive colorful mosaic grid using HTML, CSS, and JavaScript. Follow this step-by-step guide to create a dynamic
Colorful Mosaic Grid Project

Create a Colorful Mosaic Grid Using HTML, CSS, and JavaScript

In this blog post, we'll build a fun and colorful mosaic grid using HTML, CSS, and JavaScript. This project is a great way to practice working with grids, styles, and interactive elements.

Step 1: Setting Up the HTML Structure

First, let's create the basic HTML structure for our mosaic grid and buttons. Copy and paste the following code into your HTML file: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colorful Mosaic Grid</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Colorful Mosaic Grid</h1>
  <div id="grid"></div>
  <button id="randomize">Randomize Colors</button>
  <button id="reset">Reset Grid</button>

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

Step 2: Styling the Grid with CSS

Next, let's add some basic styles to our grid and buttons using CSS. Here’s the code that you need to add to your styles.css file: 

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  margin: 0;
  height: 100vh;
  justify-content: center;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

#grid {
  display: grid;
  grid-template-columns: repeat(10, 50px);
  grid-template-rows: repeat(10, 50px);
  gap: 2px;
  margin-bottom: 20px;
}

.tile {
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #0056b3;
}

Step 3: Adding Interactivity with JavaScript

Now, we’ll add JavaScript to make our grid interactive. This code will handle the randomization and reset functionality. Add the following code to your script.js file: 

document.addEventListener('DOMContentLoaded', () => {
  const grid = document.getElementById('grid');
  const randomizeButton = document.getElementById('randomize');
  const resetButton = document.getElementById('reset');

  // Create grid of tiles
  for (let i = 0; i < 100; i++) {
    const tile = document.createElement('div');
    tile.classList.add('tile');
    grid.appendChild(tile);
  }

  // Function to generate a random color
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  // Randomize colors on all tiles
  randomizeButton.addEventListener('click', () => {
    const tiles = document.querySelectorAll('.tile');
    tiles.forEach(tile => {
      tile.style.backgroundColor = getRandomColor();
    });
  });

  // Reset colors to default
  resetButton.addEventListener('click', () => {
    const tiles = document.querySelectorAll('.tile');
    tiles.forEach(tile => {
      tile.style.backgroundColor = '#ccc';
    });
  });
});

Conclusion

Congratulations! You've successfully created a colorful mosaic grid with HTML, CSS, and JavaScript. This project is a great way to practice grid layouts and JavaScript interactivity.

Feel free to expand on this project by adding new features like custom color pickers or changing the grid size dynamically. Happy coding!

Watch Video
#and JavaScript #Create a Colorful Mosaic Grid Using HTML #CSS

Post a Comment

© ‧ Uspacial ‧ All rights reserved. Developed by Fineshop
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
NextGen Digital Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...