Local storage

index.html

@@ -91,7 +91,6 @@ <h1>
         </section>
       </div>
 
-
       <div class="grid-container project-cards" id="port"></div>
 
       <section class="container-5">
@@ -222,31 +221,33 @@ <h1>Contact me</h1>
             id="forms"
           >
             <input
-              type="text"
               class="text1 fname"
-              id="fname"
+              type="text"
+              name="username"
+              id="username"
+              value=""
+              placeholder="Name"
               maxlength="30"
-              name="firstname"
-              placeholder="please write your name..."
               required
             />
 
             <input
               type="email"
               class="text1 email"
-              id="email"
-              name="email"
               pattern="[[email protected]_]+"
-              placeholder="write your email..."
+              name="email"
+              id="email"
+              value=""
+              placeholder="[email protected]"
               required
             />
 
             <textarea
-              name="text"
               class="text1 textarea"
-              id="text"
+              name="message"
+              id="message"
               maxlength="500"
-              placeholder="Please write your text here.."
+              placeholder="Write your message here "
               required
             >
             </textarea>
@@ -263,6 +264,7 @@ <h1>Contact me</h1>
     </main>
     <script src="js/app.js"></script>
     <script src="js/validation.js"></script>
+    <script src="js/local-storage.js"></script>
     <script src="js/pop-up.js"></script>
     <div class="Modal"></div>
   </body>

js/local-storage.js

@@ -0,0 +1,30 @@
+const formData = {};
+const appForms = document.forms[0];
+const userName = appForms.elements.username;
+const userEmail = appForms.elements.email;
+const userMessage = appForms.elements.message;
+
+const localStorageSave = (itemKey, ItemValue) => {
+  localStorage.setItem(itemKey, ItemValue);
+};
+
+const saveUserInfo = () => {
+  formData.email = userEmail.value;
+  formData.username = userName.value;
+  formData.message = userMessage.value;
+  localStorageSave('data', JSON.stringify(formData));
+};
+
+userEmail.addEventListener('blur', saveUserInfo);
+userName.addEventListener('blur', saveUserInfo);
+userMessage.addEventListener('blur', saveUserInfo);
+
+const displayUserInfo = () => {
+  if (localStorage.getItem('data')) {
+    const userInfo = JSON.parse(localStorage.getItem('data'));
+    userName.value = userInfo.username;
+    userEmail.value = userInfo.email;
+    userMessage.value = userInfo.message;
+  }
+};
+displayUserInfo();