Create an interactive program with JavaScript and DOM

This activity will help you merge your skills with programming objects such as arrays, with web programs.

Program Requirements: Use the window object methods to create a conversation between you and the visitor to collect information from the user.

*Note that there are many different ways to solve this problem. Its up to you to be creative. Ive given some direction. The goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works!

Build an interactive program with JavaScript

Import the week5.js file into your web page using the script tag. Make sure to put it the head section.

Create an HTML element on the page that you can post your results to the web page for the user to print.

This can be a div, p or other block container. The format of the output is important! You can use CSS to style the element.

Add additional content to the page!

In your program youll need a variable to store your results and a variable to store the array of values that the user enters.

Use all three window object methods (confirm, prompt and alert), to ask the user questions and collect data from the user.

Ask the user at least 6-7 questions where you collect data from the user.

Remember prompt allows for text input from the user but confirm also allow the user to make a choice, which equates to true or falsevalues. Every time you use a message, address the person by their first name.

You can return the results from a prompt directly to a variable. Include a default value for the user as a clue for what to enter. Here is an example of the syntax: var variableName = prompt("Question", Default value in the textbox.");

You will need to store the values the user entered in an array. Name the array myArray. You can also write out the values directly to an array when you collect the values from the user as shown above, so that you dont need so many variables. myArray[0] = prompt("Question", Default value in the textbox.");

We need to also store the names for the values. So create a variable called myCookieList. Store the names of the keys and the values from the array into myCookieList. Remember you need to use some form of a delimiter such as a semi-colon but other delimiters are allowed.

Step 4. Create cookies with JavaScript and DOM

Note that there are many different ways to solve this problem. Its up to you to be creative. There are many ways to do this!

Determine if the user supports cookies. If yes, then store the information in cookies and then display the results in the web page. Now that you already have a login form in the heading of the page in the jumbotron template, we can process the login form. But you have to setup a few properties first with the login form fields.

Configure the login form fields

In the submit button in the jumbotron, add an onClick attribute and set function name to login. Set the id to btnLogin.

Assign the id property for the form to loginForm.

Add the id properties to the form fields, txtUsername and txtPassword.

In the body tag you will need to call the init function when the page loads.

Here is sample on how to set a cookie expiration date

var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; 

Determine if the user supports cookies

The next step will be to write the cookies. You cant simply assign values to a local cookie as the book says. Not all browsers will allow this. You cant use Google Chrome for creating local cookies. So, well use Mozilla Firefox. You might also have to check your browser settings that you allow cookies.

Next you need to work with cookies. First, determine if the user allows cookies using the cookieEnabled property of the navigator object.

If the user does not support cookies, provide them with a custom message using the alert method.

If the user does support cookies. Provide them with a custom message using the alert method letting the user know that the browser supports cookies.

First youll need to take your array values and store them in the myCookieList string. Youll want to store the name, and equal sign, the value and your delimiter. There are many ways to do this!

Write out the data to the cookies

However, its up to you to follow the DOM and verify the syntax with the standards and your readings! Youll need to use the split method to split the myCookieList string into pairs of key name and values and store these in cookieListArray. Split it based on your delimiter that you used above (such as the semi-colon).

You need to iterate through the key value pair and split is into the individual key name and values. You can use a for loop structure. Remember you can retrieve properties of the array such as length.

After splitting the key name and values, you can write out the cookie using the document object.

For example the documentation in the says document.cookie = "favorite_toy=nerf is a valid statement to create a cookie. However, you need to create the cookie using the key names and values.

The cookie we created expires at the end of the session. To extend the time, set the expiration date. You can also set the path. Just make sure to follow the format shown and append the expiration to the cookie value: "Thu, 18 Dec 2017 12:00:00 UTC; path=/"

Display the results to the user

The evaluation of your program will include how the output appears in the browser. You can make modifications in the JavaScript program and/or use CSS and modify the style rules for the HTML element(s) that display the results

After you create the cookie append the name and value to the myResults variable. You could, assign it to one or more elements. However you can also modify the code to use multiple HTML elements. So, the solution will depend on your creativity and application of your programming and web development skills.

This is what my output looked like. There are many ways to do this! The program wrote each name and value on separate lines. The important part is to make your responses clear and easy to read. Notice the use of spaces and characters in the key name. You can do this with cookies and arrays. Its your job to enhance the output!

First Name: Bob Last Name: Smith Electronics: true Perishable Food: false Children's Toys: true Clothing: true

This only creates the cookies.

Display an alert message telling the user that you created the cookie and that you will display the results in the web page.

Display the myResults in the web page using the HTML element you used in the first step! (Hint: Review the innerHTML property)

View the cookies

View the web page and fill out the questions. In your browser, the way to access cookies will vary. For Mozilla Firefox, go to your Preferences menu. (On a Mac the link is in the Firefox menu) Then select Properties. Click on Privacy in the menu. Then click the Show Cookies button. Enter the name of one of your cookies. You can see the cookie name, content (value), host, path and expires properties.