front_end-demos
Front-end training program is used to record demos accumulated by personal work and study.
| Name | Source Code |
|---|
| koa+mysql implements timed mail sending website | |
| vue-todo-demo project | code |
| react-todo-demo project | code |
| Drag and drop box to upload files | code |
| canvas implement a picture board | code |
| canvas draw a pie chart | code |
| vue National Day show-off plan h5 activity page (mobile terminal) | code |
| Angular Hero Tutorial | code |
| Testing various audio formats | |
| HTML5 Audio Tags | code |
| HTML5 Video Tags | code |
| Data Structure-JS Operation Binary Tree | code |
| Leetcode problem-solving ideas | code |
| Node uses protobuf | code |
| Vue uses protobuf | code |
| px2rem | code |
What are the front-end projects suitable for beginners to practice? . I wrote it down step by step, put the source code on GitHub, thanks to the original project author. Native JavaScript Learning, By Ferris
Lesson 1
- 1. Control div attributes
- 2. Web Skin Replacement
- 3. The function receives parameters and pops up
- 4. Use a loop to turn three Divs into red
- 5. Move the mouse in/out to change the style
- 6. Remember the password prompt box
Lesson 2
- 1. Baidu input method
- 2. Click on the Div to display its innerHTML
- 3. Find the sum of all numbers in the array
- 4. Pop-up layer effect
- 5. Pass the function parameter and change the value of any Div attribute
- 6. Image list: Move in/out to change the transparency of the picture
- 7. Simple Tab
- 8. Simple JS calendar
- 9. Single button to show/hide a playlist to shrink and expand
- 10. Prompt box effect
- 11. Move the mouse over and modify the image path
- 12. Checkbox (checkbox) Select all/not select all/return to select
Lesson 3
- 1. Use typeof to view data types
- 2. Use parseInt to parse numbers and sum
- 3.Accumulate button, add 1 by yourself
- 4. Enter two numbers to compare sizes
- 5. After the page is loaded, add 1 by yourself
- 6. Determine whether the number is a two-digit number
- 7. Web calculator
- 8. Simple web clock
- 9. Countdown (100 seconds)
Lesson 4
- 1.setTimeout application
- 2. Automatically play a slide effect
- 3. Automatically change direction and slide effect
- 4.Agruments application one to find the total of function parameters
- 5.CSS function set/read the properties of the object
- 6. The current input box is highlighted
