Bashir week 5 #1012
Bashir week 5 #1012
Conversation
to follow previously sent common practice and instructions fixed some typos
Minor changes to make language consistent and simplify it where needed.
| @@ -40,41 +39,68 @@ | |||
| function insertPeopleData(arrayOfPeople) { | |||
| let content = document.querySelector("#content"); | |||
| //Write your code in here | |||
| arrayOfPeople.forEach(function (person) { | |||
| let h1 = document.createElement("h1"); | |||
| let h2 = document.createElement("h2"); | |||
There was a problem hiding this comment.
Hi Bashir - this is looking good at the moment.
| arrayOfPeople.forEach(function (person) { | ||
| let h1 = document.createElement("h1"); | ||
| let h2 = document.createElement("h2"); | ||
| content.appendChild(h1).textContent = person.name; |
There was a problem hiding this comment.
I would advise putting stuff like this onto separate lines for clarity.
| content.appendChild(h1).textContent = person.name; | |
| h1.textContent = person.name; | |
| content.appendChild(h1); |
| * All of your HTML elements should go inside the Div tag with the id "content". | ||
| * | ||
| * Hint for type of lists in HTML: https://www.w3schools.com/html/html_lists.asp | ||
| */ | ||
| function insertShoppingList(shoppingList) { | ||
| //Write your code in here | ||
| var unorderedList = document.createElement("ul"); |
There was a problem hiding this comment.
Try to avoid var keyword if you can - stick to using const or let
| * All of your HTML elements should go inside the Div tag with the id "content". | ||
| * | ||
| * Hint for type of lists in HTML: https://www.w3schools.com/html/html_lists.asp | ||
| */ | ||
| function insertShoppingList(shoppingList) { | ||
| //Write your code in here | ||
| var unorderedList = document.createElement("ul"); | ||
| shoppingList.forEach((item) => { | ||
| var listItem = document.createElement("li"); |
There was a problem hiding this comment.
listItem is an example of a good variable name - much clearer to read
| * 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 | ||
| let bookslist = document.createElement("ul"); | ||
| let imageList = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"]; |
There was a problem hiding this comment.
These images won't display anything - you might need to find some images off Google images
| let bookName = document.createElement("p"); | ||
| bookName.innerText = `${item.title}-${item.author}`; | ||
| let bookImg = document.createElement("img"); | ||
| bookImg.src = imageList[i]; |
There was a problem hiding this comment.
At the moment there is a ReferenceError appearing in the Chrome console. It is stating that i is not defined
There was a problem hiding this comment.
Can you try and work out where this error is coming from ?
| let blueButton = document.querySelector("#blueBtn"); | ||
| let jumbotron = document.querySelector(".jumbotron"); | ||
| let donAndVolBtns = document.querySelectorAll(".btn-lrg"); | ||
| blueButton.addEventListener("click", function () { |
| isValid = false; | ||
| } | ||
| if (emailInput.value.indexOf("@") === -1 || emailInput.value.length < 1) { | ||
| emailInput.style.backgroundColor = "red"; |
There was a problem hiding this comment.
Setting the whole background colour is a bit dramatic for the user. Think of a more subtle way in which you can inform the user that there is an issue with the page.
|
|
||
| function areValidElements() { | ||
| let isValid = true; | ||
| if (nameInput.value.length < 1) { |
There was a problem hiding this comment.
Could also check here that nameInput.value.length === 0 too
|
|
||
| /* Submit button event Listener function*/ | ||
|
|
||
| function submitButtonFunction() { |
There was a problem hiding this comment.
I like how you have put this logic in a separate place - inside the submitButtonFunction
Your Details
Your Name:
Your City:
Your Slack Name:
Homework Details
Module:
Week: