From a3e94feebf17104cb1287e2e8b0c7163d0f0d329 Mon Sep 17 00:00:00 2001 From: Margit Tennosaar <46651865+margittennosaar@users.noreply.github.com> Date: Tue, 7 Feb 2023 14:49:33 +0200 Subject: [PATCH] pizza and bg --- .vscode/settings.json | 2 +- session_3/pizza/index.html | 72 +++++++++++++++++++++++++++++++++ session_3/pizza/main.js | 73 +++++++++++++++++++++++++++++++++ session_3/pizza/style.css | 0 session_4/index.html | 83 ++++++++++++++++++++++++++++++++++++++ session_4/main.js | 25 ++++++++++++ session_4/style.css | 59 +++++++++++++++++++++++++++ 7 files changed, 313 insertions(+), 1 deletion(-) create mode 100644 session_3/pizza/index.html create mode 100644 session_3/pizza/main.js create mode 100644 session_3/pizza/style.css create mode 100644 session_4/index.html create mode 100644 session_4/main.js create mode 100644 session_4/style.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 6b665aa..4c7ff40 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } diff --git a/session_3/pizza/index.html b/session_3/pizza/index.html new file mode 100644 index 0000000..034a3ab --- /dev/null +++ b/session_3/pizza/index.html @@ -0,0 +1,72 @@ + + + + + + + + Pizza order + + +
+

Order

+ + +

Size:

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

Toppings:

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+

Delivery:

+ +
+ +
+

Name:

+

Size:

+

Toppings:

+

Delivery:

+

Total price:

+
+ + + diff --git a/session_3/pizza/main.js b/session_3/pizza/main.js new file mode 100644 index 0000000..37e5e08 --- /dev/null +++ b/session_3/pizza/main.js @@ -0,0 +1,73 @@ +const form = document.querySelector('form'); +//all inputs +const customer = document.querySelector('#name'); +const size = document.querySelectorAll('[name="size"]'); +const toppings = document.querySelectorAll('input[type="checkbox"]'); +const delivery = document.querySelector('#delivery'); + +//all outputs +const order_name = document.querySelector('#order_name'); +const order_size = document.querySelector('#order_size'); +const order_toppings = document.querySelector('#order_toppings'); +const order_delivery = document.querySelector('#order_delivery'); +const order_price = document.querySelector('#order_price'); + +const myFunctjon = () => { + let customerName = customer.value; + let sizeResult = ''; + let sizeText = ''; + let toppingsResult = []; + let deliveryResult = delivery.options[delivery.selectedIndex].value; + + let price = 0; + + size.forEach((item) => { + if (item.checked) { + sizeResult = item.value; + sizeText = `pizza for ${sizeResult}`; + } + }); + + switch (sizeResult) { + case 'two': + price += 7.5; + order_size.textContent = sizeText; + break; + case 'four': + price += 10.5; + order_size.textContent = sizeText; + break; + case 'six': + price += 12.5; + order_size.textContent = sizeText; + break; + case 'eight': + price += 15.5; + order_size.textContent = sizeText; + break; + } + + toppings.forEach((item) => { + if (item.checked) { + toppingsResult.push(item.value); + } + }); + + if (toppingsResult.length > 4) { + price += (toppingsResult.length - 4) * 0.5; + } + + if (deliveryResult == 'home') { + price += 5; + } + + if (deliveryResult != 'empty') { + order_delivery.textContent = deliveryResult; + } + + order_name.textContent = customerName; + order_toppings.textContent = toppingsResult.join(', '); + order_price.textContent = price; +}; + +form.addEventListener('input', myFunctjon); diff --git a/session_3/pizza/style.css b/session_3/pizza/style.css new file mode 100644 index 0000000..e69de29 diff --git a/session_4/index.html b/session_4/index.html new file mode 100644 index 0000000..e93d8dd --- /dev/null +++ b/session_4/index.html @@ -0,0 +1,83 @@ + + + + + + + + + BG generator + + +
+

BG generator

+

Color

+ + + +

Direction

+
+ + + + + + + + + + +
+ + + + + + + + + + + +
+

CSS

+

+ background: + linear-gradient(to right, #0088ff, #053865); +

+ + +
+ + diff --git a/session_4/main.js b/session_4/main.js new file mode 100644 index 0000000..3666cf4 --- /dev/null +++ b/session_4/main.js @@ -0,0 +1,25 @@ +const form = document.querySelector('form'); + +const color1 = document.querySelector('#color1'); +const color2 = document.querySelector('#color2'); + +const directions = document.querySelectorAll('input[name="direction"]'); + +const text = document.querySelector('#cssCode'); + +const myFunction = () => { + let dirValue, code; + + for (const item of directions) { + if (item.checked) { + dirValue = item.value; + } + } + + code = `linear-gradient(${dirValue}, ${color1.value}, ${color2.value})`; + + document.body.style.background = code; + text.textContent = code; +}; + +form.addEventListener('change', myFunction); diff --git a/session_4/style.css b/session_4/style.css new file mode 100644 index 0000000..37beefb --- /dev/null +++ b/session_4/style.css @@ -0,0 +1,59 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: linear-gradient(to right, #0088ff, #053865); + font-family: 'Lato', sans-serif; + + color: white; +} + +form { + background-color: white; + color: #333; + width: 350px; + height: 100vh; + padding: 2rem; +} + +h2 { + margin: 2rem 0 1rem; +} + +input[type='color'] { + border: none; + box-shadow: none; + background-color: transparent; + width: 45%; + height: 50px; +} + +input[type='radio'] { + display: none; +} + +label { + margin: 0.5rem; + background-color: #545454; + padding: 0.5rem; + border-radius: 5px; + color: white; + display: flex; + justify-content: center; + align-items: center; +} + +input[type='radio']:checked + label { + background-color: #9f9f9f; + color: #333; +} + +.direction_grid { + display: grid; + grid-template-columns: repeat(3, 1fr); +}