For this assignment, you'll practice manipulating DOM elements using JavaScript. You will also create functions that respond to user input and return information to the page.

Part I: Assignment Set Up

NOTE: While this part of the assignment only carries a value of 10% of your grade, all directions must be followed exactly or your assignment may not be collected.

1. In "public_html/courses/MIS_370/assignments" directory, create a file called "assignment1.html" (or .php if you prefer). You can use the template and css from Assignment 0, keeping the header and footer as before but removing any inner content from your <div>s, <main>, and <aside>. If you create a new file, it should follow the same HTML layout as required in Assignment 0.
2. Add id's as shown below (you can keep any classes and other attributes already assigned in your template).


3. Create a file called "assignment1.js" within your "public_html/courses/MIS_370/includes" directory. Refer to this file by including <script src="PATH/assignment1.js"></script> (with PATH replaced by the correct relative path to your .js file) within the body just before </body>. All JavaScript code for this assignment should appear in this file, not within the assignment1.html file.

Part II: DOM Manipulation

Reminder: All element creation and alteration should be performed using JavaScript only. All code for Part II must appear in your "assignment1.js" file.

1. Create a variable to store the <main> element by accessing the element by its id with the document.getElementById method. Use this variable to refer to the <main> for the remaining steps of the assignment.
2. Append a new <h2> element inside the <main> element. Create and append a new text node to this element that reads "Click Here".
3. Append a new <p> element inside the <main> element. Assign an id of "counterP" to this <p> element.
4. Create a variable to store the <aside> element by accessing the element by its id. Use this variable to refer to the <aside> for the remaining steps of the assignment.
5. Create a new text input field with an id of "nameInput" and append this element to the <aside> element. The input field should have a placeholder of "First Last".
6. Append a new <button> element inside the <aside> element. This new <button> should have an id of "nameButton" and should be labeled "Enter".
7. Append a new <div> element inside the <aside> element. This new <div> should have an id of "nameOutput".

Part III: Functions

Reminder: All element creation and alteration should be performed using JavaScript only. All code for Part III must appear in your "assignment1.js" file.

Unlike future assignments, you should leave all required console.log calls in your code.

1. Counting clicks
   
   1. Create a variable (name is your choice) defined to be 0. This definition should be placed outside any function.
   2. Create a function called "clickCounter". Within this function:
      1. Increase the value of the variable created above by 1.
      2. Set the inner HTML of the <p> element with id "counterP" to indicate the current value of the counter variable. The string can be anything you like, but should include at least one concatenation (+). For instance, the string could display "Click 1" or "You've clicked here 3 times" where the number is replaced by the current value of the counter.
   3. Add a "click" event listener to the <main> element that calls the function "clickCounter". Test your code by clicking anywhere on this element and making sure the text is displayed and updated correctly with each click.
2. Accept, modify, and return a string
   
   1. Create a function called "nameMod" that accepts no parameters. The goal of this function is to return the user's name in the format Last, F to the "nameOutput" span element.
   2. Include the line console.log('testing') in your function.
   3. Add an event listener to the button created in Part II that calls this function. Click the button, and make sure you can see the 'testing' message in the console each time the button is clicked.
   4. Within this function:
      1. Create a variable that is defined to be the value of the input field with id "nameInput". You may assume the input of this field will be the user's name in the format First Last. That is, a string of characters with a single space between sets of characters, with the first letter of each set.
      2. Use the string method .split(' ') on this variable, and store the result in a variable.
      3. Log the variable created in the previous step to the console. Before proceeding, view your page in a browser and enter your name in the input field. Click the Enter button, and then view the console. You should see an array with two elements, your first name and your last name.
      4. Create variables defined to be the second element in this array (the user's last name).
      5. Create variables defined to be the first letter of the first element in the array (the user's first initial).
      6. Concatenate these variables and the ',' character to create a string in the format 'Last, F'. This string should be assigned a variable name. Log this string to the console and check that your function is working when a name is entered into the input field and the button is clicked.
      7. Create a new <p> element, and append a new text node containing this string. Append this <p> element to the "nameOutput" div. Do not use the .innerHTML property.
   5. Test your code. Enter a name, click the Enter button, and make sure the name is visible on your page in the required format. When a new name is entered, the reformatted version should appear beneath the previous outputs.

Part IV: Extras

The remaining 15% of your grade will be determined by the overall effort and time you put into the page (beyond the work already done for your template in assignment 0). CSS and HTML are valued, but additional uses of JavaScript will be preferred. Some possible examples of extra effort would include:

• additional DOM manipulation and/or styling using document methods not yet seen in class, such as .getElementsByClassName.
• adding an event listener to the div with id "leftCol" or an element within it that effects the div with id "rightCol" in some way: change content, style, etc.
• creating addition input elements (via HTML or JS) that accept use input and provide feedback to the user based on their input, such as a mathematical calculation, string manipulation, or other action not already specified in the assignment.
• use of a regular expression to verify that the string entered into the input field is of the expected format of First Last.

Any additional features can make use of already existing HTML elements or new ones, so long as they do not interfere with the required pieces of the assignment.

• Your code should reflect best practices as discussed so far in class. This includes semicolons at the end of lines, indentation of code blocks within functions, etc. Points may be deducted from otherwise functional code if it is poorly written and/or difficult to read. Do NOT minify your code.
• All CSS should be your own - you are NOT permitted to use frameworks (Bootstrap, Foundation, etc) for this assignment. All extraneous lines of CSS should be removed before your assignment is collected.
• This is not a group assignment. You are expected to produce your own work and follow the course collaboration guidelines.
• It is your responsibility to make sure you can access the server and modify your directories. You are not required to access the server from home, but it is highly recommended you attempt a connection if you plan to do any work outside the labs. All assignments in this course will be collected from the server - it is your responsibility to make sure you are able to fulfill this requirement.
• Your HTML and CSS work should validate and follow best practices.

Value	Requirement
Part I: Assignment Set Up - 10%
10	All required files are present. The required id's have been assigned to the DOM elements as shown in the sample layout above. The assignment1.js file is located in the correct subdirectory and properly referenced in the assignment1.html file.
Part II: DOM Manipulation - 25%
5	Variables created for the <main> and <aside> areas and used to reference these elements throughout the remainder of the code.
8	Required <h2> and <p> elements created within <main>
12	Required <input>, <button> and <div> elements created within <aside>.
Part III: Functions - 50%
20	Counting Clicks function works properly with no errors. Each click on the <main> element results in a new message displayed where required, indicating the total number of clicks the element has received. The message should be completely replaced with each click (only the most recent count is displayed).
10	Name modification function accesses input field text and displays name array in the console.
10	Modified name string correctly assembled from user input.
10	Modified name returned to page below previously entered names, each within their own <p> element.
Part IV: Extras - 15%
15	Add additional JavaScript, HTML structure, and CSS styling to go beyond the minimum requirements.