Final Project Overview最终项目概述

预计所需时间： 2小时

您将有机会将您的中级网页开发技能付诸实践，完成一个将这些技术结合成单一网页应用的项目。您将获得一个利率计算器应用的基础代码。

然后，利用您在本课程中学到的技能，您将改善其SEO，使用Webpack提高加载速度，并使用Chrome DevTools调试任何问题。

目标

1. 学习如何在 Chrome 中进行调试，使用断点、监视和控制台中的错误
2. 使用 Jasmine 测试你的业务逻辑
3. 改善 SEO 以提高在搜索引擎上的覆盖率和可见性
4. 使用 Webpack 创建资产

项目分解

第 A 部分：修复现有错误

1. 克隆代码库并初始化开发环境
2. 修复 HTML 和 JavaScript 中的错误

第 B 部分：使其可测试

1. 使用 Jasmine 测试你的 Calculate 函数
2. 编写你的测试规范
3. 修复你的业务逻辑

第 C 部分：引入 Webpack 并改善 SEO

1. 引入 Webpack 以制作和打包你的可分发文件
2. 改善你的计算器应用的 SEO

评审标准 – 总计 10 分

1. 使浏览器标签中显示 favicon 1 分
2. 使 CSS 生效并截取相应的屏幕截图 1 分
3. 在 Chrome DevTools 中看到缺失的 JavaScript 引用错误，并截取相应的屏幕截图 1 分
4. 在 calculate 函数的第一行暂停并截取相应的屏幕截图 1 分
5. 在调用 p 的 .toFixed 的那一行暂停并截取相应的屏幕截图 1 分
6. 安装 Jasmine 进行测试并截取运行时的屏幕截图（没有任何实际测试） 1 分
7. 在 Jasmine 中成功运行两个测试并截取相应的屏幕截图 1 分
8. dist 目录显示 favicon.ico、index.html、main.js 和 style.css，并截取相应的屏幕截图 1 分
9. 最终输出显示正确的计算结果，带有 CSS，并且 Chrome DevTools 旁边显示源代码，突出显示五个部分，如下所示 2 分
   

提交的图片不应为示例屏幕截图。

最终输出

最终输出应如下所示：