API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 20th, 2019
66
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 11.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.     <head>
  9.         <title>TODO supply a title</title>
  10.         <meta charset="UTF-8">
  11.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12.         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  13.         <style>
  14.             input[type=button]{
  15.                 width: 120px;
  16.                 height: 30px;
  17.                 background-color: darkblue;
  18.                 border-style: none;
  19.                 border-radius: 6px;
  20.                 font-size: 30px;
  21.                
  22.             }
  23.             body{background-color: lightblue;
  24.                  
  25.             }
  26.             #cont{
  27.                 margin-left: 290px;
  28.  
  29.             }
  30.             img{
  31.                 width: 150px;
  32.                 height: 150px;
  33.                 margin: 10px;
  34.             }
  35.             #typy{
  36.                 margin-top: -5px;
  37.                 position: absolute;
  38.                 background-color: black;
  39.                 margin-left: 27%;
  40.                
  41.             }
  42.             .pamieci{
  43.                 float: left;
  44.                 border: solid 2px;
  45.                 margin: 10px;
  46.                 margin-top: 30px;
  47.                 background-color: black;
  48.                 color: white;
  49.             }
  50.             .inp{
  51.                 margin-left: 45px;
  52.             }
  53.             .inpp{
  54.                 margin-left: 70px;
  55.             }
  56.             #cena{
  57.                 float: left;
  58.                 height: 50px;
  59.                 width: 80px;
  60.                 background-color: lightgreen;
  61.                 margin-left: -297px;
  62.                 border-radius: 5px;
  63.                 position: absolute;
  64.             }
  65.  
  66.             input[type=submit]{
  67.                 background-color: red;
  68.                 border-radius:6px;
  69.                 border-style: none;
  70.                 text-align: center;
  71.                
  72.             }
  73.            
  74.             .txtarea{
  75.                 float:left;
  76.                 position: fixed;
  77.                 margin-top: 30px;
  78.             }
  79.            
  80.         </style>
  81.        
  82.     </head>
  83.     <body>
  84.         <div id="typy">
  85.             <input type="button" value="DDR1" onclick="pamieci(this.value);">
  86.             <input type="button" value="DDR2" onclick="pamieci(this.value);">
  87.             <input type="button" value="DDR3" onclick="pamieci(this.value);">
  88.             <input type="button" value="DDR4" onclick="pamieci(this.value);">
  89.             <input type="button" value="Koszyk" onclick='wyswietlKoszyk();'>
  90.         </div>
  91.        
  92.         <div id="cont">
  93.            
  94.         </div>
  95.         <div id="pods">
  96.            
  97.         </div>
  98.        
  99.            
  100.      
  101.         <script>
  102.             pamiecRAM = {
  103.                 'RAM001': {'id':'1', 'typ': 'DDR1', 'pojemnosc': "500MB", 'taktowanie': "2400", "netto": "200,99zł", 'producent': 'GoodRam', 'obraz': 'ddr1.jpg'},
  104.                 'RAM002': {'id':'2', 'typ': 'DDR1', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "100zł", 'producent': 'GoodRam', 'obraz': 'ddr1.jpg'},
  105.                 'RAM003': {'id':'3', 'typ': 'DDR4', 'pojemnosc': "6GB", 'taktowanie': "2400", "netto": "300,50zł", 'producent': 'GoodRam', 'obraz': 'ddr4.jpg'},
  106.                 'RAM004': {'id':'4', 'typ': 'DDR2', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "180,49zł", 'producent': 'GoodRam', 'obraz': 'ddr2.jpg'},
  107.                 'RAM005': {'id':'5', 'typ': 'DDR4', 'pojemnosc': "8GB", 'taktowanie': "2400", "netto": "400zł", 'producent': 'GoodRam', 'obraz': 'ddr4.jpg'},
  108.                 'RAM006': {'id':'6', 'typ': 'DDR1', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "130,89zł", 'producent': 'GoodRam', 'obraz': 'ddr1.jpg'},
  109.                 'RAM007': {'id':'7', 'typ': 'DDR2', 'pojemnosc': "2GB", 'taktowanie': "2400", "netto": "190,19zł", 'producent': 'GoodRam', 'obraz': 'ddr2.jpg'},
  110.                 'RAM008': {'id':'8', 'typ': 'DDR3', 'pojemnosc': "4GB", 'taktowanie': "2400", "netto": "250,99zł", 'producent': 'GoodRam', 'obraz': 'ddr3.jpg'},
  111.                 'RAM009': {'id':'9', 'typ': 'DDR1', 'pojemnosc': "500MB", 'taktowanie': "2400", "netto": "70zł", 'producent': 'GoodRam', 'obraz': 'ddr1.jpg'},
  112.                 'RAM010': {'id':'10', 'typ': 'DDR4', 'pojemnosc': "8GB", 'taktowanie': "3000", "netto": "370zł", 'producent': 'GoodRam', 'obraz': 'ddr4.jpg'},
  113.                 'RAM011': {'id':'11', 'typ': 'DDR2', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "180,49zł", 'producent': 'GoodRam', 'obraz': 'ddr2.jpg'},
  114.                 'RAM012': {'id':'12', 'typ': 'DDR2', 'pojemnosc': "1GB", 'taktowanie': "2400", "netto": "140,49zł", 'producent': 'GoodRam', 'obraz': 'ddr2.jpg'},
  115.                 'RAM013': {'id':'13', 'typ': 'DDR3', 'pojemnosc': "4GB", 'taktowanie': "2400", "netto": "210,99zł", 'producent': 'GoodRam', 'obraz': 'ddr3.jpg'},
  116.                 'RAM014': {'id':'14', 'typ': 'DDR3', 'pojemnosc': "2GB", 'taktowanie': "2400", "netto": "190zł", 'producent': 'GoodRam', 'obraz': 'ddr3.jpg'},
  117.                 'RAM015': {'id':'15', 'typ': 'DDR3', 'pojemnosc': "4GB", 'taktowanie': "2400", "netto": "250zł", 'producent': 'GoodRam', 'obraz': 'ddr3.jpg'},
  118.                 'RAM016': {'id':'16', 'typ': 'DDR4', 'pojemnosc': "8GB", 'taktowanie': "2400", "netto": "320,49zł", 'producent': 'GoodRam', 'obraz': 'ddr4.jpg'}
  119.             };
  120.            
  121.             function pamieci(typ){
  122.                 var html = "";
  123.                 var zmien = 0;
  124.                 for(i in pamiecRAM){
  125.                     if(pamiecRAM[i]['typ']===typ){
  126.                         html+= "<div class='pamieci'>";
  127.                         html+= "<img src="+pamiecRAM[i]['obraz']+">";
  128.                         html+= "<ul style='list-style-type:square'>\n\
  129.                                <li>"+pamiecRAM[i]['typ']+"</li>";
  130.                         html+= "<li>"+pamiecRAM[i]['pojemnosc']+"</li>";
  131.                         html+= "<li>"+pamiecRAM[i]['taktowanie']+"MHz</li>";
  132.                         html+= "<li>"+pamiecRAM[i]['producent']+"</li>";
  133.                         html+= "<li>"+pamiecRAM[i]['netto']+"</li></ul>";
  134.                         html+= "<input id=" +i+ " class='inp' type='submit' value='Do koszyka' onclick='DoKoszyka(this.id)'>";
  135.                         html+= "</div>";
  136.                         zmien++;
  137.                     }
  138.                    
  139.                 }
  140.                 document.getElementById("cont").innerHTML = html;
  141.             }
  142.            
  143.             class koszyk{
  144.                 constructor(index, ilosc,p){
  145.                     this.p=p;
  146.                     this.index = index;
  147.                     this.ilosc = ilosc;
  148.                 }
  149.             }
  150.             var produkt = new Array();
  151.            
  152.             function DoKoszyka(index){
  153.                 var exists=false;
  154.                 for(let i=0; i<produkt.length; i++){
  155.                     if(produkt[i].index===index){
  156.                         produkt[i].ilosc++;
  157.                         exists=true;
  158.                         break;
  159.                     }
  160.                 }
  161.                 if(exists === false){
  162.                     produkt.push(new koszyk(index, 1));
  163.                    
  164.                 }
  165.             }
  166.            
  167.            
  168.             function wyswietlKoszyk(){
  169.                 var html = "";
  170.                 var pods ="";
  171.                 var zmien=0;
  172.                 suma = 0;
  173.                 for(var i=0; i<produkt.length; i++){
  174.                     html+= "<div class='pamieci'>";
  175.                     html+= "<img src="+pamiecRAM[produkt[i].index]['obraz']+">";
  176.                     html+= "<ul style='list-style-type:square'>\n\
  177.                            <li>"+pamiecRAM[produkt[i].index]['typ']+"</li>";
  178.                     html+= "<li>"+pamiecRAM[produkt[i].index]['pojemnosc']+"</li>";
  179.                     html+= "<li>"+pamiecRAM[produkt[i].index]['taktowanie']+"MHz</li>";
  180.                     html+= "<li>"+pamiecRAM[produkt[i].index]['netto']+"</li>";
  181.                     html+= "<li>"+pamiecRAM[produkt[i].index]['producent']+"</li></ul>";
  182.                     html+= "<br>Ilość: <input type='number' min=1 value="+produkt[i].ilosc+" \n\
  183.                                onchange='zmienIlosc("+i+",this)'><br>";
  184.            
  185.                     html+= "<input type='hidden' class='typ' value='"+ pamiecRAM[produkt[i].index].typ +"'>";
  186.                     html+= "<input type='hidden' class='pojemnosc' value='"+ pamiecRAM[produkt[i].index].pojemnosc +"'>";
  187.                     html+= "<input type='hidden' class='taktowanie' value='"+ pamiecRAM[produkt[i].index].taktowanie +"'>";
  188.                     html+= "<input type='hidden' class='netto' value='"+ pamiecRAM[produkt[i].index].netto +"'>";
  189.                     html+= "<input type='hidden' class='producent' value='"+ pamiecRAM[produkt[i].index].producent +"'>";
  190.          
  191.                     html+= "<class='przycisk'><input id=" +i+ " class='inpp' type='submit' value='Usun' onclick='usun(this)'>";
  192.                     html+= "</div>";
  193.                     zmien++;
  194.                    
  195.                     suma+= parseFloat(produkt[i].ilosc*pamiecRAM[produkt[i].index].netto);
  196.                    
  197.                     html+="<div id='cena'> Cena: " +suma;
  198.                     html+="</div>";
  199.                    
  200.                    
  201.                     document.getElementById('cont').innerHTML=html;
  202.                    
  203.                    
  204.                     }
  205.                     pods+= "<br><br><br><table style='position:fixed; float:left; margin-top:-150px'> <tr><td> Uzupełnij dane:<br> <br> Imię: </td><td><br> <br><input id='imie' type='text' placeholder='np. Jan'></td></tr>";
  206.                     pods+= "<br><tr><td>Nazwisko:  </td><td><input id='nazwisko' type='text' placeholder='np. Kowalski'></td></tr>";
  207.                     pods+= "<br><tr><td>Adres:  </td><td><input id='adres' type='text' placeholder='np. Szczawa 100'></td></tr>";
  208.                     pods+= "<br><tr><td>Kod pocztowy:  </td><td><input id='kod' type='text' placeholder='np. 34-607'></td></tr>";
  209.                     pods+= "<br><tr><td>Numer kontaktowy:  </td><td><input id='tel' type='text' placeholder='np.555 555 555'></td></tr> ";
  210.                     pods+="<br><tr><td><input id='pods' style='font-size: 10px; position:fixed; float:left;' type='button' value='Podsumuj' onclick='podsumuj()'> </td></tr><br><br>";
  211.                    
  212.                     pods+= "<tr><td><textarea class='txtarea' name='info'>"+text+"</textarea></td></tr><br><br>";
  213.                     pods+= "<br><br><tr><td><input id='kup' style='font-size: 10px; position:fixed; float:left;margin-top:90px;' type='button' value='Zamów produkty!' onclick='mail()'> </td></tr><br><br></table>";
  214.                    
  215.                     document.getElementById('pods').innerHTML=pods;
  216.                    
  217.                 }
  218.             text="";
  219.             function podsumuj(){
  220.                    
  221.                     text+="Imie: "+document.getElementById("imie").value+"\n";
  222.                     text+="Nazwisko: "+document.getElementById("nazwisko").value+"\n";
  223.                     text+="Adres: "+document.getElementById("adres").value+"\n";
  224.                     text+="Kod pocztowy: "+document.getElementById("kod").value+"\n";
  225.                     text+="Telefon: "+document.getElementById("tel").value;
  226.                    
  227.                     wyswietlKoszyk();
  228.             }
  229.            
  230.             function mail(){
  231.                
  232.             }
  233.            
  234.             function usun(i){
  235.                 produkt.splice(i, 1);
  236.                 wyswietlKoszyk();
  237.                
  238.             }
  239.            
  240.             function zmienIlosc(index, element){
  241.                 produkt[index].ilosc = element.value;
  242.                 wyswietlKoszyk();
  243.                
  244.             }
  245.            
  246.  
  247.            
  248.            
  249.         </script>
  250.     </body>
  251.    
  252. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!