Currently, I am engrossed in crafting a word guessing game. In this game, I've constructed a visual keyboard. When a user selects a letter on this keyboard, I desire the background color of that specific letter to adjust accordingly - light green if the guess is accurate, and grey if it's incorrect. However, I am encountering an issue where the default background (specified with the 'letter' class) fails to get properly replaced post-click. Instead, what occurs is a new background color overlays the default one, presenting as a raw, unstyled box sans border radius or any other stylings. Visually, this discrepancy is rather evident. I'm curious as to why this is happening. Would someone be kind enough to shed some light on this matter for me? Is this an established phenomenon within web development circles? Or could it have something to do with the event handling and my utilization of the e.target property?
Below, you will find snippets of my HTML, CSS, and Javascript implementation.
const currentWord = "abc"
$('.keyboard .row .letter').click(function(e) {
// Check if 'currentWord' contains clicked letter
let check = [];
currentWord.split('').forEach(function(letter, i) {
let clickedLetter = e.target.firstChild.textContent.toLocaleUpperCase();
if(clickedLetter === letter.toLocaleUpperCase()) {
// Change background of correctly guessed letter
$(e.target).css('background-color','lightgreen');
// Make letter appear in letter box
$(`#${letter} .word-letter`).text(clickedLetter).fadeOut(1).fadeIn(250);
check.push(1);
} else if((i === currentWord.length - 1) && !check.length) {
// Change background of incorrectly guessed letter
$(e.target).css('background-color', 'grey');
}
})
})/* KEYBOARD */
.keyboard {
grid-column: 2/5;
grid-row: 6/8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(223, 255, 196);
}
.row {
height: 40%;
width: 100%;
font-size: 2em;
display: flex;
justify-content: center;
}
.letter {
text-align: center;
width: 5%;
background-color: rgb(158, 228, 255);
margin: 1%;
border-radius: 10px;
box-shadow: 3px 3px lightgray;
}
.letter:hover {
background-color: rgb(255, 138, 255);
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="keyboard">
<div class="row">
<div class="letter"><p>Q</p></div>
<div class="letter"><p>W</p></div>
<div class="letter"><p>E</p></div>
<div class="letter"><p>R</p></div>
<div class="letter"><p>T</p></div>
<div class="letter"><p>Y</p></div>
<div class="letter"><p>U</p></div>
<div class="letter"><p>I</p></div>
<div class="letter"><p>O</p></div>
<div class="letter"><p>P</p></div>
</div>
<div class="row">
<div class="letter"><p>A</p></div>
<div class="letter"><p>S</p></div>
<div class="letter"><p>D</p></div>
<div class="letter"><p>F</p></div>
<div class="letter"><p>G</p></div>
<div class="letter"><p>H</p></div>
<div class="letter"><p>J</p></div>
<div class="letter"><p>K</p></div>
<div class="letter"><p>L</p></div>
</div>
<div class="row">
<div class="letter"><p>Z</p></div>
<div class="letter"><p>X</p></div>
<div class="letter"><p>C</p></div>
<div class="letter"><p>V</p></div>
<div class="letter"><p>B</p></div>
<div class="letter"><p>N</p></div>
<div class="letter"><p>M</p></div>
</div>
</div>