Document

├── img └── pizza.jpg ├── plugin.js ├── masalalar ├── index.html └── main.js ├── style.css ├── main.js └── index.html /img/pizza.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusupovbekmurod/modul_3_imtihon/HEAD/img/pizza.jpg -------------------------------------------------------------------------------- /plugin.js: -------------------------------------------------------------------------------- 1 | const $ = function (selectorName) { 2 | return document.querySelector(selectorName) 3 | }; -------------------------------------------------------------------------------- /masalalar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /masalalar/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // ================== 1-problem ================== 4 | //const array = ["a", 1, "a", "a", 1, 2, 3, 1, 4, 5, 5, 5, 6, "a"]; 5 | 6 | // let text = []; 7 | 8 | // for (let i = 0; i < array.length; i++) { 9 | 10 | // if (array[0] == array[i]) { 11 | // text.push(array[i]); 12 | // }else{ 13 | // console.log() 14 | // } 15 | // console.log(text) 16 | 17 | // ================== 2-problem ================== 18 | // let a=+prompt("a sonn"); 19 | // let b=+prompt("b son"); 20 | // let arr=[]; 21 | 22 | // for(let i=a; i<=b; i++){ 23 | // arr.push(i) 24 | 25 | // } 26 | // console.log(arr); 27 | 28 | // ================== 3-problem ================== 29 | // let x = +prompt("index1"); 30 | // let y = +prompt("index2"); 31 | // let text = []; 32 | // const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 33 | 34 | // for (let i = 0; i < array.length; i++) { 35 | // if (x === i) { 36 | // continue; 37 | // } else if (y === i) { 38 | // continue; 39 | // } else { 40 | // console.log(); 41 | // } 42 | // console.log(array[i]); 43 | // } 44 | 45 | // ================== 4-problem ================== 46 | 47 | // let array = [ 48 | // { 49 | // isname: "hamid", 50 | // age: 17, 51 | // jop: "dasturchi", 52 | // }, 53 | // { 54 | // isname: "jon", 55 | // age: 27, 56 | // jop: "blooger", 57 | // }, 58 | // { 59 | // isname: "jak", 60 | // info: "semichka", 61 | // jop: "vovl", 62 | // }, 63 | // ]; 64 | // let ss=[] 65 | // array.forEach((e) => { 66 | // for (let key in e) { 67 | // ss.push(e[key]) 68 | // } 69 | // }); 70 | // console.log(ss); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | height: 100%; 9 | } 10 | 11 | body { 12 | height: 100%; 13 | display: flex; 14 | flex-direction: column; 15 | background-image: url(./img/pizza.jpg); 16 | background-repeat: no-repeat; 17 | background-size: cover; 18 | } 19 | 20 | main { 21 | flex-grow: 1; 22 | } 23 | 24 | main { 25 | width: 100%; 26 | } 27 | 28 | .title { 29 | margin: auto; 30 | text-align: center; 31 | } 32 | 33 | .modalcard { 34 | width: 400px; 35 | height: 200px; 36 | position: fixed; 37 | background-color: rgb(255, 255, 255); 38 | top: -200px; 39 | right: 37%; 40 | transition: all 0.6s ease; 41 | z-index: 4; 42 | 43 | } 44 | 45 | .pastgatush { 46 | top: 200px; 47 | 48 | } 49 | 50 | .modal_bg-color { 51 | position: fixed; 52 | top: 0; 53 | left: 0; 54 | width: 100% !important; 55 | height: 100vh !important; 56 | background-color: rgba(0, 0, 0, 0.648); 57 | display: none; 58 | transition: all 0.3 ease; 59 | -webkit-transition: all 0.3 ease; 60 | -moz-transition: all 0.3 ease; 61 | -ms-transition: all 0.3 ease; 62 | -o-transition: all 0.3 ease; 63 | z-index: 2; 64 | } 65 | .qwerty{ 66 | position: absolute; 67 | right: 10px; 68 | bottom: 10px; 69 | } 70 | 71 | main .container { 72 | width: 75%; 73 | 74 | 75 | display: flex; 76 | justify-content: space-between; 77 | } 78 | 79 | h4 { 80 | margin-top: 20px; 81 | } 82 | 83 | main .container .left-input { 84 | width: 65%; 85 | } 86 | 87 | main .container .line { 88 | width: 3px; 89 | height: 500px; 90 | background-color: rgba(88, 88, 88, 0.945); 91 | } 92 | 93 | main .container .big_circle { 94 | display: flex; 95 | } 96 | 97 | main .container .big_circle .form-check p { 98 | margin-top: 10px; 99 | } 100 | 101 | main .container .circle_size { 102 | padding: 16px; 103 | border: 1px solid black; 104 | border-radius: 50%; 105 | margin-left: 10px; 106 | background-color: #fff; 107 | } 108 | 109 | main .container .checkbox { 110 | display: flex; 111 | } 112 | 113 | main .container .checkbox .right_checkbox { 114 | margin-left: 30px; 115 | } 116 | 117 | main .container .right_output { 118 | width: 35%; 119 | } 120 | 121 | footer .text { 122 | margin: auto; 123 | text-align: center; 124 | 125 | } -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | let modalcard = document.querySelector(".modalcard"); 2 | 3 | let zzz = document.querySelector(".qwerty"); 4 | 5 | let querity = document.querySelector(".modal_bg-color") 6 | 7 | 8 | let modalbtn = document.querySelector(".tugmacha"); 9 | modalbtn.addEventListener("click", () => { 10 | modalcard.classList.add("pastgatush"); 11 | 12 | querity.style.display="block" 13 | }); 14 | 15 | 16 | 17 | zzz.addEventListener("click", () => { 18 | modalcard.classList.remove("pastgatush"); 19 | querity.style.display="none" 20 | }); 21 | 22 | 23 | let selecttt = $(".nonqalin"); 24 | 25 | selecttt.addEventListener("change", () => { 26 | let nonini = $(".nonini"); 27 | nonini.textContent = selecttt.value; 28 | }); 29 | 30 | // katta 31 | let olchamni = $(".olchami"); 32 | 33 | olchamni.addEventListener("change", () => { 34 | let kattaligini = $(".kattaligini"); 35 | kattaligini.textContent = olchamni.value; 36 | }); 37 | 38 | let smm = $(".smm"); 39 | 40 | smm.addEventListener("change", () => { 41 | let kattaligini = $(".kattaligini"); 42 | kattaligini.textContent = smm.value; 43 | }); 44 | 45 | let pro = $(".pro"); 46 | 47 | pro.addEventListener("change", () => { 48 | let kattaligini = $(".kattaligini"); 49 | kattaligini.textContent = pro.value; 50 | }); 51 | 52 | let pomidor = $(".pomidor"); 53 | let kurka_goshti = $(".kurka_goshti"); 54 | let zaytun = $(".zaytun"); 55 | let bodring = $(".bodring"); 56 | let qoziqorin = $(".qoziqorin"); 57 | let qazi = $(".qazi"); 58 | 59 | pomidor.addEventListener("click", () => { 60 | let a1 = $(".a"); 61 | if (a1.textContent == pomidor.value) { 62 | a1.textContent = ""; 63 | } else { 64 | a1.textContent = pomidor.value; 65 | } 66 | }); 67 | 68 | kurka_goshti.addEventListener("click", () => { 69 | let a2 = $(".b"); 70 | if (a2.textContent == kurka_goshti.value) { 71 | a2.textContent = ""; 72 | } else { 73 | a2.textContent = kurka_goshti.value; 74 | } 75 | }); 76 | 77 | zaytun.addEventListener("click", () => { 78 | let a3 = $(".c"); 79 | if (a3.textContent == zaytun.value) { 80 | a3.textContent = ""; 81 | } else { 82 | a3.textContent = zaytun.value; 83 | } 84 | }); 85 | bodring.addEventListener("click", () => { 86 | let a4 = $(".d"); 87 | if (a4.textContent == bodring.value) { 88 | a4.textContent = ""; 89 | } else { 90 | a4.textContent = bodring.value; 91 | } 92 | }); 93 | qoziqorin.addEventListener("click", () => { 94 | let a5 = $(".e"); 95 | if (a5.textContent == qoziqorin.value) { 96 | a5.textContent = ""; 97 | } else { 98 | a5.textContent = qoziqorin.value; 99 | } 100 | }); 101 | qazi.addEventListener("click", () => { 102 | let a6 = $(".f"); 103 | if (a6.textContent == qazi.value) { 104 | a6.textContent = ""; 105 | } else { 106 | a6.textContent = qazi.value; 107 | } 108 | }); 109 | 110 | let achchiq = $(".achchiq"); 111 | let sosiska = $(".sosiska"); 112 | 113 | achchiq.addEventListener("click", () => { 114 | let suma = $(".nums"); 115 | if (suma.textContent == achchiq.value) { 116 | suma.textContent = ""; 117 | } else { 118 | suma.textContent = achchiq.value; 119 | } 120 | }); 121 | 122 | sosiska.addEventListener("click", () => { 123 | let sumav = $(".h"); 124 | if (sumav.textContent == sosiska.value) { 125 | sumav.textContent = ""; 126 | } else { 127 | sumav.textContent = sosiska.value; 128 | } 129 | }); 130 | 131 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 15 | 16 | 17 | 18 | 19 | PIZZA-uz 20 | 21 | 22 | 23 |

24 |

25 | 28 |

29 |

30 | 31 |

32 |

33 |

34 | 35 |

SUCCESSFULL!

36 | 39 |

40 |

PITSA BUYURTMA QILISH

41 | 42 | 197 |

198 | 199 | 202 | 203 | 204 | 205 | 206 | 207 | --------------------------------------------------------------------------------

SUCCESSFULL!

PITSA BUYURTMA QILISH

Noni qanday bo'lsin ?

Kattaligi

Tarkibi nimalardan iborat ?

Qo'shimchalar

Noni:

Kattaligi:

Ustida:

Qo'shimcha: