Part 1 – Static Versus Dynamic Websites Group Work

Static Versus Dynamic Websites Group Work [WLOs: 1, 3] [CLO: 1]

Prior to beginning work on this discussion forum, review the Web Programming, JavaScript Basics reading. Groups of two or three team members will be randomly assigned. Once assigned to a group, visit microsoft.com (Links to an external site.) and review its website design features. Identify three dynamic website features that use JavaScript and explain how they aid in a visitor’s usability of the website. Complete and submit a one- to two-page Word document with your findings. Each group will be responsible for allocating the roles and duties for completing this paper. Each member will submit the paper to the discussion board.

Part 2 – Lab 3.26

Zybooks 3.26 Lab: Temperature Conversion

[WLOs: 1, 2, 3] [CLOs: 2, 3, 4]

Prior to beginning work on this lab, review the Week 3 reading. In this lab, you will use JavaScript coding to implement a temperature converter.

3.26 LAB: Temperature conversion

In this lab you will implement a temperature converter. Five UI elements are declared for you in the template:

Element descriptionElement’s IDText input field for Celsius temperatureCInputText input field for Fahrenheit temperatureFInputButton that, when clicked, converts from one temperature to the otherConvertButtonDiv for displaying an error message when temperature cannot be convertedErrDivImage corresponding to the temperatureWeatherImage

Implement the conversion functions (2 points)

Implement the ConvertCtoF and ConvertFtoC functions to convert between Celsius and Fahrenheit. ConvertCtoF takes a single numerical argument for a temperature in Celsius and returns the temperature in Fahrenheit using the following conversion formula:

°F = °C * 9/5 + 32

Similarly, ConvertFtoC takes a single numerical argument for a temperature in Fahrenheit and returns the temperature in Celsius using the following conversion formula:

°C = (°F – 32) * 5/9

Register conversion button’s click event in bodyLoaded() (2 points)

When the page loads, the bodyLoaded function is called. Implement bodyLoaded to register a click event handler for the Convert button (id=”ConvertButton”). Use addEventListener(), not onclick.

When the Convert button is pressed, the text box that contains a number should be converted into the opposing temperature. So if a number is in the Celsius text box (id=”CInput”), the temperature should be converted into Fahrenheit and displayed in the Fahrenheit text box (id=”FInput”) and vice versa. Use parseFloat() to convert from a string to a number and do not round the result.

Ensure that only one text field contains a value (2 points)

Ensure that only one text field contains a value at any moment in time unless the Convert button has been pressed. For example, when the Celsius field has a number and the user enters a Fahrenheit entry, the Celsius field should be cleared as soon as the user begins to type. This will require implementing an input event handler for each of the text fields that clears the opposing text field when a change occurs. Register each input event handler in the bodyLoaded function. Use addEventListener(), not oninput.

Change the image to reflect the temperature (2 points)

When the temperature is converted, change the image to reflect the temperature in Fahrenheit. Each image is in the same directory as your .html page.

Below 32 F32 – 50 FAbove 50 Fcold.gifcool.gifwarm.gif

Handle bad input (2 points)

When parseFloat() returns a NaN for the temperature to be converted, set ErrDiv’s textContent to the message: “X is not a number”, where X is the string from the text input. When parseFloat() returns a valid number, set ErrDiv’s textContent to an empty string. The image below shows a sample error message.

378744.1682150.qx3zqy7

LAB ACTIVITY

3.26.1: LAB: Temperature conversion

0 / 10

Submission Instructions

Downloadable files

index.html

and

index.js

Download

Upload your files below by dragging and dropping into the area or choosing a file on your hard drive.

Part 3 – Contact Us HTML Paper

Prior to beginning work on this assignment, review the Web Programming, JavaScript Basics reading.

Part One: After reviewing the information, create your Contact Us page using HTML, CSS, and JavaScript. Your page will consist of the following:

A logo that is left-aligned.

A horizontal navigation that includes the four website pages.

A H1 HTML tag for the header that displays the pet store’s name that is beside the logo.

A H2 HTML tag for the Contact Us header.

The same external CSS file that was used to style the Home and About Us pages to which you will add any additional CSS styles.

A form that consists of a name textbox, email textbox, phone number textbox, and how can we help you text area for visitors to enter their information. Each form field needs to be validated with JavaScript to make sure that they are not empty and an actual email and phone number must be entered.

A royalty-free image that either shows the staff of the pet store or pets from the pet store indicating the website visitor should call them.

A footer that contains a copyright symbol and the current year and your name located at the bottom of the web page.

You can use Sublime Text (Links to an external site.) editor to create your pages and CSS. Next, submit the zip folder that contains your Home and About Us pages, images, and external CSS file to the Week 3 Zip File Submission page. If you need more guidance, review the Zip File Quick Start Guide. 

Part Two: Write a reflective paper that details the experience of creating your Contact Us page. Submit your paper to the Waypoint submission on this page.

In your paper,

Explain your thought process for creating your Contact Us page design.

Discuss any problems you encountered.

Discuss what you learned about creating a Contact Us page design and form.

Discuss what you learned about validating form fields with JavaScript.