Module 05 · Final Project最终项目
Peer-graded Assignment: Final Submission and Evaluation同伴互评作业:最终提交与评估
There are 10 points for nine tasks in this final project. Your peers who will grade your final assignment are also completing this assignment within the same session. You need to complete the following and submit your responses for peer review.
本最终项目包含九个任务,共 10 分。将评分你的最终作业的同学们也在同一时段内完成此作业。你需要完成以下任务,并提交你的回答以供同行评审。
This guided final project is divided into three parts: (1) Fix the existing errors, where you first start with the code provided and fix the deliberate errors in HTML and JavaScript. (2) To save yourself from testing every code change manually, you will then make your business logic in JavaScript testable with the help of Jasmine. Write test specs, fix your logic, and do unit tests every time you make a change. (3) Finally, in the last part, you will improve on Search Engine Optimization and enhance your deployment package with the help of Webpack.
本指导性最终项目分为三个部分:(1)修复现有错误,首先从提供的代码开始,修复 HTML 和 JavaScript 中的故意错误。(2)为了节省手动测试每次代码更改的时间,您将使用 Jasmine 使您的业务逻辑在 JavaScript 中可测试。编写测试规范,修复您的逻辑,并在每次更改时进行单元测试。(3)最后,在最后一部分,您将在搜索引擎优化方面进行改进,并在 Webpack 的帮助下增强您的部署包。
You will need to submit screenshots when requested.
您需要在被要求时提交截图。
To take a screenshot in Windows, use the snipping tool by going to the start menu and opening the snipping tool. Click “New,” then click and drag over the area of the screen you want to screenshot. Save the file as a .png or a .jpg file.
在 Windows 中截取屏幕截图,请通过开始菜单打开截图工具。点击“新建”,然后点击并拖动选择您想要截取的屏幕区域。将文件保存为.png 或.jpg 格式。
Click shift+command+4, then click and drag over the area of the screen you want to screenshot on MacOS. The file will be saved to your desktop.
点击 shift+command+4,然后在 MacOS 上点击并拖动以选择您想要截取屏幕的区域。文件将保存在您的桌面上。
To upload the file, click upload file, navigate to the file, or drag and drop the file icon onto the window.
上传文件,点击“上传文件”,导航到文件,或将文件图标拖放到窗口中。
Grading Criteria Overview 评分标准概述
-
Show favicon working, upload a screenshot of your browser tab and save it as 01-favicon-visible as a .png file or a .jpg file (see instructions above on how to take a screenshot.) (1 pt)
显示 favicon 正常工作,上传浏览器标签页的截图并保存为 01-favicon-visible.png 或.jpg 文件(见上方说明如何截图。)(1 分) -
Show missing CSS referenced correctly, once added to the html, upload a screenshot of the output showing CSS working; by means of correct colors and layout and save it as 02-css-working. (1 pt)
显示正确引用的缺失 CSS,一旦添加到 HTML 中,上传输出效果的截图,显示 CSS 正常工作;通过正确的颜色和布局,并保存为 02-css-working。(1 分) -
Show how missing JavaScript reference error displayed in Chrome DevTools and upload a screenshot of the same and save it as 03-calculate-missing. (1 pt)
展示在 Chrome 开发者工具中显示的缺少 JavaScript 引用错误,并上传同一截图,保存为 03-calculate-missing。(1 分) -
Show how to use Chrome DevTools’ debugging capability, show how you “pause on exceptions” and save it as 04-pause-on-exception. (1 pt)
展示如何使用 Chrome 开发者工具的调试功能,展示如何“在异常时暂停”,并将其保存为 04-pause-on-exception。(1 分) -
Show “Watch” on a variable in your code, upload a screenshot showing
padded in Watch and save it as 05-watch-on-p. (1 pt)
在你的代码中显示“观察”变量,上传一个截图显示已将p添加到观察中,并将其保存为 05-watch-on-p。(1 分) -
Show Jasmine is initialized and will work, show in terminal “no spec found,” upload a screenshot of it and save it as 06-no-spec. (1 pt)
显示 Jasmine 已初始化并将工作,在终端中显示“未找到规范”,上传截图并保存为 06-no-spec。(1 分) -
Introduce two unit tests as instructed, show both of them pass in Jasmine; upload a screenshot of Jasmine output and save it as 07-both-tests-passed. (1 pt)
按照要求引入两个单元测试,展示它们在 Jasmine 中均通过;上传 Jasmine 输出截图并保存为 07-both-tests-passed。(1 分) -
Show Webpack is generating the expected output in your “dist” directory, upload a screenshot of it from Cloud IDE and save it as 08-dist-directory. (1 pt)
展示 Webpack 在您的“dist”目录中生成了预期的输出,从 Cloud IDE 上传其截图并保存为 08-dist-directory。(1 分) -
Show achieving the goal state, upload a screenshot of your final solution along with source, and save it as 09-final-output. (2 pts)
展示达到目标状态,上传您最终解决方案的截图以及源代码,并将其保存为 09-最终输出。(2 分)