Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 23fc67e

Browse files
fadialsetfadialset
committed
Merge branch 'fadialset-w2'
2 parents 557d1e4 + 1ec3a2c commit 23fc67e

8 files changed

Lines changed: 206 additions & 36 deletions

File tree

‎Week2/js-exercises/ex1-oddOnesOut.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,26 @@
88
99
*/
1010
function doubleEvenNumbers(numbers) {
11-
const newNumbers = [];
12-
for (let i = 0; i < numbers.length; i++) {
13-
if (numbers[i] % 2 === 0) {
14-
newNumbers.push(numbers[i] * 2);
15-
}
16-
}
17-
return newNumbers;
11+
const oddOnesOut = numbers.filter(number => {
12+
return number % 2 ===0;
13+
});
14+
const newNumbers = oddOnesOut.map(number => {
15+
return number * 2;
16+
})
17+
return newNumbers;
1818
}
1919

2020
const myNumbers = [1, 2, 3, 4];
21-
console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console
21+
console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console
22+
23+
24+
25+
26+
27+
// const newNumbers = [];
28+
// for (let i = 0; i < numbers.length; i++) {
29+
// if (numbers[i] % 2 === 0) {
30+
// newNumbers.push(numbers[i] * 2);
31+
// }
32+
// }
33+
// return newNumbers;

‎Week2/js-exercises/ex2-whatsYourMondayWorth.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,13 @@
1313

1414

1515
function dayWorth(tasks, hourlyRate) {
16-
// put your code in here, the function does returns a euro formatted string
17-
}
16+
// put your code in here, the function does returns a euro formatted string
17+
const durationTimeForTask = tasks.map(mondayTasks => mondayTasks.duration / 60);
18+
const multiplyDurationAndSum = durationTimeForTask.reduce(function (total, durationTimeForTask) {
19+
return total + (durationTimeForTask * hourlyRate)
20+
}, 0)
21+
return `€${ multiplyDurationAndSum }`;
22+
};
1823

1924
const mondayTasks = [{
2025
name: 'Daily standup',

‎Week2/js-exercises/ex3-lemonAllergy.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@
1414

1515
function takeOutLemons(basket) {
1616
// your code goes in here. The output is a string
17+
return basket.filter(newBasket => {
18+
return newBasket !== 'Lemon';
19+
})
1720
}
1821

1922
const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon'];
2023

21-
console.log(takeOutLemons(fruitBasket));
24+
console.log('my Mom brought me a fruit basket, containing: ' + takeOutLemons(fruitBasket));

‎Week2/js-exercises/ex4-collectiveAge.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010

1111
function collectiveAge(people) {
1212
// return the sum of age for all the people
13+
const ages = people.map(hackYourFutureMembers => hackYourFutureMembers.age);
14+
const combinedAges = ages.reduce(function (total, ages) {
15+
return total + (ages / people.length)
16+
},0);
17+
return combinedAges
1318
}
1419

1520
const hackYourFutureMembers = [{
@@ -30,4 +35,4 @@ const hackYourFutureMembers = [{
3035
},
3136
];
3237

33-
console.log("The collective age of the HYF team is: " + collectiveMembers(hackYourFutureMembers));
38+
console.log("The collective age of the HYF team is: " + collectiveAge(hackYourFutureMembers));

‎Week2/js-exercises/ex5-myFavoriteHobbies.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
<html>
2-
3-
<!-- your html code goes in here -->
4-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MY HOBBIES</title>
7+
</head>
8+
<body>
9+
<script src="./ex5-myFavoriteHobbies.js"></script>
10+
</body>
511
</html>

‎Week2/js-exercises/ex5-myFavoriteHobbies.js‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,31 @@
77
Use the map and / or forEach function to put each hobby into a list item
88
Put the list items in an unordered list
99
*/
10-
11-
function createHTMLList(arr) {
12-
// your code goes in here
13-
}
14-
10+
const heading = document.createElement('h1');
11+
heading.textContent = 'My favorite hobbies are ';
12+
document.body.appendChild(heading);
13+
heading.style.textAlign = 'center';
1514
const myHobbies = [
1615
'Meditation',
1716
'Reading',
1817
'Programming',
1918
'Hanging out with friends',
2019
'Going to the gym',
21-
];
20+
];
21+
function createHTMLList(arr) {
22+
// your code goes in here
23+
const hobbies = arr.map(hobby => {
24+
const listItem = document.createElement('li')
25+
listItem.textContent = hobby;
26+
const list = document.createElement('ul');
27+
list.appendChild(listItem);
28+
list.style.textAlign = 'center';
29+
list.style.listStyle = 'none';
30+
31+
return document.body.appendChild(list);
32+
});
33+
return hobbies
34+
};
35+
36+
createHTMLList(myHobbies);
37+

‎Week2/project/index.html‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,55 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Pomodoro Clock</title>
8+
<style>
9+
body{
10+
background-color: #1F555C;
11+
color: #fff;
12+
font-size: 28px;
13+
text-align: center;
14+
margin: 0;
15+
padding: 0;
16+
}
17+
p{
18+
display: inline;
19+
}
20+
button{
21+
background-color: transparent;
22+
color: #fff;
23+
border: none;
24+
font-size: 20px;
25+
padding: 1rem;
26+
cursor: pointer;
27+
}
28+
#reset{
29+
font-family: Segoe UI Symbol;
30+
}
31+
#app{
32+
border: 2px solid #13363A;
33+
width: 500px;
34+
margin: 0 auto;
35+
border-radius: 20px;
36+
padding-bottom: 10px;
37+
}
38+
</style>
839
</head>
9-
40+
<h1>Pomodoro Clock</h1>
41+
<h2>session length</h2>
42+
<button id="arrow_down">&#8681;</button>
43+
<p id="time"></p>
44+
<button id="arrow_up">&#8679;</button>
1045
<body>
1146
<div id="app">
12-
47+
<h3>session</h3>
48+
<p id="minutes"></p>
49+
<p id="semicolon"></p>
50+
<p id="secounds"></p>
1351
</div>
14-
<script src="index.js"></script>
52+
<button id="reset" title="reset">&#9209;</button>
53+
<button id="play" title="play">&#9658;</button>
54+
<button id="pause" title="pause">&#10074;&#10074;</button>
55+
56+
<script src="./index.js"></script>
1557
</body>
1658

17-
</html>
59+
</html>

‎Week2/project/index.js‎

Lines changed: 91 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,91 @@
1-
/**
2-
In this week 's project you'll be making a Pomodoro Clock!
3-
A user can specify how many minutes the timer should be set, and with a click on the play button it starts counting down!If the user wants to pause the timer, they can do so by clicking the pause button.
4-
5-
If the timer is running, the user can 't change the session length anymore
6-
Use at least 3 functions
7-
Display minutes and seconds
8-
If the timer finishes the timer should be replaced by the message: Time 's up!
9-
*
10-
*/
1+
/////// BUTTONS////////////////
2+
const start = document.getElementById('play');
3+
const pause = document.getElementById('pause');
4+
const reset = document.getElementById('reset');
5+
const arrowUp = document.getElementById('arrow_up');
6+
const arrowDown = document.getElementById('arrow_down');
7+
8+
/////////// VARIABLES //////////////////
9+
let minutes = document.getElementById('minutes');
10+
let secounds = document.getElementById('secounds');
11+
let semicolon = document.getElementById('semicolon');
12+
let sessionLength = document.getElementById('time');
13+
let startTimer;
14+
15+
sessionLength.innerText = minutes.innerText;
16+
17+
// ///////////// ARROW UP AND DOWN //////////////
18+
arrowUp.addEventListener('click',()=>{
19+
if(minutes.innerText >= 0 && !startTimer ){
20+
minutes.style.visibility = 'visible';
21+
secounds.style.visibility = 'visible';
22+
semicolon.innerText = ':'
23+
minutes.innerText++;
24+
sessionLength.innerText++;
25+
secounds.innerText = '00';
26+
}
27+
})
28+
arrowDown.addEventListener('click', ()=>{
29+
if(minutes.innerText > 0 && !startTimer ){
30+
minutes.innerText--;
31+
sessionLength.innerText--;
32+
secounds.innerText = '00';
33+
}else if(minutes.innerText == 0 && !startTimer ){
34+
minutes.style.visibility = 'hidden';
35+
secounds.style.visibility = 'hidden';
36+
semicolon.innerText = `time's up!`;
37+
}
38+
})
39+
40+
/////////////////// START RESET STOP BUTTONS //////////////
41+
start.addEventListener('click', ()=>{
42+
if(startTimer === undefined){
43+
startTimer = setInterval(timer, 1000)
44+
}else{
45+
alert('Timer is already running')
46+
}
47+
})
48+
49+
reset.addEventListener('click', () =>{
50+
if(minutes.innerText == 0 && secounds.innerText == 0){
51+
minutes.innerText = sessionLength.innerText;
52+
secounds.innerText = '00';
53+
semicolon.textContent = ':'
54+
stopInterval()
55+
startTimer = undefined;
56+
}else{
57+
minutes.innerText = sessionLength.innerText;
58+
secounds.innerText = '00';
59+
stopInterval()
60+
startTimer = undefined;
61+
}
62+
})
63+
64+
pause.addEventListener('click', ()=>{
65+
stopInterval();
66+
startTimer = undefined;
67+
})
68+
69+
// start timer Function
70+
function timer(){
71+
if(secounds.innerText != 0){
72+
secounds.innerText--;
73+
} if(minutes.innerText != 0 && secounds.innerText == 0){
74+
secounds.innerText = 59;
75+
minutes.innerText --;
76+
} if (minutes.innerText == 0 && secounds.innerText == 0){
77+
minutes.style.visibility ='hidden';
78+
secounds.style.visibility ='hidden';
79+
semicolon.innerText = `time's up!`;
80+
clearInterval(startTimer);
81+
startTimer = undefined;
82+
}
83+
if (secounds.innerText < 10 ){
84+
secounds.innerText = `0${secounds.innerText}`;
85+
console.log(secounds.innerText);
86+
};
87+
};
88+
//stop timer function
89+
function stopInterval(){
90+
clearInterval(startTimer);
91+
}

0 commit comments

Comments
 (0)