Add files via upload

2018-12-10 10:26:42 -05:00
commit 772823c1de
8 changed files with 277 additions and 0 deletions
--- a/Calculator/README.md
+++ b/Calculator/README.md
--- a/Calculator/calculator.js
+++ b/Calculator/calculator.js
@@ -0,0 +1,81 @@
+const tip10per = '10';
+const tip15per = '15';
+const tip20per = '20';
+
+// Function to create the original tip percent. 
+function tipCalculator(billTotal, selectedPer) {
+    if (selectedPer === tip10per) {
+        return billTotal * .10;
+    }
+    else if (selectedPer === tip15per) {
+        return billTotal * .15;
+    }
+    else if (selectedPer === tip20per) {
+        return billTotal * .20;
+    }
+    throw new Error('tip not selected')
+}
+
+
+function totalAmount(billTotal, selectedPer, numPpl) {
+    //Gets the selected percent that you want to leave for a tip from the bill total enterd and adds them together.
+    let tipAmount = tipCalculator(billTotal, selectedPer);
+    let totalAmount = tipAmount + billTotal;
+    //Does the OCD calculations by rounding the total bill amount up to make a whole number. Then taking that number and subtracting it from the total bill, which gives you a new tip amount that makes the bill total to be a whole number.
+    let ocdTotalAmount = Math.ceil(totalAmount);
+    let ocdTipAmount = ocdTotalAmount - totalAmount;
+    let newTip = new Number(ocdTipAmount + tipAmount);
+    
+    let billInfo = {
+        prevBillTotal: billTotal,
+        tipAmount: newTip,
+        newAmount: ocdTotalAmount
+    }
+    //Sends the above content to the splitBill function if more than one person was selected.
+    if (numPpl > 1) {
+        return splitBill(billInfo, numPpl);
+    }
+    else {
+        return billInfo;
+    }
+}
+
+function splitBill(splitTotal, numPpl) {
+    //Dividing the tip and bill between selected number of people.
+    let billPerPerson = splitTotal.prevBillTotal / numPpl;
+    let tipPerPerson = splitTotal.tipAmount / numPpl;
+    //Rounding bill to nearest 100 to make sure we get back a number that can be made from change. 
+    tipPerPerson = Math.round(100 * tipPerPerson) / 100;
+
+    return {
+
+        prevBillTotal: splitTotal.prevBillTotal,
+        newAmount: billPerPerson,
+        tipAmount: tipPerPerson,
+    }
+}
+
+//Get the bill that is entered.
+function getTotalbill() {
+    return parseInt(document.getElementById('totalBillInput').value);
+}
+//Get the number of people entered.
+function getNumPpl() {
+    return parseInt(document.getElementById('numPplInput').value);
+}
+// Get the tip perect that was selected. 
+function handlePercentClick(tipPercent) {
+    let billTotal = getTotalbill();
+    let numPpl = getNumPpl();
+
+    if (billTotal <= 0) {
+        return alert('Fill in all boxes please!')
+    }
+    else {
+        //Displays to the UI
+        let finBillTotal = totalAmount(billTotal, tipPercent, numPpl);
+        document.getElementById('ocdBill').textContent = finBillTotal.newAmount;
+        document.getElementById("ocdtTipAmount").textContent = finBillTotal.tipAmount;
+    }
+}
+
--- a/Calculator/img/bg.jpeg
+++ b/Calculator/img/bg.jpeg
--- a/Calculator/img/cardBG.jpeg
+++ b/Calculator/img/cardBG.jpeg
--- a/Calculator/index.html
+++ b/Calculator/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Tip calculator</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title></title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="main.css" />
+</head>
+
+<body>
+    <div class="bg">
+    <div class="inputCard">
+        <h1>
+            Tip Calculator
+        </h1>
+        <label for="totalBill">Total Bill</label> <br>
+        <div class="inputCenter">
+            <input id='totalBillInput' type="text" name="totalBill" class="billInput" />
+        </div>
+
+        <label for="tip">Tip Percent</label> <br>
+        <div class="tipPer">
+            <input id='tip10Input' class="tipPer" type="button" name="tip10" value="10%" onclick="handlePercentClick('10')"/>
+            <input id='tip15Input' class="tipPer" type="button" name="tip15" value="15%" onclick="handlePercentClick('15')"/>
+            <input id="tip20Input" class="tipPer" type="button" name="tip20" value="20%" onclick="handlePercentClick('20')"/>
+        </div>
+
+        <label for="split">Split</label> <br>
+        <div>
+            <input id='numPplInput' class="split" type="text" name="split"/>
+        </div>
+    </div>
+    
+    <div class="resultCard">
+        <div>
+            <h2>OCD Bill (per person):</h2><span id="ocdBill"></span>
+        </div>
+        <div>
+            <h2>OCD Tip Amount (per person):</h2><span id="ocdtTipAmount"></span>
+        </div>
+    </div>
+    <script src="calculator.js"></script>
+</div>
+</body>
+
+</html>
--- a/Calculator/main.css
+++ b/Calculator/main.css
@@ -0,0 +1,68 @@
+@import url("https://fonts.googleapis.com/css?family=Ubuntu");
+body {
+  margin: 0;
+  font-family: 'Ubuntu';
+}
+
+.inputCard {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 36%, 50% 64%, 0 36%);
+          clip-path: polygon(0% 0%, 100% 0, 100% 36%, 50% 64%, 0 36%);
+  background-color: #c60de2;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.inputCard h1 {
+  margin: 0;
+  font-size: 3.5rem;
+  margin-bottom: 1rem;
+}
+
+.inputCard label {
+  font-size: 2rem;
+}
+
+.inputCard .billInput {
+  width: 75vw;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+}
+
+.inputCard .tipPer {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.inputCard .split {
+  font-size: 1.5rem;
+  width: 15vw;
+}
+
+.resultCard {
+  position: fixed;
+  bottom: .5rem;
+  width: 100vw;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.resultCard .bottomH2 {
+  margin-bottom: 0;
+}
+
+.resultCard span {
+  font-size: 1.5em;
+}
+/*# sourceMappingURL=main.css.map */
--- a/Calculator/main.css.map
+++ b/Calculator/main.css.map
@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,OAAO,CAAC,qDAAI;AAUZ,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,QAAQ;CACxB;;AAGD,AAAA,UAAU,CAAC;EACP,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,SAAS,EAAE,gDAAgD;EAC3D,gBAAgB,EAjBP,OAAO;EAkBhB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,EAAE;EACX,WAAW,EAAE,MAAM;CA2BtB;;AApCD,AAWI,UAXM,CAWN,EAAE,CAAC;EACH,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,IAAI;CAClB;;AAfL,AAiBI,UAjBM,CAiBN,KAAK,CAAC;EACF,SAAS,EAAE,IAAI;CAClB;;AAnBL,AAqBI,UArBM,CAqBN,UAAU,CAAC;EACP,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,MAAM;CACpB;;AAzBL,AA2BI,UA3BM,CA2BN,OAAO,CAAC;EACJ,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,IAAI;CACtB;;AA9BL,AAgCI,UAhCM,CAgCN,MAAM,CAAC;EACH,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,IAAI;CACd;;AAGL,AAAA,WAAW,CAAC;EACR,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,KAAK;EAClB,YAAY,EAAE,KAAK;CAStB;;AAdD,AAOI,WAPO,CAOP,SAAS,CAAC;EACN,aAAa,EAAE,CAAC;CACnB;;AATL,AAWI,WAXO,CAWP,IAAI,CAAC;EACD,SAAS,EAAE,KACf;CAAC",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}
--- a/Calculator/main.scss
+++ b/Calculator/main.scss
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu');
+
+$colors: (
+    primary: #c60de2,
+);
+
+@function color($color-name) {
+    @return map-get($colors, $color-name)
+}
+
+body {
+    margin: 0;
+    font-family: 'Ubuntu';
+}
+
+
+.inputCard {
+    display: flex;
+    flex-direction: column;
+    clip-path: polygon(0% 0%, 100% 0, 100% 36%, 50% 64%, 0 36%);
+    background-color: color(primary);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -1;
+    align-items: center;
+
+    h1 {
+    margin: 0;
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    }
+
+    label {
+        font-size: 2rem;
+    }
+
+    .billInput {
+        width: 75vw;
+        margin-bottom: 1rem;
+        font-size: 1.5rem;
+    }
+
+    .tipPer {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .split {
+        font-size: 1.5rem;
+        width: 15vw;
+    }
+}
+
+.resultCard {
+    position: fixed;
+    bottom: .5rem;
+    width: 100vw;
+    margin-left: .5rem;
+    margin-right: .5rem;
+
+    .bottomH2 {
+        margin-bottom: 0;
+    }
+
+    span {
+        font-size: 1.5em
+    }
+}