In-N-Out Website: JavaScript
Designed and Developed by: Yaseen Elshaigi
Project Basis
This project was meant to be a final project for the GIT 417/519 course from Arizona State University. The goal was to create a single-page website using all the knowledge of HTML, CSS, and JavaScript that we learned throughout the course and include it in our portfolio.
The website itself can be either fictitious or real, so I chose to make my website based on the In-N-Out restaurant since its color schemes and items were easy enough for me to replicate for this project while making it look like the real deal.
The website itself can be either fictitious or real, so I chose to make my website based on the In-N-Out restaurant since its color schemes and items were easy enough for me to replicate for this project while making it look like the real deal.
Project Requirements
Throughout the project, I made sure to include all the necessary requirements for this project to be a success. The most important of them being to include a code site that I made with working HTML, CSS, and JS files. The codes within the files must be 100% original and not taken from any source that's outside of the GIT417/519 class.
We then had to do one of the two choices for our coded sites. One choice was to include a product display section where we let the viewers see at least three of the available products from the website by clicking on a control that includes the product's name. They must also include a game play section where users can guess any number between 1 and 10 and see if they got it right if their guess matches the correct number. Another choice is to create a shopping cart section. This choice is considered harder to complete than the first choice because it requires the students to display a collection of top products along with their corresponding image, price and name. They must then code it so that the users can add any individual product to their total.
For me, I chose to go with the first choice and created a product display and guessing game for my website since it made since for the restaurant to display some of their products without including a shopping cart.
Regardless of which choice I made, I also needed to create a contact form that includes the users' full name, phone number, and email while giving them the choice to pick either phone or email for their contact method and a message to send to the company. This form also requires the full name, phone number, and email addresses to be validated with regex. I also needed to include a light/dark mode for users to switch between when they use the site.
We then had to do one of the two choices for our coded sites. One choice was to include a product display section where we let the viewers see at least three of the available products from the website by clicking on a control that includes the product's name. They must also include a game play section where users can guess any number between 1 and 10 and see if they got it right if their guess matches the correct number. Another choice is to create a shopping cart section. This choice is considered harder to complete than the first choice because it requires the students to display a collection of top products along with their corresponding image, price and name. They must then code it so that the users can add any individual product to their total.
For me, I chose to go with the first choice and created a product display and guessing game for my website since it made since for the restaurant to display some of their products without including a shopping cart.
Regardless of which choice I made, I also needed to create a contact form that includes the users' full name, phone number, and email while giving them the choice to pick either phone or email for their contact method and a message to send to the company. This form also requires the full name, phone number, and email addresses to be validated with regex. I also needed to include a light/dark mode for users to switch between when they use the site.
Wireframes
Color Scheme
Content
The above PNG files are the images I chose to work with for my final project. The first image featuring the restaurant was made to be in my About us section while the other four were displayed in my Product Display. The last four images are also food items that people usually order at In-N-Out, so I made sure to look at their menu to see how they were described as and included their prices.
Header
For the header, I included the main title of the webpage and also included a light/dark mode button for users to change between the different modes as per the requirements. I've also included a navigation bar to make it look more professional. Frankly, it took me a while to make them the same width as each other and center them on the page.
About Us
For the About Us section, I wanted to include a picture of the restaurant at the center of it and include some of the company's values on their food quality. I organized it so that their trademark quote appears separate from the other two sentences at the bottom.
Product Display
This is where things began to get a little rough for me in the project. At first as explained in my first wireframe, I wanted to make my product display look like a slideshow. My initial thought process was that I wanted the users to click on the next button to go to the next item and the previous button to go back while also having the options to click on any of the dots below the slideshow.
This is what I initially wanted my product display to look like, but then I realized that my project wasn't going to accept this type of format and even then, I accidentally copied the format from an outside source, which I was not allowed to do.
I then decided to change up my product display by looking at some of the class resources for help, and then at last, I found my inspiration. Afterwards, it was still a bit challenging to put together the format of the display and get the buttons to work correctly, but in the end, I was able to overcome that challenge with a huge success.
With this format, I was able to make it so that the users would be able to click on any item on the left side and view the product description on the right with the image being displayed in the center.
Guessing Game
For the game play, I chose to make a guessing game where users would guess between the numbers 1 and 10 and see if they got it right. I named the game "What's The Lucky Number?" because I wanted it to be catchy and fun. I even made the submit button for the game say "Are you lucky?" to fit with the lucky theme. I've also made it so that it would say a different message if the user won or lost.
Contact Us
The contact form was very easy for me to create since we did a class activity based on it during the course. However, getting it to validate with regular expressions (regex) was a bit more difficult. It took me some time to find the right regex for the full name, phone number, and the email address. I then needed to include two radio inputs for the phone and email methods and make it so that the user could switch between them. Other than finding the regex and making it work, I was able to get the contact form completed.
Light/Dark Modes
At first, I thought that the light and dark modes were optional, but I realized that they were required for this project to work. Luckily, it was easy to add to the HTML file. It only took slightly longer for me to make the javascript work since I needed to adjust the CSS file as well.
General Details
Throughout the project, I needed to make sure that the HTML, CSS, and JS files all worked well with no errors and didn't conflict with each other. I also made use of the id and class attributes for the buttons and inputs to work.
Coding
Coding the HTML and CSS was very easy for me since I had previous experiences with HTML coding fro my past ASU classes. The only things I needed to do for them that required extra work was making it so that it was in a fixed width of 1280px and including a dark mode for them.
The JavaScript, on the other hand, was a bit more difficult for me since it was my first time using them for a web page. Luckily, there were some class activities that I used as references to make the codes for my required content along with the available days on campus so I could get some help in case I ran into a problem I couldn't solve on my own or with the resources.
The JavaScript, on the other hand, was a bit more difficult for me since it was my first time using them for a web page. Luckily, there were some class activities that I used as references to make the codes for my required content along with the available days on campus so I could get some help in case I ran into a problem I couldn't solve on my own or with the resources.
Website Link
Thank You!
