This is a color guessing game I'm working on. Basically it allows users to select a color out of six, and output correct if the color is the same as mentioned in the title or output try again if the color is wrong. When I try the first game, everything seems fine but when I select play again and select the colors again, an unexpected recursion occurs and I don't know where's the problem. Here is my code:
window.onload = () => {
"use strict";
let header = document.getElementsByTagName("header")[0];
let titleColor = document.getElementById("title_color");
let nav = document.getElementsByTagName("nav")[0];
let newColors = document.getElementById("new_colors");
let prompt = document.getElementById("prompt");
let easy = document.getElementById("easy");
let hard = document.getElementById("hard");
let active = document.getElementsByClassName("active")[0];
let colors = document.querySelectorAll("[id^=color]");
const initialize = () => {
let t = Math.floor(Math.random() * 5);
for (let i = 0; i < colors.length; i++) {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
colors[i].style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}
titleColor.innerHTML = colors[t].style.backgroundColor;
addingEventHandlers(t);
}
const addingEventHandlers = t => {
for (let i = 0; i < colors.length; i++) {
colors[i].addEventListener("click", () => {
console.log(i);
if (t === i) {
header.style.backgroundColor = colors[t].style.backgroundColor;
for (let j = 0; j < nav.children.length; j++) {
if (nav.children[j] === active) {
nav.children[j].style.color = "rgb(FF, FF, FF)";
nav.children[j].style.backgroundColor = colors[t].style.backgroundColor;
} else {
nav.children[j].style.color = colors[t].style.backgroundColor;
nav.children[j].style.backgroundColor = "rgb(FF, FF, FF)";
}
}
for (let j = 0; j < colors.length; j++) {
colors[j].style.backgroundColor = colors[t].style.backgroundColor;
}
prompt.innerHTML = "Correct";
newColors.innerHTML = "Play Again";
newColors.addEventListener("click", () => initialize())
} else {
console.log(i);
colors[i].style.transitionProperty = "background-color";
colors[i].style.transitionDuration = "1s";
colors[i].style.transitionTimingFunction = "ease-in-out";
colors[i].style.backgroundColor = "rgb(0, 0, 0)";
prompt.innerHTML = "Try Again";
newColors.innerHTML = "New Colors";
newColors.addEventListener("click", () => initialize())
}
})
}
}
initialize();
}
* {
box-sizing: border-box;
}
body {
margin: 0;
text-transform: uppercase;
font-family:'Courier New', Courier, monospace;
font-weight: normal;
font-size: 100%;
text-align: center;
}
header {
color: white;
background-color: navy;
margin: 0;
}
header>h3 {
font-size: 2em;
margin: 0;
}
header>h1 {
font-size: 4em;
margin: 0;
}
nav {
background-color: white;
color: navy;
position: relative;
height: 38px;
}
nav>button {
background-color: white;
color: navy;
border: none;
font-size: 1.5em;
padding: 5px;
text-transform: uppercase;
}
#new_colors {
position: absolute;
left: 20%;
}
#easy {
position: absolute;
left: 62%;
}
#hard {
position: absolute;
left: 72%;
}
nav>button:not(.active):hover {
cursor: pointer;
background-color: navy;
color: white;
}
button.active {
cursor: pointer;
background-color: navy;
color: white;
border: none;
}
#container {
background-color: black;
display: grid;
grid-gap: 20px;
align-content: center;
justify-content: center;
width: 100%;
height: 792px;
}
[id^=color] {
border-radius: 10px;
background-color: white;
width: 200px;
height: 200px;
}
[id^=color]:hover {
cursor: pointer;
opacity: 0.9;
}
#color1 {
grid-area: 1 / 1 / 2 / 2;
}
#color2 {
grid-area: 1 / 2 / 2 / 3;
}
#color3 {
grid-area: 1 / 3 / 2 / 4;
}
#color4 {
grid-area: 2 / 1 / 3 / 2;
}
#color5 {
grid-area: 2 / 2 / 3 / 3;
}
#color6 {
grid-area: 2 / 3 / 3 / 4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="color guessing game">
<meta name="description" content="color guessing game">
<meta name="author" content="Nick">
<link rel="stylesheet" href="color_guessing.css">
<script src="color_guessing.js"></script>
</head>
<body>
<header>
<h3>The Great</h3>
<h1 id="title_color"></h1>
<h3>Guessing Game</h3>
</header>
<nav>
<button id="new_colors">New Colors</button>
<button id="prompt"></button>
<button id="easy" >Easy</button>
<button id="hard" class="active">Hard</button>
</nav>
<div id="container">
<div id="color1"></div>
<div id="color2"></div>
<div id="color3"></div>
<div id="color4"></div>
<div id="color5"></div>
<div id="color6"></div>
</div>
</body>
</html>
Just like #Thomas said in the comments you need to check if there is an event already and add an event listener if there is none.
if (!colors[i].onclick) {
// your add event listener code goes here
}
You call addingEventHandlers from within initialise. This means that when initialise is called again (like when you start a new game) you will call addEventListener on the same element a second time, meaning you will call a handler twice when the event occurs. And this only gets worse as you call initialise again and again.
So move the call to addingEventHandlers outside of the initialise function body, so that it only gets called on page load, and then no more.
Related
I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
var gameHeight = 4; //number of guesses
var gameWidth = 4; //length of the word
var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt
var gameOver = false;
var word = "RAAA";
window.onload = function() {
initialize();
};
function initialize() {
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
const instructionsToggle = document.getElementById("info");
const instructionsContainer = document.getElementById("instructions-container");
// Hide the instructions by default
instructionsContainer.style.display = "none";
// Show or hide the instructions when the button is clicked
instructionsToggle.addEventListener("click", () => {
if (instructionsContainer.style.display === "none") {
instructionsContainer.style.display = "block";
} else {
instructionsContainer.style.display = "none";
}
});
// Create the game board
for (let i = 0; i < gameHeight; i++) {
let row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < gameWidth; j++) {
let square = document.createElement("span");
square.id = i.toString() + "-" + j.toString();
square.classList.add("square");
square.innerText = "";
row.appendChild(square);
}
document.getElementById("board").appendChild(row);
}
// Listen for Key Press
document.addEventListener("keyup", (e) => {
if (gameOver) return;
if ("KeyA" <= e.code && e.code <= "KeyZ") {
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
} else if (e.code == "Backspace") {
if (col > 0) {
col--;
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = "";
}
} else if (e.code == "Enter") {
update();
row += 1; // start new row
col = 0; // reset current index to 0 for new row
}
if (!gameOver && row == gameHeight) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
});
}
function update() {
let correct = 0;
for (let column = 0; column < gameWidth; column++) {
let currsquare = document.getElementById(row.toString() + '-' + column.toString());
let letter = currsquare.innerText;
// Is it in the correct position?
if (word[row*gameWidth + (column % gameWidth)] == letter) {
currsquare.classList.add("correct");
correct += 1;
} // Is it in the word?
else if (word.includes(letter)) {
currsquare.classList.add("present");
} // Not in the word
else {
currsquare.classList.add("absent");
}
}
if (correct == gameWidth) {
gameOver = true;
document.getElementById("congrats").style.display = "block";
}
if (!gameOver && row == gameHeight - 1) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
}
this is the updated html
<html>
<head>
<title>Wordle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<h1 id="title">Wordle</h1>
<i id = "info" class="fas fa-info-circle"></i>
<i id="dark-mode-toggle" class="fas fa-circle"></i>
<hr>
<br>
<div id="board">
</div>
<br>
<div id="instructions-container">
<p>The goal is to guess the word </p>
</div>
<img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">
<script src="wordle.js"></script>
</html>
This is the updated css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:white;
--text-color:black;
color: var(--text-color);
background-color: var(--background-color);
}
body.dark{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:black;
background-color: var(--background-color);
--text-color:white;
color:white;
}
hr {
width: 500px;
}
#title {
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
display: flex;
flex-wrap: wrap;
}
.square {
border: 2px solid lightgray;
width: 60px;
height: 60px;
margin: 2.5px;
color: black;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.correct {
background-color: var(--correct);
color: white;
border-color: white;
}
.present {
background-color: #C9B458;
color: white;
border-color: white;
}
.absent {
background-color: #787C7E;
color: white;
border-color:white;
}
#congrats {
display: none;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 250px;
}
#question{
position: fixed;
top: 10px;
right: 200px;
}
#info{
position: fixed;
top: 10px;
right: 300px;
}
You dont need display: flex; in board but you need to add display: flex; to row
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
}
.row {
display: flex;
}
I am working on the etch-a-sketch project with The Odin Project and there's one thing I can't figure out. In the original project the grid elements will start to change colors once I hover over them but what I want to do is to only start the hovering function after I press the left mouse button.
Here is a working example of what I want to achieve.
const container = document.getElementById('container');
const reset = document.getElementById('reset');
const eraser = document.querySelector('#eraser');
const pencil = document.querySelector('#pencil');
const rainbow = document.querySelector('#rainbow');
const pickColor = document.querySelector('#color');
const shading = document.querySelector('#shading')
const gridSize = document.querySelector('#range');
let gridValue = document.querySelector('.grid-size');
let mode = '';
gridValue.textContent = `50x50`; // display default size of the grid
// create grid
function createGrid(size) {
size = gridSize.value;
container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (let i = 0; i < size * size; i++) {
const grid = document.createElement('div');
grid.setAttribute('id', 'grid');
container.appendChild(grid);
grid.addEventListener('mouseover', changeColor);
}
}
createGrid();
// change grid size depending on the user's choice
gridSize.addEventListener('input', function (e) {
let currentSize = e.target.value;
gridValue.textContent = `${currentSize}x${currentSize}`;
resetGrid();
});
// change color
function changeColor(e) {
if (mode === 'pencil') {
e.target.classList.add('black');
e.target.classList.remove('white');
e.target.style.backgroundColor = null;
e.target.style.opacity = null;
} else if (mode === 'rainbow') {
const green = Math.floor(Math.random() * 250);
const blue = Math.floor(Math.random() * 250);
const red = Math.floor(Math.random() * 250);
e.target.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
e.target.style.opacity = null;
} else if (mode === 'erase') {
e.target.classList.add('white');
e.target.style.backgroundColor = null;
e.target.style.opacity = null;
} else if (mode === 'pickColor') {
e.target.style.backgroundColor = pickColor.value;
e.target.style.opacity = null;
} else if (mode === 'shading') {
e.target.classList.remove('white');
e.target.classList.add('black');
e.target.style.opacity = Number(e.target.style.opacity) + 0.2;
} else {
e.target.classList.add('black')
}
}
// reset grid
reset.addEventListener('click', () => resetGrid());
function resetGrid() {
container.innerHTML = '';
createGrid();
}
// erase
eraser.addEventListener('click', () => eraseMode());
function eraseMode() {
mode = 'erase';
}
// pencil
pencil.addEventListener('click', () => pencilMode());
function pencilMode() {
mode = 'pencil';
}
// rainbow
rainbow.addEventListener('click', () => rainbowMode());
function rainbowMode() {
mode = 'rainbow';
}
// pick a color
pickColor.addEventListener('click', () => pickColorMode());
function pickColorMode() {
mode = 'pickColor';
}
// shading
shading.addEventListener('click', () => shadeMode());
function shadeMode() {
mode = 'shading';
}
#import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght#700;800&display=swap');
body {
text-align: center;
background-color: #4d56bd;
font-family: 'Inconsolata', monospace;
color: white;
}
h1 {
font-weight: 800;
font-size: 40px;
text-shadow: 3px 3px #1d1b1e;
color: #f4ce45
}
#container {
width: 600px;
height: 600px;
border: 3px solid #1d1b1e;
display: grid;
margin: 20px auto;
background-color: white;
box-shadow: 5px 5px #303030;
}
#grid {
border: none;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
.button {
font-family: inherit;
padding: 10px;
font-size: 1em;
background-color: #303030;
box-shadow: 2px 2px #1d1b1e;
color: white;
margin: 0 5px;
}
#reset {
background-color: #f4ce45;
color: black;
}
.button:hover,
#reset:hover {
cursor: pointer;
background-color: #e7455a;
}
.ownColor {
margin: 10px;
}
.pickColor:hover {
cursor: auto;
background-color: #303030;
}
#color {
cursor: pointer;
}
.slider {
-webkit-appearance: none;
width: 30%;
height: 10px;
border-radius: 5px;
background: #1d1b1e;
margin: 10px;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f4ce45;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #f4ce45;
cursor: pointer;
}
.grid-size {
font-size: 1.5rem;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>Etch-a-Sketch</title>
</head>
<body>
<h1>ETCH A SKETCH</h1>
<button id="reset" class="button">Reset</button>
<button id="pencil" class="button">Pencil</button>
<button id="eraser" class="button">Eraser</button>
<button id="rainbow" class="button">Rainbow</button>
<button id="shading" class="button">Shading</button>
<div class="ownColor">
<button class="button pickColor">Choose your own color:
<input type="color" id="color"></button>
</div>
<div class="grid-size"></div>
<input type="range" id="range" min="5" max="100" class="slider">
<div id="container"></div>
</body>
<script src="script.js"></script>
</html>
Well basically you can achieve this with a variable isMouseDown.
let isMouseDown;
document.addEventListener('mousedown', () => isMouseDown = true);
document.addEventListener('mouseup', () => isMouseDown = false);
then, use it where you need, for example:
// change color
function changeColor(e) {
if(!isMouseDown) return;
// ... rest of the code
}
Clicking on the Home button at the end of this project brings it to the beginning, but no function is reset. Level buttons are not also being enabled anew. If I enable those level buttons by writing some extra code for enabling, then the number of buttons given for each level will be doubled after selecting the level. In other words, for the first time due to selecting the basic level, there were 4 options, But when I click on the last home button and then select the medium level to play the game from the beginning, it becomes 16 options instead of 8.
//VARIABLE DECLARATION PART
let frontpage = document.querySelector(".front-page");
let playbutton = document.querySelector(".play");
let levelpage = document.querySelector(".levelpg");
let startbtn = document.querySelector(".startbtn");
let maingame = document.querySelector(".maingame");
let easybtn = document.querySelector(".easy");
let mediumbtn = document.querySelector(".medium");
let hardbtn = document.querySelector(".hard");
let nextbtn = document.querySelector(".nextbtn");
let pagecount = document.querySelector('.gamepagecount');
let getnumberdiv = document.querySelector('.numberbtn').children;
let resultpg = document.querySelector('.resultpage');
let backhome = document.querySelector('.backhome');
let finalscore = document.querySelector('.score');
let resulttext = resultpg.children[1];
let changeimg = document.querySelector('.resultpage img');
// PLAYBUTTON CLICK
playbutton.addEventListener("click", () => {
frontpage.classList.add("hidden");
levelpage.classList.remove("hidden");
levelpage.classList.add("visibility");
});
//GAME START FUNCTION
function startGame(level) {
if (level == "easy") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
easybtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 10`;
nextbtn.disabled = true
levelChange(4);
gameInterfaceChange()
mainGame(10);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(4)
pageCount(10);
mainGame(10);
})
});
}
else if (level == "medium") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
mediumbtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 15`;
nextbtn.disabled = true
levelChange(8);
gameInterfaceChange();
maingame.style.top = "20%";
mainGame(20);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(8)
pageCount(15)
mainGame(20);
})
});
}
else if (level == "hard") {
mediumbtn.disabled = true;
hardbtn.disabled = true;
easybtn.disabled = true;
hardbtn.classList.add('levelcolor');
startbtn.addEventListener("click", () => {
pagecount.innerHTML = `1 of 20`;
nextbtn.disabled = true
levelChange(12);
gameInterfaceChange();
maingame.style.top = "12%";
mainGame(30);
//NEXTBUTTON FUNCTION
nextbtn.addEventListener('click', () => {
enableBtn(12)
pageCount(20)
mainGame(30);
})
});
}
}
//PAGE SLIDING FUNCTION
function gameInterfaceChange() {
levelpage.classList.remove("hidden");
levelpage.classList.add("hidden");
maingame.classList.remove("hidden");
maingame.style.top = "25%";
maingame.classList.add("visibility");
}
// FUNCTION OF RANDOM INPUTING NUMBER IN DIV
function mainGame(maxnum) {
let numboxlen = getnumberdiv.length;
let wrongnum = Math.floor(Math.random() * maxnum) + 1;
let getnumber = [];
//DUPLICATE RANDOM NUMBER CHECKING
for (let i = 0; i < numboxlen; i++) {
let check = getnumber.includes(wrongnum);
if (check === false) {
getnumber.push(wrongnum);
}
else {
while (check === true) {
wrongnum = Math.floor(Math.random() * maxnum) + 1;
check = getnumber.includes(wrongnum);
if (check === false) {
getnumber.push(wrongnum);
}
}
}
}
// NUMBER PUTTING IN InnerHtml
for (var j = 0; j < numboxlen; j++) {
if (getnumber[j] < 10) {
getnumberdiv[j].innerHTML = '0' + getnumber[j];
}
else {
getnumberdiv[j].innerHTML = getnumber[j];
}
}
}
// BUTTON ADDING ACCORDING TO THE LEVEL
function levelChange(divnum) {
for (let index = 0; index < divnum; index++) {
let newBtn = document.createElement('button');
let newbtnNode = document.createTextNode('');
newBtn.appendChild(newbtnNode);
let gamebtn = document.getElementById('numbrbtn');
gamebtn.appendChild(newBtn);
newBtn.setAttribute("onclick", `numberClick(${index},${divnum})`);
}
}
//RIGHT - WRONG CHECKING FUNTION
var right = 0;
var wrong = 0;
function numberClick(index, divnum) {
let rightnumberindex = Math.floor(Math.random() * divnum);
if (index == rightnumberindex) {
nextbtn.disabled = false
right++;
//RIGHT AND WRONG BACKGROUND ADDING AND BUTTON DISABLE
getnumberdiv[index].classList.add("rightans");
for (let i = 0; i < divnum; i++) {
getnumberdiv[i].disabled = true;
}
}
else {
nextbtn.disabled = false
wrong++;
//RIGHT AND WRONG BACKGROUND ADDING AND BUTTON DISABLE
getnumberdiv[rightnumberindex].classList.add("rightans");
getnumberdiv[index].classList.add("wrongans");
for (let i = 0; i < divnum; i++) {
getnumberdiv[i].disabled = true;
}
}
}
// BUTTON ENABLE ON NEXT BUTTION CLICK
function enableBtn(divnum) {
for (let i = 0; i < divnum; i++) {
nextbtn.disabled = true
getnumberdiv[i].disabled = false;
getnumberdiv[i].classList.remove("wrongans");
getnumberdiv[i].classList.remove("rightans");
}
}
//PAGE COUNTING ACCORDING TO THE LEVEL
let currentpg = 1;
function pageCount(levelPg) {
currentpg++;
if (currentpg <= levelPg) {
if (currentpg == levelPg) {
nextbtn.innerHTML = 'Result'
pagecount.innerHTML = `${currentpg} of ${levelPg}`;
}
else {
pagecount.innerHTML = `${currentpg} of ${levelPg}`;
}
}
else {
result();
}
}
//FINAL RESULT FUNTION
function result() {
maingame.classList.remove("visibility");
maingame.classList.add("hidden");
resultpg.classList.remove('hidden')
resultpg.classList.add('visibility')
if (right > wrong) {
changeimg.setAttribute('src', 'trophy.png')
resulttext.innerHTML = `You Win`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
else if (right == wrong) {
changeimg.setAttribute('src', 'draw.png')
resulttext.innerHTML = `It's Draw`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
else if (right < wrong) {
changeimg.setAttribute('src', 'lose.png')
resulttext.innerHTML = `You Lose`;
finalscore.innerHTML = `Your Right Score is : ${right} out of ${right + wrong}`;
}
}
//BACK TO THE HOME FUNCTION
backhome.addEventListener('click', () => {
frontpage.classList.add("visibility");
frontpage.classList.remove("hidden");
resultpg.classList.add('hidden')
resultpg.classList.remove('visibility')
// enable level button
mediumbtn.disabled = false;
hardbtn.disabled = false;
easybtn.disabled = false;
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
margin-top: 50px;
}
.guessing-game {
position: relative;
color: white;
text-align: center;
margin: auto;
width: 350px;
height: 600px;
border-radius: 25px;
padding: 50px 30px;
background: linear-gradient(to right, #bd3f32, #cb356b);
}
.guessing-game .front-page .front-img {
height: 160px;
text-align: center;
}
.guessing-game .front-page img {
max-height: 100%;
}
.guessing-game .front-page .front-text h1 {
margin-top: 50px;
font-size: 1.8em;
}
.guessing-game .front-page .front-text p {
margin-top: 10px;
font-size: 1em;
}
.guessing-game .front-page .front-text button,
.resultpage button ,
.levelpg .easy,
.levelpg .medium,
.levelpg .hard,
.maingame .nextbtn {
margin-top: 30px;
width: 100%;
color: white;
padding: 15px;
outline: 0;
border: 0;
border-radius: 50px;
font-size: 0.9em;
background-color: #d64d5d;
box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px,
rgba(17, 17, 26, 0.144) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
}
.guessing-game .front-page .front-text button:hover,
.maingame .nextbtn:hover,
.resultpage button:hover {
transition: 0.5s;
background-color: #c22f40;
}
/* Level page */
.visiblepg {
position: absolute;
top: 12%;
width: 290px;
}
.levelpg h1 {
margin: 45px 0 40px 0;
font-weight: 600;
font-size: 2.4em;
border: 1px solid white;
}
.levelpg .easy,
.levelpg .medium,
.levelpg .hard {
display: block;
margin-top: 15px;
padding: 12px;
background: white;
font-size: 1em;
border-radius: 10px;
font-weight: 400;
color: #c22f40;
}
.startbtn {
background: transparent;
border: 0;
outline: 0;
}
.levelpg i {
color: white;
margin-top: 50px;
font-size: 70px;
border-radius: 50%;
border: 2px solid transparent;
}
.levelpg i:hover {
background-color: white;
border: 2px solid white;
color: #c22f40;
transition: 0.5s;
}
/* GAME PART */
.maingame .gamepagecount {
background-color: #d64d5d;
color: white;
padding: 4px;
border-radius: 6px;
font-size: 0.8em;
font-weight: 600;
}
.maingame .gametext {
margin-top: 15px;
font-size: 1.2em;
}
.maingame .numberbtn {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.maingame .numberbtn button {
margin-top: 40px;
width: 50px;
height: 50px;
background-color: white;
display: flex;
align-content: space-around;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex: 1 0 21%;
margin-left: 10px;
border: 0;
outline: 0;
border-radius: 10px;
font-size: 1em;
color: #c22f40;
font-weight: 600;
}
.maingame .numberbtn button:nth-child(1),
.maingame .numberbtn button:nth-child(5),
.maingame .numberbtn button:nth-child(9) {
margin-left: 0;
}
.resultpage h1 {
margin: 0px 0 40px 0;
}
.resultpage img {
margin-top: 45px;
width: 50%;
}
/* PRE DEFINE CSS */
.visibility {
visibility: visiible;
opacity: 2s;
transition: 0.5s;
transform: translateX(0px);
}
.hidden {
visibility: hidden;
opacity: 0;
transition: 0.5s;
transform: translateX(-30px);
}
.levelcolor {
transition: 0.5s;
color: white !important;
background-color: #c22f40 !important;
}
.rightans {
background-color: #27ae60 !important;
color: white !important;
transition: 0.5s;
}
.wrongans {
background-color: #fd4631 !important;
color: white !important;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Guessing Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="guessing-game">
<div class="front-page">
<div class="front-img">
<img src="./question.png" alt="" />
</div>
<div class="front-text">
<h1>Guessing Game</h1>
<p>
You just need to chose the right number from the option. If your
guess is right more than wrong , you will win otherwise you will
fail! Let's see how good your sixth sense is!!!
</p>
<button class="play">Let's play</button>
</div>
</div>
<div class="levelpg hidden visiblepg">
<h1>Game level</h1>
<button class="easy" onclick="startGame('easy')">Easy</button>
<button class="medium" onclick="startGame('medium')">Medium</button>
<button class="hard" onclick="startGame('hard')">Hard</button>
<button class="startbtn"><i class="fas fa-play-circle"></i></button>
</div>
<div class="maingame visiblepg hidden">
<p class="gamepagecount">1</p>
<p class="gametext">Guess the number you think is right</p>
<div class="numberbtn" id="numbrbtn"></div>
<button class="nextbtn">Next</button>
</div>
<div class="resultpage levelpg hidden visiblepg">
<img src="" alt="" />
<h1></h1>
<div class="score"></div>
<button class="backhome">Home</button>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
In short, as soon as I click on the home button, I want the game to start anew, all the functions will be reset anew, and the HTML will be reset anew also. I hope my problem is enough clear to understand.
I have solved the problem.
I just add a reload function to solve this problem.
backhome.addEventListener('click', () => {
frontpage.classList.add("visibility");
frontpage.classList.remove("hidden");
resultpg.classList.add('hidden')
resultpg.classList.remove('visibility')
//reload function
window.location.reload();
})
I am just starting out with Javascript and I made my first ever little project so I apologize if the code is bad and hurts your eyes.
I made a color palette generator that creates random hex color codes looping through an array.
I was wondering if there is a better way to do it, perhaps using only one loop and get three different hex codes at the same time?
//declare variables to store color codes visible on dom
const hexCode01 = document.querySelector('.hex-color-code-01');
const hexCode02 = document.querySelector('.hex-color-code-02');
const hexCode03 = document.querySelector('.hex-color-code-03');
//declare variables to store color each box
const box01 = document.querySelector('.box-01');
const box02 = document.querySelector('.box-02');
const box03 = document.querySelector('.box-03');
//declare variables to store action button
const changeBtn = document.querySelector('.change-button');
//declare array to store hex digits
const hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
changeBtn.addEventListener("click", () => {
//change button content after first click
if (changeBtn.innerHTML === 'Generate Palette') changeBtn.innerHTML = 'Generate New Palette';
else {
changeBtn.innerHTML = 'Generate New Palette';
}
let activeHex1 = "#";
let activeHex2 = "#";
let activeHex3 = "#";
//generate first color
for (let i = 0; i < 6; i++) {
const indexBox1 = Math.floor(Math.random() * hexValues.length);
activeHex1 += hexValues[indexBox1];
}
//generate second color
for (let i = 0; i < 6; i++) {
const indexBox2 = Math.floor(Math.random() * hexValues.length);
activeHex2 += hexValues[indexBox2];
}
//generate thitd color
for (let i = 0; i < 6; i++) {
const indexBox3 = Math.floor(Math.random() * hexValues.length);
activeHex3 += hexValues[indexBox3];
}
let bodyColor1 = (hexCode01.innerHTML = activeHex1);
let bodyColor2 = (hexCode02.innerHTML = activeHex2);
let bodyColor3 = (hexCode03.innerHTML = activeHex3);
box01.style.backgroundColor = bodyColor1;
box02.style.backgroundColor = bodyColor2;
box03.style.backgroundColor = bodyColor3;
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
font-family: arial, sans-serif;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.color-box {
width: 33.333%;
height: 100%;
border: 1px solid black;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
}
button {
background: none;
border: 2px solid #000;
bottom: 1rem;
border-radius: 50px;
padding: 1rem;
position: fixed;
font-family: arial, sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
color: #000;
cursor: pointer;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
button:active {
color: #fdfdfd;
border-color: #fdfdfd;
}
<div class="color-box box-01">
<div class="hex-color-code-01">#ffffff</div>
</div>
<div class="color-box box-02">
<div class="hex-color-code-02">#ffffff</div>
</div>
<div class="color-box box-03">
<div class="hex-color-code-03">#ffffff</div>
</div>
<button class="change-button">Generate Palette</button>
Thanks
Please use below code where I have done it using one loop:
for (let i = 0; i < 6; i++) {
const indexBox1 = Math.floor(Math.random() * hexValues.length);
const indexBox2 = Math.floor(Math.random() * hexValues.length);
const indexBox3 = Math.floor(Math.random() * hexValues.length);
activeHex1 += hexValues[indexBox1];
activeHex2 += hexValues[indexBox2];
activeHex3 += hexValues[indexBox3];
}
Here is jsfiddle: https://jsfiddle.net/0yhubLn1/
you could use one loop like so:
for (let i = 0; i < 6; i++) {
const indexBox1 = Math.floor(Math.random() * hexValues.length);
activeHex1 += hexValues[indexBox1];
const indexBox2 = Math.floor(Math.random() * hexValues.length);
activeHex2 += hexValues[indexBox2];
const indexBox3 = Math.floor(Math.random() * hexValues.length);
activeHex3 += hexValues[indexBox3];
}
Hope that is what you imagined😊.
const hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
document.querySelector('.change-button').addEventListener("click", () => {
document.querySelector('.change-button').innerHTML = 'Generate New Palette';
let activeHex = [];
for (let i = 0; i < 3; i++) {
activeHex[i] = '#';
for (let j = 0; j < 6; j++) {
activeHex[i] += hexValues[Math.floor(Math.random() * hexValues.length)];
}
document.querySelector('.box-' + i).style.backgroundColor = (document.querySelector('.hex-color-code-' + i).innerHTML = activeHex[i]);
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
font-family: arial, sans-serif;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.color-box {
width: 33.333%;
height: 100%;
border: 1px solid black;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
}
button {
background: none;
border: 2px solid #000;
bottom: 1rem;
border-radius: 50px;
padding: 1rem;
position: fixed;
font-family: arial, sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
color: #000;
cursor: pointer;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
button:active {
color: #fdfdfd;
border-color: #fdfdfd;
}
<div class="color-box box-0">
<div class="hex-color-code-0">#ffffff</div>
</div>
<div class="color-box box-1">
<div class="hex-color-code-1">#ffffff</div>
</div>
<div class="color-box box-2">
<div class="hex-color-code-2">#ffffff</div>
</div>
<button class="change-button">Generate Palette</button>
hexcode = () => {
const hexValues = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
let hex = '#';
for (let i = 0; i < 6; i++) {
let index = Math.floor(Math.random() * hexValues.length);
hex += hexValues[index];
}
return hex;
}
console.log(hexcode());
This function will generate a random hex.
let activeHex1 = hexcode();
You don't need the hexValues array.
0 to FFFFFF in hexadecimal is 0 to 16777215 in decimal. You can select a random number between (and including) those two limits and convert to hexadecimal making sure to left pad with 0s. We need to use 16777215 + 1 = 16777216 in the function to ensure 16777215 is a potential output:
function randomColour() {
var randInt = Math.floor(Math.random() * 16777216); // random between 0 and 16777215
var randHex = randInt.toString(16); // convert to hexadecimal
var randColour = "#" + randHex.padStart(6, "0"); // pad left with 0s if hex is less than 6 chars
return randColour; // return the random hex value
}
console.log(randomColour());
To return 3 (or any number of) hex value colours at the same time, use an array mapping:
function randomColour() {
var randInt = Math.floor(Math.random() * 16777216);
var randHex = randInt.toString(16);
var randColour = "#" + randHex.padStart(6, "0");
return randColour;
}
var numColours = 3; // your code has 3 random colours, adjust this for N colours
var colours = Array.from({length: numColours}, function(v) {return randomColour();});
console.log(colours);
This is a more concise way of doing what you mention in your question:
...perhaps using only one loop and get three different hex codes at
the same time?
It's the same as doing this, but just in one line:
function randomColour() {
var randInt = Math.floor(Math.random() * 16777216);
var randHex = randInt.toString(16);
var randColour = "#" + randHex.padStart(6, "0");
return randColour;
}
var colours = [];
var numColours = 3;
for (var i=0; i<numColours; i++) {
colours.push(randomColour());
}
console.log(colours);
Applying this approach in your code:
//declare variables to store color codes visible on dom
const hexCode01 = document.querySelector('.hex-color-code-01');
const hexCode02 = document.querySelector('.hex-color-code-02');
const hexCode03 = document.querySelector('.hex-color-code-03');
//declare variables to store color each box
const box01 = document.querySelector('.box-01');
const box02 = document.querySelector('.box-02');
const box03 = document.querySelector('.box-03');
//declare variables to store action button
const changeBtn = document.querySelector('.change-button');
changeBtn.addEventListener("click", () => {
//change button content after first click
if (changeBtn.innerHTML === 'Generate Palette') changeBtn.innerHTML = 'Generate New Palette';
else {
changeBtn.innerHTML = 'Generate New Palette';
}
var colours = Array.from({length: 3}, function(v) {return randomColour();});
let bodyColor1 = (hexCode01.innerHTML = colours[0]);
let bodyColor2 = (hexCode02.innerHTML = colours[1]);
let bodyColor3 = (hexCode03.innerHTML = colours[2]);
box01.style.backgroundColor = colours[0];
box02.style.backgroundColor = colours[1];
box03.style.backgroundColor = colours[2];
});
function randomColour() {
var randInt = Math.floor(Math.random() * 16777216);
var randHex = randInt.toString(16);
var randColour = "#" + randHex.padStart(6, "0");
return randColour;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
font-family: arial, sans-serif;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.color-box {
width: 33.333%;
height: 100%;
border: 1px solid black;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
}
button {
background: none;
border: 2px solid #000;
bottom: 1rem;
border-radius: 50px;
padding: 1rem;
position: fixed;
font-family: arial, sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
color: #000;
cursor: pointer;
}
button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
button:active {
color: #fdfdfd;
border-color: #fdfdfd;
}
<div class="color-box box-01">
<div class="hex-color-code-01">#ffffff</div>
</div>
<div class="color-box box-02">
<div class="hex-color-code-02">#ffffff</div>
</div>
<div class="color-box box-03">
<div class="hex-color-code-03">#ffffff</div>
</div>
<button class="change-button">Generate Palette</button>
I left out most of the styling and frills to focus on JavaScript hex generation optimization:
function generate() {
var colorBoxes = document.getElementsByClassName("color-box");
for (var i = 0; i < colorBoxes.length; i++) colorBoxes[i].innerHTML = colorBoxes[i].style.background = "#" + ("00000" + Math.floor(Math.random() * 16777216).toString(16)).slice(-6);
}
.color-box {
display: inline-block;
padding: 20px;
margin-top: 20px;
}
<div><button onclick="generate();">Generate Palette</button></div>
<div class="color-box"></div>
<div class="color-box"></div>
<div class="color-box"></div>
If you want the color generation to be more random, you can use rando.js instead, like this:
console.log("#" + ("00000" + rando(16777215).toString(16)).slice(-6));
<script src="http://randojs.com/2.0.0.js"></script>
As you run the snippet you see the circle it just stays to the left
I'm thinking that I have the code where it should appear randomly
But I'm not sure what I'm doing wrong. Any ideas
What I've Done to Remedy?
I tried to review the code for spelling issues and errors, checked the console in browser inspect mode but it doesn't show that there is an issue.
// Start of Red Circle Function
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var clickedTime;
var createdTime;
var reactionTime;
function makeBox() {
var time = Math.random();
time = time * 5000;
setTimeout(function() {
if (Math.random() > 0.5) {
document.getElementById("redCircle").style.borderRadius = "150px";
} else {
document.getElementById("redCircle").style.borderRadius = "10px";
}
var top = Math.random();
top = top * 300;
var left = Math.random();
left = left * 500;
document.getElementById("redCircle").style.top = top + "px";
document.getElementById("redCircle").style.left = left + "px";
document.getElementById("redCircle").style.backgroundColor = getRandomColor();
document.getElementById("redCircle").style.display = "block";
createdTime = Date.now();
}, time);
}
document.getElementById("redCircle").onclick = function() {
clickedTime = Date.now();
reactionTime = (clickedTime - createdTime) / 1000;
document.getElementById("time").innerHTML = reactionTime;
this.style.display = "none";
makeBox();
}
makeBox();
// End of Red Circle Function
body {
margin: 0px;
}
.header {
background-color: #E7F2F4;
margin: auto;
width: 98%;
text-align: center;
padding: 20px;
padding-bottom: 40px;
}
.header p {
font-size: 20px;
color: white;
}
.header h1 {
font-weight: 46px;
color: #0099CC;
}
#myButton {
background-color: #0099CC;
color: white;
}
body {
background-color: white;
}
/* Circle Button Start */
#redCircle {
background-color: red;
width: 150px;
height: 150px;
border-radius: 150px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
display: none;
}
/* Circle Button Start */
<!DOCTYPE html>
<html>
<head>
<title>Javascript Reactor Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Javascript Reactor</h1>
<p>How Fast Can You Click On The Shapes?</p>
<button id="myButton">Click Here To Start The Reactor</button>
</div>
<center><b><p>Your Reaction Time:<span id="time"></p></b>
</center>
<br>
<!-- Circle Start -->
<button id="redCircle"></button>
<!-- Circle End -->
</script>
</body>
</html>
You need position: absolute; in the CSS for #redCircle so that the top and left styles will be used.
// Start of Red Circle Function
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var clickedTime;
var createdTime;
var reactionTime;
function makeBox() {
var time = Math.random();
time = time * 5000;
setTimeout(function() {
if (Math.random() > 0.5) {
document.getElementById("redCircle").style.borderRadius = "150px";
} else {
document.getElementById("redCircle").style.borderRadius = "10px";
}
var top = Math.random();
top = top * 300;
var left = Math.random();
left = left * 500;
document.getElementById("redCircle").style.top = top + "px";
document.getElementById("redCircle").style.left = left + "px";
document.getElementById("redCircle").style.backgroundColor = getRandomColor();
document.getElementById("redCircle").style.display = "block";
createdTime = Date.now();
}, time);
}
document.getElementById("redCircle").onclick = function() {
clickedTime = Date.now();
reactionTime = (clickedTime - createdTime) / 1000;
document.getElementById("time").innerHTML = reactionTime;
this.style.display = "none";
makeBox();
}
makeBox();
// End of Red Circle Function
body {
margin: 0px;
}
.header {
background-color: #E7F2F4;
margin: auto;
width: 98%;
text-align: center;
padding: 20px;
padding-bottom: 40px;
}
.header p {
font-size: 20px;
color: white;
}
.header h1 {
font-weight: 46px;
color: #0099CC;
}
#myButton {
background-color: #0099CC;
color: white;
}
body {
background-color: white;
}
/* Circle Button Start */
#redCircle {
position: absolute;
background-color: red;
width: 150px;
height: 150px;
border-radius: 150px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
display: none;
}
/* Circle Button Start */
<!DOCTYPE html>
<html>
<head>
<title>Javascript Reactor Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Javascript Reactor</h1>
<p>How Fast Can You Click On The Shapes?</p>
<button id="myButton">Click Here To Start The Reactor</button>
</div>
<center><b><p>Your Reaction Time:<span id="time"></p></b>
</center>
<br>
<!-- Circle Start -->
<button id="redCircle"></button>
<!-- Circle End -->
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>
For the left and top style properties to have any effect, the element has to have a position other than static. The one you probably want is absolute. So add
position: absolute;
to your CSS rule for #redCircle.
// Start of Red Circle Function
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var clickedTime;
var createdTime;
var reactionTime;
function makeBox() {
var time = Math.random();
time = time * 5000;
setTimeout(function() {
if (Math.random() > 0.5) {
document.getElementById("redCircle").style.borderRadius = "150px";
} else {
document.getElementById("redCircle").style.borderRadius = "10px";
}
var top = Math.random();
top = top * 300;
var left = Math.random();
left = left * 500;
document.getElementById("redCircle").style.top = top + "px";
document.getElementById("redCircle").style.left = left + "px";
document.getElementById("redCircle").style.backgroundColor = getRandomColor();
document.getElementById("redCircle").style.display = "block";
createdTime = Date.now();
}, time);
}
document.getElementById("redCircle").onclick = function() {
clickedTime = Date.now();
reactionTime = (clickedTime - createdTime) / 1000;
document.getElementById("time").innerHTML = reactionTime;
this.style.display = "none";
makeBox();
}
makeBox();
// End of Red Circle Function
body {
margin: 0px;
}
.header {
background-color: #E7F2F4;
margin: auto;
width: 98%;
text-align: center;
padding: 20px;
padding-bottom: 40px;
}
.header p {
font-size: 20px;
color: white;
}
.header h1 {
font-weight: 46px;
color: #0099CC;
}
#myButton {
background-color: #0099CC;
color: white;
}
body {
background-color: white;
}
/* Circle Button Start */
#redCircle {
background-color: red;
width: 150px;
height: 150px;
border-radius: 150px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
display: none;
position: absolute;
}
/* Circle Button Start */
<!DOCTYPE html>
<html>
<head>
<title>Javascript Reactor Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Javascript Reactor</h1>
<p>How Fast Can You Click On The Shapes?</p>
<button id="myButton">Click Here To Start The Reactor</button>
</div>
<center><b><p>Your Reaction Time:<span id="time"></p></b>
</center>
<br>
<!-- Circle Start -->
<button id="redCircle"></button>
<!-- Circle End -->
</script>
</body>
</html>