diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..88ef4f6d4 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,49 @@ -function setAlarm() {} +const textArea = document.querySelector("#alarmSet"); +const timeRemaining = document.querySelector("#timeValue"); +const startButton = document.querySelector("#set"); +let isAudioPlay = false; +let intervalId = null; + +textArea.addEventListener('input', function () { + const value = textArea.value; + timeRemaining.innerHTML = value; +}); + +function setAlarm() { + let firstReminder = +timeRemaining.innerHTML * 1000; + + if (intervalId) { + clearInterval(intervalId); + } + + intervalId = setInterval(() => { + firstReminder -= 100; + + if (firstReminder <= 0) { + clearInterval(intervalId); + intervalId = null; + timeRemaining.innerHTML = 0; + if (!isAudioPlay) { + playAlarm(); + isAudioPlay = true; + } + } else { + + timeRemaining.innerHTML = (firstReminder / 1000).toFixed(1); + } + }, 100); +} + +function pauseAlarm() { + audio.pause(); + audio.currentTime = 0; + isAudioPlay = false; + + if (intervalId) { + clearInterval(intervalId); + intervalId = null; + } +} // DO NOT EDIT BELOW HERE @@ -6,6 +51,7 @@ var audio = new Audio("alarmsound.mp3"); function setup() { document.getElementById("set").addEventListener("click", () => { + console.log("1") setAlarm(); }); @@ -18,8 +64,8 @@ function playAlarm() { audio.play(); } -function pauseAlarm() { - audio.pause(); -} +// function pauseAlarm() { +// audio.pause(); +// } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..3a1a30fbe 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -8,7 +8,7 @@
-

Time Remaining: 00:00

+

Time Remaining:

00:00

diff --git a/Sprint-3/alarmclock/indextime.html b/Sprint-3/alarmclock/indextime.html new file mode 100644 index 000000000..1b6f91ab8 --- /dev/null +++ b/Sprint-3/alarmclock/indextime.html @@ -0,0 +1,20 @@ + + + + + + + Title here + + +
+

Time Remaining:

00:00

+ + + + + +
+ + + \ No newline at end of file diff --git a/Sprint-3/alarmclock/test.js b/Sprint-3/alarmclock/test.js new file mode 100644 index 000000000..374cb7034 --- /dev/null +++ b/Sprint-3/alarmclock/test.js @@ -0,0 +1,29 @@ +// const endDate = new Date("2025-03-12T03:25:00") + +// console.log (endDate) +// function countDoun (){ +// let now = new Date() +// console.log (now) +// if (now.getTime() < endDate.getTime()){ +// //loop +// setInterval(() => { +// now = new Date() +// let timeRemide = endDate - now + +// console.log (new Date (timeRemide)) +// console.log (new Date(now.getTime() + timeRemide * 24 * 60 * 60 * 1000)) +// console.log (new Date(daysRemaining * 24 * 60 * 60 * 1000)); +// }, 1000); + +// } +// else { +// console.log("finish") +// } +// } +// countDoun () + + +// //new Date(now.getTime() + daysRemaining * 24 * 60 * 60 * 1000); + + +// //new Date(daysRemaining * 24 * 60 * 60 * 1000); \ No newline at end of file diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..14f206624 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,24 @@ - Title here + Quote generator app + + -

hello there

-

+ +
+ +
+

+
+ +
+ + + diff --git a/Sprint-3/quote-generator/jest.setup.js b/Sprint-3/quote-generator/jest.setup.js index 9e785813a..721616dd9 100644 --- a/Sprint-3/quote-generator/jest.setup.js +++ b/Sprint-3/quote-generator/jest.setup.js @@ -1 +1,6 @@ require("@testing-library/jest-dom"); + + + + + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..e0b856c84 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -20,6 +20,16 @@ function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } +function showRandomQuote() { + document.getElementById("new-quote").addEventListener("click", () => { + const randomQuote = pickFromArray(quotes); + document.getElementById("quote").textContent = `"${randomQuote.quote}"`; + document.getElementById("author").textContent = `— ${randomQuote.author}`; + }); +} +showRandomQuote(); + + // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ @@ -491,3 +501,10 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + + + +// const randomQuote = pickFromArray(quotes); +// console.log(randomQuote.quote); +// console.log(randomQuote.author); + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f1a98a2d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,55 @@ /** Write your CSS in here **/ +body { + background-color:bisque; + } + +#div-in { + background-color: white; + border-radius: 20px; + padding: 30px; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); + width: 600px; + height: 200px; + text-align: center; + + justify-content: center; + margin-left: 30%; + margin-top:10%; + +} + + + + #quote { + font-size: 1.5em; + font-style: italic; + margin-bottom: 15px; + color: #333; + } + + #author { + font-size: 1.1em; + font-weight: bold; + color: #555; + } + + #new-quote { + position: fixed; + bottom: 40%; + left: 50%; + + margin-bottom: 20px; + padding: 12px 24px; + background-color:orange; + color: white; + border: none; + border-radius: 12px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + #new-quote:hover { + background-color: red; + } + + diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..0593f63f5 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -4,12 +4,17 @@ + Title here
+
+
+
+ diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..06b86363a 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,4 +1,5 @@ -// for the tests, do not modify this array of books + + const books = [ { title: "The Design of Everyday Things", @@ -21,3 +22,12 @@ const books = [ }, ]; + +const booksContainer = document.getElementById("placeholder"); + +books.forEach ((book) => { + const bookDiv = document.createElement("div"); + bookDiv.innerHTML = book.title + book.author + ''; + booksContainer.appendChild(bookDiv); +}); + diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..d4136fd6c 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -5,10 +5,18 @@ Title here + - cat-pic - - + +
+ cat-pic +
+ +
+ + +
+ diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..8575ecc28 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -5,4 +5,25 @@ const images = [ ]; -// Write your code here \ No newline at end of file +// Write your code here + +let currentIndex = 0; + +const imgElement = document.getElementById("carousel-img"); + +function slideShowBack() { + document.getElementById("backward-btn").addEventListener("click", () => { + currentIndex = (currentIndex - 1 + images.length) % images.length; + imgElement.src = images[currentIndex]; + }); + } + slideShowBack(); + + function slideShowForward() { + document.getElementById("forward-btn").addEventListener("click", () => { + currentIndex = (currentIndex + 1 + images.length) % images.length; + imgElement.src = images[currentIndex]; + }); + } + slideShowForward(); + diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..8eb62bc47 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,22 @@ /** Write your CSS in here **/ +#box-cat { + display: flex; + justify-content: center; + align-items: center; + height: 90vh; +} + + +#carousel-img { + + height: 600px; + width: 900px; + +} + +#button { + display: flex; + justify-content: center; + align-items: center; + height: 40px; +} \ No newline at end of file