Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Eloquent JS ch3 + Tip Calculator submission
- Loading branch information
Showing
14 changed files
with
294 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Bean Counter Exercise</title> | ||
</head> | ||
<body> | ||
<h1>Hi there, press F12!</h1> | ||
|
||
<script src="main.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
// Your code here. | ||
function countBs(x){ | ||
let b = 0; | ||
for(i = 0; i < x.length; i++){ | ||
if (x.charAt(i) === "B") { | ||
b += 1; | ||
} | ||
} | ||
return b; | ||
} | ||
|
||
function countChar(x,y) { | ||
let c = 0; | ||
for(i=0; i < x.length; i++){ | ||
if(x.charAt(i) === y) { | ||
c += 1; | ||
} | ||
} | ||
return c; | ||
} | ||
|
||
console.log(countBs("BBC")); | ||
// → 2 | ||
console.log(countChar("kakkerlak", "k")); | ||
// → 4 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Minimum Exerise</title> | ||
</head> | ||
<body> | ||
<h1>Hi there, press F12!</h1> | ||
|
||
<script src="main.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
function min(x,y) { | ||
return Math.min(x,y); | ||
} | ||
console.log(min(0, 10)); | ||
|
||
console.log(min(0, -10)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Recursion Exercise</title> | ||
</head> | ||
<body> | ||
<h1>Hi there, press F12!</h1> | ||
|
||
<script src="main.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
// Your code here. | ||
function isEven(x) { | ||
if (x == 0){ | ||
return true; | ||
} | ||
else if (x == 1){ | ||
return false; | ||
} | ||
else if (x < 0) { | ||
return isEven(-x); | ||
} | ||
else { | ||
return isEven(x-2); | ||
} | ||
} | ||
|
||
// Or | ||
// function isEven(x){ | ||
// if (x % 2 == 0){ | ||
// return true; | ||
// } | ||
// else { | ||
// return false; | ||
// } | ||
// } | ||
|
||
console.log(isEven(50)); | ||
// → true | ||
console.log(isEven(75)); | ||
// → false | ||
console.log(isEven(-1)); | ||
// → ?? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 added
BIN
+1020 KB
week-5/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.24 MB
week-5/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.09 MB
week-5/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<!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="1"></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): $<span class="tipOutput"></span> | ||
</div> | ||
<div class="col s6"> | ||
Total (per person): $<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/** | ||
* 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(totalValue,tipValue, peopleValue){ | ||
tipOutput = (totalValue * (tipValue/100)) / peopleValue; | ||
console.log(tipOutput); | ||
return tipOutput; | ||
} | ||
|
||
function calculateTotalPerPerson(totalValue,tipValue, peopleValue){ | ||
let tipAdd = Number(totalValue) * (tipValue/100); | ||
totalOutput = (Number(totalValue) + tipAdd) / peopleValue; | ||
console.log(tipAdd); | ||
console.log(totalOutput); | ||
return totalOutput; | ||
} |