make functional simple javascript code for kayttoliittyma.js based on isntructions. make the code for kayttoliittyma to get the other module js to work. give me the complete code. make sure the html buttons work(<div id="napit">
            <button id="ota-kortti">Ota kortti</button>
            <button id="jaa">Jää</button>
            <button id="uusi-peli">Uusi peli</button>
          </div>). there are four modules, kasi.js, kortti.js, maa.js and pakka.js, which are located ina  folder named moduulit in the same directory as kayttoliittyma.js. write the javascript code for kayttoliittyma.js to make the ventti game to work. make sure its functional. give the whole ced and if it cuts off then contnue the code from where it left off.  to start the game. instructions: Toteuta ventti-peli luokilla ja olioilla hyödyntäen tässä annettuja valmismoduuleja. Tutustu tarkasti ohjelman kuvaukseen teoriasivulla “Ventti luokilla ja olioilla” sekä moduulien koodiin ja kommentteihin. Voit myös hyödyntää aikaisemmassa Ventti-tehtävässä olevaa ohjelmarunkoa. make sure the html buttons also work and make sure the modules are connected to the kayttoliittyma.js in order for the game to work.

Tallenna ohjelma kansioon “ventti2” ja linkitä siihen Tehtäviä-sivulta. javascript modules. 1.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(', ');
  }
};
)2.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'})
};) 3.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}`;
  }
};)4.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);
  }

};) html: <head>
    <meta charset="UTF-8" id="charset" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title id="title">David Derama</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <script type="module" src="js/kayttoliittyma.js" defer></script>
  </head><div class="sisältö">
        <div id="pelipoyta">
          <div id="napit">
            <button id="ota-kortti">Ota kortti</button>
            <button id="jaa">Jää</button>
            <button id="uusi-peli">Uusi peli</button>
          </div>

          <div id="pelaajan-kortit">
            <div id="pelaaja1" class="kortti"></div>
            <div id="pelaaja2" class="kortti"></div>
            <div id="pelaaja3" class="kortti"></div>
            <div id="pelaaja4" class="kortti"></div>
            <div id="pelaaja5" class="kortti"></div>
          </div>

          <div id="tulos">Aloita peli painamalla "Uusi peli" -nappia.</div>

          <div id="jakajan-kortit">
            <div id="jakaja1" class="kortti"></div>
            <div id="jakaja2" class="kortti"></div>
            <div id="jakaja3" class="kortti"></div>
            <div id="jakaja4" class="kortti"></div>
            <div id="jakaja5" class="kortti"></div>
          </div>
        </div>
      </div>
css:#pelipoyta {
    background-color: rgba(21, 133, 21, 0.575);
    padding: 30px;
    border: 3px solid #000000;
    display: inline-block;
}

#napit {
    margin-bottom: 20px;
}

#uusi-peli {
    float: right;
}

#pelaajan-kortit, #jakajan-kortit {
    display: flex;
}

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

.kortti {
    border: 1px solid #000000;
    border-radius: 15px;
    width: 90px;
    height: 120px;
    display: inline-block;
    margin: 5px;
    padding: 20px;
}

.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 { 
    -moz-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -ms-transform: scale(-1, -1);
    transform: scale(-1, -1);
}