TASK1 AI辅助番茄时钟开发

一 、认识所使用的AI工具

1. 官网地址：豆包Marscode编程助手（为了方便，我直接给的是工作台地址）
   

2. 打开MarsCode IDE,从新建项目，点击HTML/CSS/JS创建项目。

3. 了解工作姐界面主要功能
   

截图左侧展示了一个用HTML、CSS、和JavaScript构建的项目的目录结构。以下是每个文件或文件夹的简单介绍以及它们的作用：

• .vscode 文件夹

• 作用：存放项目的 Visual Studio Code 配置文件，例如代码格式化规则、调试配置等。

• 使用场景：当使用 VS Code 编辑器开发项目时，可以在这里设置专属于该项目的开发工具配置。

---

2. node_modules 文件夹

• 作用：存储通过 npm 或 pnpm 等包管理工具安装的项目依赖库。
• 使用场景：项目中用到的一些开源库或工具（比如 React、Vue.js 或 Vite）会被下载到这里。你不需要直接修改它。

---

3. .gitignore 文件

• 作用：定义哪些文件或文件夹不需要被 Git（版本控制工具）追踪或提交到代码仓库。
• 使用场景：比如 node_modules 文件夹、临时文件或敏感数据通常会被加入 .gitignore，避免它们被上传到代码仓库。

---

4. index.html 文件

• 作用：项目的入口文件，用来定义网页的结构，比如页面上的文字、图片和链接。
• 使用场景：浏览器加载这个文件后会呈现网页的基本内容，并通过连接的 CSS 和 JS 文件来美化和实现交互功能。

---

5. package.json 文件

• 作用：记录项目的基本信息、依赖的库和工具，以及一些脚本命令。
• 使用场景：开发者通过它来管理项目依赖和自动化工具，比如运行 npm install 会根据这个文件安装项目所需的库。

---

6. pnpm-lock.yaml 文件

• 作用：记录项目所有依赖的版本信息，确保团队中每个人安装的依赖版本完全一致。
• 使用场景：如果使用了 pnpm（一种包管理工具），这个文件会自动生成并锁定依赖版本，防止版本冲突。

---

7. README.md 文件

• 作用：项目的说明文档，用于介绍项目的功能、使用方法、安装步骤等。
• 使用场景：通常放在代码仓库的首页，给开发者或用户提供信息。Markdown 文件可以通过简单的格式展示标题、列表和代码块。

---

8. script.js 文件

• 作用：存放网页的 JavaScript 代码，定义页面中的交互逻辑，比如点击按钮后的行为。
• 使用场景：比如表单验证、动态内容加载，或与服务器的交互等都需要用 JavaScript 编写。

---

9. style.css 文件

• 作用：定义网页的样式，比如颜色、字体、布局等。
• 使用场景：用来美化网页，让它看起来更加吸引人和用户友好。

---

10. vite.config.js 和 vite.config.mjs 文件

• 作用：这是 Vite（一个前端构建工具）的配置文件，用于定义开发和打包时的相关设置。
• 使用场景：当你需要修改打包路径、增加插件或调整服务器设置时，会编辑这个文件。

---

二、尝试番茄时钟开发

1. 基于你的要求，向AI进行提问。

eg:请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现

2. 打开左侧 【文件浏览器】 的 index.html ， 全选代码 ，找到右侧对应的 html文件 ，点击 插入光标处：
   

3. 打开左侧 【文件浏览器】 的 script.js ， 全选代码 ，找到右侧对应的 javascript文件 ，点击 插入光标处 ：
   

4. 做好这些之后，点击最上方 “运行” 按钮，即可在界面右侧体验到番茄时钟的效果啦！
   

三、制定个性化的番茄时钟

比如你可以增加日期、星期或者是其他元素，你可以在上述基础上，继续向AI提出你的要求。

四、总结

后续你可以利用MarsCode 简单开发一个网页。比如个人博客之类的，也非常适合初学者学习前端开发以及帮助开发者高效地构建一个完整的网页或应用。