104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
"use strict";
|
|
|
|
const getElement = selector => document.querySelector(selector);
|
|
|
|
const drawLogo = () => {
|
|
const canvasLogo = getElement("canvas");
|
|
const ctx = canvasLogo.getContext("2d");
|
|
|
|
// set size of squares and calculate number of squares
|
|
const len = 40;
|
|
const squaresPerRow = canvasLogo.width / len;
|
|
const squaresPerColumn = canvasLogo.height / len;
|
|
|
|
// set hex value for squares
|
|
const red = "#ff0000"; // hex value for red
|
|
const white = "#ffffff"; // hex value for white
|
|
|
|
// set fill color for first square to red
|
|
ctx.fillStyle = red;
|
|
|
|
// draw squares
|
|
for (let x = 0; x < squaresPerRow; x++) {
|
|
for (let y = 0; y < squaresPerColumn; y ++) {
|
|
// draw square
|
|
ctx.fillRect(len * x, len * y, len, len);
|
|
// set color for next square
|
|
ctx.fillStyle = (ctx.fillStyle == white) ? red : white;
|
|
}
|
|
}
|
|
|
|
// add red outer border
|
|
ctx.strokeStyle = "red";
|
|
ctx.strokeRect(0, 0, canvasLogo.width, canvasLogo.height);
|
|
|
|
// add restaurant name - chartreuse with black border
|
|
ctx.font = "bold 60px sans-serif";
|
|
ctx.fillStyle = "chartreuse";
|
|
ctx.strokeStyle = "black";
|
|
ctx.lineWidth = 2;
|
|
|
|
const x = 85;
|
|
const y = 80;
|
|
ctx.fillText("Pizza Bella", x, y);
|
|
ctx.strokeText("Pizza Bella", x, y);
|
|
};
|
|
|
|
// drag/drop methods
|
|
const dragStart = evt => {
|
|
evt.dataTransfer.setData("topping", evt.currentTarget.id);
|
|
};
|
|
|
|
const dragOver = evt => {
|
|
evt.preventDefault(); // default is to not allow drag
|
|
};
|
|
|
|
const drop = evt => {
|
|
evt.preventDefault(); // default is to not allow drop
|
|
const id = evt.dataTransfer.getData("topping");
|
|
const ul = evt.currentTarget.querySelector("ul");
|
|
const li = document.querySelector("#" + id);
|
|
ul.appendChild(li);
|
|
};
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
drawLogo();
|
|
|
|
// get <div> elements
|
|
const toppings = getElement("#toppings");
|
|
const order = getElement("#order");
|
|
|
|
// add dragstart event handler for each li
|
|
// element in toppings div
|
|
const items = toppings.querySelectorAll("li");
|
|
for (let li of items) {
|
|
li.draggable = true;
|
|
li.addEventListener("dragstart", dragStart);
|
|
}
|
|
|
|
// make order <div> a drop target
|
|
order.addEventListener("dragover", dragOver);
|
|
order.addEventListener("drop", drop);
|
|
|
|
// make toppings <div> a drop target so can drag items back
|
|
toppings.addEventListener("dragover", dragOver);
|
|
toppings.addEventListener("drop", drop);
|
|
|
|
// save button click event handler
|
|
getElement("#submit_order").addEventListener("click", () => {
|
|
let msg = "Your pizza with ";
|
|
|
|
const selectedItems = order.querySelectorAll("li");
|
|
if (selectedItems.length == 0) {
|
|
msg += "cheese only"
|
|
} else {
|
|
for (let li of selectedItems) {
|
|
msg += li.textContent + ", ";
|
|
}
|
|
msg = msg.slice(0, - 2); // remove last comma and space
|
|
}
|
|
alert(msg + " is on its way!");
|
|
});
|
|
});
|
|
|