Final Project
For my final project, I will summarize all of the JavaScript that I have added to my website.
I will list each item and describe its purpose. In addition, I will be including a link to each
page that has a demonstration of said JavaScript. Now, let us begin...
JavaScript Coding
Module 2: Mathematical Calculation from Chapter 2
For this assignment, I had to create at least one function to perform a mathematical calculation based on user input. I decided to create a four-function calculator by adding tables that will act
as the buttons and display the keypad numbers, operators values, and an onclick element to make them work. The onclick event executes JavaScript when a user clicks on a button. On my Projects
page, each button on my calculator is equipped with an onlick event, this way when a user wants
to perform a mathematical operation, each button activates when clicked and are shown on the
calculator's display.
Module 3: If or Switch statement from Chapter 3
For this assignment, I had to add a feature or functionality by using a switch, or an if/else
statement. I went with a switch statement that will display text based on what day it is. This was done by creating a function to get the day, adding switch cases and corresponding text for each day of the week, and assigning numbers to each day (i.e., 0 is Sunday, and 4 is Thursday).
A user will click the "Today is..." button to find out the current day.
Module 5: Image Gallery from Chapter 5
This assignment was on the more difficult side, I had to create an image gallery using JavaScript
where a user could switch between a 3-image or 5-image slideshow view, and the ability to zoom
in to all photos as well. The difficult part was trying to get the gallery to display correctly on my
website page, but no matter what, the position of the gallery was not where I wanted it
to be, so I added a link to it near the bottom of my Gallery page. This was done by creating a
DOM (Document Object Model) tree that groups all items in hierarchical order, variables for each
feature, a function that stored an array(a container object that can carry a finite number of a certain type of a single value) to track the order of images when the user goes through the gallery.
Left and right arrow functions were also created to assist the user in navigating through the gallery, if/else statements (to check for true/false conditions), for loops (to loop through the image gallery
a certain amount of time), and event listeners (a method that attaches to an event handler to
a specified element) to finally bring the gallery to life. All JavaScript code was added with
a seperate file, then the source to the file was linked via the HTML page.
Module 6: Form Validation from Chapter 6
For this assignment, I had to add validation to a form on my website, luckily, I already had a
form on website and I did not have to write a whole new one. I used JavaScript to add validation
to my page, this was done by creating a separate JavaScript file where I created variables (an
element that can change) for the form, functions to validate the required fields, the getElementById()
object to access certain elements with unique ids, the querySelector() to find elements of any
selector, if/else statements to check if the form had all required fields filled out, a catch
statement to find errors in the form, placeholders to show a placeholder for a field not filled out,
and last, a focus event was added to the form to automatically move to the next box on the form.
Module 7: Calculation of time elapsed from Chapter 7
For this assignment, I had to add to my web page some code that calculates the time passed since
the days, months, and years input by a user, then the code must display the elapsed time in
days, months and years. To complete this task, I created a separate JavaScript file and linked it to
my Projects HTML page, then I used Use JQuery to get the function ready when the page loaded,
then I created a function to get the dates, display the results in days, months, and years; then I
created variables for the dd/mm/yy format, stored their value into an array that will parse the
string argument and return an integer of that certain base; then I added if statements to calculate the time in day, month, and years, finally, I used a return statement to return the values in days,
months, and years. Last, I created a function to validate the date entered, then used an if/else statement to check for true or false conditions. In thesubmit box, enter a date,
month, year, then click submit to reveal the elasped time.
Module 10: JQuery from Chapter 12
For this assignment, I decided to allow a user to enable or disable a submit button on my
Projects page. I had to create a separate JavaScript file, link the JS source on my HTML page,
then use a jquery function to create an accept click event (to allow a user to click the button) and call the function, then an if/else statement if used to check if the button is enabled or disabled.
Finally, I had to add a link to load the JQuery library to the HTML page in order for this to work.