diff --git a/app.js b/app.js new file mode 100644 index 0000000..dcabc53 --- /dev/null +++ b/app.js @@ -0,0 +1,72 @@ +const tipAmount = document.querySelector(".tip-amount"); +const totalAmount = document.querySelector(".total-amount"); +const inputBill = document.querySelector(".bill"); +const selectBtn = document.querySelectorAll("button"); +const peopleNum = document.querySelector(".number"); +const resetBtn = document.querySelector(".reset-btn"); +const ifZero = document.querySelector(".if-zero"); +const customTip = document.querySelector(".custom"); +let selectTip; + +inputBill.addEventListener("click", () => { + inputBill.style.outlineColor = "hsl(185, 41%, 84%)"; +}); + +peopleNum.addEventListener("click", () => { + peopleNum.style.outlineColor = "hsl(185, 41%, 84%)"; +}); + +function resetBtnColor() { + for (let i = 0; i < Object.keys(selectBtn).length; i++) { + selectBtn[i].classList.remove("clicked"); + } +} + +function inputCustom() { + if (customTip.value) { + selectTip = parseInt(customTip.value) / 100; + } +} + +function clickedBtn(event) { + resetBtnColor(); + event.target.classList.add("clicked"); + selectTip = event.target.innerText; + selectTip = parseInt(selectTip) / 100; +} + +function decideZero() { + if (peopleNum.value === "0") { + ifZero.innerText = "Can't be zero"; + ifZero.classList.add("not-zero"); + peopleNum.style.outlineColor = "red"; + } else { + ifZero.innerText = ""; + ifZero.classList.remove("not-zero"); + peopleNum.style.outlineColor = "hsl(185, 41%, 84%)"; + } +} + +function showResult() { + decideZero(); + tipCalc = (Number(inputBill.value) * selectTip) / peopleNum.value; + totalCalc = Number(inputBill.value) / peopleNum.value + tipCalc; + tipAmount.innerText = `$${tipCalc.toFixed(2)}`; + totalAmount.innerText = `$${totalCalc.toFixed(2)}`; +} + +function reset() { + inputBill.value = null; + peopleNum.value = null; + tipAmount.innerText = "$0.00"; + totalAmount.innerText = "$0.00"; +} + +for (let i = 0; i < selectBtn.length; i++) { + selectBtn[i].addEventListener("click", (e) => clickedBtn(e)); +} + +customTip.addEventListener("keyup", inputCustom); +peopleNum.addEventListener("keyup", showResult); +window.addEventListener("load", reset); +resetBtn.addEventListener("click", reset); diff --git a/index.html b/index.html index 0a2739a..9058f67 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,58 @@ - - - - - - - Frontend Mentor | Tip calculator app - - - - - - - Bill - - Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom - - Number of People - - Tip Amount - / person - - Total - / person - - Reset - -
- Challenge by Frontend Mentor. - Coded by Your Name Here. -
- - \ No newline at end of file + + + + + + Frontend Mentor | Tip calculator app + + +
SPLI
+
TTER
+
+
+ Bill + + Select Tip % +
+ + + + + + +
+
+ Number of People +
+ + +
+ +
+
+
+ Tip Amount +
/ person
+
+
+
+
+
+ Total +
/ person
+
+
+
+
+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8372acc --- /dev/null +++ b/style.css @@ -0,0 +1,200 @@ +@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans&family=Nanum+Gothic&display=swap"); + +body { + background-color: hsl(185, 41%, 84%); + display: flex; + align-items: center; + flex-direction: column; + font-family: "Nanum Gothic", sans-serif; + font-weight: 700; + color: hsl(186, 14%, 43%); +} + +.top-content { + letter-spacing: 8px; +} + +.top-content:nth-child(1) { + margin-top: 5%; +} + +.container { + margin-top: 5%; + display: flex; + background-color: white; + border-radius: 20px; +} + +.input-content { + margin-left: 30px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.bill, +.number { + margin: 10px 0 20px 0; + border: none; + background-color: hsl(189, 41%, 97%); + color: hsl(184, 14%, 56%); + height: 35px; + text-align: right; + background-repeat: no-repeat; + background-position: 15px center; + font-size: 24px; + cursor: pointer; +} + +.bill { + background-image: url(./images/icon-dollar.svg); +} + +.number { + background-image: url(./images/icon-person.svg); +} + +input:hover { + border: hsl(185, 41%, 84%); +} + +button:hover, +.clicked { + background-color: hsl(185, 41%, 84%); + color: hsl(183, 100%, 15%); +} + +.select-btn { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +button { + border: none; + border-radius: 5px; + height: 35px; + background-color: hsl(183, 100%, 15%); + color: hsl(189, 41%, 97%); + font-size: 24px; + cursor: pointer; +} + +.custom { + border: none; + border-radius: 5px; + background-color: hsl(189, 41%, 97%); + color: hsl(183, 100%, 15%); + text-indent: -5%; + text-align: right; + font-size: 20px; + cursor: pointer; +} + +.info-input { + display: inline; +} + +.not-zero { + float: right; + color: red; +} + +.result-content { + margin: 30px; + background-color: hsl(183, 100%, 15%); + color: white; + border-radius: 20px; + display: flex; + justify-content: center; + flex-direction: column; +} + +.tip, +.total { + margin: 20px 27px; + display: inline; + flex-direction: row; +} + +.tip-title, +.total-title { + float: left; +} + +.total { + margin-bottom: 121px; +} + +.tip-content, +.total-content { + letter-spacing: 1px; + color: hsl(185, 41%, 84%); + font-size: 10px; +} + +.tip-amount, +.total-amount { + font-size: 30px; + color: hsl(185, 41%, 84%); + float: right; +} + +.reset { + display: flex; + justify-content: center; + align-items: center; +} + +.reset-btn { + color: hsl(183, 100%, 15%); + background-color: hsl(186, 14%, 43%); + width: 300px; +} + +@media only screen and (max-width: 375px) { + .container { + display: flex; + flex-direction: column; + width: 374px; + padding: 20px; + } + .result-content { + width: 350px; + height: 270px; + display: flex; + justify-content: center; + } + .total { + margin-bottom: 80px; + } + .select-btn { + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-content: center; + } + .select-btn button, + .custom { + width: 120px; + margin: 10px; + } +} +@media only screen and (min-width: 375px) { + .container { + width: fit-content; + } + .select-btn button, + .custom { + width: 80px; + } + .result-content { + width: 400px; + height: 340px; + } + .select-btn button:nth-child(-n + 3) { + margin: 12px 0; + } + .select-btn button:nth-child(n + 4), + .select-btn input { + margin-bottom: 20px; + } +} diff --git a/todo.md b/todo.md new file mode 100644 index 0000000..abd2dda --- /dev/null +++ b/todo.md @@ -0,0 +1,3 @@ +- View the optimal layout for the app depending on their device's screen size +- See hover states for all interactive elements on the page +- Calculate the correct tip and total cost of the bill per person