Repository files navigation

This assignment demonstrats my skills using HTML form elements and JavaScript topics such as: Functions, parsing the DOM, form validation, conditional statements, debugging methods, formulas and Math Object.

1. File Structure

• Create two simple html pages.

  • index.html contains an HTML form that needs to be validated by JavaScript when submitted.
  • excel.html contains a simple form to let the user enter their numeric values then you will useexcel four common functions to find: the average, maximum, minimum, and total.

• Create an external JavaScript file: script.js.

  • The file should be placed inside a sub-folder named “js”.
  • All your code must be placed in this file.
  • The file must be linked to the two html files.

• Create an external Style Sheet file: styles.css.

  • The file should be placed inside a sub-folder named “css”.
  • All your CSS rules must be placed in this file.
  • The file must be linked to the two html files.
  • You can use any CSS rules you like to style your 2 HTML pages but remember that thisassignment is mainly about JavaScript, so it’s better to finish the assignment requirements firstthen add the styles later.

• The two HTML files, JS file, CSS file, plus the two subfolders have to be inside the assignment mainfolder named: “JS-Assignment-YourFirstName”e.g: JS-Assignment-Martin.

  

2. Home Page

• You will create a web form to ask the user to enter the following information using the appropriateHTML5 form controls (elements) to represent each item in the list below:
  • First Name ➔ input field of type text.
  • Last Name ➔ input field of type text.
  • Email Address ➔ input field of type email.
  • Address ➔ input field of type text.
  • City ➔ input field of type text.
  • Province ➔ input field of type text.
  • Radio buttons with the following options (one of these options should be selected as default,usually the first one):* Premium Membership* Standard Membership* Basic Membership
  • Send button to call (trigger) a function named “userForm()”, which you will have to create, willtake all the form information (user’s input).
  • Cancel button to reset the form elements.

3. Excel Page

• Design a web form following the wireframe guidelines below. Notice that the image below is just asample so you can use any styles like colour, font, layout, width, or borders plus any HTML Tags that youprefer.
• User can type his/her numbers with a space between each number (as a string with the spacecharacter as a delimiter or space separated numeric values) inside an input box (You need to notifythe user to enter the numbers with a space between every two numbers as shown in the diagram).
• Then the user can choose only one of the basic excel functions (radio buttons) to do the requiredcalculation.
• When the button “Calculate” is clicked, a function named myExcelFuns() will be loaded (triggered) soyou will need to add “onClick” event to the form button “Calculate”, and inside myExcelFuns functionbody (block) you will have to do the following:
  • Get the user input (string of numbers and spaces) and save it into a variable named “numberStr”.
  • Make sure to remove all the extra spaces before and after the user input (Remove whitespace fromboth sides of a string) using the appropriate JavaScript built-in method.
  • Convert the string user input “numberStr” into an array of numbers named “numberArr” using theappropriate JavaScript built-in method for array object.
• Continuing inside myExcelFuns(), you will use if condition to scan or to check which radio button wasselected and based on this selection you will do the right calculations.
  • Use if else blocks to do the required calculation based on the selected radio button:
    • If (the AutoSum radio is checked) ➔ Do the calculation to find the total of all the numbers
    • else if (the Average radio is checked) ➔ Do the calculation to find the average of the numbers
    • else if (the Max radio is checked) ➔ Do the calculation to find the maximum number
    • else ➔ Do the calculation to find the minimum number
  • The returned value for each if condition has to be saved into a global variable based on ourfunction (it’s a local variable based on the entire JS file) named “result”, so you will need to declarethis empty variable first, then use it inside each if condition and else block.
• There is more than one way to get the selected radio button option, one of them for example, is togive each radio button control an “id” in your HTML code:
  • <input type="radio" name="excel">AutoSum
  • <input type="radio" name="excel">Average
• At the end of all the if else blocks (4 blocks), use the getElementById() method to print your result (thevalue of the result variable) into your specific HTML element.

This section lists the languages I used to built this project.

• HTML
• CSS
• JavaScript

This project is downloadabe. If you would like to download this repo for personal use, feel free. Steps below:

1. Click the green "Code" button above the file section.
2. Click "Download Zip".
3. Open your downloads file and extract.
4. You're set!

• Stack Overflow - Finding the average of an array
• Codeburst.io - min, max, sum and average
• Team Treehouse - finding min and max in an array
• W3 Schools - Math.min()
• W3 Schools - Math.max()
• MDN web docs - Math.min()
• MDN web docs - Math.max()