From b705f637a14c2fbbdf22d7e2c8f72dfc15b84962 Mon Sep 17 00:00:00 2001
From: Clara <ing.clara.93@gmail.com>
Date: Tue, 25 Aug 2020 09:58:12 -0500
Subject: [PATCH] profile

---
 src/css/profileUser.css  |  2 ++
 src/main.js              |  2 ++
 src/views/profileUser.js | 43 ++++++++++++++++++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/css/profileUser.css b/src/css/profileUser.css
index 602fb83f..8446e6a6 100644
--- a/src/css/profileUser.css
+++ b/src/css/profileUser.css
@@ -8,11 +8,13 @@
     flex-direction: column;
     }
 #profile h1,h3{
+    font-size: 13px;
     color:black;
     text-align: center;
 }
 
 #profile .photo{
+        border-radius: 50%;
         max-width: 25%;
         display:inline-block;
     }
diff --git a/src/main.js b/src/main.js
index d6afa2ce..4268b379 100644
--- a/src/main.js
+++ b/src/main.js
@@ -58,4 +58,6 @@ window.addEventListener('hashchange', () => {
   router(window.location.hash);
 });
 
+
+
 myFunction();
diff --git a/src/views/profileUser.js b/src/views/profileUser.js
index fb5c4f14..be54dbe3 100644
--- a/src/views/profileUser.js
+++ b/src/views/profileUser.js
@@ -2,8 +2,10 @@ export default () => {
     history.replaceState({}, 'profileUser', '#profile');
     const profile = document.createElement('div');
     profile.setAttribute('id', 'profile');
-    profile.innerHTML = `<img src="img/foto.jpg" alt="photoUser" class="photo"/>
+    profile.innerHTML = `<img src="" id="preview" alt="photoUser" class="photo"/>
+        <div class="default-image"></div>
         <h1>Clara Escobar</h1>
+        <input type="file" id="archivo" name="archivo"/>
         <ul>
             <li>
             <a href="#">ing.clara.93@gmail.com</a>
@@ -11,5 +13,42 @@ export default () => {
         </ul>
         <h3>Sobre mi</h3>
         <input type="text" id="biography" class="aboutMe" placeholder="Cuéntanos de ti"/>`;
+    
+    const photos = profile.querySelector('#archivo');
+    const previewPhoto = profile.querySelector('#preview');
+    const defaultImage = profile.querySelector('.default-image');
+
+    photos.addEventListener('change', () => {
+        const file = photos.files[0];
+        console.log(file);
+        if (file) {
+          const reader = new FileReader();
+          defaultImage.style.display = 'none';
+          previewPhoto.style.display = 'block';
+          reader.addEventListener('load', () => {
+            previewPhoto.setAttribute('src', reader.result);
+          });
+          reader.readAsDataURL(file);
+        } else {
+          defaultImage.style.display = null;
+          previewPhoto.style.display = null;
+          previewPhoto.setAttribute('src', '');
+        }
+      });
     return profile;
-};
\ No newline at end of file
+};
+
+
+/*function mostrarImagen(event){
+    let imagenSource = event.target.result;
+    let previewImage = document.getElementById("preview");
+  }
+  function changePhoto(event){
+    let imagen = event.target.files[0];
+    let lector = new FileReader();
+    lector.addEventListener("load", mostrarImagen,false);
+    lector.readAsDataURL(imagen);
+  }
+
+document.getElementById("archivo").addEventListener("change", changePhoto,false);*/
+