I want to learn how to code this, but can someone help me make the CSS code in a CSS file and the js code so it's in the js file? That will make it clear for me to read and learn :)

Overview

This is the first of the JavaScript programs we will write as assignments in the class. In this project you will build a simple calculator for the price of tickets for a theme park. For example, you could use this program to get a ballpark figure for admission costs to a theme park like Disneyland or Universal Studios. Our focus in the assignment will be on the following JavaScript topics: accessing the DOM, creating variables, and making basic arithmetic calculations.

Objectives

Here is what we'd like you take out of this assignment.

Course

• Design and create JavaScript programs that utilize selection, iteration, and functions.
• Apply JavaScript to a web page to make it more interactive.

Assignment

• Perform basic DOM manipulations by targeting elements using selectors or by id/class.
• To store DOM values in variables and operate upon them.
• To perform arithmetic calculations in a script.

Getting Started

This assignment will include steps where you will write code for all three aspects of front-end development: HTML, CSS, and JS. To begin you should download the provided project files: here (Links to an external site.). Once downloaded you should familiarize yourself with the file contents. You have been provided with the following:

• Some images to use on the page.
• HTML and CSS files.
• A JavaScript file with some starter code.

Writing the Markup and Styles

Your job is to build to the web page seen below. This page includes images, a header, and a form with fields that track tickets & ticket prices for a trip to a theme park.

You should start by creating the markup and styles for the web page as seen in the screen shot. Some points will be set aside for creating an web page that accurately follows the styles seen above. You focus on the little things in your design. For example: spacing, borders, alignment of elements, colors, and image locations.

When writing the

you should be careful about the following:

• The first two elements in the form are textbox elements.
• The second two elements in the form are drop-down lists (i.e. elements).
• Theelement should be located within the parent

  element.

• For example:

•  Calculate 

  Moreover, your textboxes should have prompts that are initially visible in the elements before a user types in the box:
• 

• Note: You can show default values like these by setting the HTML 5 placeholder attribute on the textboxes. For example: . This would place "foobar" within the textbox as an initial prompt for the user.

  The drop-down lists for the form should include options for 0-10 tickets each. For example:

• 

  Note: You should set the value attribute for each option so that the word tickets is not passed to our script (more on this below). For example, each. Notice how the user sees "0 tickets" but the value is "0." This ensures that we only read the number when accessing the selected value from the drop-down list.

  Writing the Script

  As you can see in the JavaScript code provided, there is already an event handler to respond when the user clicks the button in your form. This event handler prevents the form from submitting and then will run any other code you type in the provided function. Your job is to write the following code:

  • Access each form element and place them in variables.
  • Store the user inputs in each form element withing variables.
  • Convert the user inputs to numbers.
  • Calculate the cost of tickets given the user inputs.

  To access each form element requires that you can target them. To make this easier you should add an id to each of the four input fields. You can then use the document.getElementById() method to access each element. For example, given a textbox element with id "my-text-box" you would write the following:

  //don't use # in front of your id... let textBox = document.getElementById("my-text-box"); 

  Once you have four variables with your elements you can then use the value property to access the textbox and drop-down values. For example:

  //places the user typed input in the textbox into the textBoxValue variable let textBoxValue = textBox.value;

  At this point you should be in familiar terrain with all the values you need to calculate the total ticket cost given the user inputs. You should next do the following:

  • Convert the ticket costs to decimals using parseFloat().
  • Convert the number of tickets to integers using parseInt().

  With these numbers in hand you can then perform the arithmetic necessary to get a total price for all tickets.

  Showing Your Results

  Your program should show the total cost of all tickets (without tax) to the user when they press the calculate button. For example:

• 

  This total should adhere to the following calculation: (child tickets * child cost) + (adult tickets * adult cost). Once you have performed these calculations in your script you should display the total, as seen above, by selecting an element on your page and adding the output message using the innerText or innerHTML properties. For example:

  myOutputElement.innerHTML = "Total...";

  Note: This will require that you already have an element beneath your form and that you can select that element by id.

element should look like the following:0 tickets

Theme Park Ticket Calculator ( Theme Park Ticket Calculator Adult cost 35.00 Child cost 25.00 Adult tickets 1 ticket Child tickets 2 tickets Calculate! Total cost for tickets: $85.00 Theme Park Ticket Calculator Adult cost 35.00 Child cost 15.00 Adult tickets O tickets Child tickets O tickets Calculate! Adult tickets O tickets