
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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- 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.
Leave a Reply