diff --git a/Week-3/.old/InClass/B-callbacks/exercise.js b/Week-3/.old/InClass/B-callbacks/exercise.js index 3ba78e8..f46c000 100644 --- a/Week-3/.old/InClass/B-callbacks/exercise.js +++ b/Week-3/.old/InClass/B-callbacks/exercise.js @@ -14,12 +14,13 @@ EXPECTED RESULT: The #exercise1 element has textContent = "YOUR NAME" when the button is clicked */ -document.querySelector('#button1').addEventListener('click', exercise1) +document.querySelector('#button1').addEventListener('click', exercise1); +var textElement = document.querySelector('#button1'); function exercise1() { // Write your implementation here + textElement.textContent = "My Name"; } - /* EXERCISE 2 ======= diff --git a/Week-3/.old/InClass/C-fetch/exercise.js b/Week-3/.old/InClass/C-fetch/exercise.js index fb3a39c..230f037 100644 --- a/Week-3/.old/InClass/C-fetch/exercise.js +++ b/Week-3/.old/InClass/C-fetch/exercise.js @@ -17,10 +17,12 @@ Open index.html in your browser. Every time you refresh the page, a different greeting should be displayed in the box. */ -fetch('*** Write the API address here ***') +fetch('https://codeyourfuture.herokuapp.com/api/greetings') .then(function(response) { return response.text(); }) .then(function(greeting) { + + document.querySelector('#greeting-text').innerHTML = greeting; // Write the code to display the greeting text here }); \ No newline at end of file diff --git a/Week-3/.old/InClass/D-remote-clipboard/exercise.js b/Week-3/.old/InClass/D-remote-clipboard/exercise.js index d2d83f5..61142f1 100644 --- a/Week-3/.old/InClass/D-remote-clipboard/exercise.js +++ b/Week-3/.old/InClass/D-remote-clipboard/exercise.js @@ -20,8 +20,8 @@ Also, for GET request, you can use the url directly in your browser address bar // Task 1: create a new clipboard // Complete the code below -var clipboardTitle = "CHANGE ME"; -var clipboardText = "CHANGE ME"; +var clipboardTitle = "Birmingham"; +var clipboardText = "I am from Birminghammmm"; var requestBody = { title: clipboardTitle, text: clipboardText }; var postRequestParameters = { @@ -32,12 +32,14 @@ var postRequestParameters = { } }; -fetch(/* Write the API address here */, postRequestParameters); +fetch('https://codeyourfuture.herokuapp.com/api/clipboard', postRequestParameters); // Task 2: Load an existing clipboard // Add your code below -fetch(/* ... */).then(function(response) { +fetch('https://codeyourfuture.herokuapp.com/api/clipboard?title=Birmingham').then(function(response) { return response.text(); -}).then(/* ... */); +}).then(function(result){ + console.log(result) +}); diff --git a/Week-3/.old/InClass/E-webchat/exercise-1.js b/Week-3/.old/InClass/E-webchat/exercise-1.js index 0e86590..670020f 100644 --- a/Week-3/.old/InClass/E-webchat/exercise-1.js +++ b/Week-3/.old/InClass/E-webchat/exercise-1.js @@ -34,4 +34,17 @@ When you open index.html in your browser, it should display the existing message */ -// Write your code here \ No newline at end of file +// Write your code here +// fetch('https://codeyourfuture.herokuapp.com/api/messages') +// .then(function(response){ +// return response.json(); +// }) +// .then(function(messages){ +// //document.querySelector('#message-list').innerHTML =""; +// messages.forEach(function(message){ +// document.querySelector('#message-list').innerHTML+='

'+message.content +'

' +// // let newParagraph = document.createElement('p'); +// // newParagraph.innerText +// // document.querySelector('message-list').appendChild(newParagraph); +// }) +// }) \ No newline at end of file diff --git a/Week-3/.old/InClass/E-webchat/exercise-2.js b/Week-3/.old/InClass/E-webchat/exercise-2.js index f8a0d6f..12cfaeb 100644 --- a/Week-3/.old/InClass/E-webchat/exercise-2.js +++ b/Week-3/.old/InClass/E-webchat/exercise-2.js @@ -27,3 +27,28 @@ on the submit button. Then check the following: // Write your code here +var postRequestParameters = { + body: JSON.stringify({ "content":new Date() }), + method: 'POST', + headers: { + 'content-type': 'application/json' + } +}; + +fetch('https://codeyourfuture.herokuapp.com/api/messages',postRequestParameters); + +fetch('https://codeyourfuture.herokuapp.com/api/messages') +.then(function(response){ + return response.json(); +}) +.then(function(messages){ +//document.querySelector('#message-list').innerHTML =""; +document.querySelector('#message-list').innerHTML+='

'+messages[messages.length-1].content +'

' + +// messages.forEach(function(message){ +// document.querySelector('#message-list').innerHTML+='

'+message.content +'

' +// // let newParagraph = document.createElement('p'); +// // newParagraph.innerText +// // document.querySelector('message-list').appendChild(newParagraph); +// }) +}) \ No newline at end of file diff --git a/Week-3/.old/InClass/E-webchat/exercise-3.js b/Week-3/.old/InClass/E-webchat/exercise-3.js index cd551a4..39204df 100644 --- a/Week-3/.old/InClass/E-webchat/exercise-3.js +++ b/Week-3/.old/InClass/E-webchat/exercise-3.js @@ -33,7 +33,11 @@ For example, print your name every 2 seconds. // Write your code here +function callback() { + console.log("Mursel"); +} +setInterval(callback, 3000); /* ======== Task 4 @@ -42,4 +46,19 @@ Task 4 Use the setInterval function to reload automatically the messages of your webchat every 2 seconds. The code responsible to show the messages in the page is in exercise-1.js, so you will need to write your code there :-) */ - +function newPages(){ +fetch('https://codeyourfuture.herokuapp.com/api/messages') +.then(function(response){ + return response.json(); +}) +.then(function(messages){ +//document.querySelector('#message-list').innerHTML =""; +messages.forEach(function(message){ + document.querySelector('#message-list').innerHTML+='

'+message.content +'

' +// let newParagraph = document.createElement('p'); +// newParagraph.innerText +// document.querySelector('message-list').appendChild(newParagraph); +}) +}) +} +setInterval(newPages,9000); \ No newline at end of file diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..ca44b09 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,35 @@ -function setAlarm() {} +function setAlarm() { + let inputTime = document.getElementById("alarmSet").value; + let timeRemaining = document.getElementById("timeRemaining"); + + function timeFormat(time) { + let allMinutes; + let seconds; + if (time > 60) { + allMinutes = Math.floor(time / 60); + seconds = time - allMinutes * 60; + } else { + allMinutes = 0; + seconds = time; + } + if (allMinutes < 10) { + allMinutes = "0" + allMinutes; + } + if (seconds < 10) { + seconds = "0" + seconds; + } + return `${allMinutes}:${seconds}`; + } + + let alarm = setInterval(() => { + if (inputTime === 0) { + playAlarm(); + clearInterval(alarm); + } + timeRemaining.textContent = `Time remaining: ${timeFormat(inputTime)}`; + inputTime--; + }, 1000); +} // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..b155cb4 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -1,17 +1,27 @@ - - Quote Generator - - - - - - - - + + + Quote Generator + + + + + + +
+
+
+

+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..f06fc0c 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,32 @@ +let colours = [ + red,yellow,black,red,blue,orange +]; + +let showQuote = document.querySelector('.blockquote'); +let quote = document.querySelector('.blockquote p'); +let author = document.querySelector('.blockquote-footer'); +let newQuoteBtn = document.querySelector('.btn'); + + + + +function pickFromArray(choices) { + return choices[Math.floor(Math.random() * choices.length)]; + + +function getQuote() { + let randomQuote = pickFromArray(quotes); + let randomColour = pickFromArray(colours); + + quote.textContent = randomQuote.quote; + author.textContent = randomQuote.author; + + showQuote.style.backgroundColor = randomColour; +} + +newQuoteBtn.addEventListener('click', function() => { + return getQuote(); +}); // DO NOT EDIT BELOW HERE // A function which will return one item, at @@ -17,13 +46,12 @@ // pickFromArray(coloursArray) //maybe returns "#F38630" // // You DO NOT need to understand how this function works. -function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; -} + + // A list of quotes you can use in your app. // Feel free to edit them, and to add your own favourites. -const quotes = [ +let quotes = [ { quote: "Life isn’t about getting and having, it’s about giving and being.", author: "Kevin Kruse", diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..f256be1 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,18 @@ /** Write your CSS in here **/ +body { + background-color: #23861a; + } + + .row { + height: 100vh; + } + + .blockquote { + padding: 2em 1.5em; + border-radius: 10px; + } + + .btn { + margin-top: 2em; + } + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level1.png b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level1.png deleted file mode 100644 index 8807779..0000000 Binary files a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level1.png and /dev/null differ diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level2.png b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level2.png deleted file mode 100644 index 568d0da..0000000 Binary files a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/example-level2.png and /dev/null differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/kan1.jpg b/Week-3/Homework/mandatory/3-slideshow/images/kan1.jpg new file mode 100644 index 0000000..91e7866 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/kan1.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/kan2.jpg b/Week-3/Homework/mandatory/3-slideshow/images/kan2.jpg new file mode 100644 index 0000000..58dd9ed Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/kan2.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/kan3.jpg b/Week-3/Homework/mandatory/3-slideshow/images/kan3.jpg new file mode 100644 index 0000000..4688ce2 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/kan3.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/kan4.jpg b/Week-3/Homework/mandatory/3-slideshow/images/kan4.jpg new file mode 100644 index 0000000..21f1cbb Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/kan4.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..81324f7 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -15,3 +15,31 @@ + + + Slideshow + + + + + + +
+
+ kangoroo 1 + kangoroo 2 + kangoroo 3 + kangoroo 4 +
+
+
+ + + + + +
+
+ + + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..52cc83e 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,64 @@ -// Write your code here +//The load event fires when a given resource has loaded. + +window.onload = function () { + let imgsrc = document.getElementsByTagName('img'); +//The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object. + let newImgArr = Array.from(imgsrc); + let backBtn = document.getElementById('back'); + let forwardBtn = document.getElementById('forward'); + + // index of visible slide + let currentIndex = 0; + + // show first image on page load + showImage(currentIndex); + + function showImage(index) { + newImgArr.forEach((image, i) => { + // hide image when indexes don't match + if (index !== i) { + image.style.display = 'none'; + } + else { + // display image for currentIndex + image.style.display = 'inline-block'; + } + }); + } + //forward button + forwardBtn.addEventListener('click', () => { + currentIndex = (currentIndex + 1) % newImgArr.length; + showImage(currentIndex); + }); + // back buttton + backBtn.addEventListener('click', () => { + currentIndex = currentIndex > 0 ? --currentIndex : newImgArr.length - 1; + showImage(currentIndex); + }); + + let autoBack = document.getElementById("autoBack"); +autoBack.addEventListener("click", () => { + clearInterval(forwardSlide); + reverseSlide = setInterval(() => { + img.src = newImgArr[imgIndex]; + imageIndex.textContent = imgIndex; + imgIndex--; + if (imgIndex < 0) { + imgIndex = newImgArr.length - 1; + } + },1000); +}); +let autoForward = document.getElementById("autoForward"); +autoForward.addEventListener("click", () => { + clearInterval(reverseSlide); + imgIndex = 0; + forwardSlide = setInterval(() => { + img.src = newImgArr[imgIndex]; + imageIndex.textContent = imgIndex; + imgIndex++; + if (imgIndex > newImgArr.length - 1) { + imgIndex = 0; + } + }, 1000); +}); + }; \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..bbeeb78 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,12 @@ -/** Write your CSS in here **/ + +container{ + display: flex; + justify-content: center; +} + + +img { + display: none; + max-width: 500px; + width: 100%; + }