i want it so if the card is heart or diamaond the text color is red.The red cards are not appearing in the game since most of the cards ar esuall black. explain this and fix it. write short and simple code to fix these issues. since its black most of the time. The other modules (kasi.js, pakka.js, kortti.js, maa.js) are connected to one javascript called kayttoliittyma.js
import { Pakka } from “./moduulit/pakka.js”;
import { Kasi } from “./moduulit/kasi.js”;
import { Maa } from “./moduulit/maa.js”;

const pelaajankasi = Kasi.luoKasi();
const jakajankasi = Kasi.luoKasi();
const pakka = Pakka.luoPakka();

const pelaajaElementit = document.querySelectorAll(“#pelaajan-kortit > .kortti”);
const jakajaElementit = document.querySelectorAll(“#jakajan-kortit > .kortti”);
const tulos = document.getElementById(“tulos”);
const otaKorttiButton = document.getElementById(“ota-kortti”);
const jaaButton = document.getElementById(“jaa”);
const uusiPeliButton = document.getElementById(“uusi-peli”);

function paivitaKortit(elementit, kortit) {
for (let i = 0; i < elementit.length; i++) {
if (kortit[i]) {
// Delay card display for jakaja
if (elementit === jakajaElementit) {
setTimeout(() => {
elementit[i].innerHTML = kortit[i].toString();
if (kortit[i].maa.vari === “punainen”) {
elementit[i].classList.add(“punainen”);
elementit[i].classList.remove(“musta”);
} else {
elementit[i].classList.add(“musta”);
elementit[i].classList.remove(“punainen”);
}
}, 500 * (i + 1));
} else {
elementit[i].innerHTML = kortit[i].toString();
if (kortit[i].maa.vari === “punainen”) {
elementit[i].classList.add(“punainen”);
elementit[i].classList.remove(“musta”);
} else {
elementit[i].classList.add(“musta”);
elementit[i].classList.remove(“punainen”);
}
}
} else {
elementit[i].innerHTML = “”;
elementit[i].classList.remove(“musta”);
elementit[i].classList.remove(“punainen”);
}
}
}

function paivitaTulos() {
tulos.innerHTML = Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
}

function aloitaPeli() {
pakka.sekoita();
pelaajankasi.lisaaKortti(pakka.otaKortti());
jakajankasi.lisaaKortti(pakka.otaKortti());
paivitaKortit(pelaajaElementit, pelaajankasi.kortit);
paivitaKortit(jakajaElementit, [jakajankasi.kortit[0], null]);
paivitaTulos();
}

function jakajaVuoro() {
while (jakajankasi.summa < 17) {
jakajankasi.lisaaKortti(pakka.otaKortti());
}
paivitaKortit(jakajaElementit, jakajankasi.kortit);
paivitaTulos();
if (jakajankasi.summa > 21 || pelaajankasi.summa > jakajankasi.summa) {
tulos.innerHTML = Pelaaja voitti! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
} else if (pelaajankasi.summa < jakajankasi.summa) {
tulos.innerHTML = Jakaja voitti! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
} else {
tulos.innerHTML = Tasapeli! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
}
otaKorttiButton.disabled = true;
jaaButton.disabled = true;
uusiPeliButton.disabled = false;
}

otaKorttiButton.addEventListener(“click”, () => {
pelaajankasi.lisaaKortti(pakka.otaKortti());
paivitaKortit(pelaajaElementit, pelaajankasi.kortit);
paivitaTulos();
if (pelaajankasi.summa > 21) {
tulos.innerHTML = Hävisit! Pelaajan summa: {pelaajankasi.summa} | Jakajan summa:{jakajankasi.summa};
otaKorttiButton.disabled = true;
jaaButton.disabled = true;
uusiPeliButton.disabled = false;
}
});

jaaButton.addEventListener(“click”, () => {
paivitaKortit(jakajaElementit, jakajankasi.kortit);
jaaButton.disabled = true; // Disable the jaa button
jakajaVuoro();
});

uusiPeliButton.addEventListener(“click”, () => {
window.location.reload();
});

aloitaPeli();

the other modules:kasi.js/* Kasi (käsi) -luokka edustaa pelaajan tai jakajan kättä. Pakka-luokan aliluokkana se saa kaikki Pakka-luokan metodit. /
/ Lisäksi se osaa laskea kädessä olevien korttien summan ja kertoa niiden määrän. /

import {Kortti} from “./kortti.js”;
import {Pakka} from “./pakka.js”;

export class Kasi extends Pakka {
constructor() {
super();
}

/ Staattinen metodi eli sitä kutsutaan luokan kautta: Kasi.luoKasi(); /
/ Palauttaa uuden Kasi-olion eli tyhjän käden. Ei voi kutsua olioissa. /
static luoKasi() {
let apukasi = new Kasi();
return apukasi;
}

/ Palauttaa kädessä olevien korttien määrän. /
/ Tämä on ns. getteri eli sitä käytetään olion ominaisuutena, ei funktiona (eli ilman sulkuja). Esim. let maara = omaPakka.kortteja; /
get kortteja() {
return this.kortit.length;
}

/ Palauttaa kädessä olevien korttien summan. /
get summa() {
return this.kortit.reduce((summa,kortti)=>summa+kortti.arvo,0);
}

};kortti.js/ Tämä moduuli määrittelee yhden pelikortin. /

export class Kortti {

/ Konstruktori uusien korttien luomiseen. maa-parametri on Maa-tyypin vakio, arvo numero. /
/ Vain Pakka-luokan käyttöön. Ei tarkoitettu käytettäväksi suoraan käyttöliittymästä. /
constructor(maa, arvo) {
this.maa = maa;
this.arvo = arvo;
}

/ Palauttaa kortissa näytettävän arvosymbolin (A, J, Q, K tai numero). /
/ Tämä on ns. getteri eli sitä käytetään olion ominaisuutena, ei funktiona (eli ilman sulkuja). Esim. console.log(omaKortti.arvosymboli); /
get arvosymboli() {
switch(this.arvo) {
case 1:
return “A”;
case 11:
return “J”;
case 12:
return “Q”;
case 13:
return “K”;
default:
return this.arvo;
}
}

/ Palauttaa kortin tiedot merkkijonona. Ei hyödyllinen graafista käyttöliittymää tehdessä. /
toString() {
return {this.maa.symboli}{this.arvo};
}
};maa.js:/ Tämä moduuli sisältää maiden (pata, risti, hertta, ruutu) määrittelyt. /
/ Ominaisuuksiin viitataan pistenotaatiolla, eli esim. jos muuttujan nimi on maa, niin maa.nimi, maa.symboli tai maa.vari. /

export const Maa={
PATA:Object.freeze({nimi:‘pata’, symboli:‘\u2660’, vari:‘musta’}),
RISTI:Object.freeze({nimi:‘risti’, symboli:‘\u2663’, vari:‘musta’}),
HERTTA:Object.freeze({nimi:‘hertta’, symboli:‘\u2665’, vari:‘punainen’}),
RUUTU:Object.freeze({nimi:‘ruutu’, symboli:‘\u2666’, vari:‘punainen’})
};pakka.js:/ Pakka-luokka edustaa yhtä korttipakkaa eli 52 korttia. /

import {Maa} from “./maa.js”;
import {Kortti} from “./kortti.js”;

export class Pakka{

/ Konstruktori. Kun Pakka-luokasta luodaan olio, se saa tyhjän taulukon korteille. /
/ Tätä ei ole tarkoitus kutsua ulkopuolelta, vain luoPakka-metodin kautta. /
constructor() {
this.kortit=[];
}

/ Lisää kortin (Kortti-olion) tähän pakkaan. Tästä metodista on enemmän hyötyä aliluokassa Kasi. /
lisaaKortti(uusiKortti){
this.kortit.push(uusiKortti);
}

/ Poistaa kortin tästä pakasta ja palauttaa sen. /
otaKortti() {
return this.kortit.pop();
}

/ Sekoittaa pakan eli laittaa kortit satunnaiseen järjestykseen. /
sekoita() {
if(this.kortit.length<2) {
return;
}
else {
for(let i=0; i<this.kortit.length; i++){
let indA=Math.floor(Math.random()this.kortit.length);
let indB=Math.floor(Math.random()this.kortit.length);
[this.kortit[indA], this.kortit[indB]]=[this.kortit[indB],this.kortit[indA]];
}
}
}

/ Staattinen metodi eli sitä kutsutaan luokan kautta: Pakka.luoPakka(); /
/ Palauttaa uuden Pakka-olion, jossa on 52 korttia. Ei voi kutsua olioissa. /
static luoPakka() {
let apupakka=new Pakka();
for(let i=1; i<=13; i++) {
apupakka.lisaaKortti(new Kortti(Maa.HERTTA, i));
apupakka.lisaaKortti(new Kortti(Maa.RUUTU, i));
apupakka.lisaaKortti(new Kortti(Maa.PATA, i));
apupakka.lisaaKortti(new Kortti(Maa.RISTI,i));
}
return apupakka;
}

/ Palauttaa pakan tiedot merkkijonona. Ei hyödyllinen graafista käyttöliittymää tehdessä. /
toString() {
return this.kortit.map(Kortti=>Kortti.toString()).join(', ');
}
};css: {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
background-color: rgb(24, 24, 24);
font-family: “Lato”, sans-serif;
}

img {
height: 1000px;
padding-bottom: 50px;
padding-top: 50px;
display: flex;
flex-direction: column;
margin: 0 auto;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

h1 {
font-weight: 300;
}
h2 {
margin: 32px 0;
text-align: center;
color: white;
}

h3 {
color: white;
margin: 20px 0;
margin: 32px 0;
text-align: center;
}

p {
margin: 16px 0;
line-height: 1.5;
color: white;
}

/ Header /
header {
text-align: center;
background: url(https://images.unsplash.com/photo-1501003878151-d3cb87799705?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)
no-repeat fixed center center/cover;
}

header .container {
padding: 48px;
}

header nav ul {
list-style-type: none;
margin-top: 32px;
}

header nav ul li {
display: inline-block;
}

header nav ul li a,
.logo a {
text-decoration: none;
display: block;
color: white;
padding: 0 16px;
}

.logo a {
font-size: 40px;
}

/ Hero Banner/
#hero-banner {
min-height: 500px;
}

#hero-banner h2 {
font-size: 70px;
color: white;
text-align: center;
padding-top: 150px;
}

#projects,
#about,
#skills {
padding: 50px;
min-height: 500px;
}

@media only screen and (max-width: 400px) {
#hero-banner h2 {
font-size: 300%;
color: white;
text-align: center;
padding-top: 150px;
}
}

.container {
margin: 0 auto;
}

.content {
text-align: center;
padding-bottom: 2rem;
color: coral;
list-style-type: none;
}

/* Footer /
footer {
background-color: rgb(0, 0, 0);
text-align: center;
color: rgb(255, 255, 255);
font-size: 12px;
padding: 8px;
}

footer form {
margin: 0 auto;
width: 60%;
text-align: center;
}

footer form .form-group {
margin: 2rem 0;
display: flex;
}

footer form label {
width: 200px;
display: inline-block;
text-align: left;
}

footer form .form-group input,
footer form .form-group textarea {
padding: 0.5rem 1rem;
border-radius: 5px;
border: none;
width: 60%;
font-size: 1rem;
}

footer form .form-group textarea {
min-height: 100px;
}

button {
background-color: black;
text-transform: uppercase;
border-radius: 5px;
border: none;
padding: 8px;
color: #fff;
font-size: 16px;
}

#pelipoyta button {
background-color: black;
text-transform: uppercase;
border-radius: 5px;
border: none;
padding: 10px 20px;
color: #fff;
font-size: 16px;
margin-top: 20px;
}

#rekisteroidy {
background-color: coral;
text-transform: uppercase;
border-radius: 5px;
border: none;
padding: 1rem 2rem;
color: #fff;
font-size: inherit;
}

.piilotettu {
display: none;
}

.tehtävät {
text-align: center;
padding: 3rem 2rem;
}

hr {
margin: auto;
margin-bottom: 40px;
margin-top: 40px;
width: 70%;
}

#textstyle4 {
display: none;
}

#kortit {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 120px 120px 120px;
justify-content: center;
align-items: center;
padding-bottom: 20px;
}

h3 {
color: white;
margin: 20px 0;
text-align: center;
}

#valikko ul {
list-style: none;
width: 150px;
margin: 0;
padding: 5px;
font-weight: bold;
text-align: center;
}

#valikko a {
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-top: 15px;
}

#valikko ul li:not(:first-child) {
display: none;
}

#valikko ul li:first-child {
border: 3px solid white;
border-radius: 10%; / make the border circular /
display: block;
height: 30px;
cursor: pointer;
margin: 0 auto;
}

#valikko {
width: 10%; / or 90% /
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}

{
box-sizing: border-box;
}

#pelipoyta {
background-color: #007f7f;
padding: 20px;
border: 3px solid #000000;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
}

#napit {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

#ota-kortti,
#jaa,
#uusi-peli {
background-color: coral;
text-transform: uppercase;
border-radius: 5px;
border: none;
padding: 10px 20px;
color: #fff;
font-size: 16px;
margin: 0 10px;
}

#pelaajan-kortit,
#jakajan-kortit {
display: flex;
justify-content: center;
margin-bottom: 20px;
width: 100%;
}

.kortti {
display: inline-block;
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 100px;
height: 140px;
text-align: center;
line-height: 80px;
font-size: 40px;
font-family: Arial, sans-serif;
border-radius: 5px;
}

.musta,
.punainen {
background-color: #ffffff;
}

.kortti span {
display: block;
}

.kortti .symboli {
text-align: center;
font-size: 30px;
}

.musta .symboli {
color: #000000;
}

.punainen .symboli {
color: #ff0000;
}

.kortti .tokanumero {
transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}

#tulos {
text-align: center;
padding: 20px;
font-size: 20px;
font-weight: bold;
height: 60px;
width: 100%;
}

@media screen and (max-width: 768px) {
#pelipoyta {
width: 90%;
}
#pelaajan-kortit,
#jakajan-kortit {
flex-wrap: wrap;
}
.kortti {
width: 80px;
height: 110px;
font-size: 30px;
line-height: 50px;
}
}