Skip to content
This repository was archived by the owner on Oct 1, 2025. It is now read-only.

Commit 0f40421

Browse files
ralvarezdevralvarezdev
committed
feat: Coding Challenge 1 of Functions Section Done
* Renamed and Removed Some Files
1 parent 627fb6b commit 0f40421

15 files changed

+354
-161
lines changed

‎04-functions/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>A Closer Look at Functions</title>
8+
<style>
9+
body {
10+
height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
background: linear-gradient(to top left, #28b487, #7dd56f);
14+
}
15+
h1 {
16+
font-family: sans-serif;
17+
font-size: 50px;
18+
line-height: 1.3;
19+
width: 100%;
20+
padding: 30px;
21+
text-align: center;
22+
color: white;
23+
}
24+
.buy,
25+
.poll {
26+
font-size: 1.6rem;
27+
padding: 1rem 2rem;
28+
position: absolute;
29+
top: 2rem;
30+
}
31+
.buy {
32+
left: 2rem;
33+
}
34+
.poll {
35+
right: 2rem;
36+
}
37+
</style>
38+
</head>
39+
<body>
40+
<h1>A Closer Look at Functions</h1>
41+
<button class="buy">Buy new plane 🛩</button>
42+
<button class="poll">Answer poll ⁉️</button>
43+
<script src="script.js"></script>
44+
</body>
45+
</html>

‎04-functions/script.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
'use strict';
2+
3+
// Coding Challenge 1
4+
5+
/*
6+
1. Create a method called 'registerNewAnswer' on the 'poll' object.The;
7+
method does 2 things:
8+
1.1.Display a prompt window for the user to input the number of the
9+
selected option.The prompt should look like this:
10+
What is your favourite programming language ?
11+
0 : JavaScript;
12+
1: Python;
13+
2: Rust;
14+
3: C++;
15+
(Write option number)
16+
1.2.Based on the input number, update the 'answers' array property.For;
17+
example, if the option is 3, increase the value at position 3 of the array by;
18+
1. Make sure to check if the input is a number and if the number makes;
19+
sense(e.g.answer 52 wouldn't make sense, right?)
20+
2. Call this method whenever the user clicks the "Answer poll" button.
21+
3. Create a method 'displayResults' which displays the poll results.The
22+
method takes a string as an input(called 'type'), which can be either 'string'
23+
or 'array'.If type is 'array', simply display the results array as it is, using
24+
console.log().This should be the default option.If type is 'string', display a
25+
string like "Poll results are 13, 2, 4, 1".
26+
4. Run the 'displayResults' method at the end of each
27+
'registerNewAnswer' method call.
28+
5. Bonus: Use the 'displayResults' method to display the 2 arrays in the test
29+
data.Use both the 'array' and the 'string' option.Do not put the arrays in the poll
30+
object! So what should the this keyword look like in this situation ?
31+
The Complete JavaScript Course 21
32+
Test data for bonus:
33+
§ Data 1: [5, 2, 3]
34+
§ Data 2: [1, 5, 3, 9, 6, 1];
35+
Hints: Use many of the tools you learned about in this and the last section 😉
36+
GOOD LUCK 😀
37+
*/
38+
39+
const poll = {
40+
question: "What is your favourite programming language?",
41+
options: ["0: JavaScript", "1: Python", "2: Rust", "3: C++"],
42+
// This generates [0, 0, 0, 0]. More in the next section!
43+
answers: new Array(4).fill(0),
44+
registernewAnswer ()
45+
{
46+
let answer = Number(prompt(`${ this.question }\n${ this.options.join('\n') }`));
47+
48+
if (!isNaN(answer))
49+
{
50+
if (answer >= 0 && answer < poll.options.length)
51+
{
52+
console.log(`Valid Answer: ${ poll.options[answer] }`);
53+
poll.answers[answer]++;
54+
}
55+
56+
this.displayResults('string');
57+
}
58+
},
59+
displayResults (type = 'array')
60+
{
61+
if (type === 'array')
62+
console.log(this.answers);
63+
else if (type === 'string')
64+
console.log(`Poll results are ${ this.answers.join(', ') }`);
65+
}
66+
};
67+
68+
const answerPollDom = document.querySelector('.poll');
69+
70+
answerPollDom.addEventListener('click', () =>
71+
{
72+
poll.registernewAnswer();
73+
});
74+
75+
const displayResults = poll.displayResults;
76+
displayResults.bind({ answers: [5, 2, 3] }, 'string')();
77+
displayResults.bind({ answers: [1, 5, 3, 9, 6, 1] })();

‎challenges/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
8+
<title>Challenges Test</title>
9+
<style>
10+
body {
11+
height: 100vh;
12+
display: flex;
13+
align-items: center;
14+
background: linear-gradient(to top left, #28b487, #7dd56f);
15+
}
16+
17+
h1 {
18+
font-family: sans-serif;
19+
font-size: 50px;
20+
line-height: 1.3;
21+
width: 100%;
22+
padding: 30px;
23+
text-align: center;
24+
color: white;
25+
}
26+
27+
button {
28+
width: 50px;
29+
height: 20px;
30+
margin: 10px;
31+
}
32+
33+
textarea {
34+
width: 300px;
35+
height: 100px;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<h1>Functions</h1>
42+
<script src="section10-challenges.js"></script>
43+
</body>
44+
45+
</html>

‎challenges/section01-challenge02.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎challenges/section01-challenge03.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎challenges/section01-challenge04.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎challenges/section01-challenges.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Challenge 2
2+
3+
function calculateBMI (mass, height)
4+
{
5+
return mass / (height * height);
6+
}
7+
8+
let markMass = 78;
9+
let markHeight = 1.69;
10+
let BMIMark = calculateBMI(markMass, markHeight);
11+
let johnMass = 92;
12+
let johnHeight = 1.95;
13+
let BMIJohn = calculateBMI(johnMass, johnHeight);
14+
15+
let markHigherBMI = BMIMark > BMIJohn;
16+
17+
console.log(BMIMark);
18+
console.log(BMIJohn);
19+
console.log(markHigherBMI);
20+
21+
if (markHigherBMI)
22+
{
23+
console.log("Mark's BMI is higher than John's!");
24+
console.log(`Mark's BMI (${ BMIMark }) is higher than John's (${ BMIJohn })!`);
25+
} else
26+
{
27+
console.log("John's BMI is higher than Mark's!");
28+
console.log(`John's BMI (${ BMIJohn }) is higher than Mark's (${ BMIMark })!`);
29+
}
30+
31+
// Challenge 3
32+
33+
let scoreDolphins = 96 + 108 + 89;
34+
let scoreKoalas = 88 + 91 + 110;
35+
36+
if (scoreDolphins > scoreKoalas)
37+
console.log("Dolphins win the trophy");
38+
else if (scoreDolphins < scoreKoalas)
39+
console.log("Koalas win the trophy");
40+
else
41+
"Both win the trophy";
42+
43+
// Challenge 4
44+
45+
const bill = 275;
46+
var tip = (bill >= 50 && bill < 300) ? bill * 0.15 : bill * 0.2;
47+
console.log(`The bill was ${ bill }, the tip was ${ tip }, and the total value ${ tip + bill }`);

‎challenges/section02-challenge05.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎challenges/section02-challenge06.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎challenges/section02-challenge07.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)