Skip to content

Commit 11d4cf0

Browse files
MartinBoylanMartinBoylan
committed
week 3 tasks
1 parent ae003e0 commit 11d4cf0

File tree

7 files changed

+146
-17
lines changed

7 files changed

+146
-17
lines changed

‎Week-3/Homework/mandatory/1-alarmclock/alarmclock.js‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,36 @@
1-
function setAlarm() {}
1+
//set interval
2+
/* 1. When the `Set Alarm` button is clicked, get the value of the input field
3+
2. When you have the input field value, set the title to the correct value
4+
3. Work out how to update the `Time Remaining` title every second
5+
4. When the remaining time left is 0, play the alarm sound
6+
*/
7+
8+
9+
10+
11+
12+
13+
function setAlarm() {
14+
let inputSet = document.getElementById("alarmSet");
15+
let inputValue = parseInt(inputSet.value);
16+
let title = document.getElementById("timeRemaining");
17+
18+
let countDown = setInterval(function() {
19+
let minutes = Math.floor(inputValue / 60);
20+
let seconds = inputValue % 60;
21+
title.textContent = ("Time Remaining: ") + (minutes>9?minutes:"0" +minutes) + ":" + (seconds>9?seconds:"0" + seconds);
22+
23+
if(inputValue === 0){
24+
playAlarm();
25+
26+
return clearInterval(countDown);
27+
28+
}
29+
inputValue--;
30+
}, 1000);
31+
32+
}
33+
234

335
// DO NOT EDIT BELOW HERE
436

‎Week-3/Homework/mandatory/1-alarmclock/task.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ If you have time and want to do more why not try
3636
- Make the background change color when the alarm clock finishes
3737
- Try making the background flash!
3838
- Could you add `pause` functionality so that the count down stops and then you restart it later?
39+
40+
41+
set interval

‎Week-3/Homework/mandatory/2-quotegenerator/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>Quote Generator</title>
5-
<script src="quotes.js"></script>
5+
66
<link
77
rel="stylesheet"
88
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
@@ -12,6 +12,10 @@
1212
<link rel="stylesheet" href="style.css" />
1313
</head>
1414
<body>
15-
<!-- Write your HTML in here -->
15+
<div>
16+
<button id = "smlbtn">Hit</button>
17+
<p>If your looking for inspiration you've come to the wrong place</p>
18+
</div>
19+
<script src="quotes.js"></script>
1620
</body>
1721
</html>

‎Week-3/Homework/mandatory/2-quotegenerator/quotes.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
let button = document.getElementById("smlbtn");
2+
let p = document.querySelector("p")
3+
4+
let onButtonClick = function() {
5+
p.textContent =
6+
pickFromArray(quotes).quote + "..." + " " +
7+
"says" +
8+
" " +
9+
pickFromArray(quotes).author;
10+
}
11+
button.addEventListener("click", onButtonClick);
12+
113
// DO NOT EDIT BELOW HERE
214

315
// A function which will return one item, at

‎Week-3/Homework/mandatory/2-quotegenerator/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
/** Write your CSS in here **/
2+
p {
3+
color: green;
4+
border: 1px dotted blue
5+
}

‎Week-3/Homework/mandatory/3-slideshow/index.html‎

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,65 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
34
<head>
4-
<title>Slideshow</title>
5-
<script src="slideshow.js"></script>
6-
<link
7-
rel="stylesheet"
8-
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
10-
crossorigin="anonymous"
11-
/>
12-
<link rel="stylesheet" href="style.css" />
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>Greenland</title>
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
1311
</head>
14-
<body>
15-
<!-- Write your HTML in here -->
12+
13+
14+
15+
16+
17+
18+
19+
20+
21+
22+
23+
<div id="demo" class="carousel slide d-none d-sm-block mr-lg-5 ml-lg-5" data-ride="carousel" >
24+
<ul class="carousel-indicators">
25+
<li data-target="#demo" data-slide-to="0" class="active"></li>
26+
<li data-target="#demo" data-slide-to="1"></li>
27+
<li data-target="#demo" data-slide-to="2"></li>
28+
</ul>
29+
30+
<div class="carousel-inner">
31+
<div class="carousel-item active">
32+
<img src="https://content.presspage.com/uploads/1369/1920_stock-photo-iceberg-aerial-photo-giant-icebergs-in-disko-bay-on-greenland-floating-in-ilulissat-icefjord-from-1289165434.jpg?10000">
33+
34+
</div>
35+
<div class="carousel-item">
36+
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2013/05/01/12/greenland-ice-cap.jpg" alt="Chicago" width="1100" height="500" class="img-fluid">
37+
38+
</div>
39+
<div class="carousel-item">
40+
<img src="http://3.bp.blogspot.com/-HDhpWVWwptc/UQwTivi5DmI/AAAAAAAAXRk/1ugGTuRfmBs/s1600/Greenland+(1).jpg" alt="New York" width="1100" height="500" class="img-fluid">
41+
42+
</div>
43+
</div>
44+
</div>
45+
46+
47+
<a class="carousel-control-prev" href="#demo" data-slide="prev">
48+
<span class="carousel-control-prev-icon"></span>
49+
</a>
50+
<a class="carousel-control-next" href="#demo" data-slide="next">
51+
<span class="carousel-control-next-icon"></span>
52+
</a>
53+
54+
55+
<p>Visit Greenland</p>
56+
57+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
59+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
60+
61+
1662
</body>
17-
</html>
63+
64+
</html>
65+

‎Week-3/Homework/mandatory/3-slideshow/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
11
/** Write your CSS in here **/
2+
3+
4+
5+
6+
7+
.img-fluid {
8+
max-width: 100%;
9+
height: auto;
10+
min-width: 100%;
11+
max-height: 30rem;
12+
}
13+
14+
p {
15+
margin-left: 100px;
16+
}
17+
18+
19+
20+
21+
22+
23+
24+
25+
26+
27+

0 commit comments

Comments
 (0)