week 5

alm17008 · Feb 19, 2020 · 1202abe · 1202abe
1 parent 9add38e
commit 1202abe
Show file tree

Hide file tree

Showing 13 changed files with 340 additions and 2 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
-{
-    "liveServer.settings.port": 5501
+{
+    "liveServer.settings.port": 5501
 }
diff --git a/tip-calculator-master/.gitignore b/tip-calculator-master/.gitignore
@@ -0,0 +1,27 @@
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/tip-calculator-master/README.md b/tip-calculator-master/README.md
@@ -0,0 +1,18 @@
+# Tip Calculator
+An exercise in JavaScript function definitions and return values. Course: DMD 3475. 
+
+## Introduction
+Our tip calculator application is almost complete. Our function named `updateValues()` will fetch the values that were input by the user. 
+
+At that point, the values are passed as arguments to two functions named `calculateTipPerPerson()` and `calculateTotalPerPerson()`. The values that are returned by each function are used to update the DOM.
+
+## Instructions
+
+1. Define both required functions: `calculateTipPerPerson()` and `calculateTotalPerPerson()`.
+2. Each function should accept the 3 arguments being passed to them within the `updateValues()` function.
+3. Using those values, calculate and return the appropriate answer.
+4. Extra credit: Properly round the dollars and cents that are returned by your functions.
+
+## Helpful Information
+* Search Google for "Tip Calculator" to see the desired functionality for this application.
+* The `calculateTotalPerPerson()` function should return a value that includes the tip.
diff --git a/tip-calculator-master/css/main.css b/tip-calculator-master/css/main.css
@@ -0,0 +1,28 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.card {
+    width: 400px;
+    max-width: 100%;
+}
+
+.card-image img {
+    height: 100px;
+    object-fit: cover;
+    object-position: center;
+}
+
+.card-content .row {
+    margin: 0;
+}
+
+
+.card .card-image .card-title {
+    font-weight: bold;
+    text-shadow: 2px 2px 3px black;
+    padding-bottom: 12px;
+}
diff --git a/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg b/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
diff --git a/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg b/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
diff --git a/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg b/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
diff --git a/tip-calculator-master/index.html b/tip-calculator-master/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tip Calculator</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body class="blue darken-3"> 
+
+
+    <div class="card z-depth-2">
+        <div class="card-image">
+            <img src="images/claudia-crespo-ewOrvEa87j4-unsplash.jpg">
+            <span class="card-title">Tip Calculator</span>
+        </div>
+        <div class="card-content">
+            <div class="row">
+                <form class="col s12">
+                    <div class="row">
+                        <div class="input-field">
+                            <i class="material-icons prefix">attach_money</i>
+                            <input type="number" id="total" value="100.00" min="0"></input>
+                            <label for="total">Bill Total</label>
+                        </div>
+                        <div class="input-field">
+                            <i class="material-icons prefix">pie_chart</i>
+                            <input type="number" id="tip" value="15" min="0"></input>
+                            <label for="tip">Tip Percentage</label>
+                        </div>
+                        <div class="input-field">
+                            <i class="material-icons prefix">group_add</i>
+                            <input type="number" id="people" value="1" min="1"></input>
+                            <label for="people">Number of People</label>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="card-action">
+            <div class="row">
+                <div class="col s6">
+                    Tip (per person): 
+                    <br>
+                    $<span class="tipOutput"></span>
+                </div>
+                <div class="col s6">
+                    Total (per person): 
+                    <br>
+                    $<span class="totalOutput"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/tip-calculator-master/js/script.js b/tip-calculator-master/js/script.js
@@ -0,0 +1,53 @@
+/**
+ * Get references to each of the form inputs
+ */
+let total = document.querySelector('#total');
+let tip = document.querySelector('#tip');
+let people = document.querySelector('#people');
+
+/**
+ * Whenever the fields are updated, we call
+ * the updateValues function. 
+ */
+total.addEventListener('change', updateValues);
+total.addEventListener('keyup', updateValues);
+tip.addEventListener('change', updateValues);
+tip.addEventListener('keyup', updateValues);
+people.addEventListener('change', updateValues);
+people.addEventListener('keyup', updateValues);
+
+/**
+ * We will need references for the span tags
+ * that we will use to output our results.
+ */
+let tipOutput = document.querySelector(".tipOutput");
+let totalOutput = document.querySelector(".totalOutput");
+
+/**
+ * This function is run every time an input is changed
+ * by a user.
+ */
+function updateValues(event){
+
+    // Get the latest values from our form inputs
+    let totalValue = total.value;
+    let tipValue = tip.value;
+    let peopleValue = people.value;
+
+    // Update the values on the screen
+    tipOutput.innerText = calculateTipPerPerson(totalValue, tipValue, peopleValue);
+    totalOutput.innerText = calculateTotalPerPerson(totalValue, tipValue, peopleValue);
+}
+
+/**
+ * Your code goes down here ...
+ * @todo Write functions for calculateTipPerPerson() and calculateTotalPerPerson()
+ */
+function calculateTipPerPerson(billTotal, tipPercent, numPeople) {
+    return (Math.ceil((billTotal * tipPercent) / numPeople) /100).toFixed(2);
+}
+
+function calculateTotalPerPerson(billTotal, tipPercent, numPeople) {
+    console.log(calculateTipPerPerson(billTotal, tipPercent, numPeople));
+    return (Math.ceil((+calculateTipPerPerson(billTotal, tipPercent, numPeople) + (billTotal / numPeople)) * 100) / 100).toFixed(2);
+}
diff --git a/week-5/bean.js b/week-5/bean.js
@@ -0,0 +1,46 @@
+function countBs(beanString) {
+    let count = 0
+    for (let i = 0; i < beanString.length; i++) {
+        const element = beanString[i];
+        if (element === 'B') count++;
+    }
+    return count
+}
+
+let beanInput = document.querySelector('#beanInput')
+let beanOutput = document.querySelector('#beanOutput')
+beanInput.addEventListener('change', updateBean);
+beanInput.addEventListener('keyup', updateBean);
+
+function updateBean() {
+    beanOutput.innerText = countBs(beanInput.value)
+}
+
+function countChar(string, char) {
+    let count = 0;
+	for (let i = 0; i < string.length; i++) {
+		const element = string[i];
+		if (element === char) count++;
+	}
+	return count;
+}
+
+let charInput = document.querySelector('#charInput')
+let inputChar = document.querySelector('#inputChar')
+let charOutput = document.querySelector('#charOutput')
+let charSearch = document.querySelector('#charSearch')
+
+charInput.addEventListener('change', updateChar);
+charInput.addEventListener('keyup', updateChar);
+
+inputChar.addEventListener('change', updateChar);
+inputChar.addEventListener('keyup', updateChar);
+
+function updateChar() {
+    charOutput.innerText = countChar(charInput.value, inputChar.value)
+    charSearch.innerText = inputChar.value
+}
+
+function countBs(string) {
+    return countChar(string, 'B')
+}
diff --git a/week-5/index.html b/week-5/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chapter 3 Exercises</title>
+</head>
+<body>
+    <div class="minimum">
+        <h1>Minimum Function</h1>
+        <pre>
+            <code>
+function min(num1, num2) {
+    return num1 < num2 ? num1 : num2
+}
+        </code>
+        </pre>
+        <input type="number" name="num1" id="num1" value="0">
+        <input type="number" name="num2" id="num2" value="0">
+        <div>Minimum: <span id="minOutput"></span></div>
+    </div>
+    <div class="recursion">
+        <h1>Recursion</h1>
+        <pre>
+            <code>
+function isEven(num) {
+    num < 0 ? num *= -1 : num
+    if (num == 0) return true
+    else if (num == 1) return false
+    else return isEven(num - 2)
+}
+            </code>
+        </pre>
+        <input type="number" name="recursion" id="isEven" value="0">
+        <div>Is Even?: <span id="evenOutput"></span></div>
+    </div>
+    <div class="bean">
+        <h1>Bean Counting</h1>
+        <pre>
+            <code>
+function countBs(beanString) {
+    let count = 0
+    for (let i = 0; i < beanString.length; i++) {
+        const element = beanString[i];
+        if (element === 'B') count++;
+    }
+    return count
+}
+            </code>
+        </pre>
+        <input type="text" name="bean" id="beanInput" placeholder="String to search">
+        <div><span id="beanOutput"></span> B's</div>
+    </div>
+    <div class="char">
+        <h1>Char Counting</h1>
+        <pre>
+            <code>
+function countChar(string, char) {
+    let count = 0;
+	for (let i = 0; i < string.length; i++) {
+		const element = string[i];
+		if (element === char) count++;
+	}
+	return count;
+}
+            </code>
+        </pre>
+        <input type="text" name="charInput" id="charInput" placeholder="String to search">
+        <input type="text" name="inputChar" id="inputChar" placeholder="Character to look for" maxlength="1">
+        <div><span id="charOutput"></span> <span id="charSearch"></span>'s</div>
+    </div>
+    <script src="minimum.js"></script>
+    <script src="recursion.js"></script>
+    <script src="bean.js"></script>
+</body>
+</html>
diff --git a/week-5/minimum.js b/week-5/minimum.js
@@ -0,0 +1,14 @@
+let minOutput = document.getElementById('minOutput')
+let n1 = document.querySelector('#num1')
+let n2 = document.querySelector('#num2');
+n1.addEventListener('change', updateMinVal);
+n1.addEventListener('keyup', updateMinVal);
+n2.addEventListener('change', updateMinVal);
+n2.addEventListener('keyup', updateMinVal);
+function min(num1, num2) {
+    return num1 < num2 ? num1 : num2
+}
+
+function updateMinVal() {
+    minOutput.innerText = min(n1.value, n2.value)
+}
diff --git a/week-5/recursion.js b/week-5/recursion.js
@@ -0,0 +1,14 @@
+function isEven(num) {
+    num < 0 ? num *= -1 : num
+    if (num == 0) return true
+    else if (num == 1) return false
+    else return isEven(num - 2)
+}
+let input = document.querySelector('#isEven');
+let output = document.querySelector('#evenOutput')
+input.addEventListener('change', updateEven);
+input.addEventListener('keyup', updateEven);
+
+function updateEven() {
+    output.innerText = isEven(input.value)
+}