Skip to content

Commit

Permalink
pizza and bg
Browse files Browse the repository at this point in the history
  • Loading branch information
@margittennosaar
margittennosaar committed Feb 7, 2023
1 parent 926c771 commit a3e94fe
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5501
"liveServer.settings.port": 5502
}
72 changes: 72 additions & 0 deletions session_3/pizza/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Pizza order</title>
</head>
<body>
<form>
<h1>Order</h1>
<input type="text" placeholder="Tell us your name" id="name" />

<h2>Size:</h2>
<div>
<input type="radio" name="size" value="two" id="size2" />
<label for="size2">for two 7,50€</label>
</div>
<div>
<input type="radio" name="size" value="four" id="size4" />
<label for="size4">for four 10,50€</label>
</div>
<div>
<input type="radio" name="size" value="six" id="size6" />
<label for="size6">for six 12,50€</label>
</div>
<div>
<input type="radio" name="size" value="eight" id="size8" />
<label for="size8">for eight 15,50€</label>
</div>

<h2>Toppings:</h2>
<div>
<input type="checkbox" value="pepperoni" id="pepperoni" />
<label for="pepperoni">pepperoni</label>
</div>
<div>
<input type="checkbox" value="sausage" id="sausage" />
<label for="sausage">sausage</label>
</div>
<div>
<input type="checkbox" value="onion" id="onion" />
<label for="onion">onion</label>
</div>
<div>
<input type="checkbox" value="cheese" id="cheese" />
<label for="cheese">cheese</label>
</div>
<div>
<input type="checkbox" value="chicken" id="chicken" />
<label for="chicken">chicken</label>
</div>
<h2>Delivery:</h2>
<select name="delivery" id="delivery">
<option selected disabled value="empty">Select delivery method:</option>
<option value="home">Delivery to home</option>
<option value="eat in">Eat in</option>
<option value="pickup">Pickup food</option>
</select>
</form>

<div id="order">
<p>Name: <span id="order_name"></span></p>
<p>Size: <span id="order_size"></span></p>
<p>Toppings: <span id="order_toppings"></span></p>
<p>Delivery: <span id="order_delivery"></span></p>
<p>Total price: <span id="order_price"></span></p>
</div>
<script src="main.js"></script>
</body>
</html>
73 changes: 73 additions & 0 deletions session_3/pizza/main.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Empty file added session_3/pizza/style.css
View file
Empty file.
83 changes: 83 additions & 0 deletions session_4/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<link rel="stylesheet" href="style.css" />
<title>BG generator</title>
</head>
<body>
<form>
<h1>BG generator</h1>
<h2>Color</h2>

<input type="color" id="color1" value="#0088ff" />
<input type="color" id="color2" value="#053865" />
<h2>Direction</h2>
<div class="direction_grid">
<input
type="radio"
value="to bottom right"
id="to_bottom_right"
name="direction"
/>
<label for="to_bottom_right"
><span class="material-symbols-outlined"> south_east </span></label
>
<input type="radio" id="to_bottom" value="to bottom" name="direction" />
<label for="to_bottom">To bottom</label>

<input
type="radio"
id="to_bottom_left"
value="to bottom left"
name="direction"
/>
<label for="to_bottom_left">To bottom left</label>

<input
type="radio"
id="to_right"
value="to right"
name="direction"
checked
/>
<label for="to_right">To right</label>
<div></div>

<input type="radio" id="to_left" value="to left" name="direction" />
<label for="to_left">To left</label>

<input
type="radio"
id="to_top_rigth"
value="to top right"
name="direction"
/>
<label for="to_top_rigth">To top right</label>

<input type="radio" id="to_top" value="to top" name="direction" />
<label for="to_top">To top</label>

<input
type="radio"
id="to_top_left"
value="to top left"
name="direction"
/><label for="to_top_left">To bottom</label>
</div>
<h2>CSS</h2>
<p>
background:
<span id="cssCode"> linear-gradient(to right, #0088ff, #053865)</span>;
</p>

<script src="main.js"></script>
</form>
</body>
</html>
25 changes: 25 additions & 0 deletions session_4/main.js
View file
Original file line number Diff line number Diff line change
@@ -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);
59 changes: 59 additions & 0 deletions session_4/style.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}

0 comments on commit a3e94fe

Please sign in to comment.