Skip to content
This repository was archived by the owner on Jan 3, 2023. It is now read-only.

WM3 - JS2 week 3 #105

Open
MoTaKh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

WM3 - JS2 week 3 #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion mandatory/1-alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,34 @@
function setAlarm() {}
function setAlarm() {
let setAlarm = document.querySelector("#alarmSet")
const startingMinutes = setAlarm.value;
let time = startingMinutes * 60;

let timeRemaining = document.querySelector("#timeRemaining");

setInterval(countDown, 1000);

function countdown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? `0` + seconds : seconds;
timeRemaining.textContent = `Time Remaining: ${minutes}: ${seconds}`;
if (time == 0) {
timeRemaining.textContent = `Time Remaining: 00:00`;
playAlarm();
let colors = ["red", "green", "yellow", "purple", "pink"];
let index = 0;
function changeColor() {
document.querySelector(".centre").style.backgroundColor = colors[index];
index = (index + 1) % colors.length;
setTimeout(changeColor, 100);
Copy link
Copy Markdown

@PeterAhern PeterAhern Oct 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work Mohammed, It took me a little time to understand what you were doing here, but that is because of my knowledge, rather than your appraoch,but I get it now, good work!

}
changeColor();
} else if (time > 0) {
time--;
}
}

}

// DO NOT EDIT BELOW HERE

Expand Down
4 changes: 4 additions & 0 deletions mandatory/2-quotegenerator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
</head>
<body>
<!-- Write your HTML in here -->
<div id="container">
<button id="press">Get your new quote!</button>
<p id="quote">Press the button to generate a quote.</p>
</div>
<script src="quotes.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions mandatory/2-quotegenerator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
const press = document.getElementById("press");
const quote = document.getElementById("quote");

press.addEventListener("click", () => {
const randomQuote = pickFromArray(quotes);
quote.innerHTML = `${randomQuote.quote} <br> Author: <em>${randomQuote.author}</em>`;
});



// DO NOT EDIT BELOW HERE

// A function which will return one item, at
Expand Down
25 changes: 25 additions & 0 deletions mandatory/2-quotegenerator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,26 @@
/** Write your CSS in here **/
body {
background-color: blanchedalmond;
}
#container {
background-color: green
border: 3px dashed red;
text-align: center;
height: 325px;
width: 850px;
margin: 150px auto;
}
#press {
background-color: cadetblue;
color: rgb(218, 55, 55);
margin: 30px auto;
height: 50px;
width: 250px;
border-radius: 7px;
font-size: 20px;
}
#quote {
color: rgb(14, 4, 4);
margin: 5px auto;
font-size: 24px;
}