Color Guessing Game using HTML , CSS And JavaScript With Source Code
Introduction
Hello developers friends, all of you are welcome to this new project. Today I have created a wonderful color guessing game in which you get random colors generated, which you have to select correctly with the help of color code. If you select the correct color. If you do so then you win and in this color guessing game you will get different types of colors generated, you have to select the correct color, you have to select the color a total of five times and then you have to select the color in the last You will be told whether you won or not and we have set a timer in this color game in which if you take more time to select the color than the time we have set in the timer, then you will be out.
Friends, to make this color guessing game, we have used HTML CSS and JavaScript and if you people are just learning JavaScript, then if you create this type of project and try to make it, then your knowledge of JavaScript. It will increase a lot and friends, we have created this color guessing game only so that you can have knowledge of bio-script and you can make projects like this.
If you people understand the code of this color guessing game step by step, then your JavaScript skills will be very good and you will also be able to create a great project.
Steps to Create Guessing Game :-
Friends, this color guessing game is made using JavaScript. Friends, this game will increase your knowledge of JavaScript and friends, in this game you get random colors generated and you have to select the color with the help of color code. If you select the right color then you become a winner.
Friends, when you open this game, you get a start button, you have to click on it, then your game starts starting automatically, but friends, we have set a timer in this game. If you take time to select the color then you will be out.
To use this color guessing game, you have to follow the steps which are written below.
- First of all, create a new folder in your computer, then set a name for that folder, you can keep that name anything.
- Open this newly created folder in your code editor. To open it, you have to create some files in this folder.
- index.html
style.css
script.js
Friends, it is very important to create these three files. From index.html, we will prepare the structure of this color game, the code of which you will get in the name of the heading of index.html.
Then friends, to make the color guessing game look good, we will have to style this game, the code of which you will find below in the name of style.css heading, copy that code and upload it in the style.css file of your folder. have to give
Now we will need the most important code, which will be the JavaScript code. If you do not use this code, then your color guessing game will be made but this game will not work, therefore, at the end, you will have to write the heading of script.js. You will get a code from the name which you have to upload in the script.js file in your folder.
HTML (index.html)
Color Guessing Game
Color Guessing Game
Next
CSS (Style.css)
* {
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: #19084e;
}
body {
margin: 0;
background-color: #9873fe;
}
button {
border: none;
outline: none;
cursor: pointer;
}
.start-screen,
.score-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #9873fe;
}
#start-button,
#restart {
position: absolute;
font-size: 1.2em;
padding: 1em 3em;
border-radius: 2em;
box-shadow: 0 1em 3em rgba(37, 22, 80, 0.3);
}
.flex-space {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex {
display: flex;
}
#display-container {
background-color: #ffffff;
position: absolute;
width: 90%;
max-width: 37em;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 3em 2em;
border-radius: 0.8em;
box-shadow: 0 1em 3em rgba(37, 22, 80, 0.3);
}
.header {
padding: 0.5em;
border-bottom: 1px solid #c8c5d1;
}
.header .title,
.timer span {
font-weight: 600;
}
.question-color {
font-size: 1.5em;
text-align: center;
}
#container {
margin-bottom: 1em;
}
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
place-items: center;
}
.option-div {
width: 100%;
height: 10em;
padding: 1em;
margin: 0.3em 0;
text-align: left;
border-radius: 0.5em;
}
.option-div:disabled {
cursor: not-allowed;
}
.correct {
background: url("correct.svg");
}
.incorrect {
background: url("incorrect.svg");
}
.correct,
.incorrect {
background-repeat: no-repeat;
background-size: 3em;
background-position: center;
}
#next-button {
font-size: 1.1em;
background-color: #9873fe;
color: #ffffff;
padding: 0.4em 2em;
border-radius: 0.3em;
}
.hide {
display: none;
}
#restart {
margin-top: 6em;
}
Javascript (Script.js)
let timer = document.getElementsByClassName("timer")[0];
let quizContainer = document.getElementById("container");
let nextButton = document.getElementById("next-button");
let numOfQuestions = document.getElementsByClassName("number-of-questions")[0];
let displayContainer = document.getElementById("display-container");
let scoreContainer = document.querySelector(".score-container");
let restart = document.getElementById("restart");
let userScore = document.getElementById("user-score");
let startScreen = document.querySelector(".start-screen");
let startButton = document.getElementById("start-button");
let questionCount;
let scoreCount = 0;
let count = 10;
let countdown;
//For hex codes
let letters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
//Questions and Options Array
let quizArray = [];
const generateRandomValue = (array) =>
array[Math.floor(Math.random() * array.length)];
//Generate Hex Codes
const colorGenerator = () => {
newColor = "#";
for (let i = 0; i {
let expectedLength = 4;
while (optionsArray.length {
for (let i = 0; i {
//increment questionCOunt
questionCount += 1;
//If last question
if (questionCount == quizArray.length) {
//hide question container and display score
displayContainer.classList.add("hide");
scoreContainer.classList.remove("hide");
//User score
userScore.innerHTML =
"Your score is " + scoreCount + " out of " + questionCount;
} else {
//displau questionCount
numOfQuestions.innerHTML =
questionCount + 1 + " of " + quizArray.length + " Question";
//display quiz
quizDisplay(questionCount);
//count=11(so it start with 10)
count = 10;
//clearInterval for next question
clearInterval(countdown);
//display timer
timerDisplay();
}
nextButton.classList.add("hide");
})
);
//Timer
const timerDisplay = () => {
countdown = setInterval(() => {
timer.innerHTML = `Time Left: ${count}s`;
count--;
if (count == 0) {
clearInterval(countdown);
displayNext();
}
}, 1000);
};
//Display Quiz
const quizDisplay = (questionCount) => {
let quizCards = document.querySelectorAll(".container-mid");
//hide other cards
quizCards.forEach((card) => {
card.classList.add("hide");
});
//display current question card
quizCards[questionCount].classList.remove("hide");
};
//Quiz Creation
function quizCreator() {
//randomly sort questions
quizArray.sort(() => Math.random() - 0.5);
//Generate quiz
for (let i of quizArray) {
//Randomly sort options
i.options.sort(() => Math.random() - 0.5);
//Quiz card creation
let div = document.createElement("div");
div.classList.add("container-mid", "hide");
//Question number
numOfQuestions.innerHTML = 1 + " of " + quizArray.length + " Question";
//question
let questionDiv = document.createElement("p");
questionDiv.classList.add("question");
questionDiv.innerHTML = `${i.correct}`;
div.appendChild(questionDiv);
//Options
div.innerHTML += `
`;
quizContainer.appendChild(div);
}
}
function checker(userOption) {
let userSolution = userOption.getAttribute("data-option");
let question =
document.getElementsByClassName("container-mid")[questionCount];
let options = question.querySelectorAll(".option-div");
//If users clicked answer === correct
if (userSolution === quizArray[questionCount].correct) {
userOption.classList.add("correct");
scoreCount++;
} else {
userOption.classList.add("incorrect");
options.forEach((element) => {
if (
element.getAttribute("data-option") == quizArray[questionCount].correct
) {
element.classList.add("correct");
}
});
}
//clear interval
clearInterval(countdown);
//disable all options
options.forEach((element) => {
element.disabled = true;
});
nextButton.classList.remove("hide");
}
function initial() {
nextButton.classList.add("hide");
quizContainer.innerHTML = "";
questionCount = 0;
scoreCount = 0;
clearInterval(countdown);
count = 10;
timerDisplay();
quizCreator();
quizDisplay(questionCount);
}
//Restart game
restart.addEventListener("click", () => {
quizArray = [];
populateQuiz();
initial();
displayContainer.classList.remove("hide");
scoreContainer.classList.add("hide");
});
//When user clicks on start button
startButton.addEventListener("click", () => {
startScreen.classList.add("hide");
displayContainer.classList.remove("hide");
quizArray = [];
populateQuiz();
initial();
});
Output:-
Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …
COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …
Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …
Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …