zygzakemciqueen

Kolorwanie:
Status:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
<!DOCTYPE html>
<html lang="pl">
<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>Kino</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="body">
  <div class="input-group mb-3">
        <div class="input-group-prepend">
          <label class="input-group-text" for="inputGroupSelect01">Wybierz miasto</label>
        </div>
        <select class="custom-select" id="kina">
          <option selected>Wybierz kino</option>
          <option value="1">Zbęchy</option>
          <option value="2">Poznań</option>
          <option value="3">Książ śmietnik</option>
        </select>
    </div>
      <div class="container">
        <div class="row">
            <div id="sala"></div>
            <div id="pods"></div>
        </div>
      </div>
      <script src="script.js"></script>
</body>
</html>

var licz=0;
var click = false;
let suma = 0;

let kino = document.getElementById('kina').addEventListener("change", function(e){  //nasłuchuje czy parametr
   let wyb = e.target.selectedIndex; //tworzysz zmienna wyb której przypisujesz coś even element target czyli cel i selectid przypisuje 1,2,3,4, wyborą na stronie
    
if(wyb== 1){  //wybór kina
    let sala = document.getElementById("sala"); //pobiera id z diva
    let sal = '';
    for(let i=0; i<100; i++){   //ilość miejsc
        licz++; //daje numerki w każdym divie
        sal += "<div class='miejsce' style='background-color:green;'>"+licz+"</div>";  //do zmiennej sal dodajesz to co już jest i div czyli miejsce kwadraciki z miejsce no i musisz mieć styl kolor kwadracika zielony
    }
    sala.innerHTML = sal; //podmieniasz pod sala żeby się wyświetlały na zielono
    document.querySelectorAll('.miejsce').forEach(el => { //to jest jak getelementyid tylko że możesz wybrać przez id albo klase do tego .miejsce (znaczy klasa) i robisz pętle dla każdego (el czyli nazwa zmiennej element) dla każdego elemtu robisz funkcje (=>)
        el.addEventListener('click', wybor) //dla każdego kwadracika tego zielonego przy kliknięciu robi się funkcja wybór
        
    });
    cena=1000;
    suma=0;
    licz=0;

}

else if (wyb == 2){  //wybór kina
    let sala = document.getElementById("sala");
    let sal = '';
    for(let i=0; i<50; i++){  //ilość miejsc
        licz++;
        sal += "<div class='miejsce' style='background-color:green;'>"+licz+"</div>";
    }
    sala.innerHTML = sal;
    document.querySelectorAll('.miejsce').forEach(el => {
        el.addEventListener('click', wybor)
        
    });
    cena=20;
    licz=0;
    suma=0;
}

else if (wyb == 3){  //wybór kina
    let sala = document.getElementById("sala");
    let sal = '';
    for(let i=0; i<20; i++){  //ilość miejsc
        licz++;
        sal += "<div class='miejsce' style='background-color:green;'>"+licz+"</div>";
    }
    sala.innerHTML = sal;
    document.querySelectorAll('.miejsce').forEach(el => {
        el.addEventListener('click', wybor)
        
    });
    cena=1;
    licz=0;
    suma=0;
}
else {
    
}
})
function wybor(e){

    if(e.target.style.backgroundColor == 'green'){ //funkcja ktra przyjmuje warto element czyli (e) ten kwadracik zielony i zmienia si na czerwonu i do sumuy dodaje cene i wywietla ile zostao do zapaty
        e.target.style.backgroundColor = 'red';
        suma += cena;  
        document.getElementById('pods').innerHTML ="Do zapaty: "+suma+"z";
        
    }
    else if(e.target.style.backgroundColor == 'red'){  //i to jest odwrotne czerwone na zielone
        e.target.style.backgroundColor = 'green';  
        suma -= cena;
        document.getElementById('pods').innerHTML ="Do zapaty: "+suma+"z";
        
    }
}

.miejsce{
    padding: 25px;
    text-align: center;
    border: solid 1px;
    text-align: center;
    display: flex;
    justify-content: center;
    color: white
}

#sala{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

}
#body{
background-color: #990066;

}
.input-group-prepend{
    text-align: center;
    color: pink;
    margin: 50px;

}

}
#kina{
  margin-top: 5px;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
    
}


Copyrights 2014-2019 © Wklejaj.pl Wszelkie prawa zastrzeżone.