- list and display each book details in
- element.
+ * - For each book, create a
element with the book title and author and append it to the page. + * - Add an
after
element to each book that links to a URL of the book cover. + * You should find an appropriate image to each book. + * - Change the style of the book depending on whether you have read it (green) or not (red).* + * + * Find in the code what properties a book object has in the array. + * + * All of your HTML elements should go inside the Div tag with the id "content". + * + * The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com + */ +function insertBooks(books) { //Write your code in here } @@ -77,11 +91,11 @@ let people = [ { name: "Boris", job: "Prime Minister" } ]; -exerciseOne(people); +insertPeopleData(people); let shopping = ["Milk", "Break", "Eggs", "A Dinosaur", "Cake", "Sugar", "Tea"]; -exerciseTwo(shopping); +insertShoppingList(shopping); const books = [ { @@ -101,4 +115,4 @@ const books = [ } ]; -exerciseThree(books); +insertBooks(books); diff --git a/week-5/Homework/mandatory/3-project/README.md b/week-5/Homework/mandatory/3-project/README.md index 5caa8a338..ec3d47782 100644 --- a/week-5/Homework/mandatory/3-project/README.md +++ b/week-5/Homework/mandatory/3-project/README.md @@ -9,18 +9,18 @@ Clicking on the buttons should change the "theme" of the website: - When clicking **blue** it should change: - - **Jumbotron** background color to `#588fbd` + - Div tag with the id **Jumbotron** background color to `#588fbd` - **Donate a bike** button background color to `#ffa500` - **Volunteer** button background color to `black` and text color to `white` - When clicking **orange** it should change: - - **Jumbotron** background color to `#f0ad4e` + - Div tag with the id **Jumbotron** background color to `#f0ad4e` - **Donate a bike** button background color to `#5751fd` - **Volunteer** button background color to `#31b0d5` and text color to `white` - When clicking **green** it should change: - - **Jumbotron** background color to `#87ca8a` + - Div tag with the id **Jumbotron** background color to `#87ca8a` - **Donate a bike** button background color to `black` - **Volunteer** button background color to `#8c9c08` @@ -30,19 +30,23 @@ Here's an example of how the website should look for the blue button: ## Part 2 -Just below the buttons, there's a form called **Register with us**. +Just below the buttons, there's a form called **Register with us today**. Continue working in `./js/main.js` to add the following functionality: When the submit button is pressed, it should check that all the form fields are valid: -- The **Your name**, **Email** and **Describe yourself** fields need to be non-empty (Hint: their `value` length has to be greater than zero) -- For the **Email** field also check if it contains the `@` character +- The **Email address**, **Your name** and **Describe yourself** fields need to be non-empty (Hint: their `value` length has to be greater than zero) +- For the **Email Address** field also check if it contains the `@` character For all the fields that invalid, it should make their background color `red`. -IF all the fields are valid, when you click **Submit** it should: +If all the fields are valid, when you click **Submit** it should: -- Display an alert to thank you for filling out the form +- Display an alert to thank you for filling out the for. - Blank out (make empty) all the text fields -**Important hint:** In your function that handles clicks on the `Submit` button you will need to call `event.preventDefault()` to stop the browser from refreshing the page. To read more on how to do this: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault +**Hints** +- [How to obtain values from form fields](https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pt/processing-forms-with-events) +- [How to use alert](https://www.w3schools.com/jsref/met_win_alert.asp) + +**Important hint:** In your function that handles clicks on the `Submit` button you will need to call `event.preventDefault()` to stop the browser from refreshing the page. To read more on how to do this: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault. Revisit the relevant part on [Kahnacademy](https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-events/pt/preventing-default-behavior-of-events) for further practice. diff --git a/week-6/Homework/mandatory/1-alarmclock/alarmclock.js b/week-6/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd3b..5ba3520e9 100644 --- a/week-6/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/week-6/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,7 +1,51 @@ -function setAlarm() {} +// Implement the missing functionality according to the task description. +// Hint: Remember which function you need to call when it's time to alarm. +function setAlarm() { } +let alarmSet = document.querySelector('#alarmSet'); + let timeRemaining = document.querySelector('#timeRemaining'); + let stop = document.querySelector('#stop'); + let audio = document.createElement('audio'); + audio.src = './alarmsound.mp3'; + document.body.style.backgroundColor = "white" + let isPaused = false; + let input = alarmSet.value; +let setAlarm = setInterval(countDown,1000); + function countDown(){ + if (!isPaused){ + if (input >= 10 && input < 60) { + timeRemaining.textContent = `Time Remaining: 00:${input}`; + input--; + } else if (input > 0 && input < 10) { + timeRemaining.textContent =`Time Remaining: 00:0${input}`; + input--; + } else if (input === 0) { + timeRemaining.textContent = `Time Remaining: 00:00`; + audio.play(); + clearInterval(setAlarm) + document.body.style.backgroundColor = "green" + } + } +} + stop.addEventListener('click', () => { + audio.pause(); + alarmSet.value = '' + audio.src=''; + isPaused=!isPaused; + clearInterval(setAlarm) + }); +} // DO NOT EDIT BELOW HERE +/* + Try to reason about the code below and understand what it will do. + You will see that it attaches some event listeners to buttons on the page as well as how to play Audio from JS. + If you don't remember how to use events, please revisit the previous lession. +*/ +/* + Open the documentation below if you are keen to know what is Audio object and how it works + Audio documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio +*/ var audio = new Audio("alarmsound.mp3"); function setup() { @@ -22,4 +66,24 @@ function pauseAlarm() { audio.pause(); } +/* + This "window.onload" construct below might be something new that you haven't seen before. + + Window Object represents the current open window (tab) in the browser. + The Window interface contains loads of functionality among others the reference to the DOM Object. + + Here you can read more about window interface and see what properties it has: + https://developer.mozilla.org/en-US/docs/Web/API/Window + + We use the "onload" Window event to run a function when all resources and the DOM has been loaded and ready to use. + This ensures that "setup" function can find the elements defined in index.html file even if the script HTML tag + in the index file is appears earlier than the actual HTML elements we look up inside that function. + + You can play and try to see what happens if you replace "window.onload = setup;" with "setup();" function call instead. + If you open the browser console, you should see an error "Cannot read property 'addEventListener' of null". + It occurs because this script is being executed earlier and the elements it tries to find hasn't been yet loaded. + (An alternative way to fix it is by moving the script tags after element with the id "stop".) + + Documentation for onload event documentation: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload +*/ window.onload = setup; diff --git a/week-6/Homework/mandatory/2-quotegenerator/quotes.js b/week-6/Homework/mandatory/2-quotegenerator/quotes.js index 39ab24529..ed6fe2253 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/quotes.js +++ b/week-6/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,7 +1,6 @@ // DO NOT EDIT BELOW HERE -// A function which will return one item, at -// random, from the given array. +// A function which will return one item, at random, from the given array. // // Parameters // ---------- @@ -20,7 +19,22 @@ function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } - +//Paragraphs +let quoteParagraph = document.createElement("p"); +let authorParagraph = document.createElement("p"); +//button +document.getElementById("myBtn").addEventListener("click", function () { + let {quote, author} = pickFromArray(quotes); + //quote + let quoteContainer = document.getElementsByClassName("quoteContainer")[0]; + quoteContainer.appendChild(quoteParagraph); + quoteParagraph.innerHTML = "“" + quote; + quoteParagraph.className = "quoteContent"; + //author name + authorParagraph.textContent = author; + quoteContainer.appendChild(authorParagraph); + authorParagraph.className = "authorName"; +}); // A list of quotes you can use in your app. // Feel free to edit them, and to add your own favourites. const quotes = [ diff --git a/week-6/Homework/mandatory/2-quotegenerator/task.md b/week-6/Homework/mandatory/2-quotegenerator/task.md index 703785beb..bc566e3bb 100644 --- a/week-6/Homework/mandatory/2-quotegenerator/task.md +++ b/week-6/Homework/mandatory/2-quotegenerator/task.md @@ -2,7 +2,7 @@ In this folder you will find the basic setup of a quote generator. -You can change any of the files in this project +You can change any of the files in this project. ## How the Quote Generator should work @@ -10,14 +10,14 @@ When the page loads it should show a random quote from the `quotes` array on the When you click a button on the screen it should change the quote on the screen. -It can look however you like but there is an example in this folder at `quote_generator_example.png` +It can look however you like but there is an example in this folder at `quote_generator_example.png`. ## Need Help? - If you can't work out how to find a random element from the array, either: - - (advanced) try to use `Math.random()` + - (advanced) try to use [`Math.random()`](https://www.w3schools.com/js/js_random.asp) - OR - - (basic) use the `pickFromArray()` function supplied in the javascript file. + - (basic) use the `pickFromArray()` function supplied in the `quotes.js` javascript file. ## Further work diff --git a/week-6/Homework/mandatory/3-slideshow/slideshow.js b/week-6/Homework/mandatory/3-slideshow/slideshow.js index b55091c7b..8b35983a1 100644 --- a/week-6/Homework/mandatory/3-slideshow/slideshow.js +++ b/week-6/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,88 @@ // Write your code here +let slides = [ + "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80", + "https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60", + "https://images.unsplash.com/photo-1591727105417-a0a1055f48c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=584&q=80", +]; + +const body = document.querySelector("body"); +body.style.backgroundColor = "pink"; + +const divBackButton = document.querySelector(".backButton"); +const divForwardButton = document.querySelector(".forwardButton"); +const divPicture = document.querySelector(".picture"); +const divAutoBack = document.querySelector(".autoBack"); +const divAutoForward = document.querySelector(".autoForward"); +const stopButton = document.querySelector(".stopButton"); +const inputField = document.querySelector(".input"); +const backButton = document.createElement("button"); +const forwardButton = document.createElement("button"); +const autoForwardButton = document.createElement("button"); +const autoBackButton = document.createElement("button"); + +divAutoBack.appendChild(autoBackButton); +autoBackButton.innerText = "Auto Back"; +divAutoForward.appendChild(autoForwardButton); +autoForwardButton.innerText = "Auto Forward"; +divForwardButton.appendChild(forwardButton); +forwardButton.innerText = "Forward"; +divBackButton.appendChild(backButton); +backButton.innerText = "Back"; +const img = document.createElement("img"); +divPicture.appendChild(img); + +let timeBetweenSlides = 2000; +inputField.addEventListener("input", (e) => { + const userInput = parseInt(e.target.value); + if (userInput > 0) { + timeBetweenSlides = userInput; + } + console.log(timeBetweenSlides); +}); + +let index = 0; +img.src = slides[index]; +let autoInterval = null; + +forwardButton.addEventListener("click", forwardBtn); +backButton.addEventListener("click", backBtn); + +autoForwardButton.addEventListener("click", function () { + if (autoInterval) { + //true + stopBtn(); + } + autoInterval = setInterval(forwardBtn, timeBetweenSlides); +}); + +autoBackButton.addEventListener("click", function () { + if (autoInterval) { + stopBtn(); + } + autoInterval = setInterval(backBtn, timeBetweenSlides); +}); + +stopButton.addEventListener("click", stopBtn); +function stopBtn() { + clearInterval(autoInterval); +} + +function forwardBtn() { + index = index + 1; + if (index > slides.length - 1) { + index = 0; + } + img.src = slides[index]; // index[1] / + console.log(index); +} + +function backBtn() { + index = index - 1; + if (index < 0) { + index = slides.length - 1; + } + img.src = slides[index]; + console.log(index); +} +backBtn(); +forwardBtn(); diff --git a/week-7/Homework/mandatory/0-thinking-like-a-programmer/task.md b/week-7/Homework/mandatory/0-thinking-like-a-programmer/task.md index 1c841f8d5..e4755b159 100644 --- a/week-7/Homework/mandatory/0-thinking-like-a-programmer/task.md +++ b/week-7/Homework/mandatory/0-thinking-like-a-programmer/task.md @@ -28,10 +28,16 @@ After you've watched these videos I'd like you to answer these questions +Problem solving + ## 2. When trying to solve a challenge, what should you do first? +Define the problem + ## 3. What should you do if you get stuck? + +Read the problem several times and write a pseudocode diff --git a/week-7/Homework/mandatory/1-debugging-practice/script.js b/week-7/Homework/mandatory/1-debugging-practice/script.js index dc14a775a..423d8e20d 100644 --- a/week-7/Homework/mandatory/1-debugging-practice/script.js +++ b/week-7/Homework/mandatory/1-debugging-practice/script.js @@ -37,8 +37,9 @@ function submit() { alert("Please fill all fields!"); return false; } else { - let book = new Book(title.value, title.value, pages.value, check.checked); + let book = new Book(title.value, author.value, pages.value, check.checked); library.push(book); + myLibrary.push(book); render(); } } @@ -54,7 +55,7 @@ function render() { let table = document.getElementById("display"); let rowsNumber = table.rows.length; //delete old table - for (let n = rowsNumber - 1; n > 0; n-- { + for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); } //insert updated row and cells @@ -76,7 +77,7 @@ function render() { changeBut.className = "btn btn-success"; cell4.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check === true) { readStatus = "Yes"; } else { readStatus = "No"; @@ -89,12 +90,12 @@ function render() { }); //add delete button to every row and render again - let delButton = document.createElement("button"); + let delBut = document.createElement("button"); delBut.id = i + 5; cell5.appendChild(delBut); delBut.className = "btn btn-warning"; delBut.innerHTML = "Delete"; - delBut.addEventListener("clicks", function () { + delBut.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render();