Skip to content

/ dmd-3475

Permalink
Browse files

week 5

  • Loading branch information
Alex Mueller
Alex Mueller committed Feb 19, 2020
1 parent 9add38e commit 1202abe43615ee287ba0263ea3d10cd7d377ef28
4 .vscode/settings.json
View file
@@ -1,3 +1,3 @@
{ {
"liveServer.settings.port": 5501 "liveServer.settings.port": 5501
} }
27 tip-calculator-master/.gitignore
View file
@@ -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
18 tip-calculator-master/README.md
View file
@@ -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.
28 tip-calculator-master/css/main.css
View file
@@ -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;
}
BIN +1020 KB tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
View file
Binary file not shown.
BIN +1.24 MB tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
View file
Binary file not shown.
BIN +1.09 MB tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
View file
Binary file not shown.
62 tip-calculator-master/index.html
View file
@@ -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>
53 tip-calculator-master/js/script.js
View file
@@ -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);
}
46 week-5/bean.js
View file
@@ -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')
}
76 week-5/index.html
View file
@@ -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>
14 week-5/minimum.js
View file
@@ -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)
}
14 week-5/recursion.js
View file
@@ -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)
}

0 comments on commit 1202abe

Please sign in to comment.
You can’t perform that action at this time.