- Create a single-page, professional looking website with proper styling and high quality content via HTML, CSS, and Javascript.

- jQuery Widget/Plugin - Use at least one on your site.

- Web Storage - Use web storage on your site to store/display some info for the user.

- Use Ajax/API - Include a section/area where you load some kind of content to the page, either from a third-party API or from a JSON file that you create. 

- Slideshow/Carousel - Include a slideshow/carousel of images (that can also include text if you'd like) using jQuery (plugin/widget) or another JavaScript library.

-All of  the files, including any JS, HTML or CSS should be well organized, properly indented, well-commented, and appropriate (in terms of content and layout). HTML and CSS should validate without errors or warnings. When viewing the site in the browser, no errors should be visible in the console. Add the async or defer attribute to the script tag in the header to prevent errors on page load with the JS. Apply "use strict" globally.

I was inspired to create a webpage for a fictional online bookstore called 'Tome Depot'.  The purpose of this website is for the business to sell books online, and users are book enthusiasts who want the convenience of purchasing online.

Discovery, Goals, and Content Gathering

Before defining the target audience, goals, and gathering content, I explored other online book retailers to see what kinds of things they were doing and what type of audience they tried to appeal to. 

Target Audience:

-Book lovers: People of all ages who enjoy reading.

-E-book readers: Tech-savvy individuals who prefer the e-reading format.

-Busy professionals: Busy individuals who appreciate the convenience of purchasing books online and having them delivered

-Gift givers: People who are looking for gifts for others.

Client Goals:

The client wants a single paged website prototype that allows users to browse popular books and view the New York Times current bestsellers. They want users to be able to save books to a wishlist for gift-giving purposes or for inspiration as to what to read next.  They want the website to be intuitive to navigate and easy to use. 

Content Gathering:

The client provided no content for this project, so it was up to me to define and create all content needed.

- Carousel: An autoscrolling carousel at the top of the page to show recommended books by Tome Depot.

- Featured fan favorites: A section that displays popular books among users of the site with ability to save books to a wishlist.

- Wishlist: A wishlist that the user can view to see saved books, with the ability to remove individual books or clear the whole list. The wishlist is displayed as a sidebar that is collapsed unless the user clicks the floating 'view wishlist' button.

- New York Times Current Bestsellers: Display the top 6 current NYT bestsellers.

Beyond that, the webpage followed the general html page structure.

HTML
The HTML was the easiest part of the code to create. I followed the standard HTML structure of a head, body, header, nav, main, and footer. Classes and IDs were used for elements that needed to be manipulated with CSS and javascript. The HTML was run through a HTML validator to check for warnings or errors, and fixed as needed. 

CSS
Writing the CSS was also fairly easy. I applied styles to make the webpage match the wireframe as much as possible. Grid was heavily used to define the layout, and I experimented with a lot of different styles to see what looked best. The code was run through a CSS validator to check for any issues. 

Javascript
The most challenging part of this project was creating the javascript to apply the desired site functionality. 

jQuery Plugins
I used the slick plugin to add the photo carousel component, which was a fairly easy process as there is ample documentation online. Unfortunately, I initially misunderstood that project requirements and thought I only needed to include one plugin, and that the carousel would would fulfill the requirement. Reading through the project rubric right before submitting the project, I realized my mistake and scrambled to add another plugin. I decided to add the jQuery UI plugin so that I could make wishlist items sortable by allowing users to move wishlist items by dragging them with their cursor as I thought this would make sense within the context of the site. If could do this project again, I think I would also use jQuery UI to toggle the "heart" button icons between the heart outline and filled heart, as it was a headache to figure out how to make that work through javascript code.

I chose the NYT current bestsellers API to connect my website to and display the top 6 bestsellers. This process was fairly straightforward as we had a lot of practice doing this from class assignments. I did run into an issue of exceeding the daily limit on API calls when I was in the process of testing my website and refreshing the page over and over again.

Web Storage
For the web storage component, I wanted users to be able to save books they are interested to a wishlist. I didn't think it made sense for the wishlist to be displayed in the main body of the page, so I wanted a sidebar that the user could click on to display the wishlist, that would otherwise be collapsed. 

I could write a novel on all the issues I ran into when writing this part of the javascript, and this section of the code took longer for me to get working than all of the HTML, CSS, and other javascript code combined. I think I was a little too ambitious in my vision, and if I could do it again, I would have sat down and thought it through more during the planning stages as there were a lot of things that I did not initially account for. 

Main Issues I ran into:

-Figuring out how to have each button add the associated title and author to the wishlist array. At first, I had a half baked idea using unique IDs so I could tell which button was being clicked on and add the associated book information to the array. This seemed like a cumbersome solution, and after more thought and research, I realized I could use parentNode to access the parent element of the button to extract the associated title and author info, which allowed me to use more generalized classes rather than creating unique IDs for everything. 

-Not allowing the a user to add a book to the wishlist more than once. Once I realized this problem, I initially solved it by having the save button become disabled after the associated book had been added to the wishlist. At this point, the only way to remove books from the wishlist was to click the "clear wishlist" button, but upon further thought, that didn't seem very user friendly as users may want to only remove certain books from their wishlist and not clear the whole list. I changed the code so that the save button would no longer be disabled after the first click, and instead a second click would remove it from the wishlist. After a lot of trial and error, I accomplished this by changing what was originally the addToWishlist() function to include a check the see if the book already existed in the wishlist array, and if so, it would remove it from the array rather than adding it to the array. At this point I also changed the button from a traditional button that said "save to wishlist" to a heart icon that would toggle back and forth between a heart outline and filled heart to indicate if the book had been saved, as many users are accustomed to this visual feedback. This introduced new problems, such as getting the image to toggle correctly, as well as a page reload causing the button icons to switch back to the heart outline image even if that book was in the wishlist. To fix these problems, I had to make an updateButtonImages() function that would iterate through each button and update the button display depending on whether or not the associated book was found in the wishlist array, and this function had to be called in the DOMContentLoaded event to ensure the correct button image would still be displayed even after reloading the page. 

Those were the most time consuming issues I ran into, but I ran into a million other minor issues along the way.

Testing the Code

I tested the code as I wrote it to make sure things working as intended and that there were no browser errors or warnings. The inspect tool was essential to this process, and was also helpful for looking at local storage to make sure things were actually being saved to storage as intended, or for messing around with the css to see how different styles looked before changing the code.

I used Figma to create the wireframe. I used heart icon images from icons8.com for the save to wishlist buttons, and https://www.remove.bg/ to remove the background from the icons. I used images from Barnes and Noble website for the images in the photo carousel and fan favorites book section. This wasn't ideal, but I wanted the images to be like what you would see in a real online bookstore, and I also wanted the book images to be standardized, and the ai image generator I used in my GIT 417 project wasn't up to the task. Because of this, I realize I will need to change the photos before including it in my actual portfolio. I used https://coolors.co/ to get inspiration for the color palette. Lastly, I used Visual Studio Code as my programming environment. 

This project stretched me to my limits of javascript knowledge, but I feel incredibly proud of what I was able to accomplish. There were quite a few times where I almost gave up on my original web storage idea and switched to an easier implementation that wouldn't allow users to remove things from the wishlist (the project requirements only specified that we needed to store and display something, not remove anything from storage), but I am happy I saw it through as the end result feels much closer to something you would find on an actual website. Creating the web storage component of the site was simultaneously the part I enjoyed and hated the most. It took me so long to get it working as intended that I began to feel stressed that I would not be able to get my original idea working before the due date. When it finally worked as I envisioned for the first time, I literally hollered out in joy, startling both of my cats who were my moral support during this project. The feeling you get when you finally get your code working fully of banging your head against the wall for so long is hard to beat. 

If I had more time, I would have liked to include a better implementation of the Jquery UI plugin. As mentioned previously, I think another good use of jQuery UI would have been to use it to toggle the save to wishlist button image as it probably would have been easier to accomplish than how I did it through the javascript. I would have also liked to have an add to cart button below each book since the website is supposed to be for an online bookstore, but I had such a headache getting the save to wishlist buttons to work as intended that I did not want to introduce more complexity by adding a second button to each book div. Lastly, I would have liked more time to fine tune the CSS to make the appearance of the website look more polished (the save to wishlist buttons being slightly out of alignment bugs me to no end), but the javascript portion ate up so much of my time that I had to sacrifice time elsewhere.

Overall, I learned so much from this project and I am a more confident developer for having done it.