diff --git a/week-1/fix/median.js b/week-1/fix/median.js index 046be3d0..c28d8dd6 100644 --- a/week-1/fix/median.js +++ b/week-1/fix/median.js @@ -1,6 +1,6 @@ -// Fix this implementation -// Start by running the tests for this function -// If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory +//Fix this implementation +//Start by running the tests for this function +//If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory function calculateMedian(list) { const middleIndex = Math.floor(list.length / 2); @@ -8,4 +8,9 @@ function calculateMedian(list) { return median; } -module.exports = calculateMedian; +//calculateMedian( 3, 3, 4, 5) +//module.exports = calculateMedian; + +// console.log(calculateMedian( 3, 3, 4, 5)) + + diff --git a/week-3/alarmclock/index.html b/week-3/alarmclock/index.html index 48e2e80d..159db274 100644 --- a/week-3/alarmclock/index.html +++ b/week-3/alarmclock/index.html @@ -4,6 +4,7 @@ + Title here @@ -15,6 +16,6 @@

Time Remaining: 00:00

- + diff --git a/week-3/slideshow/assets/.DS_Store b/week-3/slideshow/assets/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/week-3/slideshow/assets/.DS_Store differ diff --git a/week-3/slideshow/assets/cute-cat-d.png b/week-3/slideshow/assets/cute-cat-d.png new file mode 100644 index 00000000..128b58a8 Binary files /dev/null and b/week-3/slideshow/assets/cute-cat-d.png differ diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..5022b657 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,12 +3,30 @@ - Title here + Image carousel + - cat-pic - - + + + +
+ + + + + + diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..160f12ba 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -1,8 +1,93 @@ -const images = [ - "./assets/cute-cat-a.png", - "./assets/cute-cat-b.jpg", - "./assets/cute-cat-c.jpg", -]; -// Write your code here \ No newline at end of file +let element_image = document.getElementById('image'); + let img_list = [ + "./assets/cute-cat-a.png", + "./assets/cute-cat-b.jpg", + "./assets/cute-cat-c.jpg", + "./assets/cute-cat-d.png" + ]; +element_image.setAttribute("src", img_list[0]); + +function add_carousel(){ + let element_imageI = document.getElementById('image'); + element_imageI.setAttribute("src", img_list.slice(-1)[0]); +} + +function carousel(){ + if(img_list) { + let element_imageJ = document.getElementsById('image'); + element_imageJ.setAttribute("src", img_list[0]); + }else{ + let element_imageK = document.getElementById('image'); + element_imageK.setAttribute("src", img_list.slice(-1)[0]) + } +} + +function add_image() { + add_carousel(); + carousel(); +} + +document.getElementById('previous').addEventListener('click', (event) => { + img_list.unshift(img_list.pop()); + add_image(); + +}); + +document.getElementById('next').addEventListener('click', (event) => { +img_list.push(img_list.shift()); + add_image(); + +}); + + +const buttonClick = document.getElementById("autoBack"); +const autoPlay = document.getElementById("status"); + +let autoBackEnabled = false; + +setInterval(() => { + if (autoBackEnabled) { + img_list.unshift(img_list.pop()); + add_image(); + } +}, 5000); + +buttonClick.addEventListener("click", function () { + autoBackEnabled = !autoBackEnabled; + if (autoBackEnabled) { + autoPlay.textContent = "auto-Backword ON"; + } else { + autoPlay.textContent = ""; + } +}); + +const forwordButton = document.getElementById("autoForward"); + +let autoForwardButton = false; +setInterval(() => { + if (autoForwardButton) { + img_list.push(img_list.shift()); + add_image(); + } +}, 5000); + +forwordButton.addEventListener("click", function () { + autoForwardButton= !autoForwardButton; + if (autoForwardButton) { + autoPlay.textContent = "auto-Forword ON"; + } else { + autoPlay.textContent = ""; + } +}); + +const stopButton = document.getElementById("stopButton"); +stopButton.addEventListener("click", stop); + +function stop(){ + autoForwardButton = false; + autoBackEnabled = false; + autoPlay.textContent = ""; +} + diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..097e4888 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,50 @@ /** Write your CSS in here **/ +body{ + background-color: rgb(74, 149, 149); + +} + +#carousel{ + margin-top: 100px; + margin-left: 400px; +} +h2{ + margin-left: 100px; + font-size: 2em; +} + +#image{ + width: 40%; + border: 10px solid palevioletred; + border-radius: 9px; + margin-left: 100px; +} +button{ + display: inline; + margin: 15px; + padding: 15px 15px; + border-radius: 12px; + border: 5px solid palevioletred; +} +.hr{ + border: 1px solid rgb(63, 56, 56); + width: 100%; + margin: 0; + padding: 0; +} +@media screen and (max-width: 598px){ + body{ + background-color: rgb(109, 103, 95); + } + #carousel{ + margin-left: 0px; + } + #image{ + width: 60%; + margin: 0px; + } + + h2{ + margin: 0px; + } +} \ No newline at end of file