How to Create a Free Color Prediction Website

Creating a color prediction website can be an exciting project for beginners in web development or for those looking to enhance their coding skills. This tutorial will guide you on how to build a simple color prediction website using HTML, CSS, and JavaScript.

1. Setting Up Your Project

First, you need to create a basic structure for your website. Create an index.html file, a style.css file for styling, and a script.js file for your JavaScript code.

index.html
style.css
script.js

2. HTML Structure

In your index.html file, add the following HTML structure. This will set up the space for your color prediction system.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Color Prediction Game</title>
</head>
<body>
<h1>Predict the Color!</h1>
<div id="colorDisplay" class="color-display"></div>
<button id="predictButton">Predict</button>
<script src="script.js"></script>
</body>
</html>

3. Styling with CSS

Open your style.css file and add styles to enhance the visual appearance of your website.

/* Code snippet */ body { font-family: 'Arial', sans-serif; text-align: center; background-color: #f4f4f4; } .color-display { width: 150px; height: 150px; background-color: #fff; margin: 20px auto; border: 1px solid #ddd; }

4. Adding JavaScript

Now, let's add some interactivity. In your script.js file, you'll write JavaScript to randomly change the color of the div when the button is clicked.

// Code snippet document.getElementById('predictButton').addEventListener('click', function() { var colors = ['red', 'blue', 'green', 'yellow', 'purple']; var randomColor = colors[Math.floor(Math.random() * colors.length)]; document.getElementById('colorDisplay').style.backgroundColor = randomColor; });

5. Testing Your Website

Open your index.html file in a web browser to see your color prediction website in action. Click the "Predict" button and see the color change randomly.

Conclusion

With these simple steps, you have created a basic color prediction website. This project introduces you to HTML, CSS, and JavaScript, providing a solid foundation to build more complex web applications in the future.