Homework 4 JavaScript, the DOM and Event Listeners

Homework 4 JavaScript, the DOM and Event Listeners
1 Assignment Objectives The goal of this assignment is to further your understanding how JavaScript, HTML and CSS work together to create interactive webpages. You will be making a fake social media website called ”DoggoGram.” You can see a preview of what the webpage will look like below.
1
2 Setup For this assignment, you will be editing one file, solution.js, which is linked to index.html. DO NOT edit the HTML or CSS in any way, you only need to write the JavaScript functions. In the solution.js, you will find skeleton code for the different functions you have to create. 3 Task 1 - Form Handling For the first function, handleFormSubmit you will be writing JavaScript to collect values from the postForm element. Using following id’s: formUsername, formCaption, and formImg you will be able to gain the values of each input element. For the image, you will only have the image name as the value, so you must utilize the fileLocations object to get the relative path to the image on your filesystem. Once these values are obtained, you will pass them to the addNewPost function as arguments. 4 Task 2 - Appending DOM Elements For the addNewPost function, you will be programmatically creating the following HTML element using JavaScript: <div class="post" <span{username}</span <img src={imgLocation} alt={caption} <div class="postOverlay" {caption} </div </div It is recommended to read the MDN on document.createElement(), which is used heavily in this part of the assignment. You can add attributes to your created elements with the relative accessor: myElementVar.classname, myElementVar.style, myElementVar.src, etc. You must also add two event listeners to your post div element: • "mouseover" listener to change the opacity of the postOverlay to ’1’ • "mouseleave" listener to change the opacity of the postOverlay to ’0’ Onceyouhavecreatedtheelementwithalltheproperties, youcanappendyour newly created div to the postList element.
2