50-mini-projects-with-react

这是来自 50 Projects in 50 Days 的项目，这个项目使用 HTML/CSS and JavaScript 来实现，所以自己就用 React.js ( Hooks ) + styled-components 来重新实现

(已完成)

在线访问

介绍

1. Expanding Cards

2. Progress Steps

3. Rotating Navigation Animation

4. Hidden Search Widget

5. Blurry Loading

06.Scroll Animation

07.Split Landing Page

08.Form Wave

09.Sound Board

点击不同按钮会发出不同的声音

10.Dad Jokes

点击按钮随机生成 Joke

11.Event Keycodes

根据你键盘按下的键显示对应的 key 、keyCode

12.Faq Collapse

13.Random Choice Picker

用 , 分隔并显示标签

14.Animated Navigation

15.Incrementing Counter

16.Drink Water

17.Movie App

18.Background Slider

19.Theme Clock

20.Button Ripple Effect

21.Drag N Drop

22.Drawing App

23.Kinetic Loader

24.Content Placeholder

内容占位符

这里使用了 React.Suspense 来实现这个功能

25.Sticky Navbar

26.Double Vertical Slider

27.Toast Notification

28.Github Profiles

29.Double Click Heart

双击出红心

30.Auto Text Effect

31.Password Generator

32.Good Cheap Fast

三个开关不能同时打开

33.Notes App

34.Animated Countdown

35.Image Carousel

就是轮播图

36.Hoverboard

37.Pokedex

38.Mobile Tab Navigation

39.Password Strength Background

背景的模糊程度取决于密码的长度

40.3d Background Boxes

41.Verify Account Ui

42.Live User Filter

根据输入框的内容对 list 进行过滤

43.Feedback Ui Design

44.Custom Range Slider

45.Netflix Mobile Navigation

46.Quiz App

47.Testimonial Box Switcher

48.Random Image Feed

正如标题所言，是随机获取图片

49.Todo List

50.Insect Catch Game