CSCI web design javascript coding website

CSCI web design javascript coding website.

I need support with this Javascript question so I can learn better.
/0x4*

the details of description is ON https://www.youtube.com/watch?v=9VEYmZHt9DA

1. • Download the compressed folder and extract it in your computer.
   • Important — Do not modify the HTML or CSS files given in the package. If you are expected to add styles, you should add it in another stylesheet.
   • Create a folder named js inside the folder named www. Inside this, create a file named script.js — all your JavaScript must be included in this file.

2. STEP 2: Implement the following user story, based on the goals and acceptance criteria for all scenarios specified below (all must be implemented using JavaScript — do not edit the HTML or CSS files):

   • User Story:

     As an expert web site user,
     I want to make a message form appear when I click a button,
     So that I can see the message form and send a message through this form only when I need to (i.e. on demand).

   • Acceptance Criteria (for specific scenarios):
     • Scenario 1: User clicks on the “Send Message to Yoda” button.
       • The message form is displayed below the “Send Message to Yoda” button.
       • The “Send Message to Yoda” button becomes inactive.
     • Scenario 2: User clicks on the “Send Message Now” button in the message form.
       • Values from the fields (or form widgets) are validated (see below for expectation).
       • Form data validation:
         |– (a) Email addresses should always be of this format: <something>@<website>.ca — <something> and <website> must support any value submitted by the user; the address must end with .ca

         |– (b) All form fields must have a non-empty value; i.e. empty string is not valid.

         |– (c) If there is any error, display a message below the form (in red colour) saying that there is an error in the form value.

       • If all fields have expected values, values from the fields must be displayed through an alert dialog — one field value on each line.
       • After displaying the alert dialog with the values, the form must be cleared, i.e. all content from the form fields must be removed.
       • After displaying the alert dialog, the form must be removed and the “Send Message to Yoda” button must be enabled again.
       • Use JavaScript only for coding this
       • You must not edit HTML or CSS files.
         • Note — if you would like to style the form, you must create a new CSS file named formStyles.css and style the form/form widgets in this file. Only in this case, you are allowed to add a single line of markup to the HTML to link this new CSS file to the HTML file.
       • You must create the form element and the form widgets (e.g. text input, submit button, etc.) all using JavaScript, and add this new form to the HTML using JavaScript when the button is clicked.

CSCI web design javascript coding website