Final Project: Creature Guide
Requirements
For the final project, I had to create a single page website using HTML, CSS, and JavaScript that displayed at 1280px wide, included no placeholder text, and included high quality images. I immediately started brainstorming and decided on a topic.
I love playing Animal Crossing and I have an issue keeping track of which creatures are available at a given time and even then, I struggle keeping track of which creatures I've caught. With the outlined requirements, I decided to create a straightforward guide for Animal Crossing players that allows them to keep track of the creatures they've caught and view the currently available creatures.
Goal
The goal of the website was to create an easy-to-use guide for me and other Animal Crossing players to keep track of the caught creatures.
Purpose
The purpose of the site was to give the user the option to choose a month to see the creatures available at that time. Another aspect to this was that some creatures are only available in specific conditions or in specific locations on your island. This can be overwhelming for new players so I wanted to create a straightforward way to give them the information they need. I've noticed any time I've looked up information about where to find a certain creature it's been difficult to find and it's frustrating to have to repeat this process for each individual creature so I wanted to include it all in one place for the user.
Users
Many of the intended audience will be people who are new to playing Animal Crossing or just casual players. The game caters to a large audience of players ranging from 12-60 years old, with the majority of players falling in their 20s. The player's genders are split nearly 50/50. With this in mind, I wanted to create something that would be consistent with the game's brand identity.
Process
I started by making the wireframes for the site. This determined how I would create the HTML code, and then the CSS code. After those were validated, I moved on to the JavaScript portion of the project.
Wireframes
I started by drawing a general wireframe for the website. My goal here was to get all of my ideas on the page, so this first wireframe isn't quite the layout that I went with.
Writing the HTML
I knew the majority of my page was going to be content from the API, so I made sure to create empty sections that the API could place the information into. I knew I needed a widget, so I made a space for that and updated it once I decided on which to use. I stopped here and made the following changes as I made more progress on the project.
Once I decided on the carousel contents, I added those into my HTML. I initially included a search area, but I didn't have time to implement it so I removed it from my project. After I finished coding the HTML portion of the project and validating it with the W3 validator, I refined my wireframe a bit to more closely reflect my vision for the project. Here I started planning colors and had refined placement of each section. I also started planning what it would look like with all the requirements being met.
Content Gathering
I didn't use any specific website to generate a color palette. Instead, I found Animal Crossing themed palettes and chose which color's I wanted to use from those. After choosing the colors, I created the assets for the website using Adobe Illustrator: the background image, the logo, and the favicon.
Writing the CSS
With these in mind, I started the CSS. This was a bit difficult to do since I planned to get all the information from the Nookipedia API and didn't have any information on my site except for headings and empty sections. However, I needed to style the boxes the creatures would go into once generated. To do this, I created some placeholder information so I could visualize everything. I created a handful of availability charts and placed these, as well as the creature image into the project. I got the creature images from nookipedia.com. This allowed me to get some styling completed, visualize the end result more clearly, and anticipate how much spacing each element would require.
From here, I decided to make the website responsive. I anticipate that I will be using this when I play Animal Crossing, and it's much easier to use my phone to look information up rather than getting my computer every time.
At this point, I wasn't quite sure how much information the API had that I could pull, which is why I created the availability charts in case it had something similar. I also created the checkboxes so I could see how everything looked. I validated the CSS with the W3 validator. Once I got the API to work, I removed these from my HTML since they were no longer needed.
Writing the JavaScript
Next, I started on the JavaScript. I chose to start with deciding which widget to use for my project. I wanted the user to be able to change the month to see which creatures are available in a specific month, so I chose the datepicker widget. There was a themed one that matched the color theme of my page well, so I chose that. I updated my HTML to include the correct code for this widget and validated it once I ensured the datepicker was working.
The next step I worked on was the web storage functionality. I wanted the user to be able to track the creatures they had caught. On page load, I wanted to load the checked checkboxes for the users to keep track of what they had caught.
Next, it was time to connect to the API. This actually was one of the more stressful parts of the project. Early on when I had decided to do this particular project, I thought I had found an API to use on the GitHub open source list of APIs. However, the one that I had found was no longer available, which was the source of the stress. The one I eventually found to use was the Nookipedia API. I requested the key and started looking through the documentation to determine what information I wanted to pull for the creatures and how to do it. I decided to include the creature image, the time, location, shadow sizes, and selling information. Once I received the key, I started by calling just one endpoint to ensure I made the API call correctly and then I made minor adjustments to the styling of the information. Since there was only one image to display, I went back to my original idea of a three-column grid.
I waited until the last step to implement the carousel. I wasn't sure if I wanted to implement it with the API results or if I wanted a separate section for this. In the wireframes, I had chosen to implement it with the API information, but as the project progressed, I started thinking about the possibility that a new user hasn't met Flick, CJ, or even Blathers yet. For them, it would be confusing to see "Nook's Sell Price" and "CJ's/Flick's sell price". I decided then for the image slider to include images of popular visitors and people the user will interact with frequently, I included Flick, CJ, Blathers, Tom Nook, Redd, and Brewster. These images were from nookipedia.com. I decided to place this above the API results so this would be the first thing the user sees.
Tools and Testing
I used Visual Studio Code as my IDE of choice, and I used Google Chrome to view and test my website as I progressed through the project. The Dev Tools were very helpful when getting the CSS to work and to be responsive. I used the W3 Validator to validate my HTML and CSS code. I also used https://www.jqueryscript.net/blog/best-carousel.html to choose a slider for the carousel feature. Lastly, all of the images outside of the API are from nookipedia.com.
Next Steps
For the next steps, I would have loved to include a search bar. I originally had that in my refined wireframe and I liked the look of it once styled on my page. However, I was not able to implement it in time for the deadline. This would have greatly improved the user experience of the site because they would have been able to search the current month to see if the desired creature is available.
I also would have included logic to pull the northern hemisphere or southern hemisphere information based on user location. I only included the northern hemisphere, but it would have been nice to ensure this works for everyone.
Although this is a single-page site, I would have liked to make separate pages for each creature. With the results of all three on the same page, this website feels very cumbersome and it would have been nice to split that up and make it less overwhelming for the user.
I really struggled with finding an API to use, as I discussed above. Otherwise, since I did the local storage functionality before I completed the API functionality, I did struggle with integrating the two. This could have just been a result of working on it all day, though.
The most enjoyable part of this project was creating something practical that I would use, and that I can share with friends to use. This has been a project I've wanted to do for a long time because I haven't found another guide website quite this helpful, and this checks all my boxes. Until now, I haven't had the knowledge to create it to the level I wanted to complete it.
