Develop Reference

How to add ability to dropdown for list?

I've created list of list containing some data about countries (grouped by subregions, each country contains following data: name, capital, population and area). Now I would like to add ability to hide or show all the countries belonging to its subregion. For example after clicking on subregion North America all the countries belonging to NA should show up, or hide if they were shown up already. Right now all I can do is to show the whole list of subregions with all its countries and I am clueless how to add the ability of dropdown. I will be extremely grateful for help.
Below is source code of what i was able to do.
let div = document.createElement('div');
document.body.appendChild(div);
let ul = document.createElement('ul');
div.appendChild(ul);
async function f() {
//fetching and sorting data by regions and subregions
const res = await fetch("https://restcountries.com/v3.1/all");
const data = await res.json();
data.sort((a, b) => {
if (a.region > b.region) return 1;
else if (a.region < b.region) return -1
else {
if (a.subregion > b.subregion) return 1;
else return -1;
}
})
//count no of subregions and totals of subregion area and population data
var prevSR = null;
var cntSR = 0;
var subregPop = [];
var subregArea = [];
var localPop = 0;
var localArea = 0;
for (const x of data) {
if (prevSR != x.subregion) {
cntSR += 1;
prevSR = x.subregion;
subregPop.push(localPop);
subregArea.push(localArea);
localArea = 0;
localPop = 0;
}
localArea += x.area;
localPop += x.population;
}
//loop to upload data to lists
var i = 0
prevSubregion = data[0].subregion;
for (var a = 0; a < cntSR; a++) {
//creating subregion
let li = createSubregion(data[i].subregion, subregPop[a + 1], subregArea[a + 1]);
let subOl = document.createElement('ol');
while (prevSubregion == data[i].subregion) {
//creating country
prevSubregion = data[i].subregion;
subLi = createCountry(data[i].name.common, data[i].capital, data[i].area, data[i].population);
subOl.appendChild(subLi);
i += 1;
}
prevSubregion = data[i].subregion;
li.appendChild(subOl);
ul.appendChild(li);
}
}
function createSubregion(name, population, area) {
var li = document.createElement("li");
li.setAttribute("class", "subregion");
var header = document.createElement("div");
header.setAttribute("class", "subregion-header disp-flex");
var nameDiv = document.createElement("div");
var nameh2 = document.createElement("h2");
nameh2.innerText = name;
nameDiv.appendChild(nameh2);
header.append(nameDiv);
var emptyDiv = document.createElement("div");
header.appendChild(emptyDiv);
var populationDiv = document.createElement("div");
var populationh2 = document.createElement("h3");
populationh2.innerText = population;
populationDiv.appendChild(populationh2);
header.append(populationDiv);
var areaDiv = document.createElement("div");
var areah2 = document.createElement("h3");
areah2.innerText = area;
areaDiv.appendChild(areah2);
header.append(areaDiv);
li.appendChild(header);
return li;
}
function createCountry(name, capital, area, population) {
var country = document.createElement("li");
country.setAttribute("class", "country disp-flex")
var namediv = document.createElement("div");
var nameh4 = document.createElement("h4");
nameh4.innerText = name;
namediv.appendChild(nameh4);
country.appendChild(namediv);
var capitaldiv = document.createElement("div");
var capitalh4 = document.createElement("h4");
capitalh4.innerText = capital;
capitaldiv.appendChild(capitalh4);
country.appendChild(capitaldiv);
var popdiv = document.createElement("div");
var poph4 = document.createElement("h4");
poph4.innerText = population;
popdiv.appendChild(poph4);
country.appendChild(popdiv);
var areadiv = document.createElement("div");
var areah4 = document.createElement("h4");
areah4.innerText = area;
areadiv.appendChild(areah4);
country.appendChild(areadiv);
return country;
}
f();
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
font-family: 'Open Sans', Arial;
font-size: 18px;
}
header{
display:flex;
justify-content: space-between;
padding: 22px 0;
color:rgb(5, 5, 5);
}
ul {
list-style: none;
list-style-type: none;
outline: 2px solid #ddd;
padding: 1rem 2rem;
border-radius: 0.5rem;
list-style-position: inside;
color: blue;
}
ul ol {
color: rgb(197, 105, 18);
list-style: none;
list-style-type: none;
font-size: .9em;
margin: 0.4rem 0;
}
.country{
display: flex;
justify-content: space-between;
}
.disp-flex{
display:flex;
justify-content: space-between;
}
.disp-flex > div{
width:23%;
padding:15px 0px;
}
.subregion-header>div:nth-child(1){
position: relative;
left: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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<header>
<div id="name">
<h1>Name-</h1>
</div>
<div id="capital">
<h1>Capital-</h1>
</div>
<div id="population">
<h1>Population-</h1>
</div>
<div id="area">
<h1>Area</h1>
</div>
</header>
<script src="script.js"></script>
</main>
</body>
</html>
Second thing, but not as important as first, I would also need to add feature of sorting and filtering each column after clicking div element on the very top. So for example after clicking AREA, on the header section, countries should be sorted by their area. And the filter option allowing to show only countries that, for example, start with letter 'A'.

You can group the subregions first like,
const subRegions = data.reduce((r, a) => {
r[a.subregion] = r[a.subregion] || [];
r[a.subregion].push(a);
return r;
}, {});
And then create a select element and inject the text and value respectively.
Then handle the onchange and get the slected subregion data instead of all at once like subRegions[subRegionName] .
Forked example:
let div = document.createElement('div');
document.body.appendChild(div);
let ul = document.createElement('ul');
div.appendChild(ul);
async function f() {
//fetching and sorting data by regions and subregions
const res = await fetch("https://restcountries.com/v3.1/all");
const data = await res.json();
data.sort((a, b) => {
if (a.region > b.region) return 1;
else if (a.region < b.region) return -1
else {
if (a.subregion > b.subregion) return 1;
else return -1;
}
});
const container = document.getElementById('container');
const select = document.createElement('select');
const olWrapper = document.getElementById('listWrapper');
const subRegionWrapper = document.getElementById('subRegionWrapper');
const subRegions = data.reduce((r, a) => {
r[a.subregion] = r[a.subregion] || [];
r[a.subregion].push(a);
return r;
}, {});
const dropdownValues = Object.keys(subRegions);
const firstOption = document.createElement('option');
firstOption.value = -1;
firstOption.text = "Select a Subregion";
select.appendChild(firstOption);
dropdownValues.forEach(item => {
const option = document.createElement('option');
option.value = item;
option.text = item;
select.appendChild(option);
});
container.appendChild(select);
select.onchange = (e) => {
olWrapper.innerHTML = '';
const subRegionName = e.target.value;
const filteredValues = subRegions[subRegionName];
const totalArea = filteredValues.reduce((acc, curr) => acc+curr.area,0);
const totalPopulation = filteredValues.reduce((acc, curr) => acc+curr.population,0);
const li = createSubregion(subRegionName, totalPopulation, totalArea);
ul.innerHTML = '';
ul.appendChild(li);
subRegionWrapper.appendChild(ul);
filteredValues.forEach(item => {
const subLi = createCountry(item.name.common, item.capital, item.area, item.population);
const subOl = document.createElement('ol');
subOl.appendChild(subLi);
olWrapper.appendChild(subOl);
})
};
}
function createSubregion(name, population, area) {
var li = document.createElement("li");
li.setAttribute("class", "subregion");
var header = document.createElement("div");
header.setAttribute("class", "subregion-header disp-flex");
var nameDiv = document.createElement("div");
var nameh2 = document.createElement("h2");
nameh2.innerText = name;
nameDiv.appendChild(nameh2);
header.append(nameDiv);
var emptyDiv = document.createElement("div");
header.appendChild(emptyDiv);
var populationDiv = document.createElement("div");
var populationh2 = document.createElement("h3");
populationh2.innerText = population;
populationDiv.appendChild(populationh2);
header.append(populationDiv);
var areaDiv = document.createElement("div");
var areah2 = document.createElement("h3");
areah2.innerText = area;
areaDiv.appendChild(areah2);
header.append(areaDiv);
li.appendChild(header);
return li;
}
function createCountry(name, capital, area, population) {
var country = document.createElement("li");
country.setAttribute("class", "country disp-flex")
var namediv = document.createElement("div");
var nameh4 = document.createElement("h4");
nameh4.innerText = name;
namediv.appendChild(nameh4);
country.appendChild(namediv);
var capitaldiv = document.createElement("div");
var capitalh4 = document.createElement("h4");
capitalh4.innerText = capital;
capitaldiv.appendChild(capitalh4);
country.appendChild(capitaldiv);
var popdiv = document.createElement("div");
var poph4 = document.createElement("h4");
poph4.innerText = population;
popdiv.appendChild(poph4);
country.appendChild(popdiv);
var areadiv = document.createElement("div");
var areah4 = document.createElement("h4");
areah4.innerText = area;
areadiv.appendChild(areah4);
country.appendChild(areadiv);
return country;
}
f();
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
font-family: 'Open Sans', Arial;
font-size: 18px;
}
header{
display:flex;
justify-content: space-between;
padding: 22px 0;
color:rgb(5, 5, 5);
}
ul {
list-style: none;
list-style-type: none;
outline: 2px solid #ddd;
padding: 1rem 2rem;
border-radius: 0.5rem;
list-style-position: inside;
color: blue;
}
ul ol {
color: rgb(197, 105, 18);
list-style: none;
list-style-type: none;
font-size: .9em;
margin: 0.4rem 0;
}
.country{
display: flex;
justify-content: space-between;
}
.disp-flex{
display:flex;
justify-content: space-between;
}
.disp-flex > div{
width:23%;
padding:15px 0px;
}
.subregion-header>div:nth-child(1){
position: relative;
left: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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<header>
<div id="name">
<h1>Name-</h1>
</div>
<div id="capital">
<h1>Capital-</h1>
</div>
<div id="population">
<h1>Population-</h1>
</div>
<div id="area">
<h1>Area</h1>
</div>
</header>
<div id="container"></div>
<div id="subRegionWrapper"> </div>
<div id="listWrapper"></div>
</script>
</main>
</body>
</html>
Update:
Here is the updated version with each sub region is grouped as an accordion and on toggle, the respective countries under the sub region were displayed..
let div = document.createElement('div');
document.body.appendChild(div);
let ul = document.createElement('ul');
div.appendChild(ul);
async function f() {
//fetching and sorting data by regions and subregions
const res = await fetch("https://restcountries.com/v3.1/all");
const data = await res.json();
data.sort((a, b) => {
if (a.region > b.region) return 1;
else if (a.region < b.region) return -1
else {
if (a.subregion > b.subregion) return 1;
else return -1;
}
});
const container = document.getElementById('container');
const accordion = document.createElement('div');
const olWrapper = document.getElementById('listWrapper');
const subRegionWrapper = document.getElementById('subRegionWrapper');
const subRegions = data.reduce((r, a) => {
r[a.subregion] = r[a.subregion] || [];
r[a.subregion].push(a);
return r;
}, {});
const dropdownValues = Object.entries(subRegions);
dropdownValues.forEach(subRegion => {
const accordionWrapper = document.createElement('div');
const panel = document.createElement('div');
panel.classList.add('panel');
accordionWrapper.classList.add('accordion');
const totalArea = subRegion[1].reduce((acc, curr) => acc+curr.area,0);
const totalPopulation = subRegion[1].reduce((acc, curr) => acc+curr.population,0);
const li = createSubregion(subRegion[0], totalPopulation, totalArea);
accordionWrapper.appendChild(li);
accordion.appendChild(accordionWrapper);
subRegion[1].forEach(item => {
const subLi = createCountry(item.name.common, item.capital, item.area, item.population);
const subOl = document.createElement('ol');
subOl.appendChild(subLi);
panel.appendChild(subOl);
accordion.appendChild(panel);
});
accordionWrapper.addEventListener('click', function() {
this.classList.toggle("active");
const panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
});
container.appendChild(accordion);
}
function createSubregion(name, population, area) {
var li = document.createElement("li");
li.setAttribute("class", "subregion");
var header = document.createElement("div");
header.setAttribute("class", "subregion-header disp-flex");
var nameDiv = document.createElement("div");
var nameh2 = document.createElement("h2");
nameh2.innerText = name;
nameDiv.appendChild(nameh2);
header.append(nameDiv);
var emptyDiv = document.createElement("div");
header.appendChild(emptyDiv);
var populationDiv = document.createElement("div");
var populationh2 = document.createElement("h3");
populationh2.innerText = population;
populationDiv.appendChild(populationh2);
header.append(populationDiv);
var areaDiv = document.createElement("div");
var areah2 = document.createElement("h3");
areah2.innerText = area;
areaDiv.appendChild(areah2);
header.append(areaDiv);
li.appendChild(header);
return li;
}
function createCountry(name, capital, area, population) {
var country = document.createElement("li");
country.setAttribute("class", "country disp-flex")
var namediv = document.createElement("div");
var nameh4 = document.createElement("h4");
nameh4.innerText = name;
namediv.appendChild(nameh4);
country.appendChild(namediv);
var capitaldiv = document.createElement("div");
var capitalh4 = document.createElement("h4");
capitalh4.innerText = capital;
capitaldiv.appendChild(capitalh4);
country.appendChild(capitaldiv);
var popdiv = document.createElement("div");
var poph4 = document.createElement("h4");
poph4.innerText = population;
popdiv.appendChild(poph4);
country.appendChild(popdiv);
var areadiv = document.createElement("div");
var areah4 = document.createElement("h4");
areah4.innerText = area;
areadiv.appendChild(areah4);
country.appendChild(areadiv);
return country;
}
f();
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aliceblue;
font-family: 'Open Sans', Arial;
font-size: 18px;
}
header{
display:flex;
justify-content: space-between;
padding: 22px 0;
color:rgb(5, 5, 5);
}
ul {
list-style: none;
list-style-type: none;
outline: 2px solid #ddd;
padding: 1rem 2rem;
border-radius: 0.5rem;
list-style-position: inside;
color: blue;
}
ul ol {
color: rgb(197, 105, 18);
list-style: none;
list-style-type: none;
font-size: .9em;
margin: 0.4rem 0;
}
.country{
display: flex;
justify-content: space-between;
}
.disp-flex{
display:flex;
justify-content: space-between;
}
.disp-flex > div{
width:23%;
padding:15px 0px;
}
.subregion-header>div:nth-child(1){
position: relative;
left:30px;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: 15px 2px;
}
.accordion li {
list-style-type: none;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<header>
<div id="name">
<h1>Name-</h1>
</div>
<div id="capital">
<h1>Capital-</h1>
</div>
<div id="population">
<h1>Population-</h1>
</div>
<div id="area">
<h1>Area</h1>
</div>
</header>
<div id="container"></div>
<div id="subRegionWrapper"> </div>
<div id="listWrapper"></div>
</script>
</main>
</body>
</html>

Why does my anime.js animation's not working everytime?

I got a problem with Anime.js, I got a project to do about a game with a dice and 2 players on the same screen. I would like to animate the background color and position depending on the active player (left or right). So I've made a div with a background, a negative z-index and a width of 50vw so it takes half of the screen. I placed the animation play() and reverse() into my switchPlayer function. My problem is that the background animation makes one "dead time" beetween 2 switch of player and I don't understand why.
Thanks for the help !
Here is my html
<!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="stylesheet" href="style.css">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
<title>Dice Game</title>
</head>
<body>
<div id="player-background"></div>
<!-- This is whre the whole game is contained -->
<div class="gameContainer">
<!-- Player one content -->
<div id="player1">
<h2>PLAYER 1</h2>
<span class="score" id="globalP1">0</span>
<div class="current">
<span class="cText">Current :</span>
<span id="roundP1">0</span>
</div>
</div>
<!-- Center content -->
<div id="center">
<button class="NewGame" id="new-game" type="button">NEW GAME</button>
<img alt="Dice" id="img" src="./images/1.png">
<button class="roll-dice" id="roll" type="button">ROLL DICE !</button>
<button id="hold" type="button">HOLD</button>
</div>
<!-- Player two content -->
<div id="player2">
<h2>PLAYER 2</h2>
<span class="score" id="globalP2">0</span>
<div class="current">
<span class="cText">Current :</span>
<span id="roundP2">0</span>
</div>
</div>
</div>
<script src="./node_modules/animejs/lib/anime.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
My css
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300;400&display=swap');
body {
margin: 0px;
overflow: hidden;
font-family: 'Lato', sans-serif;
/* background-image: url(images/GameBackground.png);
background-size: cover;
background-position: center; */
}
img {
height: 300px;
width: 300px;
padding: 200px 0px 150px 0px;
}
button {
background: none;
border: 0;
font-size: 50px;
}
.roll-dice {
padding-bottom: 25px;
}
.gameContainer {
display: flex;
justify-content: space-around;
align-items: center;
align-content: center;
height: 100vh;
width: 100vw;
z-index: 5;
}
#player-background {
position: absolute;
height: 100vh;
width: 50vw;
background: paleturquoise;
z-index: -5;
}
#player1, #player2, #center {
font-size: 50px;
font-weight: 300;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.score {
color: red;
font-size: 100px;
font-weight: 300;
display: flex;
margin-bottom: 250px;
}
.cText {
font-size: 30px;
}
.current {
display: flex;
align-items: center;
justify-content: space-evenly;
background: rgb(226, 226, 187);
height: 125px;
width: 350px;
}
And my JS
//------------------------ Get element variables ---------------
let newGame = document.getElementById("new-game");
let roll = document.getElementById("roll");
let hold = document.getElementById("hold");
let img = document.getElementById("img");
let globalP1 = document.getElementById("globalP1");
let roundP1 = document.getElementById("roundP1");
let globalP2 = document.getElementById("globalP2");
let roundP2 = document.getElementById("roundP2");
let backgroundTarget = document.getElementById("player-background");
//----------------------- Game variables ---------------
let activePlayer = 1;
//----------------------------Anime JS---------------------
let background = anime({
targets: backgroundTarget,
translateX: "50vw",
autoplay: false,
backgroundColor: "#676790",
});
//------------------ Functions used later ---------------
// Switch the player display depending on the situation
function switchPlayer() {
if (activePlayer == 1) {
background.reverse();
player1.style.opacity = "1";
player2.style.opacity = "0.3";
} else {
background.play();
player1.style.opacity = "0.3";
player2.style.opacity = "1";
}
}
let gameReset = () => {
// rewrite everything to "0"
roundP1.textContent = "0";
globalP1.textContent = "0";
roundP2.textContent = "0";
globalP2.textContent = "0";
// Force player one display
activePlayer = 1;
switchPlayer();
};
//--------------------- Main functions ----------------------
// Roll logic
let rollfunction = () => {
// Generates a random number between 1 to 6
let diceNumber = Math.floor(Math.random() * 6) + 1;
// Generate a string with the img path, including a random number between then display the img
let randomImg = "images/" + diceNumber + ".png";
// Used to get the img element then set the src attribute to randomImg (= images/1.png or any other numbers)
document.querySelector("img").setAttribute("src", randomImg);
if (activePlayer == 1 && diceNumber > 1) {
roll.textContent = "ROLL DICE !";
// puts the number into the current score
let totalCurrentP1 = roundP1.textContent;
// I had to put a "+" to make the addition possible beacause rounsP2.textContent is a string, the + is here to convert a string into a number
roundP1.textContent = +totalCurrentP1 + +diceNumber;
switchPlayer();
} else if (activePlayer == 1 && diceNumber == 1) {
// Switch player if dice = 1
roll.textContent = "NEXT PLAYER";
roundP1.textContent = "0";
activePlayer = activePlayer + 1;
switchPlayer();
} else if (activePlayer == 2 && diceNumber > 1) {
// Put score into P2 section
roll.textContent = "ROLL DICE !";
let totalCurrentP2 = roundP2.textContent;
roundP2.textContent = +totalCurrentP2 + +diceNumber;
} else {
// Switch to player 1 if player 2 get "1"
roundP2.textContent = "0";
roll.textContent = "NEXT PLAYER";
activePlayer = activePlayer - 1;
}
};
// Hold ogic
let holdFunction = () => {
let totalGlobalP1 = globalP1.textContent;
let totalGlobalP2 = globalP2.textContent;
let numberRoundP1 = roundP1.textContent;
let numberRoundP2 = roundP2.textContent;
if (activePlayer == 1 && +totalGlobalP1 + +numberRoundP1 < 100) {
globalP1.textContent = +totalGlobalP1 + +roundP1.textContent;
roundP1.textContent = "0";
activePlayer = 2;
switchPlayer();
// background.play();
} else if (activePlayer == 1 && +totalGlobalP1 + +numberRoundP1 >= 100) {
activePlayer = 1;
alert("P1 t'as gagné mon pote !");
gameReset();
// background.reverse();
} else if (activePlayer == 2 && +totalGlobalP2 + +numberRoundP2 < 100) {
globalP2.textContent = +totalGlobalP2 + +roundP2.textContent;
roundP2.textContent = "0";
activePlayer = 1;
switchPlayer();
// background.reverse();
} else if (activePlayer == 2 && +totalGlobalP2 + +numberRoundP2 >= 100) {
activePlayer = 2;
alert(
"Le joueur 2 a gagné cette manche ! (De toute façon c'était mon préféré"
);
gameReset();
}
};
//--------------------- Buttons ----------------------------
// Every buttons holding every functions
hold.addEventListener("click", () => {
holdFunction();
});
roll.addEventListener("click", () => {
rollfunction();
});
newGame.addEventListener("click", () => {
gameReset();
});
Tried :
Looked on stack overflow to see if someone else had this problem
Tried to look more in depth into the anime.js doc
Also tried to do a blank project only with this function but still this issue
Expecting :
Move the div left and right depending on the active player to see who's playing

how can i get the sum when someone click on my buttons and not to join them

I have made 3 buttons (10 $, 20 $ ,50$)
and i want when someone clicks a button to add the previous value.
But i get something like this when i click on my buttons 1020502010
Something im doing wrong in this part of the code
// function betBtn()
function bet10 () {
chipbeted.textContent += betc.bet10
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet20 () {
chipbeted.textContent += betc.bet20
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet50 (){
chipbeted.textContent += betc.bet50
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
let player = {
Name : "Nik",
Chips: 150
}
let cards = []
let sum = 0
let hasBlackjack = false
let isAlive = false
let betOn = false
let betc ={
bet10 : 10,
bet20 : 20,
bet50 : 50
}
let message = ""
let messageEl = document.getElementById("message-el")
let totalBet = document.getElementById("chipCount").textContent
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.getElementById("cards-el")
let chipbeted = document.getElementById("chipCount")
let playerEl = document.getElementById("playerEl")
playerEl.textContent = player.Name +":" +" " + player.Chips + "$"
console.log(cards)
function getRandomCard () {
let randomNumer = Math.floor( Math.random()*13 ) + 1
if (randomNumer > 10) {
return 10
} else if (randomNumer === 1) {
return 11
} else {
return randomNumer
}
}
let randomCard = getRandomCard()
function startGame (){
if (betOn === true){
isAlive = true
let firstCard = getRandomCard()
let secondCard = getRandomCard()
cards = [firstCard, secondCard]
sum = firstCard + secondCard
$('.class').css('visibility', 'hidden');
}
else if (betOn === false){
document.getElementById("messagewl").textContent = "First, select how many chips you want to BET"
sum= ""
}
renderGame()
}
function renderGame(){
cardsEl.textContent = "Cards: "
for ( let i=0; i<cards.length ; i++){
cardsEl.textContent += cards[i] + " "
}
sumEl.textContent = "Sum: " + sum
if ( sum <= 20) {
console.log(sum)
message = "Do you want to draw a new card? "
}
else if ( sum === 21){
console.log(sum)
message = "You've got Blackjack!"
hasBlackjack = true
}
else {
console.log(sum)
message = "You're out of the game!"
isAlive = false
}
messageEl.textContent = message
sumEl.textContent = "Sum: " + sum
}
function cardNew(){
if (isAlive === true && hasBlackjack === false) {
let card = getRandomCard()
sum += card
cards.push(card)
console.log(cards)
renderGame()
}
}
// function betBtn()
function bet10 () {
chipbeted.textContent += betc.bet10
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet20 () {
chipbeted.textContent += betc.bet20
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet50 (){
chipbeted.textContent += betc.bet50
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
html, body{
background-image: url("space.png");
background-size: cover;
background-attachment: fixed;
}
body {
color: aliceblue;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
text-align: center;
margin-top: 30px;
}
#h1 {
text-align: center;
}
h1 {
font-size: 4em;
display: inline-block;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
border-radius: 100px;
border: 30px;
padding: 0 10px;
text-align: center;
}
#buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
p{
font-size: 2em;
}
#btn {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
width:250px;
font-size: 2.5em;
color: aliceblue;
}
#btnBet > #btn10,#btn20,#btn50{
margin-top: 20px;
font-size: 30px;
font-weight: bold;
justify-content: center;
margin: 20 15 0 15;
}
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>blackjac Game</title>
</head>
<body>
<div class="h1">
<h1>Space Blackjack</h1>
</div>
<p id="message-el">Want to play a round?</p>
<p id="cards-el">Cards:</p>
<p id="sum-el">Sum:</p>
<p class= "class" id="messagewl"></p>
<div id="buttons">
<button id="btn" onclick="startGame()">Start Game</button>
<button id="btn" onclick="cardNew()">Draw Card</button>
<button id="btn" onclick="bet()">Bet Chips</button>
</div>
<div id="btnBet">
<button id="btn10" onclick="bet10()">10$</button>
<button id="btn20" onclick="bet20()">20$</button>
<button id="btn50" onclick="bet50()">50$</button>
</div>
<p id="chipCount"></p>
<p id="playerEl"></p>
<script src="index.js"></script>
</body>

This is happening because the variable chipbeted.textContent returns a string .. that's why you get concatenated result (for example: '20'+10 = 2010 not 30
)..
to solve this problem,
let chipbeted = document.getElementById("chipCount")
let betc = {
bet10: 10,
bet20: 20,
bet50: 50
}
function bet20() {
chipbeted.textContent = Number(chipbeted.textContent) + betc.bet20
//betOn = true
//$('.class').css('visibility', 'hidden');
//console.log(chipbeted.textContent)
}
<button onClick="bet20()">Add bet20</button>
<p id="chipCount"></p>
replace
chipbeted.textContent += betc.bet20
in your functions
with
chipbeted.textContent = Number(chipbeted.textContent) + betc.bet20

Salam . Try this in your function betBtn() :
chipbeted.textContent=parseInt(chipbeted.textContent)+betc.betBtn ;
Instead of this :
chipbeted.textContent += betc.betBtn

You have to convert the text fields value to Number first, than add the value to it. Otherwise the "+" operator means string concatenation.
chipbeted.textContent = Number(chipbeted.textContent)+betc.bet20
let player = {
Name : "Nik",
Chips: 150
}
let cards = []
let sum = 0
let hasBlackjack = false
let isAlive = false
let betOn = false
let betc ={
bet10 : 10,
bet20 : 20,
bet50 : 50
}
let message = ""
let messageEl = document.getElementById("message-el")
let totalBet = document.getElementById("chipCount").textContent
let sumEl = document.querySelector("#sum-el")
let cardsEl = document.getElementById("cards-el")
let chipbeted = document.getElementById("chipCount")
let playerEl = document.getElementById("playerEl")
playerEl.textContent = player.Name +":" +" " + player.Chips + "$"
console.log(cards)
function getRandomCard () {
let randomNumer = Math.floor( Math.random()*13 ) + 1
if (randomNumer > 10) {
return 10
} else if (randomNumer === 1) {
return 11
} else {
return randomNumer
}
}
let randomCard = getRandomCard()
function startGame (){
if (betOn === true){
isAlive = true
let firstCard = getRandomCard()
let secondCard = getRandomCard()
cards = [firstCard, secondCard]
sum = firstCard + secondCard
$('.class').css('visibility', 'hidden');
}
else if (betOn === false){
document.getElementById("messagewl").textContent = "First, select how many chips you want to BET"
sum= ""
}
renderGame()
}
function renderGame(){
cardsEl.textContent = "Cards: "
for ( let i=0; i<cards.length ; i++){
cardsEl.textContent += cards[i] + " "
}
sumEl.textContent = "Sum: " + sum
if ( sum <= 20) {
console.log(sum)
message = "Do you want to draw a new card? "
}
else if ( sum === 21){
console.log(sum)
message = "You've got Blackjack!"
hasBlackjack = true
}
else {
console.log(sum)
message = "You're out of the game!"
isAlive = false
}
messageEl.textContent = message
sumEl.textContent = "Sum: " + sum
}
function cardNew(){
if (isAlive === true && hasBlackjack === false) {
let card = getRandomCard()
sum += card
cards.push(card)
console.log(cards)
renderGame()
}
}
// function betBtn()
function bet10 () {
chipbeted.textContent = Number(chipbeted.textContent)+betc.bet10;
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet20 () {
chipbeted.textContent = Number(chipbeted.textContent)+betc.bet20 ;
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
function bet50 (){
chipbeted.textContent = Number(chipbeted.textContent)+betc.bet50;
betOn = true
$('.class').css('visibility', 'hidden');
console.log(chipbeted.textContent)
}
html, body{
background-image: url("space.png");
background-size: cover;
background-attachment: fixed;
}
body {
color: aliceblue;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
text-align: center;
margin-top: 30px;
}
#h1 {
text-align: center;
}
h1 {
font-size: 4em;
display: inline-block;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
border-radius: 100px;
border: 30px;
padding: 0 10px;
text-align: center;
}
#buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
p{
font-size: 2em;
}
#btn {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background: linear-gradient(246.26deg, #ED4683 0%, #F48E14 100%);
width:250px;
font-size: 2.5em;
color: aliceblue;
}
#btnBet > #btn10,#btn20,#btn50{
margin-top: 20px;
font-size: 30px;
font-weight: bold;
justify-content: center;
margin: 20 15 0 15;
}
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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>blackjac Game</title>
</head>
<body>
<div class="h1">
<h1>Space Blackjack</h1>
</div>
<p id="message-el">Want to play a round?</p>
<p id="cards-el">Cards:</p>
<p id="sum-el">Sum:</p>
<p class= "class" id="messagewl"></p>
<div id="buttons">
<button id="btn" onclick="startGame()">Start Game</button>
<button id="btn" onclick="cardNew()">Draw Card</button>
<button id="btn" onclick="bet()">Bet Chips</button>
</div>
<div id="btnBet">
<button id="btn10" onclick="bet10()">10$</button>
<button id="btn20" onclick="bet20()">20$</button>
<button id="btn50" onclick="bet50()">50$</button>
</div>
<p id="chipCount"></p>
<p id="playerEl"></p>
<script src="index.js"></script>
</body>

How to make the button to clear up the sketch?

I'm doing a project to make an etch-a-sketch every time I hover on the grid. What I'm trying to do is to make a button to clear up all the colors made.
The sketch picture.
I guess what I need to do is to remove the style elements while clicking the button. But I'm just note sure how to link the button with the style elements.
const container = document.querySelector(".container");
// const table = document.createElement('div');
// table.classList.add('grid-square');
// table.textContent = 'hello';
// container.appendChild(table);
function makeTable(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (i = 0; i < (rows * cols); i++){
const cell = document.createElement('div');
// cell.innerText = (i + 1);
container.appendChild(cell).className = "table";
};
};
makeTable(16, 16);
// const container = document.querySelector('.container')
const grids = document.querySelectorAll('.table')
grids.forEach(element => {
element.addEventListener('mouseover', (e) => {
e.target.style.backgroundColor = randomColor();
console.log(e)
})
});
function randomColor() {
var generateColor = '#' + Math.floor(Math.random()*16777215).toString(16);
return generateColor;
}
function resizeGrid() {
sketchSize = prompt("Enter 1 to 100 to resize sketch");
return sketchSize;
}
// const button = document.querySelector('button')
// button.addEventListener('click', (e) => {
// });
:root {
--grid-rows: 1;
--grid-cols: 1;
}
.container {
display: grid;
/* grid-gap: 1em; */
grid-template-rows: repeat(var(--grid-rows), 1fr);
grid-template-columns: repeat(var(--grid-cols), 1fr);
/* border: 1px solid black; */
width: 50%;
size: 960px;
}
.table {
padding: 1em;
border: 1px solid coral;
text-align: center;
/* border: none; */
}
header {
display: flex;
justify-content: center;
margin: 20px;
gap: 10px;
}
<!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>Etch-A-Sketch</title>
<script src="index.js" defer></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<button class="clear-button">Clear</button>
<button class="resize">Resize</button>
</header>
<div class="container"></div>
</body>
</html>
Cheers!!

To answer my own question, I figured how to do it.
const clear = document.querySelector('.clear-button')
clear.addEventListener('click', () => {
grids.forEach(element => {
element.style.backgroundColor = null;
})
})
I was struggling earlier because I'm not sure how to put other elements (e.g. grids) to the new eventListener.

Deleting background shape outline and creating column space (CSS)

I currently have this on my screen:
I am struggling to achieve the following: 1) delete the black shape outline in the background (you can see it between cards), and 2) create a white gap between each pair of adjacent cards.
Does anyone have any ideas on how to achieve this? Thank you very much!
I am pasting the code below:
HTML:
const SUITS = ["♥", "♦", "♠", "♣"];
const VALUES = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
class Deck{
constructor(cards = freshDeck()){
this.cards = cards
}
}
class Card{
constructor(suit, value){
this.suit = suit;
this.value = value;
}
get color(){
return this.suit === '♣'|| this.suit === '♠' ? 'black' : 'red'
}
// Create HTML for the card
getHTML(){
const cardDiv = document.createElement('div');
cardDiv.innerText = this.suit;
cardDiv.classList.add("card", this.color);
cardDiv.dataset.value = `${this.value} ${this.suit}`;
return cardDiv;
}
}
function freshDeck(){
return SUITS.flatMap(suit => {
return VALUES.map(value => {
return new Card(suit, value)
})
})
}
const deck = new Deck();
const clubsCardSlot = document.querySelector('.clubs');
const diamondsCardSlot = document.querySelector('.diamonds');
const heartsCardSlot = document.querySelector('.hearts');
const spadesCardSlot = document.querySelector('.spades');
const heartsCards = new Deck(deck.cards.slice(0,13));
const diamondsCards = new Deck(deck.cards.slice(13,26));
const spadesCards = new Deck(deck.cards.slice(26,39));
const clubsCards = new Deck(deck.cards.slice(39,52));
const heartA = heartsCards.cards[0];
const heart2 = heartsCards.cards[1];
const heart3 = heartsCards.cards[2];
const heart4 = heartsCards.cards[3];
const heart5 = heartsCards.cards[4];
const heart6 = heartsCards.cards[5];
const heart7 = heartsCards.cards[6];
const heart8 = heartsCards.cards[7];
const heart9 = heartsCards.cards[8];
const heart10 = heartsCards.cards[9];
const heartJ = heartsCards.cards[10];
const heartQ = heartsCards.cards[11];
const heartK = heartsCards.cards[12];
const diamondA = diamondsCards.cards[0];
const diamond2 = diamondsCards.cards[1];
const diamond3 = diamondsCards.cards[2];
const diamond4 = diamondsCards.cards[3];
const diamond5 = diamondsCards.cards[4];
const diamond6 = diamondsCards.cards[5];
const diamond7 = diamondsCards.cards[6];
const diamond8 = diamondsCards.cards[7];
const diamond9 = diamondsCards.cards[8];
const diamond10 = diamondsCards.cards[9];
const diamondJ = diamondsCards.cards[10];
const diamondQ = diamondsCards.cards[11];
const diamondK = diamondsCards.cards[12];
const spadeA = spadesCards.cards[0];
const spade2 = spadesCards.cards[1];
const spade3 = spadesCards.cards[2];
const spade4 = spadesCards.cards[3];
const spade5 = spadesCards.cards[4];
const spade6 = spadesCards.cards[5];
const spade7 = spadesCards.cards[6];
const spade8 = spadesCards.cards[7];
const spade9 = spadesCards.cards[8];
const spade10 = spadesCards.cards[9];
const spadeJ = spadesCards.cards[10];
const spadeQ = spadesCards.cards[11];
const spadeK = spadesCards.cards[12];
const clubA = clubsCards.cards[0];
const club2 = clubsCards.cards[1];
const club3 = clubsCards.cards[2];
const club4 = clubsCards.cards[3];
const club5 = clubsCards.cards[4];
const club6 = clubsCards.cards[5];
const club7 = clubsCards.cards[6];
const club8 = clubsCards.cards[7];
const club9 = clubsCards.cards[8];
const club10 = clubsCards.cards[9];
const clubJ = clubsCards.cards[10];
const clubQ = clubsCards.cards[11];
const clubK = clubsCards.cards[12];
heartsCardSlot.appendChild(heartA.getHTML());
heartsCardSlot.appendChild(heart2.getHTML());
heartsCardSlot.appendChild(heart3.getHTML());
heartsCardSlot.appendChild(heart4.getHTML());
heartsCardSlot.appendChild(heart5.getHTML());
heartsCardSlot.appendChild(heart6.getHTML());
heartsCardSlot.appendChild(heart7.getHTML());
heartsCardSlot.appendChild(heart8.getHTML());
heartsCardSlot.appendChild(heart9.getHTML());
heartsCardSlot.appendChild(heart10.getHTML());
heartsCardSlot.appendChild(heartJ.getHTML());
heartsCardSlot.appendChild(heartQ.getHTML());
heartsCardSlot.appendChild(heartK.getHTML());
diamondsCardSlot.appendChild(diamondA.getHTML());
diamondsCardSlot.appendChild(diamond2.getHTML());
diamondsCardSlot.appendChild(diamond3.getHTML());
diamondsCardSlot.appendChild(diamond4.getHTML());
diamondsCardSlot.appendChild(diamond5.getHTML());
diamondsCardSlot.appendChild(diamond6.getHTML());
diamondsCardSlot.appendChild(diamond7.getHTML());
diamondsCardSlot.appendChild(diamond8.getHTML());
diamondsCardSlot.appendChild(diamond9.getHTML());
diamondsCardSlot.appendChild(diamond10.getHTML());
diamondsCardSlot.appendChild(diamondJ.getHTML());
diamondsCardSlot.appendChild(diamondQ.getHTML());
diamondsCardSlot.appendChild(diamondK.getHTML());
spadesCardSlot.appendChild(spadeA.getHTML());
spadesCardSlot.appendChild(spade2.getHTML());
spadesCardSlot.appendChild(spade3.getHTML());
spadesCardSlot.appendChild(spade4.getHTML());
spadesCardSlot.appendChild(spade5.getHTML());
spadesCardSlot.appendChild(spade6.getHTML());
spadesCardSlot.appendChild(spade7.getHTML());
spadesCardSlot.appendChild(spade8.getHTML());
spadesCardSlot.appendChild(spade9.getHTML());
spadesCardSlot.appendChild(spade10.getHTML());
spadesCardSlot.appendChild(spadeJ.getHTML());
spadesCardSlot.appendChild(spadeQ.getHTML());
spadesCardSlot.appendChild(spadeK.getHTML());
clubsCardSlot.appendChild(clubA.getHTML());
clubsCardSlot.appendChild(club2.getHTML());
clubsCardSlot.appendChild(club3.getHTML());
clubsCardSlot.appendChild(club4.getHTML());
clubsCardSlot.appendChild(club5.getHTML());
clubsCardSlot.appendChild(club6.getHTML());
clubsCardSlot.appendChild(club7.getHTML());
clubsCardSlot.appendChild(club8.getHTML());
clubsCardSlot.appendChild(club9.getHTML());
clubsCardSlot.appendChild(club10.getHTML());
clubsCardSlot.appendChild(clubJ.getHTML());
clubsCardSlot.appendChild(clubQ.getHTML());
clubsCardSlot.appendChild(clubK.getHTML());
*, *::after, *::before {
box-sizing: border-box;
}
body {
margin: 2;
display:grid;
grid-template-columns: 1000px;
grid-template-rows: 7rem 2 rem 7rem 2 rem 7 rem 2 rem 7rem;
column-gap: 3rem;
row-gap: 1.5rem;
cursor: pointer;
justify-content: center;
padding-top: 5rem;
}
div {
outline: none;
font-size: 100px;
width:50%;
}
.card-slot{
height: 100%;
width: 100%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
border-radius: 0.5rem;
color: white;
user-select: none;
}
.gap{
grid-column: span 13;
display: flex;
justify-content: center;
align-items: center;
}
.card{
position: relative;
height: 100%;
width: 100%;
border: 1px solid black;
border-radius: .5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 6rem;
}
.card.red{
color: red;
}
.card.black{
color: black;
}
.card::before,
.card::after{
position: absolute;
content: attr(data-value);
font-size: 0.9rem;
}
.card::before{
top: .5rem;
left: .5rem;
}
.card::after{
bottom: .5rem;
right: .5rem;
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="eng-UK">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Card Game</title>
<script src = "scripts/card-game/card_game_screenshot.js" type = "module"></script>
<link rel="stylesheet" href= "styles/card-game/styles_screenshot.css">
</head>
<body>
<div class="clubs card-slot"></div>
<div class="gap"></div>
<div class="diamonds card-slot"></div>
<div class="gap"></div>
<div class="hearts card-slot"></div>
<div class="gap"></div>
<div class="spades card-slot"></div>
</body>
</html>

There is 2 things to edit :
Remove the border for the card-slot
Add margin-right to the class card
const SUITS = ["♥", "♦", "♠", "♣"];
const VALUES = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
class Deck{
constructor(cards = freshDeck()){
this.cards = cards
}
}
class Card{
constructor(suit, value){
this.suit = suit;
this.value = value;
}
get color(){
return this.suit === '♣'|| this.suit === '♠' ? 'black' : 'red'
}
// Create HTML for the card
getHTML(){
const cardDiv = document.createElement('div');
cardDiv.innerText = this.suit;
cardDiv.classList.add("card", this.color);
cardDiv.dataset.value = `${this.value} ${this.suit}`;
return cardDiv;
}
}
function freshDeck(){
return SUITS.flatMap(suit => {
return VALUES.map(value => {
return new Card(suit, value)
})
})
}
const deck = new Deck();
const clubsCardSlot = document.querySelector('.clubs');
const diamondsCardSlot = document.querySelector('.diamonds');
const heartsCardSlot = document.querySelector('.hearts');
const spadesCardSlot = document.querySelector('.spades');
const heartsCards = new Deck(deck.cards.slice(0,13));
const diamondsCards = new Deck(deck.cards.slice(13,26));
const spadesCards = new Deck(deck.cards.slice(26,39));
const clubsCards = new Deck(deck.cards.slice(39,52));
const heartA = heartsCards.cards[0];
const heart2 = heartsCards.cards[1];
const heart3 = heartsCards.cards[2];
const heart4 = heartsCards.cards[3];
const heart5 = heartsCards.cards[4];
const heart6 = heartsCards.cards[5];
const heart7 = heartsCards.cards[6];
const heart8 = heartsCards.cards[7];
const heart9 = heartsCards.cards[8];
const heart10 = heartsCards.cards[9];
const heartJ = heartsCards.cards[10];
const heartQ = heartsCards.cards[11];
const heartK = heartsCards.cards[12];
const diamondA = diamondsCards.cards[0];
const diamond2 = diamondsCards.cards[1];
const diamond3 = diamondsCards.cards[2];
const diamond4 = diamondsCards.cards[3];
const diamond5 = diamondsCards.cards[4];
const diamond6 = diamondsCards.cards[5];
const diamond7 = diamondsCards.cards[6];
const diamond8 = diamondsCards.cards[7];
const diamond9 = diamondsCards.cards[8];
const diamond10 = diamondsCards.cards[9];
const diamondJ = diamondsCards.cards[10];
const diamondQ = diamondsCards.cards[11];
const diamondK = diamondsCards.cards[12];
const spadeA = spadesCards.cards[0];
const spade2 = spadesCards.cards[1];
const spade3 = spadesCards.cards[2];
const spade4 = spadesCards.cards[3];
const spade5 = spadesCards.cards[4];
const spade6 = spadesCards.cards[5];
const spade7 = spadesCards.cards[6];
const spade8 = spadesCards.cards[7];
const spade9 = spadesCards.cards[8];
const spade10 = spadesCards.cards[9];
const spadeJ = spadesCards.cards[10];
const spadeQ = spadesCards.cards[11];
const spadeK = spadesCards.cards[12];
const clubA = clubsCards.cards[0];
const club2 = clubsCards.cards[1];
const club3 = clubsCards.cards[2];
const club4 = clubsCards.cards[3];
const club5 = clubsCards.cards[4];
const club6 = clubsCards.cards[5];
const club7 = clubsCards.cards[6];
const club8 = clubsCards.cards[7];
const club9 = clubsCards.cards[8];
const club10 = clubsCards.cards[9];
const clubJ = clubsCards.cards[10];
const clubQ = clubsCards.cards[11];
const clubK = clubsCards.cards[12];
heartsCardSlot.appendChild(heartA.getHTML());
heartsCardSlot.appendChild(heart2.getHTML());
heartsCardSlot.appendChild(heart3.getHTML());
heartsCardSlot.appendChild(heart4.getHTML());
heartsCardSlot.appendChild(heart5.getHTML());
heartsCardSlot.appendChild(heart6.getHTML());
heartsCardSlot.appendChild(heart7.getHTML());
heartsCardSlot.appendChild(heart8.getHTML());
heartsCardSlot.appendChild(heart9.getHTML());
heartsCardSlot.appendChild(heart10.getHTML());
heartsCardSlot.appendChild(heartJ.getHTML());
heartsCardSlot.appendChild(heartQ.getHTML());
heartsCardSlot.appendChild(heartK.getHTML());
diamondsCardSlot.appendChild(diamondA.getHTML());
diamondsCardSlot.appendChild(diamond2.getHTML());
diamondsCardSlot.appendChild(diamond3.getHTML());
diamondsCardSlot.appendChild(diamond4.getHTML());
diamondsCardSlot.appendChild(diamond5.getHTML());
diamondsCardSlot.appendChild(diamond6.getHTML());
diamondsCardSlot.appendChild(diamond7.getHTML());
diamondsCardSlot.appendChild(diamond8.getHTML());
diamondsCardSlot.appendChild(diamond9.getHTML());
diamondsCardSlot.appendChild(diamond10.getHTML());
diamondsCardSlot.appendChild(diamondJ.getHTML());
diamondsCardSlot.appendChild(diamondQ.getHTML());
diamondsCardSlot.appendChild(diamondK.getHTML());
spadesCardSlot.appendChild(spadeA.getHTML());
spadesCardSlot.appendChild(spade2.getHTML());
spadesCardSlot.appendChild(spade3.getHTML());
spadesCardSlot.appendChild(spade4.getHTML());
spadesCardSlot.appendChild(spade5.getHTML());
spadesCardSlot.appendChild(spade6.getHTML());
spadesCardSlot.appendChild(spade7.getHTML());
spadesCardSlot.appendChild(spade8.getHTML());
spadesCardSlot.appendChild(spade9.getHTML());
spadesCardSlot.appendChild(spade10.getHTML());
spadesCardSlot.appendChild(spadeJ.getHTML());
spadesCardSlot.appendChild(spadeQ.getHTML());
spadesCardSlot.appendChild(spadeK.getHTML());
clubsCardSlot.appendChild(clubA.getHTML());
clubsCardSlot.appendChild(club2.getHTML());
clubsCardSlot.appendChild(club3.getHTML());
clubsCardSlot.appendChild(club4.getHTML());
clubsCardSlot.appendChild(club5.getHTML());
clubsCardSlot.appendChild(club6.getHTML());
clubsCardSlot.appendChild(club7.getHTML());
clubsCardSlot.appendChild(club8.getHTML());
clubsCardSlot.appendChild(club9.getHTML());
clubsCardSlot.appendChild(club10.getHTML());
clubsCardSlot.appendChild(clubJ.getHTML());
clubsCardSlot.appendChild(clubQ.getHTML());
clubsCardSlot.appendChild(clubK.getHTML());
*, *::after, *::before {
box-sizing: border-box;
}
body {
margin: 2;
display:grid;
grid-template-columns: 1000px;
grid-template-rows: 7rem 2 rem 7rem 2 rem 7 rem 2 rem 7rem;
column-gap: 3rem;
row-gap: 1.5rem;
cursor: pointer;
justify-content: center;
padding-top: 5rem;
}
div {
outline: none;
font-size: 100px;
width:50%;
}
.card-slot{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
border-radius: 0.5rem;
color: white;
user-select: none;
}
.gap{
grid-column: span 13;
display: flex;
justify-content: center;
align-items: center;
}
.card{
position: relative;
height: 100%;
width: 100%;
border: 1px solid black;
border-radius: .5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 6rem;
margin-right: 5px;
}
.card.red{
color: red;
}
.card.black{
color: black;
}
.card::before,
.card::after{
position: absolute;
content: attr(data-value);
font-size: 0.9rem;
}
.card::before{
top: .5rem;
left: .5rem;
}
.card::after{
bottom: .5rem;
right: .5rem;
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="eng-UK">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Card Game</title>
<script src = "scripts/card-game/card_game_screenshot.js" type = "module"></script>
<link rel="stylesheet" href= "styles/card-game/styles_screenshot.css">
</head>
<body>
<div class="clubs card-slot"></div>
<div class="gap"></div>
<div class="diamonds card-slot"></div>
<div class="gap"></div>
<div class="hearts card-slot"></div>
<div class="gap"></div>
<div class="spades card-slot"></div>
</body>
</html>

const SUITS = ["♥", "♦", "♠", "♣"];
const VALUES = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
class Deck{
constructor(cards = freshDeck()){
this.cards = cards
}
}
class Card{
constructor(suit, value){
this.suit = suit;
this.value = value;
}
get color(){
return this.suit === '♣'|| this.suit === '♠' ? 'black' : 'red'
}
// Create HTML for the card
getHTML(){
const cardDiv = document.createElement('div');
cardDiv.innerText = this.suit;
cardDiv.classList.add("card", this.color);
cardDiv.dataset.value = `${this.value} ${this.suit}`;
return cardDiv;
}
}
function freshDeck(){
return SUITS.flatMap(suit => {
return VALUES.map(value => {
return new Card(suit, value)
})
})
}
const deck = new Deck();
const clubsCardSlot = document.querySelector('.clubs');
const diamondsCardSlot = document.querySelector('.diamonds');
const heartsCardSlot = document.querySelector('.hearts');
const spadesCardSlot = document.querySelector('.spades');
const heartsCards = new Deck(deck.cards.slice(0,13));
const diamondsCards = new Deck(deck.cards.slice(13,26));
const spadesCards = new Deck(deck.cards.slice(26,39));
const clubsCards = new Deck(deck.cards.slice(39,52));
const heartA = heartsCards.cards[0];
const heart2 = heartsCards.cards[1];
const heart3 = heartsCards.cards[2];
const heart4 = heartsCards.cards[3];
const heart5 = heartsCards.cards[4];
const heart6 = heartsCards.cards[5];
const heart7 = heartsCards.cards[6];
const heart8 = heartsCards.cards[7];
const heart9 = heartsCards.cards[8];
const heart10 = heartsCards.cards[9];
const heartJ = heartsCards.cards[10];
const heartQ = heartsCards.cards[11];
const heartK = heartsCards.cards[12];
const diamondA = diamondsCards.cards[0];
const diamond2 = diamondsCards.cards[1];
const diamond3 = diamondsCards.cards[2];
const diamond4 = diamondsCards.cards[3];
const diamond5 = diamondsCards.cards[4];
const diamond6 = diamondsCards.cards[5];
const diamond7 = diamondsCards.cards[6];
const diamond8 = diamondsCards.cards[7];
const diamond9 = diamondsCards.cards[8];
const diamond10 = diamondsCards.cards[9];
const diamondJ = diamondsCards.cards[10];
const diamondQ = diamondsCards.cards[11];
const diamondK = diamondsCards.cards[12];
const spadeA = spadesCards.cards[0];
const spade2 = spadesCards.cards[1];
const spade3 = spadesCards.cards[2];
const spade4 = spadesCards.cards[3];
const spade5 = spadesCards.cards[4];
const spade6 = spadesCards.cards[5];
const spade7 = spadesCards.cards[6];
const spade8 = spadesCards.cards[7];
const spade9 = spadesCards.cards[8];
const spade10 = spadesCards.cards[9];
const spadeJ = spadesCards.cards[10];
const spadeQ = spadesCards.cards[11];
const spadeK = spadesCards.cards[12];
const clubA = clubsCards.cards[0];
const club2 = clubsCards.cards[1];
const club3 = clubsCards.cards[2];
const club4 = clubsCards.cards[3];
const club5 = clubsCards.cards[4];
const club6 = clubsCards.cards[5];
const club7 = clubsCards.cards[6];
const club8 = clubsCards.cards[7];
const club9 = clubsCards.cards[8];
const club10 = clubsCards.cards[9];
const clubJ = clubsCards.cards[10];
const clubQ = clubsCards.cards[11];
const clubK = clubsCards.cards[12];
heartsCardSlot.appendChild(heartA.getHTML());
heartsCardSlot.appendChild(heart2.getHTML());
heartsCardSlot.appendChild(heart3.getHTML());
heartsCardSlot.appendChild(heart4.getHTML());
heartsCardSlot.appendChild(heart5.getHTML());
heartsCardSlot.appendChild(heart6.getHTML());
heartsCardSlot.appendChild(heart7.getHTML());
heartsCardSlot.appendChild(heart8.getHTML());
heartsCardSlot.appendChild(heart9.getHTML());
heartsCardSlot.appendChild(heart10.getHTML());
heartsCardSlot.appendChild(heartJ.getHTML());
heartsCardSlot.appendChild(heartQ.getHTML());
heartsCardSlot.appendChild(heartK.getHTML());
diamondsCardSlot.appendChild(diamondA.getHTML());
diamondsCardSlot.appendChild(diamond2.getHTML());
diamondsCardSlot.appendChild(diamond3.getHTML());
diamondsCardSlot.appendChild(diamond4.getHTML());
diamondsCardSlot.appendChild(diamond5.getHTML());
diamondsCardSlot.appendChild(diamond6.getHTML());
diamondsCardSlot.appendChild(diamond7.getHTML());
diamondsCardSlot.appendChild(diamond8.getHTML());
diamondsCardSlot.appendChild(diamond9.getHTML());
diamondsCardSlot.appendChild(diamond10.getHTML());
diamondsCardSlot.appendChild(diamondJ.getHTML());
diamondsCardSlot.appendChild(diamondQ.getHTML());
diamondsCardSlot.appendChild(diamondK.getHTML());
spadesCardSlot.appendChild(spadeA.getHTML());
spadesCardSlot.appendChild(spade2.getHTML());
spadesCardSlot.appendChild(spade3.getHTML());
spadesCardSlot.appendChild(spade4.getHTML());
spadesCardSlot.appendChild(spade5.getHTML());
spadesCardSlot.appendChild(spade6.getHTML());
spadesCardSlot.appendChild(spade7.getHTML());
spadesCardSlot.appendChild(spade8.getHTML());
spadesCardSlot.appendChild(spade9.getHTML());
spadesCardSlot.appendChild(spade10.getHTML());
spadesCardSlot.appendChild(spadeJ.getHTML());
spadesCardSlot.appendChild(spadeQ.getHTML());
spadesCardSlot.appendChild(spadeK.getHTML());
clubsCardSlot.appendChild(clubA.getHTML());
clubsCardSlot.appendChild(club2.getHTML());
clubsCardSlot.appendChild(club3.getHTML());
clubsCardSlot.appendChild(club4.getHTML());
clubsCardSlot.appendChild(club5.getHTML());
clubsCardSlot.appendChild(club6.getHTML());
clubsCardSlot.appendChild(club7.getHTML());
clubsCardSlot.appendChild(club8.getHTML());
clubsCardSlot.appendChild(club9.getHTML());
clubsCardSlot.appendChild(club10.getHTML());
clubsCardSlot.appendChild(clubJ.getHTML());
clubsCardSlot.appendChild(clubQ.getHTML());
clubsCardSlot.appendChild(clubK.getHTML());
*, *::after, *::before {
box-sizing: border-box;
}
body {
margin: 2;
display:grid;
grid-template-columns: 1000px;
grid-template-rows: 7rem 2 rem 7rem 2 rem 7 rem 2 rem 7rem;
column-gap: 3rem;
row-gap: 1.5rem;
cursor: pointer;
justify-content: center;
padding-top: 5rem;
}
div {
outline: none;
font-size: 100px;
width:50%;
}
.card-slot{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
border-radius: 0.5rem;
color: white;
user-select: none;
}
.gap{
grid-column: span 13;
display: flex;
justify-content: center;
align-items: center;
}
.card{
margin-left: 0.05em;
position: relative;
height: 100%;
width: 100%;
border: 1px solid black;
border-radius: .5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 6rem;
}
.card.red{
color: red;
}
.card.black{
color: black;
}
.card::before,
.card::after{
position: absolute;
content: attr(data-value);
font-size: 0.9rem;
}
.card::before{
top: .5rem;
left: .5rem;
}
.card::after{
bottom: .5rem;
right: .5rem;
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="eng-UK">
<head>
<meta charset="UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Card Game</title>
<script src = "scripts/card-game/card_game_screenshot.js" type = "module"></script>
<link rel="stylesheet" href= "styles/card-game/styles_screenshot.css">
</head>
<body>
<div class="clubs card-slot"></div>
<div class="gap"></div>
<div class="diamonds card-slot"></div>
<div class="gap"></div>
<div class="hearts card-slot"></div>
<div class="gap"></div>
<div class="spades card-slot"></div>
</body>
</html>