Color Prediction Game

India's most popular color game

How to Create a Colour Prediction Website

Introduction

Colour prediction websites provide an engaging platform where users can guess colors to win prizes. These platforms have gained popularity due to their simple yet captivating gameplay. Here, we'll explore how to create a basic colour prediction website using HTML, CSS, and JavaScript.

Colorful Web Interface

Step 1: Setup Your Basic Website Structure

First, create an HTML file which will host the structure of your colour prediction game.

                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colour Prediction Game</title>
</head>
<body>
    <div id="game">
        <div id="colorDisplay"></div>
        <button id="guessRed">Red</button>
        <button id="guessGreen">Green</button>
        <button id="guessBlue">Blue</button>
    </div>
    <script src="game.js"></script>
</body>
</html>

Step 2: Add Styling with CSS

Next, include a CSS file to make your website visually appealing.

                
body, html {
    height: 100%;
    margin: 0;
}

#game {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

#colorDisplay {
    width: 150px;
    height: 150px;
    background-color: #eee;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
}
Styled Web Interface

Step 3: Add Functionality with JavaScript

For the functionality, create a JavaScript file 'game.js'. This will control the random colour generation and the prediction logic.

                
document.getElementById("guessRed").addEventListener("click", function() {
    makeGuess('red');
});
document.getElementById("guessGreen").addEventListener("click", function() {
    makeGuess('green');
});
document.getElementById("guessBlue").addEventListener("click", function() {
    makeGuess('blue');
});

function generateRandomColor() {
    let random = Math.floor(Math.random() * 3) + 1;
    if(random === 1) return 'red';
    if(random === 2) return 'green';
    if(random === 3) return 'blue';
}

function makeGuess(color) {
    let actualColor = generateRandomColor();
    alert(color === actualColor ? "Correct!" : "Wrong! It was " + actualColor);
}

Conclusion

Creating a colour prediction website is an enjoyable project that encapsulates basic web development skills. With HTML for layout, CSS for style, and JavaScript for functionality, anyone can build a fun and interactive game. Expand on these basics for more features like score tracking, time challenges, and more!