Merge pull request #14 from M-AminAlizadeh/setup/preserve-data-in-loc…

…alstorge

Setup preserve data in localstorge and viceversa

index.html

@@ -598,14 +598,15 @@ <h2 class="form-header">Contact me</h2>
               class="form-element"
               placeholder="Enter your full-name"
               maxlength="30"
+              id="form-full-name"
               required />
             <!-- Email -->
             <input
               name="form_email"
               type="email"
               class="form-element"
               placeholder="Enter your email address"
-              id="email-input"
+              id="form-email"
               required />
             <!-- Message -->
             <textarea
@@ -614,6 +615,7 @@ <h2 class="form-header">Contact me</h2>
               rows="10"
               placeholder="Write your message here..."
               maxlength="500"
+              id="form-message"
               required></textarea>
             <div class="error-message-container">
               <img
@@ -635,6 +637,7 @@ <h2 class="form-header">Contact me</h2>
     </section>
     <!-- Script -->
     <script src="./js/menu-popup.js"></script>
+    <script src="./js/preserve-data.js"></script>
     <script src="./js/validate-contact-form.js"></script>
     <script src="./js/details-popup.js"></script>
   </body>

js/preserve-data.js

@@ -0,0 +1,23 @@
+const nameInput = document.querySelector('#form-full-name');
+const emailInput = document.querySelector('#form-email');
+const messageInput = document.querySelector('#form-message');
+const submitButton = document.querySelector('#submit-btn');
+const userData = {
+  fullName: '', email: '', message: '',
+};
+
+// Fetch data from localstorage to UI
+window.addEventListener('load', () => {
+  const DATA = JSON.parse(localStorage.getItem('userData'));
+  nameInput.value = DATA.fullName;
+  emailInput.value = DATA.email;
+  messageInput.value = DATA.message;
+});
+
+// Fetch data from UI to localstorage
+submitButton.addEventListener('submit', () => {
+  userData.fullName = nameInput.value;
+  userData.email = emailInput.value;
+  userData.message = messageInput.value;
+  localStorage.setItem('userData', JSON.stringify(userData));
+});