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.
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.
Task 1 - Form Handling
For the first function, handleFormSubmit you will be writing JavaScript to col-lect 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 func-tion as arguments.
Task 2 - Appending DOM Elements
For the addNewPost function, you will be programmatically creating the follow-ing 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’
Once you have created the element with all the properties, you can append your newly created div to the postList element.
Submission
Upload your solution.js file to Canvas as LastName_FirstName_Assignment4.js.
Good Luck!
