联系方式

  • QQ:99515681
  • 邮箱:99515681@qq.com
  • 工作时间:8:00-21:00
  • 微信:codinghelp

您当前位置:首页 >> Java编程Java编程

日期:2021-01-31 11:06

Project 1: Creating a Forms-Based Calculation

Project Milestones:

30 Jan, 11:40am Complete your index.html as described below and bring to lab

31 Jan, 3:00pm Upload your completed index.html to your web space as described below

02 Feb, 3:20pm Upload your completed Project 1 draft to your web space

09 Feb, 3:20pm Upload your finalized Project 1 to your web space as described below

Post a reflection on creating this project to the Project 1 Discussion Board

Project Overview:

You will create a simple web application that accepts as input at least three pieces of data using <input>

fields or <select> menus. When the user submits this information, your application will perform a

calculation or manipulation that uses all three pieces of data and outputs a clearly labelled result.

You may use your Week #1 Draft as the basis for this project, but you do not have to do so. You must be

sure that your calculation or manipulation meaningfully uses at least one JavaScript operator

(https://javascript.info/operators) and at least one String, Math, or Number method (as defined on the

pages for these objects on MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)

Creating your index.html

Create an index.html that contains (in this order, in appropriate places, as covered in class):

• In the head of your document, a page title consisting of your first and last name followed by

"Week #2 Draft"

Example: <title>Jay Taylor-Laird Week #2 Draft</title>

• A short description of your project that explains what it will calculate

Example: <p>Enter your height and weight to calculate your BMI</p>

• Three well-labeled input fields (or select menus) that accept input for your project

Example: <p>Your weight: <input type="text" id="weight"> lbs</p>

• A button with an id of "action" that is labeled with no more than three words that indicate to

the user what the button does

Example: <button id="action">Find My BMI</button>

• An <hr> tag just before the closing </body> tag

• A <script> tag to load the provided main.js file

Uploading your index.html

In this week's lab, you will learn how to upload to the web space for this class. You will upload your

index.html so that it appears when you go to

digitalmedia.neu.edu/yourUserName/project1/draft/index.html (replacing yourUserName with the

user name that we give you in lab this week). To do this, you will create a folder hierarchy: project1 at

the top level of your web space, a folder called draft inside that folder, and your index.html file inside of

draft. We recommend that you create this hierarchy on your own computer's hard drive and then

upload it to your web space. However, if you make a mistake, you can also create folders and move files

around directly on your web space using FileZilla. For the "practice" milestone due on 31 Jan 2021, you

will only receive full credit if your file is uploaded correctly and correctly contains the features specified

above!

Project 1 Draft

Copy the main.js file from project1_starter_winter2021_v2.zip to the draft folder in your project1

folder on your computer. If you have correctly created your index.html, then testing the project with

main.js in the same folder and pressing the button on your page will result in you getting a cannot read

value of null error. This error occurs because our example code is looking for a form field named field1,

but we have asked you to name all of your form fields more meaningfully!

On the other hand, if you get an error before you press the button your web page, or if you get no

output at all, you might not have connected main.js to index.html correctly! To help with this, we have

provided an example index.html file that shows the correct structure for the web page. We want you to

create your own index.html page instead of using ours, but you can use this page as a reference to make

sure you've put all of the elements in the right place!

Once you have gotten main.js to load correctly and to respond to your button, edit the code in main.js

to do the following:

• Read your form fields and put the values into meaningfully named (and camelCased!) variables,

converting the values from Strings to Numbers when necessary

• Perform your calculation using the values that you've stored in these variables

• Use the provided output() function to output well-labeled and well-explained results for your

calculation. At a minimum, you should label your result and provide any necessary units.

Example: "Your ideal daily food intake is 2600 calories" instead of just "2600"

o REMINDER: You can use the + operator to concatenate String information (such as

"Your ideal food intake is ") to Number information (such as 2600) within the output()

parentheses.

o TIP: You can use output() multiple times in order to provide multiple outputs

• Use the provided endOutput() function to add a horizontal rule (line) to the end of your output.

This will provide us with a divider between the outputs from each time your script runs (when

the user presses your "action" button)

Project 1 Final

Before making any changes for this version, make a copy of your draft folder and name it final. In

response to class critiques and any general feedback on people's draft work, modify your project to

create a final version that meets all requirements. If you feel that your draft project already met all

requirements, we encourage you to still find ways to improve it. We compare the difference between

draft and final versions of projects, so it is important to show us that you continue to challenge yourself

and make your work better.

Upload the final version of your project so that it will be visible on the web at

digitalmedia.neu.edu/YourUserName/project1/final

Be sure to test your work in Google Chrome, ensuring that your project shows up at exactly the URL

specified above (using all lowercase letters, no capitalization!), that your form works as expected, and

that no errors appear on the JavaScript Console at this point!

Project 1 Reflection

After posting your final version of Project 1, make a posting to the Project 1 Discussion Board that

contains the following:

• A clickable link to the draft version of your project

• A clickable link to the final version of your project

• A one-paragraph explanation of what calculation or operation your project performs

• A one-paragraph explanation of any challenges that you faced with this project and how you

resolved them, or what you learned by completing this project

• Respond to this question: After working on this project, do you prefer working with Node.js and

the command line, or do you prefer building full web applications? Explain your preference.

• Provide citations for any sources that you used on this project. This includes sources for any

formulas that you used in your calculations and for any coding techniques that you learned from

places other than the class slides. At a minimum, you must cite the specific URL that you used

for learning about the Math, String, or Number method that you used in your project. If you

used any other information outside of the class slides and readings in your project, you must

also cite that information in this posting!


版权所有:编程辅导网 2021 All Rights Reserved 联系方式:QQ:99515681 微信:codinghelp 电子信箱:99515681@qq.com
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。 站长地图

python代写
微信客服:codinghelp