diff --git a/tip-caculator/README.md b/tip-caculator/README.md new file mode 100644 index 0000000..5646ca3 --- /dev/null +++ b/tip-caculator/README.md @@ -0,0 +1,8 @@ +# Tip Calculator + +### This small tool will calculate your tip and total ammount per person + +![Web terminal](./images/main.png) +![Web terminal](./images/main2.png) + +##### Created by - Ihtisham diff --git a/tip-caculator/css/style.css b/tip-caculator/css/style.css new file mode 100644 index 0000000..b6049d5 --- /dev/null +++ b/tip-caculator/css/style.css @@ -0,0 +1,379 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + + +/* HTML5 display-role reset for older browsers */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/* custom css */ + + +/* Chrome, Safari, Edge, Opera */ + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + + +/* Firefox */ + +input[type=number] { + -moz-appearance: textfield; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + background-color: hsl(185, 41%, 84%); + font-family: 'Space Mono', monospace; +} + +.app-title { + padding: 60px; + text-align: center; + font-weight: 700; + font-size: 24px; + color: hsl(185, 39%, 32%); +} + +.bill-container { + border-radius: 25px 25px 0 0; + background-color: hsl(0, 0%, 100%); + padding: 50px 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.input-group { + width: 100%; + margin-bottom: 30px; +} + +label, +input { + display: block; + width: 100%; +} + +label { + font-size: 18px; + color: hsl(183, 100%, 15%); + margin-bottom: 10px; +} + +input { + border: none; + outline: none; + background-color: hsl(185, 41%, 84%); + height: 48px; + font-family: 'Space Mono', monospace; + font-weight: 800; + color: hsl(183, 100%, 15%); + font-size: 26px; + border-radius: 4px; + padding: 14px; + text-align: right; + padding-left: 30px; +} + +::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: hsla(183, 100%, 15%, 0.321); + opacity: 1; + /* Firefox */ +} + +#bill { + background-image: url("/images/icon-dollar.svg"); + background-repeat: no-repeat; + background-position: 10px 1rem; +} + +#peolpe { + background-image: url("/images/icon-person.svg"); + background-repeat: no-repeat; + background-position: 10px 1rem; +} + +.tip-button-group { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 6px; +} + +.tip-button:not(:last-child) { + background-color: hsl(183, 100%, 15%); + color: hsl(0, 0%, 100%); + text-align: center; + padding: 14px; + border-radius: 5px; + margin-bottom: 10px; + font-weight: 800; + font-size: 20px; +} + +.tip-button.active:not(:last-child) { + background-color: rgb(0, 185, 185); + color: hsl(183, 100%, 15%); +} + +.tip-button:last-child { + color: hsl(183, 100%, 15%); + padding-left: 0; +} + +.tip-button:nth-last-child(-n+2) { + margin-bottom: 0; +} + +.tip-button:not(:last-child):hover { + color: hsl(183, 100%, 15%); + background-color: rgb(1, 202, 202); + cursor: pointer; +} + +.result-card { + background-color: hsl(183, 100%, 15%); + width: 100%; + padding: 16px; + color: white; + height: 100%; + border-radius: 8px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.reset-button { + background-color: rgb(1, 202, 202); + font-size: 18px; + padding: 14px; + text-align: center; + color: hsl(183, 100%, 15%); + font-weight: 800; + border-radius: 5px; + margin-top: 28px; +} + +.reset-button:hover { + background-color: rgb(0, 185, 185); + cursor: pointer; +} + +.amount-row { + margin: 24px 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.amount-info, +.amount-bill { + display: inline-block; +} + +.amount-title { + font-weight: 500; + margin-bottom: 8px; + color: hsl(0, 0%, 100%); +} + +.amount-for { + font-size: 12px; + color: hsl(185, 41%, 84%); +} + +.amount-bill { + float: right; + font-weight: 800; + font-size: 30px; + color: rgb(1, 202, 202); +} + +@media screen and (min-width: 375px) { + .tip-button-group { + grid-template-columns: 1fr 1fr 1fr; + } + .tip-button:nth-last-child(-n+3) { + margin-bottom: 0; + } +} + +@media screen and (min-width: 660px) { + .bill-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 6px; + } + .input-group:last-child { + margin-bottom: 0px; + } +} + +@media screen and (min-width: 900px) { + .bill-container { + border-radius: 10px; + margin: 2em 12em; + } +} + + +/* test colors */ + + +/* .reset-button { + background-color: hsl(183, 100%, 15%); + background-color: hsl(186, 14%, 43%); + background-color: hsl(184, 14%, 56%); + background-color: hsl(185, 41%, 84%); + background-color: hsl(189, 41%, 97%); + background-color: hsl(0, 0%, 100%); +} */ + +.attribution { + font-size: 11px; + text-align: center; +} + +.attribution a { + color: hsl(228, 45%, 44%); +} \ No newline at end of file diff --git a/tip-caculator/images/favicon-32x32.png b/tip-caculator/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/tip-caculator/images/favicon-32x32.png differ diff --git a/tip-caculator/images/icon-dollar.svg b/tip-caculator/images/icon-dollar.svg new file mode 100644 index 0000000..4a6cc0a --- /dev/null +++ b/tip-caculator/images/icon-dollar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tip-caculator/images/icon-person.svg b/tip-caculator/images/icon-person.svg new file mode 100644 index 0000000..aec4e47 --- /dev/null +++ b/tip-caculator/images/icon-person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tip-caculator/images/logo.svg b/tip-caculator/images/logo.svg new file mode 100644 index 0000000..c2cd342 --- /dev/null +++ b/tip-caculator/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tip-caculator/images/main.png b/tip-caculator/images/main.png new file mode 100644 index 0000000..35e7663 Binary files /dev/null and b/tip-caculator/images/main.png differ diff --git a/tip-caculator/images/main2.png b/tip-caculator/images/main2.png new file mode 100644 index 0000000..4c18a6d Binary files /dev/null and b/tip-caculator/images/main2.png differ diff --git a/tip-caculator/index.html b/tip-caculator/index.html new file mode 100644 index 0000000..b681805 --- /dev/null +++ b/tip-caculator/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + + Tip calculator app + + + + + + + + + +
+
Tip Calculator
+ +
+
+
+ + +
+ +
+ +
+
5%
+
10%
+
15%
+
25%
+
50%
+ +
+
+ +
+ + +
+
+ +
+
+
+
+
Tip Amount
+
/ person
+
+
$0.00
+
+
+
+
Total
+
/ person
+
+
$0.00
+
+
+ +
RESET
+
+
+
+ +
+ Coded by Ihtisham. +
+ + + + + \ No newline at end of file diff --git a/tip-caculator/scripts/main.js b/tip-caculator/scripts/main.js new file mode 100644 index 0000000..43e5f64 --- /dev/null +++ b/tip-caculator/scripts/main.js @@ -0,0 +1,53 @@ +const billInput = document.querySelector('#bill'); +const peopleInput = document.querySelector('#peolpe'); +const tipPercentInput = document.querySelectorAll('.tip-button'); +const personBill = document.querySelector('#person-bill'); +const totalBill = document.querySelector('#total-bill'); +const reset = document.querySelector('.reset-button'); +const customPercentage = document.querySelector('.custom'); +let percentage = 5; + +function calculateBill() { + const billValue = billInput.value; + const noOfPeople = peopleInput.value; + // const people = peopleInput.value; + + let tipAmount = ((billValue / 100) * percentage) / noOfPeople; + let totalAmount = (billValue / noOfPeople) + parseInt(tipAmount); + + personBill.textContent = `$${(tipAmount).toFixed(2)}`; + totalBill.textContent = `$${(totalAmount).toFixed(2)}`; +} + +tipPercentInput.forEach(item => { + item.addEventListener('click', function() { + customPercentage.value = ''; + tipPercentInput.forEach(btn => btn.classList.remove('active')); + item.classList.add('active'); + percentage = item.getAttribute('value'); + + calculateBill(); + }); +}); + +customPercentage.addEventListener('input', function() { + tipPercentInput.forEach(btn => btn.classList.remove('active')); + percentage = this.value; + + calculateBill(); +}); + +function resetInputs() { + billInput.value = ''; + peopleInput.value = 1; + customPercentage.value = ''; + personBill.textContent = `$0.00`; + totalBill.textContent = `$0.00`; + tipPercentInput[0].click(); +} + +[billInput, peopleInput].forEach(item => { + item.addEventListener('input', calculateBill); +}); + +reset.addEventListener('click', resetInputs); \ No newline at end of file