# codebase

**Repository Path**: pomeloooo/codebase

## Basic Information

- **Project Name**: codebase
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-13
- **Last Updated**: 2023-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# codebase

第1周

• 选择器 +值单位
• margin+padding+border+display
• 定位+z-index+浮动+溢出
• 盒子模型+div+span+表格
• 列表+表单
学习资料推荐
• HTML & CSS 入门教程 https://www.bilibili.com/video/BV1XJ411X7Ud 
• 进阶课程 https://www.imooc.com/course/list?c=fe 
作业
实现一界面布局，效果如下：

![Alt text](image.png)

要求：
• 布局与效果图一致
• 其中的文本内容可随意编写
• 图片和图标可用色块代替
• 红框内图标，平时不显示，在鼠标移入该项时再显示
补充作业

第2周

• DOM 增删改查
• 事件、冒泡、捕获等
• 鼠标事件，并能以每个事件写出 demo 演示
• 键盘事件，并能以每个事件写出 demo 演示
作业
![Alt text](image-1.png)
1. 如下图，按住鼠标左键从页面左上向右下拖动，可以随鼠标移动画出一个 div；
2. 鼠标左键松开后 div 保持不动；
3. 按键盘上某 4 个键可以控制 div 在 4 个方向上移动，按一次移动约 20px（可自行调整）；
4. 按键盘字母【d/D】键可以删除刚刚画的 div 的 dom 节点；
5. 页面上没有画 div 时，键盘无效；
6. 页面上画了 div 时，鼠标拖动无效（只能画一个 div）；
7. 实现以上功能即可，不需要做其他多余的功能；
8. 禁止使用第三方库。

第3周

• 使用从免费API接口获取到数据渲染一个列表，例如豆瓣电影Top 250
![Alt text](image-2.png)

• 使用免费API接口实现二维码生成和识别


第4周

作业1：实现2个组合式函数
1、期望以如下方式使用 useWindowSize 组合式函数，width 和 height 是响应式变量，当浏览器窗口尺寸发生变化时，引用 width 和 height 的位置可以自动响应变化。
const { width, height } = useWindowSize() // returns tow Ref<number>

2、期望以如下方式使用 useStorage 组合式函数，当修改 state、flag、count 和 id 等响应式变量的值时，会同步修改到 localstorage 或 sessionStorage 中；同样的，当 localstorage 或 sessionStorage 中的值发生变化，这些响应式变量应随之发生响应。
// 函数有 3 个参数，分别是 key，value 和 storage 实例。
// 其中 storage 实例是 localstorage 或 sessionStorage 二者其一，
// 可以不传，不传时默认值是 localstorage
// bind object
const state = useStorage('my-store', { hello: 'hi', greeting: 'Hello' })
// bind boolean
const flag = useStorage('my-flag', true) // returns Ref<boolean>
// bind number
const count = useStorage('my-count', 0) // returns Ref<number>
// bind string with SessionStorage
const id = useStorage('my-id', 'some-string-id', sessionStorage) // returns Ref<string>
// delete data from storage


state.value = null作业2：表单验证
1. 界面上包含一系列表单项和1个清空按钮及1个提交按钮
2. 点击清空按钮则立即清空或重置用户填写的所有值
3. 点击提交按钮时立即校验所有表单项是否符合格式要求，如姓名、邮箱、电话等
    a. 当所有表单项符合格式要求则立即弹出提示，展示整个表单的值
4. 是一个《人员信息收集表单》，表单项包含姓名、性别、年龄、电话和邮箱
    a. 所有表单项必填
    b. 选用合适的 Element Plus 表单组件
    c. 所有表单项需作长度限制或范围限制
    d. 所有表单项需作合适的格式检查