I am making a project for school, its a basic country guessing game where you type in the name of a country in an input field and press enter to check if its correct or not.
The function below is supposed to check the input field to the country list array to see if its correct. Now i dont have a problem displaying it but i would like the array to be displayed more like a list and for it to make a new row/column if its about to go outside the edge of the box its being displayed in.
Visualization of array display problem
Preferably the array should start by filling 1 column then when it's about to hit the bottom of the box its displayed in it should start a new column and continue.
I have tried almost everything, even adding the input field value to a list without using an array but then i had a trouble checking if the input value was already guessed or not. obviously you shouldn't be able to write Spain 7 times.
Any help much appriciated.
js.
var guessedCorrect = [];
addEventListener("keyup", function(e) {
if(e.keyCode === 13) {
input = document.getElementById("input").value;
if (countryList.indexOf(input) > -1 && guessedCorrect.indexOf(input) == -1) {
guessedCorrect.push(input);
document.getElementById("countryArray").innerHTML = guessedCorrect;
}
if (guessedCorrect.indexOf(input) > -1) {
}
document.getElementById("input").value = "";
}
});
HTML
<body>
<main>
<div id="gameContainer">
<button id="startGame" onclick="startGame()" >Start</button>
<button id="resetGame" onclick="resetGame()" >Reset</button>
<div id="inputArea">
<input type="text" id="input" placeholder="Guess country.." name="input">
</div>
<div id="timerArea">
<span id="timer"></span>
</div>
<div id="textArea">
<div id="countryArray"></div>
</div>
</div>
</main>
<script src="../js/script.js"></script>
</body>
CSS
#countryArray {
margin: 1rem 1rem;
}
#textArea {
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 2;
grid-row-end: 5;
margin: 15px;
Background-color: white;
border-radius: 20px;
border: 4px solid black;
max-width: 100%;
}