The website was our final assignment for GIT 417. The website could be about any company, real or fictitious. The website had high standards and had to include:

- A game, guessing between 1 and 10 and respond to user input

- A shop area, that featured dynamically changing what appears on the page as a single page-app

- A form that was complete with validation and saving the values and assigning them to a user. 

I knew that when it involved those elements, that I wanted to create an ecommerce brand and product. I love fashion and so shoes seemed like a good fit. Shoes today are so expressive and there has been a lot of new styles, so thought it would make a good center for a brand. 

The project had to meet the requirements and also be responsive, have a dark/light mode, and real text that you would see for a real website.

I love louder brands and some that use some sort of personality in their messaging. I thought of some of my favorite products, since an e-commerce store seemed to meet all the criteria and was a familiar type of website to me. Some of the ideas I had initially for the website were: 

- Custom furniture website

- Fashion centered e-commerce website

- A website built for a business and some generic services 

After deciding on a shoe store for my e-commerce store, I went out searching for first of all, actual products out there to base a brand off of. There were a lot of images and lots of different sneakers, but it was hard not to just copy the brand of some of the more popular brands like Nike. I wanted to try and gather images that looked similar enough where product tiles would make sense, and also so that they had a similar enough look to build a brand around. 

I wanted to introduce a design that echoed something that was more specific and personal. I went with something quirky around Komodo Dragons as the logo and then a retro color palette using heavily pigmented colors. I wanted it to look a little edgy, but also retro and inviting. 

Due to the requirements of the project, I knew the different sections of the site and what type of content needed to be there, I just styled and put the text that I could envision the brand using. 

After that, I made design decisions about the placement, sizing, and colors for the website. I centered most of the text except for the header, which I kept simple and off to the side. The rest of the site I focused on usability and accessibility first then created a basic section by section websites experience, since it was a single-page website. 

After organizing the structure of the web page and styling most of the elements, I introduced the Javascript. The Javascript is separated into serving four main functions. 

1. Dark mode

2. Form validation

3. The guessing game

4. Product scrolling

I started from the top of the page down and separated my code that way. The dark mode works off of manipulating the attributes added to the body, which then have a cascading effect on the other elements. 

The shoe slider, uses display and an array of all the different hidden DOM elements to produce a slide show almost of all the shoes, but displayed one at a time. The array length helped dictate the boundaries of the product slideshow and by toggling the display status of the different products, you could go through the products one by one. 

The guessing game consisted of having the user input a number between 1 and 10 and then generating a random number in that range. If the numbers matched, it would display a different message otherwise it would dynamically display the randomly generated number and the guessed number. 

The final piece of Javascript was for validating all the inputs for the contact form and building the error messaging as well as a dynamic output that took the user input from the form. 

Thanks to the use of various tools like ES Lint, HTML and CSS Validators, as well as the console, testing the code was easy. Breaking up the code into testable areas and running the code frequently as it was developed helped make the coding process easy and very simple to debug. 

There were many design considerations with implementing the custom code as well as the specific content, colors and fonts. The biggest thing is making sure that the fonts were cohesive and repeated throughout the website as well as making sure that dynamic text is user friendly and clearly visible and legible. 

Images were sourced from Canva and Pexels. 

Code was developed and tested in VS Code 

Colors were inspired by ColorHunt

Fonts were from Google Fonts