diff --git a/.gitignore b/.gitignore index d13464a..313464b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -# Avoid accidental upload of the Sketch and Figma design files +git revert HEAD# Avoid accidental upload of the Sketch and Figma design files ##################################################### ## Please do not remove lines 5 and 6 - thanks! 🙂 ## ##################################################### @@ -13,4 +13,7 @@ # Avoid your project being littered with annoying .DS_Store files! .DS_Store -.prettierignore \ No newline at end of file +.prettierignore + +# Developement Mode Components +./docs \ No newline at end of file diff --git a/index.html b/index.html index 5c09e8d..9fb7f1a 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,106 @@ - - - - - - - - Frontend Mentor | Tip calculator app - - - - - - - Bill - - Select Tip % - 5% - 10% - 15% - 25% - 50% - Custom - - Number of People - - Tip Amount - / person - - Total - / person - - Reset - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + Frontend Mentor | Tip Calculator App + + + + + +

+ SPLI
+ TTER +

+ +
+ +
+
+

Bill

+ +
+ Dollar Sign + + +
+
+ +
+

Select Tip %

+ +
+ + + + + + + +
+
+ +
+

Num of People

+ +
+ Person Icon + +
+
+
+ + +
+
+ +
+

Tip Amount
+ /person +

+

00.00

+
+ + +
+

Total Amount
+ /person +

+

00.00

+
+
+ +
+
+ + + + + + + diff --git a/README.md b/public/docs/README.md similarity index 100% rename from README.md rename to public/docs/README.md diff --git a/style-guide.md b/public/docs/style-guide.md similarity index 100% rename from style-guide.md rename to public/docs/style-guide.md diff --git a/public/fonts/Space_Mono/OFL.txt b/public/fonts/Space_Mono/OFL.txt new file mode 100644 index 0000000..638887e --- /dev/null +++ b/public/fonts/Space_Mono/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2016 Google Inc. All Rights Reserved. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/public/fonts/Space_Mono/SpaceMono-Bold.ttf b/public/fonts/Space_Mono/SpaceMono-Bold.ttf new file mode 100644 index 0000000..20e3449 Binary files /dev/null and b/public/fonts/Space_Mono/SpaceMono-Bold.ttf differ diff --git a/public/fonts/Space_Mono/SpaceMono-BoldItalic.ttf b/public/fonts/Space_Mono/SpaceMono-BoldItalic.ttf new file mode 100644 index 0000000..ff2ea5a Binary files /dev/null and b/public/fonts/Space_Mono/SpaceMono-BoldItalic.ttf differ diff --git a/public/fonts/Space_Mono/SpaceMono-Italic.ttf b/public/fonts/Space_Mono/SpaceMono-Italic.ttf new file mode 100644 index 0000000..f36282f Binary files /dev/null and b/public/fonts/Space_Mono/SpaceMono-Italic.ttf differ diff --git a/public/fonts/Space_Mono/SpaceMono-Regular.ttf b/public/fonts/Space_Mono/SpaceMono-Regular.ttf new file mode 100644 index 0000000..04e56b9 Binary files /dev/null and b/public/fonts/Space_Mono/SpaceMono-Regular.ttf differ diff --git a/images/favicon-32x32.png b/public/images/favicon-32x32.png similarity index 100% rename from images/favicon-32x32.png rename to public/images/favicon-32x32.png diff --git a/images/icon-dollar.svg b/public/images/icon-dollar.svg similarity index 100% rename from images/icon-dollar.svg rename to public/images/icon-dollar.svg diff --git a/images/icon-person.svg b/public/images/icon-person.svg similarity index 100% rename from images/icon-person.svg rename to public/images/icon-person.svg diff --git a/images/logo.svg b/public/images/logo.svg similarity index 100% rename from images/logo.svg rename to public/images/logo.svg diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..1b6b011 --- /dev/null +++ b/src/script.js @@ -0,0 +1,74 @@ +"use strict"; + +// Elements Selection +const bill = document.getElementById("bill-input"); +const peopleNum = document.getElementById("people-count"); +const tipAmount = document.getElementById("tip-amount"); +const totalAmount = document.getElementById("total-amount"); +const resetButton = document.getElementById("reset-btn"); +const customTip = document.getElementById("custom-tip"); +const buttons = document.querySelectorAll(".option"); + +const getBillVal = () => { + return parseFloat(bill.value); +}; + +const getTipVal = () => { + let selected = undefined; + buttons.forEach(button => { + if (button.classList.contains('--bg-selected')) { + selected = button; + } + }) + return parseFloat(selected.value); +} + +customTip.addEventListener('input', (event) => { + updateDashboard(); +}) + +const getPeopleNum = () => { + return parseFloat(peopleNum.value); +} + + +const onTipSelection = (event) => { + const selected = event.target; + buttons.forEach(button => { + button.classList.remove('--bg-selected'); + }); + selected.classList.add('--bg-selected'); + + if (selected.id != 'custom-tip') { + updateDashboard(); + } +} + +const updateDashboard = () => { + const tipPrecent = (getTipVal() / 100); + const billTip = (getBillVal() * tipPrecent) + tipAmount.innerHTML = (billTip / getPeopleNum()).toFixed(2); + totalAmount.innerHTML = ((getBillVal() + billTip) / getPeopleNum()).toFixed(2); +}; + +buttons.forEach(button => { + button.addEventListener('click', onTipSelection); +}) + +bill.addEventListener('input', (event) => { + updateDashboard(); +}) + +peopleNum.addEventListener('input', (event) => { + updateDashboard(); +}) + +resetButton.addEventListener('click', () => { + bill.value = 0; + peopleNum.value = 1; + buttons.forEach(button => { + button.classList.remove('--bg-selected'); + }) + customTip.value = null; +}) + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..7b5554b --- /dev/null +++ b/styles/style.css @@ -0,0 +1,210 @@ +@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + +:root { + --very-dark-cyan: hsl(183, 100%, 15%); + --dark-gray-cyan: hsl(186, 14%, 43%); + --gray-cyan: hsl(184, 14%, 56%); + --strong-cyan: hsl(172, 67%, 45%); + --light-gray-cyan: hsl(185, 41%, 84%); + --super-light-cyan: hsl(189, 41%, 97%); +} + +* { + font-family: 'Space Mono'; + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + display: flex; + flex-direction: column; + + align-items: center; + justify-content: center; + /* align-content: center; */ + + /* width: 100%; + height: 100%; */ + + + background-color: var(--light-gray-cyan); +} + +h1 { + font-size: 24px; + letter-spacing: 1rem; + padding-bottom: 1rem; +} + +#app { + width: 920px; + height: 480px; + border-radius: 15px; + background-color: white; + padding: 20px; + gap:20px +} + +input { + border: none; + background-color: var(--super-light-cyan); + width: 100%; +} + +/* Remove input side arrows */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + appearance: none; +} + +button { + border: none; +} + +input, +button { + border-radius: 5px; + padding: 5px; +} + +input::placeholder { + color: var(--gray-cyan) +} + +/* Utilities */ +.--corner-15 { + border-radius: 15px; +} + +/* Container Properties */ + +.flex { + display: flex; + /* overflow: hidden; */ + + padding: 20px; + + width: 100%; + height: 100%; +} + +.flex--inline { + display: inline-flex; + /* overflow: hidden; */ + + padding: 10px; + width: 100%; + height: 100%; +} + +.--col { + flex-direction: column; + +} + +.--bg-primary { + background-color: var(--very-dark-cyan); + color: white; +} + +.--bg-selected { + background-color: var(--strong-cyan); + color: var(--very-dark-cyan); +} + +.grid--inline { + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: repeat(2, 1fr); + + gap: 10px; +} + +.flex--inline.--block-padding { + padding-block: 20px; +} + +.--space-between { + justify-content: space-between; +} + +#b-custm { + text-align: center; +} + +.btn { + width: 100% +} + +.btn:hover { + background-color: var(--gray-cyan); +} + +#b-custm:hover::placeholder { + color: var(--super-light-cyan); + +} + +/* text */ +.s-txt { + font-size: 0.8rem; +} + +.m-txt { + font-size: 1em; +} + +.l-txt { + font-size: 1.25em; +} + +.xl-txt { + font-size: 1.75em; +} + +.--gray-cyan { + color: var(--gray-cyan); +} + +.--dark-gray-cyan { + color: var(--dark-gray-cyan) +} + +/* input-wrapper */ + +.input-wrapper { + position: relative; + display: flex; +} + +.input-wrapper img { + position: absolute; + z-index: 1; + align-self: center; + left: 5px; +} + +.input-wrapper input { + text-align: right; +} + +/* resulst info wrapper */ + +.res-info-wrapper { + justify-content: space-between; + align-items: center; + height: auto; + padding: 0; + padding-inline: 5px; +} + + + +#reset-btn { + padding-block: 0.8rem; +} \ No newline at end of file