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) | ||
} |