 |
| Guess the color game using javascript |
In this article, we given a Guess the color game using javascript as a project. In this project, we given a block where you can see the color and you have to input the correct name of the color. We used html and css for adding structure, design and added a js for switching the random colors and it check the users answer to show the result as correct or wrong.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Guess the color game using javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Guess-the-color.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Guess the color game using javascript source code
Here we given a html, css and js source code of Guess the color game project as given -
HTML
In HTML, we added a structure of guess the color game. Added text, input, button and a block to show color. Linked CSS and JS files for styling and functionality. Copy the html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Color</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Guess the Color!</h1>
<div id="color-box"></div>
<input type="text" id="color-input" placeholder="Enter color name">
<button id="guess-btn">Guess</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In css, we added a styling and design to the project by adding css properties. Added a properties to the text, input and button with responsive design. Copy the given css code and paste it into style.css file.
body {
font-family: 'Arial', sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #333;
}
.container {
text-align: center;
max-width: 90%;
width: 400px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
color: #444;
}
#color-box {
width: 100%;
height: 200px;
margin: 20px 0;
border-radius: 10px;
border: 2px solid #ddd;
background-color: #ccc;
transition: background-color 0.3s ease;
}
input {
padding: 10px;
margin: 10px 0;
font-size: 1rem;
border: 2px solid #ddd;
border-radius: 5px;
width: calc(100% - 22px);
}
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
p {
font-size: 1.2rem;
font-weight: bold;
margin-top: 20px;
}
@media (max-width: 600px) {
.container {
width: 90%;
padding: 10px;
}
h1 {
font-size: 1.5rem;
}
#color-box {
height: 150px;
}
input, button {
width: 100%;
box-sizing: border-box;
}
}Javascript
In javascript, we added a colors data and given a functionality to show the colors to make a game workable. Added a colors which changes after predicting the color. It shows the result as user correct or wrong. Copy the given javascript code and paste it into script.js file.
document.addEventListener("DOMContentLoaded", () => {
const colors = ["red", "blue", "green", "yellow", "purple", "orange", "pink"];
let currentColor = "";
const colorBox = document.getElementById("color-box");
const colorInput = document.getElementById("color-input");
const guessBtn = document.getElementById("guess-btn");
const result = document.getElementById("result");
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
function setNewColor() {
currentColor = getRandomColor();
colorBox.style.backgroundColor = currentColor;
}
guessBtn.addEventListener("click", () => {
const userGuess = colorInput.value.toLowerCase();
if (userGuess === currentColor) {
result.textContent = "Correct! Well done.";
result.style.color = "green";
} else {
result.textContent = `Wrong! The correct color was ${currentColor}.`;
result.style.color = "red";
}
setNewColor();
colorInput.value = "";
});
setNewColor();
});Output
Check this output of Guess the color game project -
Hope this helps you to know about Guess the color game using javascript with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects