Skip to content

Commit fb7ec59

Browse files
fadialsetfadialset
committed
finished the exercises and the project
1 parent b6e4913 commit fb7ec59

8 files changed

Lines changed: 236 additions & 24 deletions

File tree

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,22 @@
44
55
Declare a function called `createBase`.The function takes a number as a parameter and
66
return a closure, that adds a number to the base number argument.
7-
87
Call the function three times. The return values should be:
98
15, 24, 33
10-
119
*/
1210

13-
function createBase( /* ???? */ ) {
11+
function createBase( number ) {
1412
// Put here your logic...
13+
return ()=>{
14+
return number += 9;
15+
}
1516
}
1617

1718
const addSix = createBase(6);
1819

1920
// Put here your function calls...
21+
22+
console.log(addSix());
23+
console.log(addSix());
24+
console.log(addSix());
25+

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

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,37 @@
11
/**
22
33
** Exercise 2: The lottery machine **
4+
Write a function called removeDuplicates. This function accept an array as an argument
5+
does not return anything but removes any duplicate elements from the array.
6+
The function should remove duplicate elements. So the result should be:
7+
['a', 'b', 'c', 'd', 'e', 'f']
8+
*/
49

5-
Write a function called removeDuplicates. This function accept an array as an argument
6-
does not return anything but removes any duplicate elements from the array.
7-
8-
The function should remove duplicate elements.So the result should be:
9-
10-
10+
/**
11+
* Checks your solution against correct solution
12+
* @param {Array} array your solution
13+
* @returns boolean
1114
*/
15+
function checkSolution(array) {
16+
const solution = ['a', 'b', 'c', 'd', 'e', 'f'];
17+
if (array == null) return false;
18+
if (array.length !== solution.length) return false;
1219

20+
for (let i = 0; i < solution.length; i++) {
21+
if (array[i] !== solution[i]) return false;
22+
}
23+
return true;
24+
}
1325

1426
// WRITE YOUR FUNCTION HERE
27+
function removeDuplicates(array){
28+
const newArray = array.filter((item,index) => array.indexOf(item)=== index);
29+
console.log(newArray);
30+
};
1531

1632
const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b'];
17-
1833
removeDuplicates(letters);
1934

20-
if (letters === ['a', 'b', 'c', 'd', 'e', 'f'])
21-
console.log("Hooray!")
35+
if (checkSolution(letters)) {
36+
console.log("Hooray!");
37+
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
/**
2-
32
** Exercise 3: Guess the output **
4-
53
Look at the bellow code snippet.
64
Can you guess the output?
75
Write out your reasoning in 50 words or less.
8-
96
*/
107

11-
8+
// it will alert 12 because we reassignesd the variable in the function and the alert is in the function
9+
// that child of the x function so it has an access to the parent function(scope)
10+
// if we used const for an example insted of let it will show that the variable is already declared
1211

1312
let a = 10;
1413
const x = (function () {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ function f1(val) {
1616
}
1717
f1(x);
1818
console.log(x);
19-
2019
const y = {
2120
x: 9
2221
};
@@ -26,4 +25,7 @@ function f2(val) {
2625
return val;
2726
}
2827
f2(y);
29-
console.log(y);
28+
console.log(y);
29+
30+
// the argument in the first function is passed by value and the secound one is passed by reference
31+
// the variables type number and boleean and string are passed by value and the arrays and object types are passed by reference

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

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,40 @@ 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+
///// there is something that I dont understand could you pleas tell me why it is not helping I did everything I should do
29+
// but still not works
30+
31+
function threeCallback() {
32+
console.log('say three')
33+
}
34+
function fiveCallback() {
35+
console.log('say five')
36+
}
2837

2938
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
3039
const numbers = [];
31-
// make array
40+
for (let i = startIndex; i <= stopIndex; i++){
41+
numbers.push(i)
42+
}
43+
console.log(numbers);
44+
3245
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
33-
}
46+
numbers.map((number) => {
47+
if (number % 3 === 0) {
48+
threeCallback();
49+
}
50+
if (number % 5 === 0) {
51+
fiveCallback();
52+
}
53+
if (number % 5 === 0 && number % 3 === 0) {
54+
threeCallback();
55+
fiveCallback();
56+
}
57+
})
58+
}
59+
60+
console.log(threeFive(10, 15, sayThree, sayFive));
3461

35-
threeFive(10, 15, sayThree, sayFive);
3662

3763
// Should create an array [10,11,12,13,14,15]
3864
// and call sayFive, sayThree, sayThree, sayFive

‎Week3/project/index.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,41 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
78
<title>Tip Calculator</title>
89
</head>
910

1011
<body>
11-
<div id="app"></div>
12+
<div id="app">
13+
<h1>Tip Calculator</h1>
14+
<div id="calculator">
15+
16+
17+
<form>
18+
<p>How much was your bill?
19+
<p>
20+
$ <input id="billamt" type="text" placeholder="Bill Amount">
21+
22+
<p>How was your service?
23+
<p>
24+
<select id="serviceQual">
25+
<option disabled selected value="0">-- Choose an Option --</option>
26+
<option value="0.3">30&#37; &#45; Outstanding</option>
27+
<option value="0.2">20&#37; &#45; Good</option>
28+
<option value="0.15">15&#37; &#45; It was OK</option>
29+
<option value="0.1">10&#37; &#45; Bad</option>
30+
<option value="0.05">5&#37; &#45; Terrible</option>
31+
</select>
32+
33+
</form>
34+
<p>How many people are sharing the bill?</p>
35+
<input id="peopleamt" type="text" placeholder="Number of People"> people
36+
<button type="button" id="calculate">Calculate!</button>
37+
</div>
38+
<div id="totalTip">
39+
<span id="tip">0.00</span>
40+
<small id="each">each</small>
41+
</div>
1242
<script src="index.js"></script>
1343
</body>
1444

‎Week3/project/index.js‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1-
// Your code goes in here
1+
let eachWord = document.getElementById('each');
2+
eachWord.style.display = 'none';
3+
document.getElementById('totalTip').style.display = 'none'
24

3-
document.querySelector("#app").innerText = "Tip Calculator";
5+
function claculateTip() {
6+
let billAmount = document.getElementById('billamt').value;
7+
let serviceQuality = document.getElementById('serviceQual').value;
8+
let numberOfPeople = document.getElementById('peopleamt').value;
9+
10+
if (billAmount === '' || serviceQuality == 0) {
11+
alert('pleas enter values');
12+
return;
13+
}
14+
15+
if (numberOfPeople === '' || numberOfPeople < 1) {
16+
numberOfPeople = 1;
17+
eachWord.style.display = 'none';
18+
} else {
19+
eachWord.style.display = 'block';
20+
}
21+
22+
let totalTip = (billAmount * serviceQuality) / numberOfPeople;
23+
totalTip = totalTip.toFixed(2);
24+
25+
document.getElementById('totalTip').style.display = 'block';
26+
document.getElementById('tip').innerText = `TIP AMOUNT $${totalTip}`;
27+
}
28+
29+
document.getElementById('calculate').onclick = function () {
30+
claculateTip();
31+
};

‎Week3/project/style.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap');
2+
body {
3+
font-family: 'Poppins', sans-serif;
4+
background-color: #4c2827;
5+
}
6+
7+
#app {
8+
height: 525px;
9+
width: 360px;
10+
margin: 100px auto;
11+
background: #f7f7f7;
12+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
13+
border-radius: 20px;
14+
-webkit-border-radius: 20px;
15+
-moz-border-radius: 20px;
16+
}
17+
18+
h1 {
19+
background: #1F030C;
20+
color: white;
21+
margin: 0;
22+
padding: 10px 100px;
23+
text-transform: uppercase;
24+
font-size: 18px;
25+
font-weight: normal;
26+
border-top-left-radius: 20px;
27+
border-top-right-radius: 20px;
28+
}
29+
30+
p {
31+
padding-left: 20px;
32+
}
33+
34+
form input[type="text"] {
35+
width: 90px;
36+
}
37+
38+
input {
39+
padding-left: 20px;
40+
}
41+
42+
#billamt {
43+
font-size: 14px;
44+
color: red;
45+
background-color: #f7f7f7;
46+
width: 60%;
47+
padding: 5px 5px 8px 8px;
48+
}
49+
50+
#billamt:focus {
51+
background: #fff;
52+
border: 3px solid #2980b9;
53+
outline: none;
54+
}
55+
56+
#peopleamt {
57+
width: 60%;
58+
padding: 5px 5px 8px 8px;
59+
margin-left: 20px;
60+
color: red;
61+
background-color: #f7f7f7;
62+
font-size: 14px;
63+
}
64+
65+
#serviceQual {
66+
padding: 13px 13px 20px 20px;
67+
margin-left: 20px;
68+
font-size:20px;
69+
}
70+
71+
button {
72+
text-transform: uppercase;
73+
font-weight: bold;
74+
display: block;
75+
margin: 30px auto;
76+
background: #AD133A;
77+
border-radius: 5px;
78+
width: 200px;
79+
height: 50px;
80+
font-size: 17px;
81+
color: white;
82+
}
83+
84+
button:hover {
85+
background: #4c2827;
86+
border-bottom-color: #111;
87+
}
88+
89+
button:active {
90+
position: relative;
91+
top: 1px;
92+
}
93+
94+
#totalTip {
95+
font-size: 30px;
96+
margin-top: 5px;
97+
text-align: center;
98+
}
99+
100+
101+
#totalTip small {
102+
font-size: 20px;
103+
font-weight: bold;
104+
display: block;
105+
}

0 commit comments

Comments
 (0)