I am learning javascript nowadays and i am trying to make a word scramble game via youtube video. When i hit check it always says not correct how can i fix this problem ? What did i do wrong ? (This is my first entry if i do something wrong or deficent please let me know + sorry for my bad english :) )
const wordText = document.querySelector(".word"),
hintText = document.querySelector(".hint span"),
inputField = document.querySelector(".input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word");
// Words/Kelimeler
const words = [
{
word: "addition",
hint: "The process of adding numbers",
},
{
word: "meeting",
hint: "Event in which people come together",
},
{
word: "number",
hint: "Math symbol used for counting",
},
{
word: "exchange",
hint: "The act of trading",
},
{
word: "canvas",
hint: "Piece of fabric for oil painting",
},
{
word: "garden",
hint: "Space for planting flower and plant",
},
{
word: "position",
hint: "Location of someone or something",
},
{
word: "feather",
hint: "Hair like outer covering of bird",
},
{
word: "comfort",
hint: "A pleasant feeling of relaxation",
},
{
word: "tongue",
hint: "The muscular organ of mouth",
},
{
word: "expansion",
hint: "The process of increase or grow",
},
{
word: "country",
hint: "A politically identified region",
},
{
word: "group",
hint: "A number of objects or persons",
},
{
word: "taste",
hint: "Ability of tongue to detect flavour",
},
{
word: "store",
hint: "Large shop where goods are traded",
},
{
word: "field",
hint: "Area of land for farming activities",
},
{
word: "friend",
hint: "Person other than a family member",
},
{
word: "pocket",
hint: "A bag for carrying small items",
},
{
word: "needle",
hint: "A thin and sharp metal pin",
},
{
word: "expert",
hint: "Person with extensive knowledge",
},
{
word: "statement",
hint: "A declaration of something",
},
{
word: "second",
hint: "One-sixtieth of a minute",
},
{
word: "library",
hint: "Place containing collection of books",
},
];
let correctWord;
const initGame = () => {
let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
for (let i = wordArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
let temp = wordArray[i];
wordArray[i] = wordArray[j];
wordArray[j] = temp;
}
wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
hintText.innerText = randomObj.hint;
correctWord = randomObj.word.toLowerCase;
console.log(randomObj);
};
const checkWord = () => {
let userWord = inputField.value.toLocaleLowerCase();
console.log(userWord);
if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
alert(`Congrats! ${userWord.toUpperCase()} is correct`);
if (!userWord) return alert(`Please enter word`);
};
refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);
initGame();@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #2c3333;
}
.container {
width: 450px;
background: #fff;
border-radius: 7px;
}
.container h2 {
font-size: 25px;
font-weight: 500;
padding: 18px 25px;
border-bottom: 1px solid #ccc;
}
.container .content {
margin: 25px 20px 35px;
}
.content .word {
font-size: 33px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 25px;
margin-right: -25px;
}
.content .details {
margin: 25px 0 20px;
}
.details p {
font-size: 18px;
margin-bottom: 10px;
}
.details p b {
font-weight: 500;
}
.content input {
width: 100%;
height: 60px;
outline: none;
padding: 0 16px;
border-radius: 5px;
border: 1px solid #aaa;
font-size: 18px;
}
.content .buttons {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.buttons button {
border: none;
outline: none;
padding: 15px 0;
color: white;
cursor: pointer;
font-size: 17px;
border-radius: 5px;
width: calc(100% / 2- 8px);
}
.buttons .check-word {
background: #a0d995;
padding-left: 30px;
padding-right: 30px;
}
.buttons .refresh-word {
background: #a5c9ca;
padding-left: 30px;
padding-right: 30px;
}<!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" />
<title>Word Scramble Game</title>
<link rel="stylesheet" href="style.css" />
<script src="js/script.js" defer></script>
</head>
<body>
<div class="container">
<h2>Word Scramble Game</h2>
<div class="content">
<p class="word"></p>
<div class="details">
<p class="hint">Hint:<span></span></p>
<p class="time">
Time Left:<span><b>30</b>s</span>
</p>
</div>
<input class="input" type="text" placeholder="Enter a valid word" />
<div class="buttons">
<button class="refresh-word">Refresh Word</button>
<button class="check-word">Check Word</button>
</div>
</div>
</div>
</body>
</html>
