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