Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2f05a7d

Browse files
Stef-LevStef-Lev
committed
Js-exercises and codeAlong completed
1 parent 1a12675 commit 2f05a7d

File tree

20 files changed

+1108
-0
lines changed

20 files changed

+1108
-0
lines changed

‎Week2/Homework/codeAlong/rockPaperScissors/index.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
9+
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
11+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
12+
<link rel="stylesheet" href="style.css">
13+
14+
<title>Rock, paper, scissors!</title>
15+
<script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
16+
17+
</head>
18+
19+
<body>
20+
<!-- Main Interface -->
21+
<div class="container text-center">
22+
<h1 class="display-2">Rock Paper Scissors</h1>
23+
<p>An all time classic</p>
24+
<button id="restart" class="restart-btn btn btn-danger px-3">Restart</button>
25+
<div id="score" class="score">
26+
<div class="row finalscore justify-content-center">
27+
<div class="player col-5 mx-2 py-2">Player: 0</div>
28+
<div class="computer col-5 mx-2 py-2">Computer: 0</div>
29+
</div>
30+
</div>
31+
<h2>Make your selection</h2>
32+
<div class="choices">
33+
<div class="row d-flex justify-content-around">
34+
<i id="rock" class="choice fas fa-hand-rock fa-10x"></i>
35+
<i id="paper" class="choice fas fa-hand-paper fa-10x"></i>
36+
<i id="scissors" class="choice fas fa-hand-scissors fa-10x"></i>
37+
</div>
38+
</div>
39+
40+
<!-- Modal -->
41+
42+
<div class="my-modal">
43+
<div id="result" class="modal-content">
44+
45+
</div>
46+
</div>
47+
48+
49+
</div>
50+
51+
52+
53+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
54+
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
55+
crossorigin="anonymous"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
57+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
58+
crossorigin="anonymous"></script>
59+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
60+
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
61+
crossorigin="anonymous"></script>
62+
<script src="script.js"></script>
63+
64+
</body>
65+
66+
</html>

‎Week2/Homework/codeAlong/rockPaperScissors/ropasc-bg.jpg

110 KB
Loading

‎Week2/Homework/codeAlong/rockPaperScissors/script.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
"use strict"
2+
const choices = document.querySelectorAll(".choice");
3+
const score = document.getElementById("score");
4+
const result = document.getElementById("result");
5+
const restart = document.getElementById("restart");
6+
const modal = document.querySelector(".my-modal");
7+
const scoreboard = {
8+
player: 0,
9+
computer: 0
10+
}
11+
12+
//Play game
13+
function play(e) {
14+
restart.style.display = "inline-block";
15+
const playerChoice = e.target.id;
16+
const computerChoice = getComputerChoice();
17+
const winner = getWinner(playerChoice, computerChoice);
18+
showWinner(winner, computerChoice);
19+
}
20+
21+
//Get computer choice
22+
function getComputerChoice() {
23+
const rand = Math.random();
24+
if (rand < 0.34) {
25+
return "rock";
26+
} else if (rand <= 0.67) {
27+
return "paper";
28+
} else {
29+
return "scissors";
30+
}
31+
}
32+
33+
//Get game winner
34+
function getWinner(pl, comp) {
35+
if (pl === comp) {
36+
return "draw";
37+
}
38+
else if (pl === "rock") {
39+
if (comp === "paper") {
40+
return "computer";
41+
} else {
42+
return "player";
43+
}
44+
}
45+
else if (pl === "paper") {
46+
if (comp === "scissors") {
47+
return "computer";
48+
}
49+
else { return "player" }
50+
}
51+
else if (pl === "scissors") {
52+
if (comp === "rock") {
53+
return "computer";
54+
} else { return "player" }
55+
}
56+
}
57+
58+
//Show Winner
59+
function showWinner(winner, computerChoice) {
60+
if (winner === "player") {
61+
scoreboard.player++;
62+
result.innerHTML =
63+
`<h1 class="text-win">You Win!</h1>
64+
<i class="fas fa-hand-${computerChoice} fa-10x"></i>
65+
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}</strong></p>
66+
`;
67+
} else if (winner === "computer") {
68+
scoreboard.computer++;
69+
result.innerHTML =
70+
`<h1 class="text-lose">You Lose!</h1>
71+
<i class="fas fa-hand-${computerChoice} fa-10x"></i>
72+
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}</strong></p>
73+
`;
74+
} else {
75+
result.innerHTML =
76+
`<h1>It's a draw!</h1>
77+
<i class="fas fa-hand-${computerChoice} fa-10x"></i>
78+
<p>Computer Chose <strong>${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}</strong></p>
79+
`;
80+
}
81+
score.innerHTML = `<div class="row justify-content-center">
82+
<div class="player col-5 mx-2 py-2">Player: ${scoreboard.player}</div>
83+
<div class="computer col-5 mx-2 py-2">Computer: ${scoreboard.computer}</div>
84+
</div>`;
85+
// `<p>Player: ${scoreboard.player}</p>
86+
// <p>Computer: ${scoreboard.computer}</p>
87+
// `;
88+
modal.style.display = "block";
89+
}
90+
//Restart
91+
function restartGame() {
92+
scoreboard.player = 0;
93+
scoreboard.computer = 0;
94+
score.innerHTML = `
95+
<div class="row finalscore justify-content-center">
96+
<div class="player col-5 mx-2 py-2">Player: 0</div>
97+
<div class="computer col-5 mx-2 py-2">Computer: 0</div>
98+
</div>
99+
`;
100+
restart.style.display = "none"
101+
}
102+
103+
//Clear modal
104+
function clearModal(e) {
105+
if (e.target == modal) {
106+
modal.style.display = "none"
107+
}
108+
}
109+
110+
//Event listeners
111+
choices.forEach(choice => choice.addEventListener("click", play));
112+
window.addEventListener("click", clearModal);
113+
restart.addEventListener("click", restartGame);

‎Week2/Homework/codeAlong/rockPaperScissors/style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@import url('https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
body {
9+
font-family: 'Patrick Hand', cursive;
10+
background-image: url("ropasc-bg.jpg");
11+
background-size: 100%;
12+
background-position-y: 20%;
13+
}
14+
div.container {
15+
margin-top: 20px;
16+
margin-bottom: 20px;
17+
}
18+
h2 {
19+
margin-top: 20px;
20+
margin-bottom: 20px;
21+
}
22+
23+
p {
24+
font-size: 1.5rem;
25+
}
26+
button#restart {
27+
font-size: 1.2rem!important;
28+
}
29+
30+
31+
div.player {
32+
border: 1px solid rgb(0, 80, 100);
33+
background-color: rgb(0, 80, 100);
34+
border-radius: 7px;
35+
color: white;
36+
font-size: 1.2rem;
37+
}
38+
39+
div.computer {
40+
border: 1px solid rgb(0, 80, 100);
41+
background-color: rgb(0, 80, 100);
42+
border-radius: 7px;
43+
color: white;
44+
font-size: 1.2rem;
45+
}
46+
i.choice {
47+
color: rgb(255, 146, 96);
48+
cursor: pointer;
49+
}
50+
i.choice:hover {
51+
color: rgb(247, 197, 174);
52+
cursor: pointer;
53+
}
54+
55+
.text-win {
56+
color: rgb(4, 80, 4);
57+
}
58+
.text-lose {
59+
color: rgb(179, 24, 24);
60+
}
61+
.restart-btn {
62+
display: none;
63+
margin-bottom: 1rem;
64+
}
65+
:root {
66+
--modal-duration: 1s;
67+
}
68+
.my-modal {
69+
display:none;
70+
position: fixed;
71+
left: 0;
72+
top: 0;
73+
height: 100%;
74+
width: 100%;
75+
overflow: auto;
76+
background: rgba(0,0,0,0.4);
77+
z-index: 1;
78+
}
79+
.modal-content {
80+
background: lavenderblush;
81+
text-align: center;
82+
margin: 10% auto;
83+
width: 400px;
84+
border-radius: 20px;
85+
border: 2px solid lavenderblush;
86+
padding: 3rem;
87+
box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17) ;
88+
animation-name: modalopen;
89+
animation-duration: var(--modal-duration);
90+
91+
}
92+
.modal-content h1 {
93+
margin-bottom: 1rem;
94+
}
95+
.modal-content p {
96+
font-size: 1.2rem;
97+
margin-top: 1rem;
98+
}
99+
100+
@keyframes modalopen {
101+
from {
102+
opacity: 0;
103+
}
104+
to {
105+
opacity: 1;
106+
}
107+
}
108+

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use strict"
2+
const hackYourFutureMembers = [
3+
{ name: 'Wouter', age: 33 },
4+
{ name: 'Federico', age: 32 },
5+
{ name: 'Noer', age: 27 },
6+
{ name: 'Tjebbe', age: 22 },
7+
];
8+
9+
let collectiveAge = hackYourFutureMembers.reduce(function (acc, cur) {
10+
return acc + cur.age;
11+
}, 0);
12+
console.log(`The collective age of the HYF team is: ${collectiveAge}`)

‎Week2/Homework/js-exercises/favoriteHobbies/favoriteHobbies.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use strict"
2+
const myHobbies = [
3+
'Meditation',
4+
'Reading',
5+
'Programming',
6+
'Hanging out with friends',
7+
'Going to the gym',
8+
];
9+
10+
let newUl = document.createElement("ul");
11+
document.body.appendChild(newUl)
12+
13+
function hobbiesIntoList() {
14+
myHobbies.forEach(function (item) {
15+
let newLi = document.createElement("li");
16+
newLi.innerHTML = item;
17+
newUl.appendChild(newLi);
18+
})
19+
}
20+
hobbiesIntoList();

‎Week2/Homework/js-exercises/favoriteHobbies/hobbies.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Favorite Hobbies</title>
7+
</head>
8+
9+
<body>
10+
11+
12+
<script src="favoriteHobbies.js"></script>
13+
</body>
14+
15+
</html>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use strict"
2+
const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon'];
3+
let fruitsWithoutLemons = fruitBasket.filter(fruit => fruit !== 'Lemon');
4+
console.log(`My mom bought me a fruit basket, containing ${fruitsWithoutLemons.join(", ")}`)

‎Week2/Homework/js-exercises/mondayWorth.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use strict"
2+
const mondayTasks = [
3+
{
4+
name: 'Daily standup',
5+
duration: 30, // specified in minutes
6+
},
7+
{
8+
name: 'Feature discussion',
9+
duration: 120,
10+
},
11+
{
12+
name: 'Development time',
13+
duration: 240,
14+
},
15+
{
16+
name: 'Talk to different members from the product team',
17+
duration: 60,
18+
},
19+
];
20+
21+

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use strict"
2+
const myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
3+
let doubleEvenNumbers = myNumbers.filter(item => item % 2 === 0).map(item => item * 2);
4+
console.log(doubleEvenNumbers);

0 commit comments

Comments
 (0)