# kingsoft-web-course

**Repository Path**: kiritoking/kingsoft-web-course

## Basic Information

- **Project Name**: kingsoft-web-course
- **Description**: 金山作业仓库
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-08
- **Last Updated**: 2022-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Kingsoft-Web-Course

金山前端课程作业用仓库

Authorized By: ChlorineC@HUST, 2022

Mail: kiritoclzh@outlook.com

**仅供参考思路，请勿直接抄袭！**

## 目录

[toc]



## 内容预览 / Preview

class中是一些课堂练习，可以忽略



### task1: QQ音乐专辑展示页面

任务已经提供JSON和CSS，使用JS生成DOM。

<img src="https://picgo-1308055782.cos.ap-chengdu.myqcloud.com/typora-bed/202210250136180.png" alt="image-20221025013639973" style="zoom: 67%;" />



### task2: Dribbble首页模仿

要求完成一个响应式的页面~~~（但是我只写了移动端）~~

<img src="https://picgo-1308055782.cos.ap-chengdu.myqcloud.com/typora-bed/202210250138749.png" alt="image-20221025013823671" style="zoom: 50%;" />



### task3: 简单Todo List应用

基于localStorage存储设计一个Todo清单网页，有完成、删除等基本交互功能

<img src="https://picgo-1308055782.cos.ap-chengdu.myqcloud.com/typora-bed/202210250111798.png" alt="image-20221025011119670" style="zoom:67%;" />

### task4: 使用Typescript重新实现Todo List

基于task3，因此具体效果和task3基本一致，不再展示图片。

新增功能为：

- 给`TodoItem`定义了接口
- 要求使用`uuid`和`dayjs`为`TodoItem`添加唯一id和时间数据
- 自行构建`webpack`进行打包

### task5: 使用React重新实现Todo List

基于task4，使用Typescript和React重新实现，不再展示图片。

新增功能有：

- 按已完成/未完成和创建时间进行排序
- 在脚手架中添加了代码检查（ESLint）和自动格式化（Prettier）的功能