Skip to content

Commit 4a0b33b

Browse files
Obada-othObada-oth
authored
Merge pull request #3 from Obada-oth/js2-week3-obada
Js2 week3 obada
2 parents 062200f + c4a94ad commit 4a0b33b

10 files changed

Lines changed: 238 additions & 32 deletions

File tree

‎Week2/project/.DS_Store‎

6 KB
Binary file not shown.

‎Week3/js-exercises/ex1-AddSix.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,16 @@ Call the function three times. The return values should be:
1010
1111
*/
1212

13-
function createBase( /* ???? */ ) {
13+
debugger;
14+
function createBase(/* ???? */ x) {
1415
// Put here your logic...
16+
return function (y) {
17+
return (x = x + y);
18+
};
1519
}
1620

17-
const addSix = createBase(6);
21+
const addNine = createBase(6);
1822

19-
// Put here your function calls...
20-
console.log(addSix());
23+
console.log(addNine(9)); //15
24+
console.log(addNine(9)); //24
25+
console.log(addNine(9)); //33

‎Week3/js-exercises/ex2-RemoveDuplicates.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,19 @@ does not return anything but removes any duplicate elements from the array.
1010
1111
*/
1212

13-
1413
// WRITE YOUR FUNCTION HERE
15-
14+
// debugger;
1615
const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b'];
17-
18-
removeDuplicates(letter);
19-
20-
if (letters === ['a', 'b', 'c', 'd', 'e', 'f'])
21-
console.log("Hooray!")
16+
let removeDuplicates = (letters) => {
17+
letters.sort().forEach((letter, index) => {
18+
if (letters.indexOf(letter) !== index) {
19+
letters.splice(index, 1);
20+
}
21+
});
22+
return letters;
23+
};
24+
console.log(removeDuplicates(letters));
25+
26+
if (JSON.stringify(removeDuplicates(letters)) === JSON.stringify(['a', 'b', 'c', 'd', 'e', 'f'])) {
27+
console.log('Hooray!');
28+
}

‎Week3/js-exercises/ex3-GuessTheOutput.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ Write out your reasoning in 50 words or less.
88
99
*/
1010

11-
12-
11+
// debugger;
1312
let a = 10;
1413
const x = (function () {
1514
a = 12;
@@ -18,4 +17,9 @@ const x = (function () {
1817
};
1918
})();
2019

21-
x();
20+
x();
21+
22+
//output is alert:12.
23+
// variable a is declared and assigned the value 10 in the global scope.
24+
// function x is declared and defined , a new local scope is created, in which the value of 12 is assigned to the variable a.
25+
// function x returns a function that calls itself immediately and displays alert with the value of a in the local scope.

‎Week3/js-exercises/ex4-GuessMore.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,29 @@ function f1(val) {
1717
f1(x);
1818
console.log(x);
1919

20+
// outputs 9 because x is declared with const and assigned the value of 9 ,
21+
// console.log(x) will log this value.
22+
// to get the function's returned value in the console : console.log(f1(x)).
23+
// OR :
24+
// let x=9
25+
// function f1(val) {
26+
// val = val + 1;
27+
// return (x=val);
28+
// }
29+
// f1(x);
30+
// console.log(x);
31+
//
32+
2033
const y = {
21-
x: 9
34+
x: 9,
2235
};
2336

2437
function f2(val) {
2538
val.x = val.x + 1;
2639
return val;
2740
}
2841
f2(y);
29-
console.log(y);
42+
console.log(y);
43+
// outputs {x:10}
44+
// The value that y is pointing to (the object) didn't change here ,y is still pointing to the object
45+
// only the property x of the object changed.

‎Week3/js-exercises/ex5-LotteryMachine.js‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,37 @@ Don't you just love the thrill of the lottery? What if I told you we can make ou
2525
if the array value is divisible by both 3 and 5.
2626
2727
*/
28-
29-
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
30-
const numbers = [];
28+
debugger;
29+
function threeFive(startNumber, stopNumber, threeCallback, fiveCallback) {
3130
// make array
32-
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
31+
function makeArray() {
32+
let numbers = [];
33+
34+
for (let i = 0; i <= stopNumber - startNumber; i++) {
35+
numbers.push(startNumber + i);
36+
}
37+
return numbers;
38+
}
39+
let newArray = makeArray();
40+
41+
newArray.forEach((num) => {
42+
if (num % 3 === 0) {
43+
threeCallback(num);
44+
}
45+
if (num % 5 === 0) {
46+
fiveCallback(num);
47+
}
48+
});
49+
}
50+
51+
function sayThree(num) {
52+
console.log(num + ' Is devisible By Three');
53+
}
54+
function sayFive(num) {
55+
console.log(num + ' Is devisible By Five');
3356
}
3457

3558
threeFive(10, 15, sayThree, sayFive);
3659

3760
// Should create an array [10,11,12,13,14,15]
38-
// and call sayFive, sayThree, sayThree, sayFive
61+
// and call sayFive, sayThree, sayThree, sayFive

‎Week3/project/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

‎Week3/project/index.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background-color: #eccc68;
8+
font-family: 'Bangers', cursive;
9+
}
10+
#app {
11+
width: 40%;
12+
13+
margin: 50px auto;
14+
text-align: center;
15+
line-height: 3rem;
16+
}
17+
main {
18+
padding-top: 2rem;
19+
padding-bottom: 2rem;
20+
background-color: white;
21+
display: flex;
22+
flex-direction: column;
23+
border-radius: 0 0 10px 10px;
24+
}
25+
26+
#header {
27+
background-color: #ff6348;
28+
border-radius: 10px 10px 0 0;
29+
color: white;
30+
}
31+
32+
input,
33+
select {
34+
width: 50%;
35+
margin: 0 auto;
36+
padding: 10px;
37+
border-radius: 5px;
38+
border: none;
39+
background-color: #dfe4ea;
40+
}
41+
button {
42+
background-color: #ff6348;
43+
border: none;
44+
padding: 20px 40px;
45+
font-size: 1.1rem;
46+
border-radius: 5px;
47+
outline: none;
48+
color: white;
49+
}
50+
button:hover {
51+
background-color: chartreuse;
52+
}

‎Week3/project/index.html‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,49 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="index.css" />
7+
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet" />
8+
<title>Tip Calculator</title>
9+
</head>
310

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Tip Calculator</title>
8-
</head>
11+
<body>
12+
<div id="app">
13+
<header>
14+
<h1 id="header"></h1>
15+
</header>
16+
<main>
17+
<label for="bill-amount">How much was your bill?</label>
18+
<input type="number" id="bill-amount" min="1" placeholder="$" /><br />
19+
<label for="service-rating">How was your service?</label>
920

10-
<body>
11-
<div id="app"></div>
12-
<script src="index.js"></script>
13-
</body>
21+
<select name="service-rating" id="service-rating">
22+
<option value="--Choose an option--">--Choose an option--</option>
23+
<option value="30% - Outstanding">30% - Outstanding</option>
24+
<option value="20% - Good">20% - Good</option>
25+
<option value="15% - It was OK">15% - It was OK</option>
26+
<option value="10% - Bad">10% - Bad</option>
27+
<option value="5% - Terrible">5% - Terrible</option> </select
28+
><br />
1429

15-
</html>
30+
<label for="people-count">How many people are sharing the bill?</label>
31+
32+
<input type="number" id="people-count" min="1" placeholder="Number of people" />
33+
<br />
34+
<div>
35+
<button id="calculate">
36+
Calculate!
37+
</button>
38+
</div>
39+
<div>
40+
<h3>Tip Amount</h3>
41+
<p id="tip-amount">$0.00</p>
42+
<p id="each"></p>
43+
</div>
44+
</main>
45+
</div>
46+
47+
<script src="index.js"></script>
48+
</body>
49+
</html>

‎Week3/project/index.js‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,65 @@
11
// Your code goes in here
2+
// debugger;
3+
document.querySelector('#header').innerText = 'Tip Calculator';
4+
calculate.addEventListener('click', calculateTip);
5+
function calculateTip() {
6+
const billAmount = document.getElementById('bill-amount');
7+
const serviceRating = document.getElementById('service-rating');
8+
const peopleCount = document.getElementById('people-count');
9+
const calculate = document.getElementById('calculate');
10+
const outPut = document.getElementById('tip-amount');
11+
const each = document.getElementById('each');
212

3-
document.querySelector("#app").innerText = "Tip Calculator";
13+
if (
14+
!billAmount.value ||
15+
!serviceRating.value ||
16+
!peopleCount.value ||
17+
serviceRating.value === '--Choose an option--' ||
18+
billAmount.value === '0' ||
19+
peopleCount.value === '0'
20+
) {
21+
alert('All fields must be filled');
22+
input;
23+
} else {
24+
billAmount.value === billAmount.innerText;
25+
serviceRating.value === serviceRating.innerText;
26+
peopleCount.value === peopleCount.innerText;
27+
if (peopleCount.value > 1) {
28+
each.innerText = 'each';
29+
} else {
30+
each.innerText = ' ';
31+
}
32+
let formatter = new Intl.NumberFormat('en-US', {
33+
style: 'currency',
34+
currency: 'USD',
35+
minimumFractionDigits: 2,
36+
});
37+
38+
switch (serviceRating.value) {
39+
case '30% - Outstanding':
40+
outPut.innerText = formatter.format((billAmount.value * (30 / 100)) / peopleCount.value);
41+
console.log(outPut.innerText);
42+
break;
43+
case '20% - Good':
44+
outPut.innerText = formatter.format((billAmount.value * (20 / 100)) / peopleCount.value);
45+
break;
46+
case '15% - It was OK':
47+
outPut.innerText = formatter.format((billAmount.value * (15 / 100)) / peopleCount.value);
48+
break;
49+
case '10% - Bad':
50+
outPut.innerText = formatter.format((billAmount.value * (10 / 100)) / peopleCount.value);
51+
break;
52+
case '5% - Terrible':
53+
outPut.innerText = formatter.format((billAmount.value * (5 / 100)) / peopleCount.value);
54+
break;
55+
56+
default:
57+
break;
58+
}
59+
}
60+
61+
// return (output.innerText = (billAmount.value * 10) / 100 + serviceRating.value);
62+
}
63+
64+
// console.log(billAmount.value);
65+
// calculateTip();

0 commit comments

Comments
 (0)