changes

met18001 · Mar 3, 2020 · 60bf32c · 60bf32c
1 parent cd8dac4
commit 60bf32c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
     <body>
 
     <div class="box">
+        <header><h1>Sending messages as <img class="smallImage" src="#" id="userProfilePicDisplay"/><a href="profile.html"><span id="usernameDisplay">{UserName}</span></a> <span class="small" id="userStatusDisplay">{Status}</span></h1></header>
         <header><h1>~Meira's Mobile App Chat Room~</h1></header>
         <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/profile.html">Click!<img src="img/cat.png" alt=""></a>
     </div>   

diff --git a/js/profile.js b/js/profile.js
@@ -0,0 +1,27 @@
+
+let usernameInput = document.querySelector("#usernameInput");
+let statusInput = document.querySelector("#statusInput");
+let profilePicInput = document.querySelector("#profilePicInput");
+let profileSaveInput = document.querySelector("#profileSaveInput");
+
+// setting the input values default
+usernameInput.value = localStorage.getItem('userName');
+statusInput.value = localStorage.getItem('userStatus');
+
+function saveProfileImageLocally() {
+    if (profilePicInput.files && profilePicInput.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            localStorage.setItem("userProfilePic", reader.result);
+        }
+        reader.readAsDataURL(profilePicInput.files[0]); 
+    }
+}
+
+profileSaveInput.addEventListener( 'click', function(e) {
+    e.preventDefault();
+    localStorage.setItem("userName", usernameInput.value);
+    localStorage.setItem("userStatus", statusInput.value);
+
+    saveProfileImageLocally();
+});
diff --git a/profile.html b/profile.html
@@ -9,9 +9,10 @@
 </head>
 <body>
 <div class="user">
-    <img src="img/mvp.png" alt="placeholder" id="pic">
-    <h2>Hannah Baker </h2>
-    <h3>Cookie Curator</h3>
+    <p><input type="text" placeholder="Display Name" name="UserName" id="usernameInput"></p>
+    <p><input type="text" placeholder="Status Message" name="StatusMessage" id="statusInput"></p>
+    <p><input type="file" id="profilePicInput" name="profilePicInput"></p>
+    <button id="profileSaveInput">Save Profile</button>
     <h1 class="button"> <a href="https://github.uconn.edu/pages/met18001/mobile-app-chat-app/index.html">Go Back to Chat App</a></h1>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt numquam, consequatur eos error ducimus quisquam nam ut quasi sint adipisci sit molestiae, ad dolorum iste possimus deleniti rerum ipsum repudiandae.