- Spirited Away
- Princess Mononoke
- My Neighbor Totoro
- Howl's Moving Castle
- Castle in the Sky
The baisc layout is a simple grid of the 5 covers I decided to use for each movie. Each movie cover is clickable and when click will pull up a modal of the movie image with a synopsis fo the movie. Each Modal has a working x button to close the modal and another function to close the modal by just clicking anywhere on the window.
- Created the html template.
- Format the html template using CSS grid and Flex.
- Made the first div for Spirited Away and set up a Modal content in the HTML page
- Formated the HTML page using CSS to hide the modal content for Spirited Away.
- Created a javascript object for spirited away and made a basic function to open the modal content by adding an event listener to the movie cover on the HTML page.
- Adjusted the CSS to make the webpage slightly transparent and dimmed when a modal is open.
- I filled in the rest of the modal content for each movie after the basic javascript work for the first movie.
- Rewrote the javascript to make a more dynamic code that would target each image and pull up its respective modal content.
This is the overall flow behind the methods used to approach this project. Please let me know your feedback!
- Html
- CSS
- Javascript