Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>TODO supply a title</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- header {
- text-align: center;
- }
- footer {
- position: fixed;
- top: 98%;
- left: 50%;
- margin-left: auto;
- margin-right: auto;
- width: 50;
- }
- img {
- width: 100%;
- height: 100%;
- }
- figure {
- width: 380px;
- height: 380px;
- margin: 10px;
- display: inline-block;
- border-style: solid;
- }
- .menuButtons {
- float: left;
- background-color: gray;
- width: 24.5%;
- height: 50px;
- border-style: solid;
- border-width: 1px;
- text-align: center;
- }
- #cont {
- display: inline-block;
- margin: 10px;
- }
- #koszyk {
- display: none;
- margin: 10px;
- }
- </style>
- </head>
- <body>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <header>Nagłówek</header>
- <div id="menu">
- <div id="ddr1" class="menuButtons">ddr1</div>
- <div id="ddr2" class="menuButtons">ddr2</div>
- <div id="ddr3" class="menuButtons">ddr3</div>
- <div id="koszykButton" class="menuButtons">Koszyk</div>
- </div>
- <div id="cont">
- </div>
- <input type="button" value="<" id="back">
- <input type="button" value=">" id="forward">
- <div id="koszyk"></div>
- <footer>Stopka</footer>
- <script>
- var pamieci = [
- {nazwa: "pamiec1_1",typ: "ddr1",pojemnosc: "1gb",taktowanie: "1000mhz",cena: "100zl",producent: "goodram",obraz: "ram1.jpg"},
- {nazwa: "pamiec1_2",typ: "ddr1",pojemnosc: "2gb",taktowanie: "1000mhz",cena: "100zl",producent: "badram",obraz: "ram1.jpg"},
- {nazwa: "pamiec1_3",typ: "ddr1",pojemnosc: "3gb",taktowanie: "1000mhz",cena: "150zl",producent: "badram",obraz: "ram2.jpg"},
- {nazwa: "pamiec1_4",typ: "ddr1",pojemnosc: "4gb",taktowanie: "1000mhz",cena: "150zl",producent: "badram",obraz: "ram2.jpg"},
- {nazwa: "pamiec2_1",typ: "ddr2",pojemnosc: "1gb",taktowanie: "1000mhz",cena: "200zl",producent: "goodram",obraz: "ram2.jpg"},
- {nazwa: "pamiec2_2",typ: "ddr2",pojemnosc: "4gb",taktowanie: "2000mhz",cena: "200zl",producent: "goodram",obraz: "ram1.jpg"},
- {nazwa: "pamiec2_3",typ: "ddr2",pojemnosc: "1gb",taktowanie: "1000mhz",cena: "200zl",producent: "goodram",obraz: "ram2.jpg"},
- {nazwa: "pamiec2_4",typ: "ddr2",pojemnosc: "4gb",taktowanie: "2000mhz",cena: "200zl",producent: "goodram",obraz: "ram1.jpg"},
- {nazwa: "pamiec3_1",typ: "ddr3",pojemnosc: "8gb",taktowanie: "3000mhz",cena: "300zl",producent: "goodram",obraz: "ram2.jpg"},
- {nazwa: "pamiec3_2",typ: "ddr3",pojemnosc: "16gb",taktowanie: "4000mhz",cena: "300zl",producent: "goodram",obraz: "ram2.jpg"},
- {nazwa: "pamiec3_3",typ: "ddr3",pojemnosc: "8gb",taktowanie: "3000mhz",cena: "300zl",producent: "goodram",obraz: "ram2.jpg"},
- {nazwa: "pamiec3_4",typ: "ddr3",pojemnosc: "16gb",taktowanie: "4000mhz",cena: "300zl",producent: "goodram",obraz: "ram2.jpg"},
- ]
- class elementKoszyka {
- constructor(index,ilosc) {
- this.index = index;
- this.ilosc = ilosc;
- }
- ustawIlosc(x) {
- this.ilosc = x;
- }
- }
- var ddr1 = [];
- var ddr2 = [];
- var ddr3 = [];
- var strona = 0;
- var wyswietlane;
- var wyswietlaneNaRaz = 4;
- var koszyk = [];
- for(let i=0; i<wyswietlaneNaRaz; i++) {
- $("#cont").append(`
- <figure>
- <img id="img${i}" src="">
- <figcaption id="img${i}c"></figcaption>
- </figure>
- `);
- }
- for(pamiec of pamieci) {
- if(pamiec.typ === "ddr1") {
- ddr1.push(pamiec);
- }
- if(pamiec.typ === "ddr2") {
- ddr2.push(pamiec);
- }
- if(pamiec.typ === "ddr3") {
- ddr3.push(pamiec);
- }
- }
- wyswietl(ddr1);
- $("#ddr1").on("click", function(){
- strona = 0;
- wyswietl(ddr1);
- });
- $("#ddr2").on("click", function(){
- strona = 0;
- wyswietl(ddr2);
- });
- $("#ddr3").on("click", function(){
- strona = 0;
- wyswietl(ddr3);
- });
- $("#forward").on("click", function(){
- strona += 1;
- if(strona > wyswietlane.length-2) strona -= 1;
- wyswietl(wyswietlane);
- });
- $("#back").on("click", function(){
- strona -= 1;
- if(strona < 0) strona = 0;
- wyswietl(wyswietlane);
- });
- function wyswietl(list) {
- wyswietlane = list;
- $("#cont").css("display", "inline-block");
- $("#koszyk").css("display", "none");
- var wys = [];
- for(let i=0; i<wyswietlaneNaRaz; i++) {
- wys.push(list[i+strona]);
- }
- for(let i=0; i<wys.length; i++) {
- $(`#img${i}`).attr("src", wys[i].obraz);
- $(`#img${i}c`).html(
- "nazwa: " + wys[i].nazwa + "<br>"+
- "pojemnosc: " + wys[i].pojemnosc + "<br>"+
- "taktowanie " + wys[i].taktowanie+"<br>"+
- "cena" + wys[i].cena+"<br>"+
- `<input type='button', value='dodaj do koszyka', id='koszyk${i}'>`
- );
- $(`#koszyk${i}`).on("click", function(){
- let index = pamieci.indexOf(wys[i]);
- for(element of koszyk) {
- if(element.index == index) {
- element.ilosc += 1;
- return;
- }
- }
- koszyk.push(new elementKoszyka(index, 1));
- });
- }
- }
- $("#koszykButton").on("click", wyswietlKoszyk);
- function wyswietlKoszyk() {
- $("#cont").css("display", "none");
- $("#koszyk").css("display", "inline-block");
- $("#koszyk").html("");
- let suma = 0;
- for(let i=0; i<koszyk.length; i++) {
- let id = koszyk[i].index;
- let nazwa = pamieci[id].nazwa;
- let cena = pamieci[id].cena;
- let ilosc = koszyk[i].ilosc;
- suma += parseFloat(cena)*ilosc;
- $("#koszyk").append(
- `<input type='button' value='X' id='usun${i}'>`+
- "Id:"+id+", "+
- "Nazwa:"+nazwa+", "+
- "Cena:"+cena+", "+
- "Ilość:"+`<input type='number' value='${ilosc}' min='1' id='ilosc${i}'>`+
- "<br>"
- );
- $("#usun"+i).on("click", function(){
- koszyk.splice(i,1);
- wyswietlKoszyk();
- });
- $("#ilosc"+i).on("change", function(){
- koszyk[i].ustawIlosc(parseInt(this.value));
- wyswietlKoszyk();
- });
- }
- $("#koszyk").append("Suma:" + suma);
- wygenerujZamowienie()
- }
- function wygenerujZamowienie() {
- tekst = "";
- for(let i=0; i<koszyk.length; i++) {
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement