From 12a67c060d80d9216a356bd608b4b143835ff328 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 6 Nov 2022 02:57:08 +0900 Subject: [PATCH 1/6] =?UTF-8?q?docs:=20=EC=9A=94=EA=B5=AC=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- todo.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 todo.md 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 From ee6928b7e1ef28c35db0c156043f8172213eb6d2 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 6 Nov 2022 12:16:17 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20css=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 96 ++++++++++++++++++++++++++++++------------------------ style.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+), 42 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index 0a2739a..dfb83b1 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,56 @@ - - - - - - - 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
+
+ +
$0.00
+
+
+
+ Total +
/ person Reset
+
+ +
$0.00
+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..4903b2d --- /dev/null +++ b/style.css @@ -0,0 +1,86 @@ +@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans&family=Nanum+Gothic&display=swap"); + +body { + background-color: hsl(185, 41%, 84%); + display: flex; + justify-content: center; + 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; + flex-direction: row; + width: 800px; + height: 400px; + background-color: white; + border-radius: 20px; +} +.result { + margin: 30px 30px 30px 30px; + background-color: hsl(183, 100%, 15%); + color: white; + width: 400px; + height: 340px; + border-radius: 20px; +} +.input-content { + margin-left: 30px; + display: flex; + flex-direction: column; + justify-content: center; +} +input { + margin: 10px 0 20px 0; + border: none; + background-color: hsl(189, 41%, 97%); + color: hsl(184, 14%, 56%); + width: 300px; + height: 35px; + text-align: right; +} +.select-btn { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(3, 1fr); +} +.select-btn button { + width: 80px; + margin: 5px 8px 5px 0; +} +button { + border: none; + border-radius: 5px; + height: 30px; + background-color: hsl(183, 100%, 15%); + color: hsl(189, 41%, 97%); +} +button:nth-child(6) { + background-color: hsl(189, 41%, 97%); + color: hsl(183, 100%, 15%); +} +.tip-content, +.total-content { + color: hsl(185, 41%, 84%); + font-size: 10px; +} +.first, +.second { + display: flex; + flex-direction: row; +} + +.reset button { + color: hsl(183, 100%, 15%); + background-color: hsl(186, 14%, 43%); + width: 100px; +} From 7500f534a8c9f736caab6fc527b481b69a2fb687 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 6 Nov 2022 18:01:24 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20input=EC=97=90=20=EB=94=B0=EB=A5=B8?= =?UTF-8?q?=20=EA=B2=B0=EA=B3=BC=20=EC=B6=9C=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 27 +++++++++++++++++++++++++++ index.html | 7 ++++--- style.css | 20 +++++++++++++++++--- 3 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 app.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..80109e9 --- /dev/null +++ b/app.js @@ -0,0 +1,27 @@ +const tipRatio = document.querySelector(".tip-ratio"); +const totalRatio = document.querySelector(".total-ratio"); +const inputBill = document.querySelector(".bill"); +const selectBtn = document.querySelectorAll("button"); +const peopleNum = document.querySelector(".number"); +let selectTip; + +tipRatio.innerText = "$0.00"; +totalRatio.innerText = "$0.00"; + +function clickedBtn(event) { + selectTip = event.target.innerText; + selectTip = parseInt(selectTip) / 100; +} + +for (let i = 0; i < selectBtn.length; i++) { + selectBtn[i].addEventListener("click", (e) => clickedBtn(e)); +} + +function showResult() { + tipCalc = (Number(inputBill.value) * selectTip) / peopleNum.value; + totalCalc = Number(inputBill.value) / peopleNum.value + tipCalc; + tipRatio.innerText = `$${tipCalc.toFixed(2)}`; + totalRatio.innerText = `$${totalCalc.toFixed(2)}`; +} + +peopleNum.addEventListener("keyup", showResult); diff --git a/index.html b/index.html index dfb83b1..5c359d4 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@ - + Number of People @@ -39,7 +39,7 @@
/ person
-
$0.00
+
@@ -47,10 +47,11 @@
/ person Reset
-
$0.00
+
+ diff --git a/style.css b/style.css index 4903b2d..70512ea 100644 --- a/style.css +++ b/style.css @@ -39,7 +39,8 @@ body { flex-direction: column; justify-content: center; } -input { +.bill, +.number { margin: 10px 0 20px 0; border: none; background-color: hsl(189, 41%, 97%); @@ -48,6 +49,14 @@ input { height: 35px; text-align: right; } + +input:hover { + border: hsl(185, 41%, 84%); +} +button:hover { + background-color: hsl(185, 41%, 84%); + color: hsl(183, 100%, 15%); +} .select-btn { display: grid; grid-template-rows: repeat(2, 1fr); @@ -64,7 +73,12 @@ button { background-color: hsl(183, 100%, 15%); color: hsl(189, 41%, 97%); } -button:nth-child(6) { +.custom { + margin-top: 3%; + border: none; + border-radius: 5px; + height: 30px; + width: 80px; background-color: hsl(189, 41%, 97%); color: hsl(183, 100%, 15%); } @@ -82,5 +96,5 @@ button:nth-child(6) { .reset button { color: hsl(183, 100%, 15%); background-color: hsl(186, 14%, 43%); - width: 100px; + width: 300px; } From 255fb3f8dd72d894ef0eefe6a9f08ac14000b243 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Sun, 6 Nov 2022 19:27:49 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 20 +++++++++++++++++--- index.html | 4 ++-- style.css | 31 ++++++++++++++++++++++++------- 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/app.js b/app.js index 80109e9..e8dfd08 100644 --- a/app.js +++ b/app.js @@ -3,16 +3,22 @@ const totalRatio = document.querySelector(".total-ratio"); const inputBill = document.querySelector(".bill"); const selectBtn = document.querySelectorAll("button"); const peopleNum = document.querySelector(".number"); +const resetBtn = document.querySelector(".reset"); let selectTip; -tipRatio.innerText = "$0.00"; -totalRatio.innerText = "$0.00"; - function clickedBtn(event) { + resetBtnColor(); + event.target.classList.add("clicked"); selectTip = event.target.innerText; selectTip = parseInt(selectTip) / 100; } +function resetBtnColor() { + for (let i = 0; i < Object.keys(selectBtn).length; i++) { + selectBtn[i].classList.remove("clicked"); + } +} + for (let i = 0; i < selectBtn.length; i++) { selectBtn[i].addEventListener("click", (e) => clickedBtn(e)); } @@ -23,5 +29,13 @@ function showResult() { tipRatio.innerText = `$${tipCalc.toFixed(2)}`; totalRatio.innerText = `$${totalCalc.toFixed(2)}`; } +function reset() { + inputBill.value = null; + peopleNum.value = null; + tipRatio.innerText = "$0.00"; + totalRatio.innerText = "$0.00"; +} peopleNum.addEventListener("keyup", showResult); +window.addEventListener("load", reset); +resetBtn.addEventListener("click", reset); diff --git a/index.html b/index.html index 5c359d4..2b0ebbe 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
Bill - + Select Tip %
@@ -49,7 +49,7 @@
-
+
diff --git a/style.css b/style.css index 70512ea..13bf0fc 100644 --- a/style.css +++ b/style.css @@ -39,6 +39,7 @@ body { flex-direction: column; justify-content: center; } + .bill, .number { margin: 10px 0 20px 0; @@ -48,12 +49,22 @@ body { width: 300px; height: 35px; text-align: right; + background-repeat: no-repeat; + background-position: 15px center; + font-size: 24px; +} +.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 { +button:hover, +.clicked { background-color: hsl(185, 41%, 84%); color: hsl(183, 100%, 15%); } @@ -62,25 +73,31 @@ button:hover { grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } -.select-btn button { +.select-btn button:nth-child(-n + 3) { + width: 80px; + margin: 12px 0; +} +.select-btn button:nth-child(n + 4), +.select-btn input { width: 80px; - margin: 5px 8px 5px 0; + margin-bottom: 12px; } button { border: none; border-radius: 5px; - height: 30px; + height: 35px; background-color: hsl(183, 100%, 15%); color: hsl(189, 41%, 97%); } + .custom { - margin-top: 3%; border: none; border-radius: 5px; height: 30px; - width: 80px; background-color: hsl(189, 41%, 97%); color: hsl(183, 100%, 15%); + text-align: right; + font-size: 20px; } .tip-content, .total-content { @@ -93,7 +110,7 @@ button { flex-direction: row; } -.reset button { +.reset { color: hsl(183, 100%, 15%); background-color: hsl(186, 14%, 43%); width: 300px; From f8176e075f69ab85c332a78ea642cf344d2c6c97 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 7 Nov 2022 01:51:32 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20custom=20input=20=EB=B0=98=EC=98=81?= =?UTF-8?q?,=20number=200=EA=B0=92=EC=97=90=20=EB=8C=80=ED=95=9C=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 45 ++++++++++++++++++++++++++++++++++++++------- index.html | 9 +++++---- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index e8dfd08..559b9d8 100644 --- a/app.js +++ b/app.js @@ -4,8 +4,30 @@ const inputBill = document.querySelector(".bill"); const selectBtn = document.querySelectorAll("button"); const peopleNum = document.querySelector(".number"); const resetBtn = document.querySelector(".reset"); +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"); @@ -13,22 +35,26 @@ function clickedBtn(event) { selectTip = parseInt(selectTip) / 100; } -function resetBtnColor() { - for (let i = 0; i < Object.keys(selectBtn).length; i++) { - selectBtn[i].classList.remove("clicked"); +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%)"; } } -for (let i = 0; i < selectBtn.length; i++) { - selectBtn[i].addEventListener("click", (e) => clickedBtn(e)); -} - function showResult() { + decideZero(); tipCalc = (Number(inputBill.value) * selectTip) / peopleNum.value; totalCalc = Number(inputBill.value) / peopleNum.value + tipCalc; tipRatio.innerText = `$${tipCalc.toFixed(2)}`; totalRatio.innerText = `$${totalCalc.toFixed(2)}`; } + function reset() { inputBill.value = null; peopleNum.value = null; @@ -36,6 +62,11 @@ function reset() { totalRatio.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 2b0ebbe..507f2c6 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,10 @@ - Number of People +
+ Number of People +
+ @@ -38,7 +41,6 @@ Tip Amount
/ person
-
@@ -46,10 +48,9 @@ Total
/ person Reset
-
-
+
From 92a6ebbae75f48333b270508c7089672d3a58658 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Mon, 7 Nov 2022 02:58:34 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20css?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 14 +++--- index.html | 14 +++--- style.css | 139 ++++++++++++++++++++++++++++++++++++++++++----------- 3 files changed, 125 insertions(+), 42 deletions(-) diff --git a/app.js b/app.js index 559b9d8..dcabc53 100644 --- a/app.js +++ b/app.js @@ -1,9 +1,9 @@ -const tipRatio = document.querySelector(".tip-ratio"); -const totalRatio = document.querySelector(".total-ratio"); +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"); +const resetBtn = document.querySelector(".reset-btn"); const ifZero = document.querySelector(".if-zero"); const customTip = document.querySelector(".custom"); let selectTip; @@ -51,15 +51,15 @@ function showResult() { decideZero(); tipCalc = (Number(inputBill.value) * selectTip) / peopleNum.value; totalCalc = Number(inputBill.value) / peopleNum.value + tipCalc; - tipRatio.innerText = `$${tipCalc.toFixed(2)}`; - totalRatio.innerText = `$${totalCalc.toFixed(2)}`; + tipAmount.innerText = `$${tipCalc.toFixed(2)}`; + totalAmount.innerText = `$${totalCalc.toFixed(2)}`; } function reset() { inputBill.value = null; peopleNum.value = null; - tipRatio.innerText = "$0.00"; - totalRatio.innerText = "$0.00"; + tipAmount.innerText = "$0.00"; + totalAmount.innerText = "$0.00"; } for (let i = 0; i < selectBtn.length; i++) { diff --git a/index.html b/index.html index 507f2c6..9058f67 100644 --- a/index.html +++ b/index.html @@ -35,22 +35,22 @@ -
-
+
+
Tip Amount
/ person
-
+
-
+
Total -
/ person Reset
+
/ person
-
+
-
+
diff --git a/style.css b/style.css index 13bf0fc..8372acc 100644 --- a/style.css +++ b/style.css @@ -3,36 +3,28 @@ body { background-color: hsl(185, 41%, 84%); display: flex; - justify-content: center; 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; - flex-direction: row; - width: 800px; - height: 400px; background-color: white; border-radius: 20px; } -.result { - margin: 30px 30px 30px 30px; - background-color: hsl(183, 100%, 15%); - color: white; - width: 400px; - height: 340px; - border-radius: 20px; -} + .input-content { margin-left: 30px; display: flex; @@ -46,16 +38,18 @@ body { border: none; background-color: hsl(189, 41%, 97%); color: hsl(184, 14%, 56%); - width: 300px; 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); } @@ -63,55 +57,144 @@ body { 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-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } -.select-btn button:nth-child(-n + 3) { - width: 80px; - margin: 12px 0; -} -.select-btn button:nth-child(n + 4), -.select-btn input { - width: 80px; - margin-bottom: 12px; -} + 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; - height: 30px; 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; } -.first, -.second { - display: flex; - flex-direction: row; + +.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; + } +}