Skip to content

Commit

Permalink
update:Final commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abhiram-Mithur
Abhiram-Mithur committed Mar 5, 2023
1 parent 40546f0 commit 83e9b86
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 38 deletions.
38 changes: 27 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,52 @@
<!DOCTYPE html>
<html>

<head>
<title>Pizza Design App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>




<div class="container">
<div id="pizza-circle"></div>
<div id="instructions">
<p><strong>Instructions:</strong><br>
* Drag and choose a pizza base and up to three toppings to create your own custom pizza!.<br>
* Click on submit when you are done customising your pizza.<br>
* <strong>Note:</strong> You cannot undo the changes of toppings once selected.<br>
* You can replace the toppings. </p>
</div>

<div class="options">
<div class="pizza-bases">
<h3>Select Pizza Base:</h3>
<div class="base" id="base1"data-name="Thin Crust +"><img src="pizza base 1.png" alt="Pizza Base 1" draggable="true" ></div>
<div class="base" id="base2"data-name="Thick Crust +"><img src="pizza base 2.jpg" alt="Pizza Base 2" draggable="true" ></div>
<div class="base" id="base1" data-name="Thin Crust +"><img src="pizza base 1.png" alt="Pizza Base 1"
draggable="true"></div>
<div class="base" id="base2" data-name="Thick Crust +"><img src="pizza base 2.jpg" alt="Pizza Base 2"
draggable="true"></div>
</div>

<div class="toppings">
<div class="toppings">
<h3>Select Toppings:</h3>
<div class="topping" id="topping1"data-name="mushroom"><img src="mushroom.jpg" alt="Topping 1"></div>
<div class="topping" id="topping2"data-name="onion"><img src="onion.jpg" alt="Topping 2"></div>
<div class="topping" id="topping3"data-name="tomatoes"><img src="tomatoes.png" alt="Topping 3"></div>
<div class="topping" id="topping1" data-name="Mushrooms"><img src="mushroom.jpg" alt="Topping 1"></div>
<div class="topping" id="topping2" data-name="Onions"><img src="onion.jpg" alt="Topping 2"></div>
<div class="topping" id="topping3" data-name="Tomatoes"><img src="tomatoes.png" alt="Topping 3"></div>
</div>

<button id="submit-btn">Submit</button>
<div id="result"></div>

<button id="submit-btn" class="custom-button">Submit</button>

<div id="result" class="custom-result"></div>


</div>
</div>



<script src="script.js"></script>
</body>

</html>
27 changes: 14 additions & 13 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ const bases = document.querySelectorAll('.base');

// Loop through each base element
bases.forEach(base => {
// Add a "dragstart" event listener to each base element
// "dragstart" event
base.addEventListener('dragstart', event => {
// Set the data transfer with the base ID
// Set the data
event.dataTransfer.setData('text/plain', base.id);
});
});
Expand All @@ -18,20 +18,20 @@ const toppings = document.querySelectorAll('.topping');

// Loop through each topping element
toppings.forEach(topping => {
// Add a "dragstart" event listener to each topping element
// "dragstart"
topping.addEventListener('dragstart', event => {
// Set the data transfer with the topping ID
// Set the data
event.dataTransfer.setData('text/plain', topping.id);
});
});

// Add a "dragover" event listener to the pizza circle element
//"dragover" event
pizzaCircle.addEventListener('dragover', event => {
// Prevent default behavior to allow dropping
event.preventDefault();
});

// Add a "drop" event listener to the pizza circle element
// "drop" event
pizzaCircle.addEventListener('drop', event => {
// Prevent default behavior to avoid opening the dropped element as a URL
event.preventDefault();
Expand All @@ -42,24 +42,25 @@ pizzaCircle.addEventListener('drop', event => {
// Get the dropped element
const element = document.querySelector(`#${elementId}`);

// If the dropped element is a base and there's already a base on the pizza, remove it
//Checking if the dropped element is a base, or remove it
if (element.classList.contains('base') && pizzaCircle.querySelector('.base')) {
pizzaCircle.removeChild(pizzaCircle.querySelector('.base'));
}

// If the dropped element is a topping and there are already 3 toppings on the pizza, don't do anything
//Check if the dropped element is a topping and allow maximum amount of toppings available to drag and drop
if (element.classList.contains('topping') && pizzaCircle.querySelectorAll('.topping').length >= 3) {
return;
}

// If the dropped element is a base, add it to the pizza circle as the first child
// If the dropped element is a base, add it to the pizza circle in first position
if (element.classList.contains('base')) {
pizzaCircle.insertBefore(element, pizzaCircle.firstChild);
} else {
// If the dropped element is a topping, add it to the pizza circle as the last child
// If the dropped element is a topping, add it to the pizza circle as the last position
pizzaCircle.appendChild(element);
}
});
// Submit button to final the selected pizza

const submitBtn = document.getElementById('submit-btn');
const result = document.getElementById('result');
Expand All @@ -71,7 +72,7 @@ submitBtn.addEventListener('click', () => {
for (let i = 0; i < elements.length; i++) {
elementsList += elements[i].getAttribute('data-name') + '<br>';
}
//Display the result of the choosen pizza

result.innerHTML ="you have choosen:"+'<br>'+ elementsList+"pizza";
});

result.innerHTML = "you have choosen:" + '<br>' + elementsList + "Pizza";
});
58 changes: 44 additions & 14 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
*{
* {
margin: 0;
padding: 0;
box-sizing: border-box;
Expand All @@ -22,15 +22,17 @@
align-items: center;
}

.pizza-bases, .toppings {
.pizza-bases,
.toppings {
margin-bottom: 20px;
}

h3 {
margin-bottom: 10px;
}

.base, .topping {
.base,
.topping {
width: 100px;
height: 100px;
background-color: #F5F5F5;
Expand All @@ -43,7 +45,8 @@ h3 {
cursor: pointer;
}

.base img, .topping img {
.base img,
.topping img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
Expand All @@ -58,11 +61,6 @@ h3 {
}

#pizza-circle {
/* width: 300px;
height: 300px;
border: 2px dashed black;
border-radius: 50%;
margin: 20px auto; */

width: 400px;
height: 400px;
Expand All @@ -74,9 +72,41 @@ h3 {
justify-content: center;
align-items: center;
cursor: pointer;
}
}

#pizza-circle > img{
width: 100%;
height: 100%;
}
.custom-button {
background-color: #4CAF50;

border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.custom-result {
background-color: #ffd8ad;
border: 2px solid #ffa94d;
border-radius: 10px;
color: #6d4c41;
font-family: Arial, sans-serif;
font-size: 18px;
margin-top: 20px;
padding: 20px;
text-align: center;
}

#instructions {
position: absolute;
bottom: 40%;
top: 25%;
left: 10%;
transform: translateX(-50%);
width: 200px;
text-align: center;
}

0 comments on commit 83e9b86

Please sign in to comment.