diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..d55733e 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,110 @@ -function setAlarm() {} +let countdownTimer = 0, timerPaused = false; +let flashTimer = 0; +let alarmed = false; +let screenToggle = true; +let minutes = 0, seconds = 0; + +const flashScreen = () => { + flashTimer = setInterval(() => { + let body = document.querySelector("body"); + if (screenToggle) { + body.style.backgroundColor = 'red'; + } + else { + body.style.backgroundColor = 'white'; + } + screenToggle = !screenToggle; + }, 700); +} +const warningMsg = msg => { + let errorMsg = document.querySelector("#error-msg"); + errorMsg.innerHTML = msg; + $("#errorModal").modal("show"); +} +const startCountdown = () => { + countdownTimer = setInterval(() => { + let mm = "", ss = ""; + let timer = document.querySelector("#timeRemaining"); + + if (seconds > 0) { + seconds--; + } + else { + if (minutes > 0) { + seconds = 59; + minutes--; + } + else { + clearInterval(countdownTimer); + countdownTimer = 0; + flashScreen(); + playAlarm(); + alarmed = true; + } + } + mm = "" + minutes; + ss = "" + seconds; + if (minutes < 10) { mm = "0" + minutes; } + if (seconds < 10) { ss = "0" + seconds; } + timer.textContent = `Time Remaining: ${mm}:${ss}`; + }, 1000); +}; + +const addStopEvtListener = () => { + let stop = document.querySelector("#stop"); + stop.addEventListener('click', () => { + if (alarmed) { + pauseAlarm(); + clearInterval(flashTimer); + let body = document.querySelector("body"); + body.style.backgroundColor = 'white'; + clearFlashTimer = 0; + alarmed = false; + timerPaused = false; + } + }); +} + +function setAlarm() { + if (countdownTimer) return; + + if ((minutes === 0) && (seconds === 0) && (timerPaused === false)) { // Can we reuse existing minutes or seconds + let countdown = document.querySelector("#alarmSet"); + if (countdown.value === "" || parseInt(countdown.value) <= 0) { + warningMsg("Invalid time format.
Enter seconds [1 - 3599]."); + return; + } + + let value = parseInt(countdown.value, 10); // don't forget the second param + let hours = Math.floor(value / 3600); + if (hours) { + warningMsg("Invalid time format.
Too many seconds."); + let errorMsg = document.querySelector("#error-msg"); + return; + } + + minutes = Math.floor((value - (hours * 3600)) / 60); + seconds = value - (hours * 3600) - (minutes * 60); + addStopEvtListener(); + } + + let timer = document.querySelector("#timeRemaining"); + let mm = "" + minutes, ss = "" + seconds; + + if (minutes < 10) { mm = "0" + minutes; } + if (seconds < 10) { ss = "0" + seconds; } + timer.textContent = `Time Remaining: ${mm}:${ss}`; + startCountdown(minutes, seconds); +} + +const pauseTimer = () => { + if (countdownTimer) { + clearInterval(countdownTimer); + countdownTimer = 0; + timerPaused = true; + } +}; + // DO NOT EDIT BELOW HERE @@ -12,6 +118,10 @@ function setup() { document.getElementById("stop").addEventListener("click", () => { pauseAlarm(); }); + + document.getElementById("pause").addEventListener("click", () => { + pauseTimer(); + }); } function playAlarm() { diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html index ab7d582..5513cbe 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -1,8 +1,12 @@ - + Alarm Clock + + + + @@ -21,8 +40,27 @@

Time Remaining: 00:00

+
+ + diff --git a/Week-3/Homework/mandatory/1-alarmclock/style.css b/Week-3/Homework/mandatory/1-alarmclock/style.css index 0c72de3..4dbcb54 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/style.css +++ b/Week-3/Homework/mandatory/1-alarmclock/style.css @@ -13,3 +13,79 @@ h1 { text-align: center; } + +.modal-confirm { + color: #434e65; + width: 525px; + margin: 30px auto; + } + .modal-confirm .modal-content { + padding: 20px; + font-size: 16px; + border-radius: 5px; + border: none; + } + .modal-confirm .modal-header { + background: #e85e6c; + border-bottom: none; + position: relative; + text-align: center; + margin: -20px -20px 0; + border-radius: 5px 5px 0 0; + padding: 35px; + } + .modal-confirm h4 { + text-align: center; + font-size: 36px; + margin: 10px 0; + } + .modal-confirm .form-control, .modal-confirm .btn { + min-height: 40px; + border-radius: 3px; + } + .modal-confirm .close { + position: absolute; + top: 15px; + right: 15px; + color: #fff; + text-shadow: none; + opacity: 0.5; + } + .modal-confirm .close:hover { + opacity: 0.8; + } + .modal-confirm .icon-box { + color: #fff; + width: 95px; + height: 95px; + display: inline-block; + border-radius: 50%; + z-index: 9; + border: 5px solid #fff; + padding: 15px; + text-align: center; + } + .modal-confirm .icon-box i { + font-size: 58px; + margin: -2px 0 0 -2px; + } + .modal-confirm.modal-dialog { + margin-top: 80px; + } + .modal-confirm .btn { + color: #fff; + border-radius: 4px; + background: #eeb711; + text-decoration: none; + transition: all 0.4s; + line-height: normal; + border-radius: 30px; + margin-top: 10px; + padding: 6px 20px; + min-width: 150px; + border: none; + } + .modal-confirm .btn:hover, .modal-confirm .btn:focus { + background: #eda645; + outline: none; + } \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..521d42d 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,6 @@ Quote Generator - + + +
+ +
+
+

+

+
+
+
+ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..6285113 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,20 @@ +let newQuote = document.querySelector("button"); + +newQuote.addEventListener('click', function(){ + selectQuote(); +}); + +const selectQuote = () => { + let quote = pickFromArray(quotes); + let quoteText = document.querySelector("#text"); + let author = document.querySelector("#author"); + + quoteText.textContent = quote.quote; + author.textContent = `\u2014${quote.author}`; +} + +window.onload = selectQuote; + // DO NOT EDIT BELOW HERE // A function which will return one item, at diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..dac8411 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,84 @@ /** Write your CSS in here **/ +body { + background-color: #292a2b; + } + +/* center the blockquote in the page */ +.blockquote-wrapper { + display: flex; + height: 100vh; + padding: 0 20px; +} + +/* Blockquote main style */ +.blockquote { + position: relative; + font-family: 'Barlow Condensed', sans-serif; + max-width: 620px; + margin: 40px auto; +} + +/* Blockquote header */ +.blockquote h1 { + font-family: 'Abril Fatface', cursive; + position: relative; /* for pseudos */ + color: #e74848; + font-size: 2rem; + font-weight: normal; + line-height: 1; + margin: 0; + border: 2px solid #fff; + border: solid 2px; + border-radius:20px; + padding: 25px; +} + +/* Blockquote right double quotes */ +.blockquote h1:after { + content:""; + position: absolute; + border: 2px solid #e74848; + border-radius: 0 50px 0 0; + width: 60px; + height: 60px; + bottom: -60px; + left: 50px; + border-bottom: none; + border-left: none; + z-index: 3; +} + +.blockquote h1:before { + content:""; + position: absolute; + width: 80px; + border: 6px solid #292a2b; + bottom: -3px; + left: 50px; + z-index: 2; +} + +/* Blockquote subheader */ +.blockquote h4 { + position: relative; + color: #ffffff; + font-size: 1.3rem; + font-weight: 400; + line-height: 1.2; + margin: 0; + padding-top: 15px; + z-index: 1; + margin-left:150px; + padding-left:12px; +} + + +.blockquote h4:first-letter { + margin-left:-30px; +} + +#change-quote { + height: 40px; + sborder-radius: 10px; + margin: 10px; +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Carol Kaye.png b/Week-3/Homework/mandatory/3-slideshow/images/Carol Kaye.png new file mode 100644 index 0000000..27c27f7 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Carol Kaye.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Divinity Roxx.png b/Week-3/Homework/mandatory/3-slideshow/images/Divinity Roxx.png new file mode 100644 index 0000000..cf6176a Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Divinity Roxx.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Esperanza Spalding.png b/Week-3/Homework/mandatory/3-slideshow/images/Esperanza Spalding.png new file mode 100644 index 0000000..38d4924 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Esperanza Spalding.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Meshell Ndegeocello.png b/Week-3/Homework/mandatory/3-slideshow/images/Meshell Ndegeocello.png new file mode 100644 index 0000000..e08867e Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Meshell Ndegeocello.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Rhonda Smith.png b/Week-3/Homework/mandatory/3-slideshow/images/Rhonda Smith.png new file mode 100644 index 0000000..497975e Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Rhonda Smith.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Tal Wilkenfeld.png b/Week-3/Homework/mandatory/3-slideshow/images/Tal Wilkenfeld.png new file mode 100644 index 0000000..e916f40 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Tal Wilkenfeld.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/Yolanda Charles.png b/Week-3/Homework/mandatory/3-slideshow/images/Yolanda Charles.png new file mode 100644 index 0000000..4daf23a Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/Yolanda Charles.png differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..2636528 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -2,16 +2,49 @@ Slideshow - + + + + + diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..ff8ada7 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,125 @@ // Write your code here + +/* + * A group of constants that help manage the UI + */ +const REMOVE = ''; // Non-active UI control +const GREEN = '#40c040'; // Active UI control +const AUTO_PREVIOUS = 0; // index into controls[] array +const PREVIOUS = 1; +const STOP = 2; +const NEXT = 3; +const AUTO_NEXT = 4; + +// Used to build the image file path +const IMAGES_DIR = './images/'; +const FILE_EXT = '.png'; +const gallery = [ + 'Divinity Roxx', + 'Esperanza Spalding', + 'Meshell Ndegeocello', + 'Tal Wilkenfeld', + 'Yolanda Charles', + 'Rhonda Smith', + 'Carol Kaye' + ]; + +let bassistName = ""; +let currentImage = 0; // index into gallery array +let img = null; // reference to the HTML img tag +let auto = 0; // used to disable setInterval() +let controls = [], // the list of controls for our gallery [autoPrevious, previous, + // stop, + // next, autoNext ] + currentControl = null; // current active control - autoPrevious or autoNext + +/* + * SelectControl & deselectControl shows the used which control is active + */ + const selectControl = controlID => { + if (currentControl) currentControl.style.color = REMOVE; // need to remove inline style + currentControl = controls[ controlID ]; + currentControl.style.color = GREEN; + } + const deselectControl = controlID => { + if (currentControl) currentControl.style.color = REMOVE; // need to remove inline style + }; + + * set up all the references & event listeners to the image player + * controls & then display the 1st image + * + */ +const setupGallery = () => { + let autoPrevious = document.querySelector("#auto-previous"); + let previous = document.querySelector("#previous"); + let next = document.querySelector("#next"); + let stop = document.querySelector("#stop"); + let autoNext = document.querySelector("#auto-next"); + + /* + * The controls[] array is only used to help manage the UI in partnership + * with currentControl to highlight which control has been selected + * with the support functions selectControl(controlID) and + * deselectControl(controlID) + */ + controls.push(autoPrevious); + controls.push(previous); + controls.push(stop); + controls.push(next); + controls.push(autoNext); + + previous.addEventListener('click', () => { + if(auto) return; + //selectControl(PREVIOUS); + if (currentImage) + getNextImage(--currentImage); + else { + currentImage = gallery.length - 1; + getNextImage(currentImage); + } + }); + next.addEventListener('click', () => { + if(auto) return; + + getNextImage(++currentImage); + }); + autoPrevious.addEventListener('click', () => { + if(auto) clearInterval(auto) + selectControl(AUTO_PREVIOUS); + return auto = setInterval(() => { + if (currentImage) + getNextImage(--currentImage); + else { + currentImage = gallery.length - 1; + getNextImage(currentImage); + } + }, 2000); + }); + autoNext.addEventListener('click', () => { + if (auto) clearInterval(auto) + selectControl(AUTO_NEXT); + return auto = setInterval(() => { + getNextImage(++currentImage); + }, 2000); + }); + stop.addEventListener('click', () => { + if (auto){ + deselectControl(currentControl); + clearInterval(auto) + auto = 0; + } + }); + + bassistName = document.querySelector("#bassist-name") + img = document.querySelector("#bassist-img"); + getNextImage(currentImage); +}; + +const getNextImage = index => { + img.src = IMAGES_DIR + + gallery[ index % gallery.length ] + + FILE_EXT; + bassistName.textContent = gallery[ index % gallery.length ] +} + +window.onload = setupGallery; diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..23836f2 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,39 @@ /** Write your CSS in here **/ +body { + background-color: #c0ffc0; +} +#gallery { + padding-top: 1em; + height: 100% +} + + + +#image-container { + width: 30%; + margin: 0 auto; +} +#bassist-name { + text-align: center; +} +#bassist-img { + width: 100%; + border-radius: 20px; +} +#control-panel { + background-color: yellowgreen; + border: 1px solid #40c040; + border-radius: 20px; + width: 30%; + margin: 0 auto; + margin-bottom: 20px; +} +.control-bg { + color: #c0ffc0; +} + +#auto-previous:hover, #previous:hover, +#stop:hover, #stop:visited, +#next:hover, #auto-next:hover { + color: #40c040; +} \ No newline at end of file