Hey Jared, Because this is a final project, I created a main JS file that held the JS for similar things across my five required pages and this page of my website. Anyway, I really enjoyed the class, learned alot, had some much needed refreshers, and look forward to maybe having more classes with you in the future! Until then take care! - Nate
FILE – js-main.js
This file is used across all pages, including this page. On each page in the header, you will find an image of a sun (or moon, depending on the setting) on the left side of the top navigation bar (of the hamburger menu bar when the screen size is small). Each page starts in "color mode" (the moon image is visible). When the moon is clicked, the entire page is changed to grayscale, and the moon image changes to a sun image. Click the sun image, and the entire page will change from grayscale to color. At the bottom of every page, on the right side of the footer (bottom of the footer when on a small screen), you will find a simple input (email) form with a submit button for a "Register for our newsletter!" You will get an error message if you click the "I'm in!" button without entering a valid email address. If you click the button after entering a valid email address (following: var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; ), you will get a thank you alert. **SIDE NOTE** For the SUN/MOON button, I wanted to have it set up so it would keep the same setting as you move in between pages, but I ran out of time and steam and didn't get to it)
Linked to pages
FILE – js-about.js
This file calls information stored locally from two other JS files (js-product.js and js-services.js). As this is not a real website and will not be, I had those JS files store something locally that this file will call to use on my "About Us" page. Near the top of the "About Us" page, you will find two different counter boxes with a blue background, "Services Requested" and "Products Ordered." the numbers in this box are what this file is calling from the console. More about how these numbers come to be will be discussed in the other JS files below.
Linked to page
FILE – js-contact.js
This file controls the form on my "Contact Us" page. When the form is filled out and the "Submit" button is clicked, a personalized alert will pop up using some of the information collected in the form.
Linked to page
js-product.js
This file causes popups on my "Products" page. When you click on any of the nine product images, a popup will occur; within the popup, the product image you clicked on will display along with a title called from the picture caption, as well as information from the HTML that is hidden (a product description and price). There are also two radio buttons, one for United States dollars and one for Australian dollars. The USD is auto-selected, but when you click on the AUD radio button, the price will update to a different price (to mimic, if you will – a currency rate change). Finally, below that, you will find an "Add To Cart" button; this does two things when you click it. First, you get an alert that the item was added to your cart. Secondly, this click will increase the locally stored number used in the "Products Ordered" counter on my "About Us" page by one. Give it a try, go back to my "About Us" page to recall what number is currently in the "Products Ordered" counter, and then return to my "Products" page, open a few of the products, making sure to click the "Add To Cart" button, and then go back to my "About Us" page, and see the "Products Ordered" counter increase. **SIDE NOTE** This is only stored locally, so clearing your browser history will reset the number to zero.
Linked to page
Helps make things on this page work
FILE – js-services.js
This file does the same as the js-product.js file. Except on my "Services" page. Rather than showing "products," it shows "services." Again, a popup occurs when you click on any of the nine services offered. The popup uses the photo, has a title, calls a hidden description, and price (and this time an attribute for the photos used) from the services.html file, and has the same function with the radio buttons USD and AUD, but this time it has a "Request Service" button. Again, when this button is pressed, it does two things. First, you get a thank you alert, and second, this is what updates the locally stored count of the Services Requested counter on my "About Us" page. Again, this is only stored locally.