diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..8ae98502 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense para saber los atributos posibles. + // Mantenga el puntero para ver las descripciones de los existentes atributos. + // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Iniciar programa", + "skipFiles": [ + "/**" + ], + "program": "${workspaceFolder}\\src\\index.html" + } + ] +} \ No newline at end of file diff --git a/Docs/src/compenentes/pantalla1.js b/Docs/src/compenentes/pantalla1.js new file mode 100644 index 00000000..0eda6e9f --- /dev/null +++ b/Docs/src/compenentes/pantalla1.js @@ -0,0 +1,143 @@ +import { registros } from './pantalla2.js' +import { welcome } from './pantalla3.js' + +let root = document.querySelector('#root'); + export const pantalla1 = () => { +let p = ` + + +

Bienvenida a nuestra comunidad + de programadoras

+ +
+ + + +
+

Ingresa con:

+ + +

¿No tienes cuenta?

+ Registrate + + +`; +root.innerHTML = p; + +let bttn = document.querySelector('.logoG'); +bttn.addEventListener('click', loginGmail); +function loginGmail (){ + var provider = new firebase.auth.GoogleAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Google Access Token. You can use it to access the Google API. + var token = result.credential.accessToken; + // The signed-in user info. + let user = {} + user.displayName = result.user.displayName + user.email = result.user.email + user.photoURL = result.user.photoURL + welcome(user) + // ... + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); +} + + +let bttn1 = document.querySelector('.logoF'); +bttn1.addEventListener('click', loginFb); +function loginFb(){ + var provider = new firebase.auth.FacebookAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Facebook Access Token. You can use it to access the Facebook API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + console.log(user); + // ... + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + } + + let signInWithEmail = document.querySelector('#getInTo'); + signInWithEmail.addEventListener('click', signIn); + function signIn(){ + let email= document.querySelector('#email').value; + let password= document.querySelector('#password').value; + firebase.auth().signInWithEmailAndPassword(email, password).then(function(result){ + console.log(result); + let user = result.user; + let userInfo = {} + userInfo.displayName = result.user.displayName + userInfo.email = result.user.email + userInfo.photoURL = result.user.photoURL + console.log(userInfo); + welcome(user) + saveUser(userInfo) + }) + .catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + console.log(errorCode); + // ... + }); + } + function observer(){ + firebase.auth().onAuthStateChanged(function(user) { + if (user) { + // User is signed in. + console.log("existe usuario activo") + let displayName = user.displayName; + let email= user.email; + console.log(user); + let emailVerified = user.emailVerified; + let photoURL = user.photoURL; + let isAnonymous = user.isAnonymus; + let uid = user.uid; + let providerData= user.provideData; + + } else { + console.log("no exite usuario activo") + // No user is signed in. + } + }); + } + observer(); + // Aquí irá la función para pasar al perfil del usuario + let registro = document.querySelector('#registro'); + registro.addEventListener('click', registra); + function registra(){ + registros() + } + } + + //Guarda en B.D cloud firestore usuarios registrados en la colleccion usersRef + function saveUser (user){ + let usuario = { + uid: user.uid, + nombre: user.displayName, + email: user.email, + foto: user.photoURL + } + usersRef.doc(user.uid).set(usuario) + } + + \ No newline at end of file diff --git a/Docs/src/compenentes/pantalla2.js b/Docs/src/compenentes/pantalla2.js new file mode 100644 index 00000000..c032500a --- /dev/null +++ b/Docs/src/compenentes/pantalla2.js @@ -0,0 +1,67 @@ +import { pantalla1 } from './pantalla1.js' + +let root = document.querySelector('#root'); +export const registros = () =>{ +let template = ` +
+

<Code Woman>

+
+

¡Hola! para formar parte de la comunidad de programadoras de América Latina, llena el formulario que se encuentra en la parte de abajo y da click en crear cuenta.

+ + + + +

'Acepto las condiciones de servicio y la + política de privacidad de Code Woman.'

+ +

¿Ya tiene cuenta?

+

Iniciar sesión

+ `; +root.innerHTML = template; + +//Boton para iniciar sesion que manda a la primera pantalla +let bttnInit = document.querySelector('#iniciar'); +bttnInit.addEventListener('click', pantalla1); + +//Creando una cuenta de usuario con correo electrónico +let newUser= document.querySelector('#createAccount'); +newUser.addEventListener('click', createUser) +function createUser(){ + let email= document.querySelector("#email").value; + let password= document.querySelector("#password").value; + let confPassword = document.querySelector("#confirmPassword").value; + if (password == confPassword) + { + console.log('todo ok'); + + firebase.auth().createUserWithEmailAndPassword(email, password) + .then(function(){ + verifyAccount() + }) + .catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + console.log(errorCode); + console.log(errorMessage); + // ... + }); + }else{ + alert('Las contraseñas no coinciden'); + } +} + +// Después de registro con correo se envía un correo de email para confirmación +function verifyAccount(){ + var user = firebase.auth().currentUser; + + user.sendEmailVerification().then(function() { + console.log("enviando correo..."); + alert('Te enviamos un correo verificalo por favor y puedes continuar !'); + }).catch(function(error) { + console.log(error); + // An error happened. + }); + } + +} \ No newline at end of file diff --git a/Docs/src/compenentes/pantalla3.js b/Docs/src/compenentes/pantalla3.js new file mode 100644 index 00000000..daab9718 --- /dev/null +++ b/Docs/src/compenentes/pantalla3.js @@ -0,0 +1,29 @@ + import { pantalla1 } from './pantalla1.js' + import { publicaciones } from './posts.js' + + let root = document.querySelector('#root'); + export const welcome = (user) => { + let renderWelcome = ` +
+

<Code Woman>

+ + + +
+
+

Bienvenida a Code Woman

+

${user.displayName}

+ +
+ `; + root.innerHTML = renderWelcome; + + let salir = document.querySelector('.salir'); + salir.addEventListener('click', pantalla1) + + let bttninicio = document.querySelector('.inicio'); + bttninicio.addEventListener('click',pos); + function pos (){ + publicaciones (user); + } + } \ No newline at end of file diff --git a/Docs/src/compenentes/posts.js b/Docs/src/compenentes/posts.js new file mode 100644 index 00000000..16c7ce33 --- /dev/null +++ b/Docs/src/compenentes/posts.js @@ -0,0 +1,314 @@ +import { pantalla1 } from './pantalla1.js' + +let root = document.querySelector('#root'); +export const publicaciones = (user) => { + let post = ` +
+

<Code Woman>

+ + + +
+
+

Crear publicación

+
+ +
+
+
+ × + +
+
+
+
+ + + +
+
+
+
+
+
+ +
+`; + +root.innerHTML = post; + +let root2 = document.querySelector('#root2'); +let text = document.querySelector('#txt'); +let addBtn = document.querySelector('.compartir'); +let db = firebase.firestore(); +//funcion para enviar posts a base de datos +addBtn.addEventListener('click', enviar); +function enviar(){ + db.collection("posts").add({ + name : user.displayName, + texto : text.value, + likes: [], + image: url + }) + .then(function(docRef) { + console.log(docRef.id) + }) + .catch(function(error) { + console.error("Error adding document: ", error); + + }); + document.querySelector('#txt').value = ''; + document.querySelector('#conteintpost').style.display = 'none'; +} + + +db.collection("posts").onSnapshot((querySnapshot)=> { + root2.innerHTML =''; + querySnapshot.forEach((doc) => { + let imgurl = doc.data().image; + let imageTemplete = ``; + let div = `
`; + let post = ` +

${doc.data().name}

+

${doc.data().texto}

+ ${imgurl ? imageTemplete : div} + + + + ` + let nodo = document.createElement('div'); + nodo.classList.add('card') + nodo.innerHTML = post + root2.appendChild(nodo); +}); +//Boton para Eliminar +let idbttn = document.querySelectorAll('.delete'); + idbttn.forEach(btn => btn.addEventListener('click', (value) => { + value = btn.value; + db.collection("posts").doc(value).delete().then(function() { + }).catch(function(error) { + alert("Error removing document: ", error); + }); +})); + //Boton para contar Me Gusta + let like = document.querySelectorAll('.like'); + like.forEach(likes=> likes.addEventListener('click', (e, iddoc)=>{ + iddoc = likes.getAttribute('data-id'); + let docRef = db.collection("posts").doc(iddoc); + docRef.get().then(function(doc) { + if (doc.exists) { + console.log("Document data:", doc.data()); + let like = doc.data().likes; + let increment = firebase.firestore.FieldValue.increment(1) + console.log(like) + return docRef.update({ + name: doc.data().name, + texto: doc.data().texto, + likes: increment + }) + } else { + // doc.data() will be undefined in this case + console.log("No such document!"); + } + }).catch(function(error) { + console.log("Error getting document:", error); + }); + + })) +//Boton para Editar comentarios + +let editbttn = document.querySelectorAll('#edit'); + editbttn.forEach(btnedit => btnedit.addEventListener('click', (valor, txt) => { + txt = btnedit.name; + valor = btnedit.getAttribute('data-id'); + document.querySelector('#txt').value = txt; + document.querySelector('.guardar').style.display = 'block'; + document.querySelector('.compartir').style.display = 'none'; + let bttnsave = document.querySelector('.guardar'); + bttnsave.addEventListener('click',function(){ + let txt = document.querySelector('#txt').value; + console.log(txt); + let colection= db.collection("posts").doc(valor); + colection.update({ + texto : txt + }).then(function(){ + console.log("documents successfully uptade") + text.innerHTML = ''; + document.querySelector('.guardar').style.display = 'none'; + document.querySelector('.compartir').style.display = 'block'; + document.querySelector('#txt').value = ''; //Deja el campo vacio + }) + .catch(function(error){ + console.error("Error uptading document: ", error) + }); + }) + })); +}); + + + +let salir = document.querySelector('.salir'); +salir.addEventListener('click' , pantalla1 ); + +let bttninicio = document.querySelector('.inicio'); +bttninicio.addEventListener('click', pos); +function pos(){ + publicaciones(user); + +} + +//Carga de Fotos + //Creando modal para cargar fotos + let url + + function upLoadPhoto(){ + let modal = document.querySelector('#myModal'); + let btn = document.querySelector('.inputImg'); + let span = document.querySelector('.close'); + + btn.onclick = function (){ + modal.style.display = 'block'; + } + + span.onclick = function (){ + modal.style.display = 'none'; + } + + window.onclick = function (event){ + if (event.target == modal){ + modal.style.display = 'none'; + } + } + //Creando funcion para cargar imagenes a storage + let fileInput = document.querySelector('#myfile'); + let insertimg = document.querySelector('#conteintpost') + + //Listeners + if(!file){ + + }else{ + fileInput.onchange = e => { + let file = e.target.files[0] + firebase.storage().ref("images").child(file.name).put(file) + .then(snap => { + console.log('Imagen cargada'); + return snap.ref.getDownloadURL() + }) + .then (link =>{ + url = link + let img = document.createElement('img') + img.src = link + //document.body.appendChild(img) + insertimg.appendChild(img) + document.querySelector('#conteintpost').style.display = 'block'; + }) + + } + } + + } + upLoadPhoto(); +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Docs/src/compenentes/registro.js b/Docs/src/compenentes/registro.js new file mode 100644 index 00000000..8ebbff9e --- /dev/null +++ b/Docs/src/compenentes/registro.js @@ -0,0 +1,11 @@ +let div = document.querySelector('#root'); +export const registrar = () => { + let a = document.querySelector('#registro'); + a.addEventListener('click', forma); + function forma(){ + let inicio = ` +

Hola

+ ` + div.innerHTML = inicio; + } +} \ No newline at end of file diff --git a/Docs/src/img/F.jpg b/Docs/src/img/F.jpg new file mode 100644 index 00000000..d09e3768 Binary files /dev/null and b/Docs/src/img/F.jpg differ diff --git a/Docs/src/img/G.jpg b/Docs/src/img/G.jpg new file mode 100644 index 00000000..0cf576e1 Binary files /dev/null and b/Docs/src/img/G.jpg differ diff --git a/Docs/src/img/camara.png b/Docs/src/img/camara.png new file mode 100644 index 00000000..9b9c270f Binary files /dev/null and b/Docs/src/img/camara.png differ diff --git a/Docs/src/img/logo.jpg b/Docs/src/img/logo.jpg new file mode 100644 index 00000000..57166811 Binary files /dev/null and b/Docs/src/img/logo.jpg differ diff --git a/Docs/src/img/me-gusta.png b/Docs/src/img/me-gusta.png new file mode 100644 index 00000000..2ae876da Binary files /dev/null and b/Docs/src/img/me-gusta.png differ diff --git a/Docs/src/img/portada.jpg b/Docs/src/img/portada.jpg new file mode 100644 index 00000000..b63a94bb Binary files /dev/null and b/Docs/src/img/portada.jpg differ diff --git a/Docs/src/index.html b/Docs/src/index.html new file mode 100644 index 00000000..0cd13049 --- /dev/null +++ b/Docs/src/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Code Woman + + +
+ + + + + diff --git a/Docs/src/index.js b/Docs/src/index.js new file mode 100644 index 00000000..86b36210 --- /dev/null +++ b/Docs/src/index.js @@ -0,0 +1,3 @@ +import { pantalla1 } from './compenentes/pantalla1.js'; +import { registrar } from './compenentes/registro.js'; +pantalla1(); diff --git a/Docs/src/style.css b/Docs/src/style.css new file mode 100644 index 00000000..30fbc28b --- /dev/null +++ b/Docs/src/style.css @@ -0,0 +1,441 @@ +body{ + font-family: 'Raleway', sans-serif; +} +.image{ + position: absolute; + width: 360px; + height: 179px; + left: 0px; + top: -0.5px; + } + h1{ + position: absolute; + width: 287.67px; + height: 79.33px; + left: 34.87px; + top: 188px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 23px; + text-align: center; + } + .logo{ + position: absolute; + width: 106.38px; + height: 96px; + left: 122.78px; + top: 245px; + } + .input{ + width: 230px; + height: 30px; + left: 63.71px; + top: 351.17px; + } + .email{ + position: absolute; + width: 230px; + height: 30px; + left: 61.5px; + top: 335px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + text-align: center; + } + .password{ + position: absolute; + width: 230px; + height: 30px; + left: 64.5px; + top: 374px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + text-align: center; + } + .acess{ + position: absolute; + width: 130px; + height: 25px; + left: 116px; + top: 420px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + font-family: 'Raleway', sans-serif; + } + .pass{ + position: absolute; + width: 130px; + height: 17px; + left: 124.3px; + top: 450px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 17px; + text-decoration-line: underline; + color: #2641D0; + } + .options{ + position: absolute; + width: 90px; + height: 18px; + left: 140px; + top: 468px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 15px; + line-height: 18px; + display: flex; + align-items: flex-end; + color: #000000; + } + .logoF{ + position: absolute; + width: 40px; + height: 40px; + left: 135px; + top: 510px; + border-radius: 50%; + } + .logoG{ + position: absolute; + width: 40px; + height: 40px; + left: 196px; + top: 510px; + } + .not{ + position: absolute; + width: 160px; + height: 23px; + left: 105px; + top: 540px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 17px; + line-height: 23px; + color: #000000; + } + .re{ + position: absolute; + width: 76px; + height: 23px; + left: 142px; + top: 585px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 23px; + text-decoration-line: underline; + color: #2641D0; + } + .dr{position: absolute; + width: 190px; + height: 18px; + left: 90px; + top: 622px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 15px; + line-height: 18px; + text-decoration-line: underline; + color: #000000; + text-align: center; + } + .nav{ + + width: 360px; + height: 78px; + left: 0px; + top: 0px; + background: rgba(250, 208, 208, 0.7); + } + .head{ + width: 360px; + height: 78px; + background: rgba(250, 208, 208, 0.7); + margin-bottom: 5px; + } + h2{ + text-align: center; + margin-top: 10px; + } + .p1{ + position: absolute; + width: 308px; + height: 56px; + left: 33px; + top: 108px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: #000000; + } + .welcomeName{ + margin-left: 90px; + } + p.welcomeB{ + text-align: center; + } + .name{ + position: absolute; + width: 225px; + height: 30px; + left: 54px; + top: 204px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .mail{ + position: absolute; + width: 225px; + height: 30px; + left: 55px; + top: 259px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .acs{ + position: absolute; + width: 225px; + height: 30px; + left: 52px; + top: 314px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .confirm{ + position: absolute; + width: 225px; + height: 30px; + left: 54px; + top: 369px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .polit{ + position: absolute; + width: 13px; + height: 13px; + left: 62px; + top: 422px; + + background: #C4C4C4; + } + .acept{ + position: absolute; + width: 189px; + height: 26px; + left: 88px; + top: 418px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 9px; + line-height: 11px; + color: #000000; + } + .creat{ + position: absolute; + width: 136px; + height: 35px; + left: 97px; + top: 470px; + background: rgba(147, 72, 232, 0.18); + border-radius: 15px; + } + .iniciar{ + position: absolute; + width: 77px; + height: 15px; + left: 128px; + top: 560px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 15px; + text-decoration-line: underline; + color: #256BF4; + } + .root{ + width:360px; + height:640px; + } + /* Estilos pantalla3 */ + .inicio, .perfil, .salir{ + background-color: #FFEEEE; + border-radius: 15px; + width: 60px; + height: 19px; + } + .inicio{ + margin-left: 85px; + } + .photo{ + width: 20%; + height: 10%; + border-radius: 50%; + display: inline-block; + } + .bienUser{ + font-size: 18px; + margin-left: 100px; + + } + .containerPost{ + height: 200px; + border-style: solid; + } + .conteintpost{ + margin-left: 21px; + margin-top:5px; + width: 308px; + height: 90px; + border-style: solid; + display: none; + + } + img{ + width: 308px; + height: 90px; + } + .comp{ + margin-top:5px; + margin-bottom:2px; + margin-left: 20px; + width: 308px; + height: 40px; + font-family: 'Raleway', sans-serif; + text-align: center; + font-size: 15px; + } + + /*Boton compartir*/ + .share{ + margin-left: 200px; + margin-bottom: 50px; + width: 20%; + border-radius: 10px; + margin-top:5px; + + } + .upPhoto{ + width: 50px; + height: 30px; + margin-top: 15px; + margin-left: 5px; + border-radius: 3px; + } + .save{ + border-radius: 5px; + margin-top: 50px; + margin-left: 220px; + } + .myfile{ + padding-left: -2px; + } + +/* Ventana Modal*/ +.myModal{ + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: #EACDCF; +} + .modalContent{ + background-color: white; + margin: 15% auto; + padding: 40px; + width: 70%; + height: 20%; + } + .close{ + color: red; + float: right; + font-size: 28px; + font-weight: bold; + } + .close:hover, .close:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + + /*Estilos pantalla posts*/ + .containtPub{ + margin-top: 25px; + display: grid; + border-style: solid; + + } + .txt{ + width: 270px; + height: auto; + top: 140px; + left: 40px; + background: rgb(249, 249, 249); + border: 1px solid rgba(0, 0, 0, 0.35); + box-sizing: border-box; + border-radius: 5px; + } + .crearP,p{ + margin-top: 3px; + margin-bottom: 3px; + } + .inputImg{ + width:30px; + height: 30px; + display: inline-block; + margin-top: 1px; + } + .compartir{ + margin-left: 200px; + } + .root2{ + top: 200px; + } + .card{ + margin:10px; + box-shadow:0px 2px 10px grey; + text-align:center; + border-radius:10px; + padding:15px; + transition:all .3s; + height: auto; + } + .counter{ + top: 160px; + left: 165px; + border : 1px #000000; + } + .cont{ + top: 0.5px; + left: 25px; + font-size: 20px; + } + p.like{ + font-size: 10px; + font-weight: bold; + width: 10px; + height: 10px; + display: inline-block + } + .guardar{ + display: none; + } diff --git a/Readme.md b/Readme.md index ed84ec5c..34c5366d 100644 --- a/Readme.md +++ b/Readme.md @@ -147,30 +147,30 @@ anterior en la siguiente sección. ### HTML y CSS -* [ ] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -* [ ] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -* [ ] Construir tu aplicación respetando el diseño realizado (maquetación). +* [x] [HTML semántico](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) +* [x] [CSS `flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +* [x] Construir tu aplicación respetando el diseño realizado (maquetación). ### DOM y Web APIs -* [ ] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) +* [x] [Manipulación dinámica del DOM](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) * [ ] [History API](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador) * [ ] [`localStorage`] ### Javascript -* [ ] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function) -* [ ] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises) -* [ ] Uso ES modules +* [x] [Uso de callbacks](https://developer.mozilla.org/es/docs/Glossary/Callback_function) +* [x] [Consumo de Promesas](https://scotch.io/tutorials/javascript-promises-for-dummies#toc-consuming-promises) +* [x] Uso ES modules ([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) | [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) ### Firebase -* [ ] [Firestore](https://firebase.google.com/docs/firestore) -* [ ] [Firebase Auth](https://firebase.google.com/docs/auth/web/start) +* [x] [Firestore](https://firebase.google.com/docs/firestore) +* [x] [Firebase Auth](https://firebase.google.com/docs/auth/web/start) * [ ] [Firebase security rules](https://firebase.google.com/docs/rules) -* [ ] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen) +* [x] [Uso de onSnapshot](https://firebase.google.com/docs/firestore/query-data/listen) | [onAuthStateChanged](https://firebase.google.com/docs/auth/web/start#set_an_authentication_state_observer_and_get_user_data) ### Testing @@ -181,8 +181,8 @@ anterior en la siguiente sección. ### Colaboración en Github -* [ ] Branches -* [ ] Pull Requests +* [x] Branches +* [x] Pull Requests * [ ] Tags ### Organización en Github @@ -196,7 +196,7 @@ anterior en la siguiente sección. * [ ] Modularización * [ ] Nomenclatura / Semántica -* [ ] Linting +* [x] Linting *** diff --git a/package.json b/package.json index 9a365577..828af452 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,10 @@ "eslint-plugin-import": "^2.18.2", "eslint-plugin-jest": "^22.1.2", "htmlhint": "^0.11.0", - "jest": "^24.8.0", + "jest": "^24.9.0", "regenerator-runtime": "^0.13.1", "serve": "^11.0.2", "stylelint": "^10.1.0", "stylelint-config-recommended": "^2.2.0" } -} \ No newline at end of file +} diff --git a/src/compenentes/pantalla1.js b/src/compenentes/pantalla1.js new file mode 100644 index 00000000..0eda6e9f --- /dev/null +++ b/src/compenentes/pantalla1.js @@ -0,0 +1,143 @@ +import { registros } from './pantalla2.js' +import { welcome } from './pantalla3.js' + +let root = document.querySelector('#root'); + export const pantalla1 = () => { +let p = ` + + +

Bienvenida a nuestra comunidad + de programadoras

+ +
+ + + +
+

Ingresa con:

+ + +

¿No tienes cuenta?

+ Registrate +
+
+

Developed © 2020 CW, Inc.

+
+`; +root.innerHTML = p; + +let bttn = document.querySelector('.logoG'); +bttn.addEventListener('click', loginGmail); +function loginGmail (){ + var provider = new firebase.auth.GoogleAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Google Access Token. You can use it to access the Google API. + var token = result.credential.accessToken; + // The signed-in user info. + let user = {} + user.displayName = result.user.displayName + user.email = result.user.email + user.photoURL = result.user.photoURL + welcome(user) + // ... + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); +} + + +let bttn1 = document.querySelector('.logoF'); +bttn1.addEventListener('click', loginFb); +function loginFb(){ + var provider = new firebase.auth.FacebookAuthProvider(); + firebase.auth().signInWithPopup(provider).then(function(result) { + // This gives you a Facebook Access Token. You can use it to access the Facebook API. + var token = result.credential.accessToken; + // The signed-in user info. + var user = result.user; + console.log(user); + // ... + }).catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + // The email of the user's account used. + var email = error.email; + // The firebase.auth.AuthCredential type that was used. + var credential = error.credential; + // ... + }); + } + + let signInWithEmail = document.querySelector('#getInTo'); + signInWithEmail.addEventListener('click', signIn); + function signIn(){ + let email= document.querySelector('#email').value; + let password= document.querySelector('#password').value; + firebase.auth().signInWithEmailAndPassword(email, password).then(function(result){ + console.log(result); + let user = result.user; + let userInfo = {} + userInfo.displayName = result.user.displayName + userInfo.email = result.user.email + userInfo.photoURL = result.user.photoURL + console.log(userInfo); + welcome(user) + saveUser(userInfo) + }) + .catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + console.log(errorCode); + // ... + }); + } + function observer(){ + firebase.auth().onAuthStateChanged(function(user) { + if (user) { + // User is signed in. + console.log("existe usuario activo") + let displayName = user.displayName; + let email= user.email; + console.log(user); + let emailVerified = user.emailVerified; + let photoURL = user.photoURL; + let isAnonymous = user.isAnonymus; + let uid = user.uid; + let providerData= user.provideData; + + } else { + console.log("no exite usuario activo") + // No user is signed in. + } + }); + } + observer(); + // Aquí irá la función para pasar al perfil del usuario + let registro = document.querySelector('#registro'); + registro.addEventListener('click', registra); + function registra(){ + registros() + } + } + + //Guarda en B.D cloud firestore usuarios registrados en la colleccion usersRef + function saveUser (user){ + let usuario = { + uid: user.uid, + nombre: user.displayName, + email: user.email, + foto: user.photoURL + } + usersRef.doc(user.uid).set(usuario) + } + + \ No newline at end of file diff --git a/src/compenentes/pantalla2.js b/src/compenentes/pantalla2.js new file mode 100644 index 00000000..c032500a --- /dev/null +++ b/src/compenentes/pantalla2.js @@ -0,0 +1,67 @@ +import { pantalla1 } from './pantalla1.js' + +let root = document.querySelector('#root'); +export const registros = () =>{ +let template = ` +
+

<Code Woman>

+
+

¡Hola! para formar parte de la comunidad de programadoras de América Latina, llena el formulario que se encuentra en la parte de abajo y da click en crear cuenta.

+ + + + +

'Acepto las condiciones de servicio y la + política de privacidad de Code Woman.'

+ +

¿Ya tiene cuenta?

+

Iniciar sesión

+ `; +root.innerHTML = template; + +//Boton para iniciar sesion que manda a la primera pantalla +let bttnInit = document.querySelector('#iniciar'); +bttnInit.addEventListener('click', pantalla1); + +//Creando una cuenta de usuario con correo electrónico +let newUser= document.querySelector('#createAccount'); +newUser.addEventListener('click', createUser) +function createUser(){ + let email= document.querySelector("#email").value; + let password= document.querySelector("#password").value; + let confPassword = document.querySelector("#confirmPassword").value; + if (password == confPassword) + { + console.log('todo ok'); + + firebase.auth().createUserWithEmailAndPassword(email, password) + .then(function(){ + verifyAccount() + }) + .catch(function(error) { + // Handle Errors here. + var errorCode = error.code; + var errorMessage = error.message; + console.log(errorCode); + console.log(errorMessage); + // ... + }); + }else{ + alert('Las contraseñas no coinciden'); + } +} + +// Después de registro con correo se envía un correo de email para confirmación +function verifyAccount(){ + var user = firebase.auth().currentUser; + + user.sendEmailVerification().then(function() { + console.log("enviando correo..."); + alert('Te enviamos un correo verificalo por favor y puedes continuar !'); + }).catch(function(error) { + console.log(error); + // An error happened. + }); + } + +} \ No newline at end of file diff --git a/src/compenentes/pantalla3.js b/src/compenentes/pantalla3.js new file mode 100644 index 00000000..daab9718 --- /dev/null +++ b/src/compenentes/pantalla3.js @@ -0,0 +1,29 @@ + import { pantalla1 } from './pantalla1.js' + import { publicaciones } from './posts.js' + + let root = document.querySelector('#root'); + export const welcome = (user) => { + let renderWelcome = ` +
+

<Code Woman>

+ + + +
+
+

Bienvenida a Code Woman

+

${user.displayName}

+ +
+ `; + root.innerHTML = renderWelcome; + + let salir = document.querySelector('.salir'); + salir.addEventListener('click', pantalla1) + + let bttninicio = document.querySelector('.inicio'); + bttninicio.addEventListener('click',pos); + function pos (){ + publicaciones (user); + } + } \ No newline at end of file diff --git a/src/compenentes/posts.js b/src/compenentes/posts.js new file mode 100644 index 00000000..16c7ce33 --- /dev/null +++ b/src/compenentes/posts.js @@ -0,0 +1,314 @@ +import { pantalla1 } from './pantalla1.js' + +let root = document.querySelector('#root'); +export const publicaciones = (user) => { + let post = ` +
+

<Code Woman>

+ + + +
+
+

Crear publicación

+
+ +
+
+
+ × + +
+
+
+
+ + + +
+
+
+
+
+
+ +
+`; + +root.innerHTML = post; + +let root2 = document.querySelector('#root2'); +let text = document.querySelector('#txt'); +let addBtn = document.querySelector('.compartir'); +let db = firebase.firestore(); +//funcion para enviar posts a base de datos +addBtn.addEventListener('click', enviar); +function enviar(){ + db.collection("posts").add({ + name : user.displayName, + texto : text.value, + likes: [], + image: url + }) + .then(function(docRef) { + console.log(docRef.id) + }) + .catch(function(error) { + console.error("Error adding document: ", error); + + }); + document.querySelector('#txt').value = ''; + document.querySelector('#conteintpost').style.display = 'none'; +} + + +db.collection("posts").onSnapshot((querySnapshot)=> { + root2.innerHTML =''; + querySnapshot.forEach((doc) => { + let imgurl = doc.data().image; + let imageTemplete = ``; + let div = `
`; + let post = ` +

${doc.data().name}

+

${doc.data().texto}

+ ${imgurl ? imageTemplete : div} + + + + ` + let nodo = document.createElement('div'); + nodo.classList.add('card') + nodo.innerHTML = post + root2.appendChild(nodo); +}); +//Boton para Eliminar +let idbttn = document.querySelectorAll('.delete'); + idbttn.forEach(btn => btn.addEventListener('click', (value) => { + value = btn.value; + db.collection("posts").doc(value).delete().then(function() { + }).catch(function(error) { + alert("Error removing document: ", error); + }); +})); + //Boton para contar Me Gusta + let like = document.querySelectorAll('.like'); + like.forEach(likes=> likes.addEventListener('click', (e, iddoc)=>{ + iddoc = likes.getAttribute('data-id'); + let docRef = db.collection("posts").doc(iddoc); + docRef.get().then(function(doc) { + if (doc.exists) { + console.log("Document data:", doc.data()); + let like = doc.data().likes; + let increment = firebase.firestore.FieldValue.increment(1) + console.log(like) + return docRef.update({ + name: doc.data().name, + texto: doc.data().texto, + likes: increment + }) + } else { + // doc.data() will be undefined in this case + console.log("No such document!"); + } + }).catch(function(error) { + console.log("Error getting document:", error); + }); + + })) +//Boton para Editar comentarios + +let editbttn = document.querySelectorAll('#edit'); + editbttn.forEach(btnedit => btnedit.addEventListener('click', (valor, txt) => { + txt = btnedit.name; + valor = btnedit.getAttribute('data-id'); + document.querySelector('#txt').value = txt; + document.querySelector('.guardar').style.display = 'block'; + document.querySelector('.compartir').style.display = 'none'; + let bttnsave = document.querySelector('.guardar'); + bttnsave.addEventListener('click',function(){ + let txt = document.querySelector('#txt').value; + console.log(txt); + let colection= db.collection("posts").doc(valor); + colection.update({ + texto : txt + }).then(function(){ + console.log("documents successfully uptade") + text.innerHTML = ''; + document.querySelector('.guardar').style.display = 'none'; + document.querySelector('.compartir').style.display = 'block'; + document.querySelector('#txt').value = ''; //Deja el campo vacio + }) + .catch(function(error){ + console.error("Error uptading document: ", error) + }); + }) + })); +}); + + + +let salir = document.querySelector('.salir'); +salir.addEventListener('click' , pantalla1 ); + +let bttninicio = document.querySelector('.inicio'); +bttninicio.addEventListener('click', pos); +function pos(){ + publicaciones(user); + +} + +//Carga de Fotos + //Creando modal para cargar fotos + let url + + function upLoadPhoto(){ + let modal = document.querySelector('#myModal'); + let btn = document.querySelector('.inputImg'); + let span = document.querySelector('.close'); + + btn.onclick = function (){ + modal.style.display = 'block'; + } + + span.onclick = function (){ + modal.style.display = 'none'; + } + + window.onclick = function (event){ + if (event.target == modal){ + modal.style.display = 'none'; + } + } + //Creando funcion para cargar imagenes a storage + let fileInput = document.querySelector('#myfile'); + let insertimg = document.querySelector('#conteintpost') + + //Listeners + if(!file){ + + }else{ + fileInput.onchange = e => { + let file = e.target.files[0] + firebase.storage().ref("images").child(file.name).put(file) + .then(snap => { + console.log('Imagen cargada'); + return snap.ref.getDownloadURL() + }) + .then (link =>{ + url = link + let img = document.createElement('img') + img.src = link + //document.body.appendChild(img) + insertimg.appendChild(img) + document.querySelector('#conteintpost').style.display = 'block'; + }) + + } + } + + } + upLoadPhoto(); +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/compenentes/registro.js b/src/compenentes/registro.js new file mode 100644 index 00000000..8ebbff9e --- /dev/null +++ b/src/compenentes/registro.js @@ -0,0 +1,11 @@ +let div = document.querySelector('#root'); +export const registrar = () => { + let a = document.querySelector('#registro'); + a.addEventListener('click', forma); + function forma(){ + let inicio = ` +

Hola

+ ` + div.innerHTML = inicio; + } +} \ No newline at end of file diff --git a/src/example.js b/src/example.js deleted file mode 100644 index 52d2c7ea..00000000 --- a/src/example.js +++ /dev/null @@ -1,3 +0,0 @@ -export const example = () => { - // aquí tu código -} \ No newline at end of file diff --git a/src/img/F.jpg b/src/img/F.jpg new file mode 100644 index 00000000..d09e3768 Binary files /dev/null and b/src/img/F.jpg differ diff --git a/src/img/G.jpg b/src/img/G.jpg new file mode 100644 index 00000000..0cf576e1 Binary files /dev/null and b/src/img/G.jpg differ diff --git a/src/img/camara.png b/src/img/camara.png new file mode 100644 index 00000000..9b9c270f Binary files /dev/null and b/src/img/camara.png differ diff --git a/src/img/logo.jpg b/src/img/logo.jpg new file mode 100644 index 00000000..57166811 Binary files /dev/null and b/src/img/logo.jpg differ diff --git a/src/img/me-gusta.png b/src/img/me-gusta.png new file mode 100644 index 00000000..2ae876da Binary files /dev/null and b/src/img/me-gusta.png differ diff --git a/src/img/portada.jpg b/src/img/portada.jpg new file mode 100644 index 00000000..b63a94bb Binary files /dev/null and b/src/img/portada.jpg differ diff --git a/src/index.html b/src/index.html index bb6937cc..0cd13049 100644 --- a/src/index.html +++ b/src/index.html @@ -4,9 +4,27 @@ - Document + + + Code Woman - +
+ + + - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index 35868bab..86b36210 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,3 @@ -import { example } from './example.js'; - -example(); +import { pantalla1 } from './compenentes/pantalla1.js'; +import { registrar } from './compenentes/registro.js'; +pantalla1(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..30fbc28b --- /dev/null +++ b/src/style.css @@ -0,0 +1,441 @@ +body{ + font-family: 'Raleway', sans-serif; +} +.image{ + position: absolute; + width: 360px; + height: 179px; + left: 0px; + top: -0.5px; + } + h1{ + position: absolute; + width: 287.67px; + height: 79.33px; + left: 34.87px; + top: 188px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 23px; + text-align: center; + } + .logo{ + position: absolute; + width: 106.38px; + height: 96px; + left: 122.78px; + top: 245px; + } + .input{ + width: 230px; + height: 30px; + left: 63.71px; + top: 351.17px; + } + .email{ + position: absolute; + width: 230px; + height: 30px; + left: 61.5px; + top: 335px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + text-align: center; + } + .password{ + position: absolute; + width: 230px; + height: 30px; + left: 64.5px; + top: 374px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + text-align: center; + } + .acess{ + position: absolute; + width: 130px; + height: 25px; + left: 116px; + top: 420px; + background: rgba(147, 72, 232, 0.3); + border-radius: 25px; + font-family: 'Raleway', sans-serif; + } + .pass{ + position: absolute; + width: 130px; + height: 17px; + left: 124.3px; + top: 450px; + text-align: center; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 17px; + text-decoration-line: underline; + color: #2641D0; + } + .options{ + position: absolute; + width: 90px; + height: 18px; + left: 140px; + top: 468px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 15px; + line-height: 18px; + display: flex; + align-items: flex-end; + color: #000000; + } + .logoF{ + position: absolute; + width: 40px; + height: 40px; + left: 135px; + top: 510px; + border-radius: 50%; + } + .logoG{ + position: absolute; + width: 40px; + height: 40px; + left: 196px; + top: 510px; + } + .not{ + position: absolute; + width: 160px; + height: 23px; + left: 105px; + top: 540px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 17px; + line-height: 23px; + color: #000000; + } + .re{ + position: absolute; + width: 76px; + height: 23px; + left: 142px; + top: 585px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 23px; + text-decoration-line: underline; + color: #2641D0; + } + .dr{position: absolute; + width: 190px; + height: 18px; + left: 90px; + top: 622px; + font-family: 'Raleway', sans-serif; + font-style: normal; + font-weight: normal; + font-size: 15px; + line-height: 18px; + text-decoration-line: underline; + color: #000000; + text-align: center; + } + .nav{ + + width: 360px; + height: 78px; + left: 0px; + top: 0px; + background: rgba(250, 208, 208, 0.7); + } + .head{ + width: 360px; + height: 78px; + background: rgba(250, 208, 208, 0.7); + margin-bottom: 5px; + } + h2{ + text-align: center; + margin-top: 10px; + } + .p1{ + position: absolute; + width: 308px; + height: 56px; + left: 33px; + top: 108px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 14px; + color: #000000; + } + .welcomeName{ + margin-left: 90px; + } + p.welcomeB{ + text-align: center; + } + .name{ + position: absolute; + width: 225px; + height: 30px; + left: 54px; + top: 204px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .mail{ + position: absolute; + width: 225px; + height: 30px; + left: 55px; + top: 259px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .acs{ + position: absolute; + width: 225px; + height: 30px; + left: 52px; + top: 314px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .confirm{ + position: absolute; + width: 225px; + height: 30px; + left: 54px; + top: 369px; + background: rgba(147, 72, 232, 0.13); + border-radius: 15px; + } + .polit{ + position: absolute; + width: 13px; + height: 13px; + left: 62px; + top: 422px; + + background: #C4C4C4; + } + .acept{ + position: absolute; + width: 189px; + height: 26px; + left: 88px; + top: 418px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 9px; + line-height: 11px; + color: #000000; + } + .creat{ + position: absolute; + width: 136px; + height: 35px; + left: 97px; + top: 470px; + background: rgba(147, 72, 232, 0.18); + border-radius: 15px; + } + .iniciar{ + position: absolute; + width: 77px; + height: 15px; + left: 128px; + top: 560px; + font-family: Raleway; + font-style: normal; + font-weight: normal; + font-size: 13px; + line-height: 15px; + text-decoration-line: underline; + color: #256BF4; + } + .root{ + width:360px; + height:640px; + } + /* Estilos pantalla3 */ + .inicio, .perfil, .salir{ + background-color: #FFEEEE; + border-radius: 15px; + width: 60px; + height: 19px; + } + .inicio{ + margin-left: 85px; + } + .photo{ + width: 20%; + height: 10%; + border-radius: 50%; + display: inline-block; + } + .bienUser{ + font-size: 18px; + margin-left: 100px; + + } + .containerPost{ + height: 200px; + border-style: solid; + } + .conteintpost{ + margin-left: 21px; + margin-top:5px; + width: 308px; + height: 90px; + border-style: solid; + display: none; + + } + img{ + width: 308px; + height: 90px; + } + .comp{ + margin-top:5px; + margin-bottom:2px; + margin-left: 20px; + width: 308px; + height: 40px; + font-family: 'Raleway', sans-serif; + text-align: center; + font-size: 15px; + } + + /*Boton compartir*/ + .share{ + margin-left: 200px; + margin-bottom: 50px; + width: 20%; + border-radius: 10px; + margin-top:5px; + + } + .upPhoto{ + width: 50px; + height: 30px; + margin-top: 15px; + margin-left: 5px; + border-radius: 3px; + } + .save{ + border-radius: 5px; + margin-top: 50px; + margin-left: 220px; + } + .myfile{ + padding-left: -2px; + } + +/* Ventana Modal*/ +.myModal{ + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: #EACDCF; +} + .modalContent{ + background-color: white; + margin: 15% auto; + padding: 40px; + width: 70%; + height: 20%; + } + .close{ + color: red; + float: right; + font-size: 28px; + font-weight: bold; + } + .close:hover, .close:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + + /*Estilos pantalla posts*/ + .containtPub{ + margin-top: 25px; + display: grid; + border-style: solid; + + } + .txt{ + width: 270px; + height: auto; + top: 140px; + left: 40px; + background: rgb(249, 249, 249); + border: 1px solid rgba(0, 0, 0, 0.35); + box-sizing: border-box; + border-radius: 5px; + } + .crearP,p{ + margin-top: 3px; + margin-bottom: 3px; + } + .inputImg{ + width:30px; + height: 30px; + display: inline-block; + margin-top: 1px; + } + .compartir{ + margin-left: 200px; + } + .root2{ + top: 200px; + } + .card{ + margin:10px; + box-shadow:0px 2px 10px grey; + text-align:center; + border-radius:10px; + padding:15px; + transition:all .3s; + height: auto; + } + .counter{ + top: 160px; + left: 165px; + border : 1px #000000; + } + .cont{ + top: 0.5px; + left: 25px; + font-size: 20px; + } + p.like{ + font-size: 10px; + font-weight: bold; + width: 10px; + height: 10px; + display: inline-block + } + .guardar{ + display: none; + }