Project

Magic Form

Hard

164 completions

~ 14 hours

3.8

In this project, you will learn the basic HTML elements for creating forms. Get to know how to handle events when interacting with these elements. Use the built-in features of the browser to save data to the local storage. Learn how to work with the DOM elements from JavaScript. Practice using arrays and functions.

Provided by

JetBrains Academy

About

Every good site has an online form to fill out — whether for registering, ordering food, or making payments. Forms can be very large; if you accidentally reload a page, you can lose all the data. A sad story, isn't it? To resolve this, let's create a form that will retain the data, when it closes unexpectedly.

Training project

This project allows you to practice and strengthen your coding skills, helping you get ready for more advanced tasks ahead.

What you'll learn

Once you choose a project, we'll provide you with a study plan that includes all the necessary topics from your course to get it built. Here’s what awaits you:

Handle JavaScript events and save form data to the local storage.

Create another page where you will store the history of the submitted forms.

Add the functionality to delete submitted forms from the history and ensure the data in local storage is preserved after refresh.

Reviews

Oliver Russmann

8 months ago

4.0

I learned the basics of Browser storage and found new ways to work with the DOM.Also, the usage of Object was a big help.

Natalia Devia

10 months ago

4.3

I have learned how to save data on local storage, looking forward to practice some more

Call me D

12 months ago

5.0

Well-executed project with clear goals, smooth execution, and meaningful results.

3.8

Learners who completed this project within the Frontend Developer course rated it as follows:

Usefulness

4.4

Fun

3.7

Clarity

3.4