HTML + CSS + JavaScript 练手的 50 个项目

Introduce

• 该项目完全按照https://github.com/bradtraversy/50projects50days的顺序与页面来完成。本人预览原版页面后，先自行编写，再参考源码进行补充修正，所以很多代码与原版有出入。

Entry

• ./entry 用于预览 project 50 的所有页面
• 使用方法：
  1. node 运行./entry/server.js
  2. 打开./entry/index.html

Log

• 完成日期以及部分学习记录

50 Insect Catch Game

• 2022/12/22

49 Todo List

• 2022/12/18

48 Random Img Feed

• 2022/12/16

47 Testimonial Box Switcher

• 2022/12/15

46 Quiz App

• 2022/12/14

45 Netflix Mobile Navigation

• 2022/12/12

44 Custom Range Slider

• 2022/12/10
• learn:
  1. 自定义 input range 的样式

43 Feedback UI Design

• 2022/12/04

42 Live User Filter

• 2022/11/30

41 verify Account UI

• 2022/12/03

40 3D Background

• 2022/2/03

39 Password Strength Background

• 2022/1/31

38 Mobile Tab Navigation

• 2022/1/31

37 Pokedex

• 2022/1/30

36 Hover Board

• 2022/1/30

35 Img Carousel

• 2022/1/26

34 Animated Countdown

• 2022/1/24

33 Note App

• 2022/1/23
• learn:
  1. child vs. elementChild
  2. node.focus()

32 Good, Cheap and Fast

• 2022/1/23
• learn:
  1. 动画，在进入选择器的时候播放
  2. input 和 label 相关联

31 Password Generator

• 2022/1/22
• learn:
  1. document.execCommand(copy)

30 auto text effect

-2022/1/20

29 double click heart

• 2022/1/19
• learn
  1. dblclick event

28 github user

• 2022/1/19
• learn
  1. axios

27 Toast Notification

• 2022/1/15
• learn:
  1. parentNode.removeChild();

26 Double Vertical Slider

• 2021/12/19

25 Sticky Navbar

• 2021/12/14
• learn:
  1. windows.addEventListener('scroll)
  2. window.scrollY
  3. window.innerHeight

24 Content Placeholder

• 2021/12/09
• learn:
  1. object-fit
  2. background-position background-size

23 Kinetic Loader

• 2021/12/07

22 Darw App

• 2021/11/24
• learn:
  1. canvas
  2. event: mousedown mouseup mousemove
  3. input type="color" event: change e.target.value

21 Drag N Drop

• 2021/11/23
• learn: Event: item be dragged: dragstart dragend target : dragover dragenter dragleave drop

20 Button Ripple Effect

• 2021/11/22
• learn:
  1. animation
  2. @keyframes name{ }

19 Theme Clock

• 2021/11/19
• learn:
  1. transform-origin transform
  2. new Date(): getSeconds,getMinutes, getHours,getDate, getDay, getMouth

18 Background Slider

• 2021/11/17

17 Movie App

• 2021/11/17 外网才能正常访问

16 Drink Water

• 2021/11/16

15 Incrementing Counter

• 2021/11/13

14 animated navigation

• 2021/11/12
• learn:
  1. linear-gradient() 表示颜色线性渐变的图片
  2. box-shadow: x-offset y-offset shadow-length opacity

13 random choice picker

• 2021/11/10
• learn: nothing

12 Faq collapse

• 2021/11/09
• learn: nothing

11 event keycodes

• 2021/11/08
• learn
  1. keydown event
  2. event.key event.keyCode event.code

10 dad jokes

• 2021/11/07
• learn
  1. fetch 请求和响应， xmlhttprequest 的升级版

9. Sound Board

• 2021/11/05
• learn:
  1. audio
  2. play() pause() currentTime
  3. document.createElement('tagName')
  4. document.appendChild(element)

8. Form Input Wave

• 2021/11/05
• learn:
  1. 反引号 ``表示模板字符串 ${value}
  2. split, map, join
  3. input:focus :valid
  4. span 默认是 inline，不能定位， 可以修改为 inline-block

7. Split Landing Page

• 2021/11/04
• learn:
  1. ::before 伪类 内部的伪类，比如说 div::before, 它是 div 内部的一个元素

6. Scrolling Animation

• 2021/11/04
• learn
  1. getBoundingClientRect 获取相对于视窗的距离
  2. event: scroll
  3. nth-of-type(even)

5. Blurry Loading

• 2021/11/03
• learn:
  1. filter: blur(px) 滤镜
  2. setIntervel

4. Hidden-search-widget

• 2021/11/03
• learn:
  1. classList.toggle

3. Rotating Nav Animation

• start time: 2021/11/02
• finish time: 2021/11/03
• learn:
  1. icon
  2. rotate(x deg)
  3. text-transform: uppercase

2. Progress Steps

• start time: 2021/11/02
• finish time: 2021/11/02
• learn:
  1. css 变量 , var(name, value)
  2. 伪类，伪元素
  3. transform： 旋转，缩放，平移，倾斜等

1. Expanding Card

• start time: 2021/11/01
• finish time: 2021/11/02
• learn:
  1. transition: perperty, duration, timing-function, delay;
  2. css 选择器 .className .className 区别于 .className.className; 有无空格
  3. 伪类选择器 nth-of-type 和 nth-child
  4. js 中 DOM 时间监听程序： addEventListener and removeEventListener
  5. cursor: pointer
  6. element.classList.add/remove