Contact Form using Local Storage Project!

Hosted Project

Contact Form Using Local Storage App

GitHub Source Files

https://github.com/JS-Beginners/contact-form-project

Project Objective

This project uses JavaScript to retrieve information from the text fields of a contact form and saves it into local storage. A contact form using local storage isn't something you'll likely encounter, but it's a good project to refresh your memory on localStorage.

This project does not implement server-side scripting, so you don't have to worry about adding action and method attributes on your form.

JavaScript Used

• eventListeners()
• DOM manipulation
• localStorage

My Personalize Summary

Again, this contact form project was pretty easy for me…as long as everything went well.

For the life of me, I couldn't get my form from refreshing the page and submitting the information from my text fields in the url of the new page.

I knew all I had to do was to add the e.preventDefault() method to my form but it just won't work.

Then, about an hour later I learned why.

I didn't have my <script> </script> tag in my HTML document.

With every project I complete, I learn the true frustrations what it must be like to be a professional computer programming.

I spent maybe 20 minutes coding but about an hour and a half trouble shooting why my e.preventDefault() code wasn't working!

New Things Learned or Refreshed

Other than my own issues, I didn't learn much new JavaScript from the project other than the fact that I should always check to verify that my external files are linked to my HTML document.

I did spend quite a bit of time relearning CSS Flexbox.

When I see that the projects appear simple, I not only create the JavaScript code, I also see if I can recreate the project in its entirety, including the CSS and HTML.

So, my solutions aren't always the same as the instructors.

For this project, the instructor actually uses jQuery.

Time to Code

This project took me two hours to complete on my own.

It took 20 minutes to code the JavaScript but about an hour to figure out why my original code wasn't working.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this Contact Form Using Local Storage in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!