preface

I saw the popular Github project VanillaWebProjects a while ago. I was a little curious about its implementation, so I studied the writing method. However, as I was not familiar with English, I could not stand such pure English projects, so I spent two weeks to study the implementation idea of the project. Then I implemented the Chinese version of these 20 Web projects. Although the idea is from the original project, I have extended many functions. I believe that people who are careful will definitely find out what the differences are. Let’s take a look one by one.

Form validation

The effect is shown in the figure below:

Online example. Github source address.

Choosing a movie seat

The effect is shown in the figure below:

Online example. Github source address.

Video player

The effect is shown in the figure below:

Online example. Github source address.

Exchange rate calculator

The effect is shown in the figure below:

Online example. Github source address.

DOM array method

The effect is shown in the figure below:

Online example. Github source address.

Popover with sliding menu

The effect is shown in the figure below:

Online example. Github source address.

Guess the word of the two small game

The effect is shown in the figure below:

Online example. Github source address.

Find the meal

The effect is shown in the figure below:

Online example. Github source address.

Cost tracker

The effect is shown in the figure below:

Online example. Github source address.

Music player

The effect is shown in the figure below:

Online example. Github source address.

The infinite scroll

The effect is shown in the figure below:

Online example. Github source address.

Typing game

The effect is shown in the figure below:

Online example. Github source address.

Text reader

The effect is shown in the figure below:

Online example. Github source address.

The memory card

The effect is shown in the figure below:

Online example. Github source address.

Lyric finder

The effect is shown in the figure below:

Online example. Github source address.

Breathing regulator

The effect is shown in the figure below:

Online example. Github source address.

Brick small game

The effect is shown in the figure below:

Online example. Github source address.

New Year countdown

The effect is shown in the figure below:

Online example. Github source address.

Drag and drop the sorted list

The effect is shown in the figure below:

Online example. Github source address.

Guess the number of small game

The effect is shown in the figure below:

Online example. Github source address.

If anyone can find a bug, you are welcome to mention the issue, and if these projects can help you, I hope you can click the star.