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
+
+
+
+
+
+
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
+
+
+
+
+
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);
+}