For my project, I decided to make a mock up of Bethesda's landing page because I have rediscovered my love of the Fallout series with the premiere of the new show.

Project Requirements:

- 1280px width, does not have to be responsive

- Looks like a real website, no placeholder texts or images

- HTML, CSS, JS files properly indented and semantically coded

- HTML, CSS validate with no errors

- NO JS or CSS in the HTML

- No console errors

- Add async or defer attribute to <script> tag

- JS "use strict" globally

- Implement:

          - jQuery Widget/Plugin

          - Use Ajax/API

          - Local Web Storage

          - Slideshow/Carousel

For Local Web Storage, I implemented a mocked-up user login. Clicking on the LOG IN / SIGN UP button, a modal pops up and prompts the user to enter an email and password. Fill out each input prompt and press login. Pressing Login saves the Email and Password to local storage, hides the original log in button, and displays the users email instead with a logout button beneath it. Pressing logout removes the user from local storage. On a page reload the users email still displays as long as it is in local storage.

I implemented the accordion widget here because I thought it would be the best way to display the 12 most well known games that Bethesda is known for without overwhelming the user. I also styled the accordion to be more along the lines of the whole website.

For the carousel, I implemented the cycle2 jQuery widget. It cycles between 4 other popular Bethesda games and the user is given control to pause/play the carousel, as well as direct the carousel to cycle through the images either backwards or forwards.

I decided to call a third-party API that we didn't use in the class. It is for a video game database called RAWG, I had to sign up and got a free API key for doing so. I get 20,000 calls a month so don't load it up too many times! At first, I had the API load with a ready function, but decided to implement an event listener on the Load Page button instead. When the page loads, the load page button is hidden and two buttons are revealed. One will take you to the next page, the other to the previous page (if there is one.)

The website is designed to be a landing page for the game development company called Bethesda. It's primary goal is to look like a professional website that could possibly be Bethesda's, it's secondary goal is to act like Bethesda's website. With the new Fallout show, as well as Amazon giving away Fallout 76 and all the other Fallout games being on Super Sale right now, I figured it would be good to give people quick synopses of the Fallout and Elder Scroll games. As well as inform them of other popular Bethesda games, like Redfall and Starfield.

I made a quick rough draft before starting the website. Ultimately, I decided that I wanted to reorder the page to have the accordions after the first article, then the carousel and finally the API response. Visually, it just works much better.

For this project, I built the website is VS Code, I used Google Images to find my images and I used Wikipedia to get the synopses of the games.

I will come back to this project and change some things in the future that I didn't have time for. To improve UI, the pause button will change to display the play symbol when the carousel is paused, then revert back to the original pause symbol once it is in motion again. Next, using a register and log in modal that saves the user information to MongoDB and can make calls to the login with JWT.

A few other things I will implement after the class is over: 

- Add sub-nav jQuery widget options on hover over the nav objects 

- Add game descriptions to the API response as well. (Maybe use RAWG desc. for FO & TES also)

- Make project fully responsive.