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
免责声明:本站部分内容从网络整理而来,只供参考!如有版权问题可联系本站删除。