Permalink
Showing
with
340 additions
and 2 deletions.
- +2 −2 .vscode/settings.json
- +27 −0 tip-calculator-master/.gitignore
- +18 −0 tip-calculator-master/README.md
- +28 −0 tip-calculator-master/css/main.css
- BIN tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
- BIN tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
- BIN tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
- +62 −0 tip-calculator-master/index.html
- +53 −0 tip-calculator-master/js/script.js
- +46 −0 week-5/bean.js
- +76 −0 week-5/index.html
- +14 −0 week-5/minimum.js
- +14 −0 week-5/recursion.js
@@ -1,3 +1,3 @@ | |||
{ | { | ||
"liveServer.settings.port": 5501 | "liveServer.settings.port": 5501 | ||
} | } |
@@ -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 |
@@ -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. |
@@ -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; | |||
} |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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> |
@@ -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); | |||
} |
@@ -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') | |||
} |
@@ -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> |
@@ -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) | |||
} |
@@ -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) | |||
} |