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 = `photoUser + profile.innerHTML = `photoUser +

Clara Escobar

+

Sobre mi

`; + + 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);*/ +