Introducción a JavaScript
¿Por qué aprender JavaScript?
¡Hola Mundo! en Mac
¡Hola Mundo! en Windows
Anatomía de una variable
Tipos de datos en JavaScript
Creación de strings
Operadores aritméticos
Conversión de tipos: Type Casting y Coerción
Conversión de tipos explícita e implícita
Estructuras de Control y Lógica
Operadores de comparación
Operadores lógicos
Ejecución condicional: if
Ejercicio: Adivina el número
Ejecución condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatomía de una función
Funciones vs Métodos
Funciones puras e impuras
Arrow function y enlace léxico
Contextos de ejecución y scope chain
¿Qué es Closure?
Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
Manipulación de Arrays
Introducción a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificación básica del final con push( ), pop( )
Iteración con map( ) y forEach( )
Filtrado y reducción con filter( ) y reduce( )
Búsqueda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programación Orientada a Objetos
Anatomía de un Objeto
Trabajando con objetos en JavaScript
Función constructora
¿Qué es una clase?
Prototipos y herencias
Herencia en la práctica
Prototipos en la práctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
¿Cómo funciona la web?
¿Cómo funciona HTTP?
Método GET en JavaScript
Método POST en JavaScript
Método DELETE en JavaScript
Importancia del id en el método DELETE
ECMAScript 6 y tus siguientes pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Diego De Granda
Aportes 48
Preguntas 3
Te damos la bienvenida a nuestra red social. <input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario"> <input type="text" id="inputContraseña" placeholder="Escribe tu contraseña"> <button onclick="enviarDatos()">Enviar</button>
<script src="red_social.js"></script> </body> </html> ```\\<html>\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>Document\</title>\</head>\<body> \Te damos la bienvenida a nuestra red social. \<input type="text" id="inputNomUsuario" placeholder="Escribe el nombre de usuario"> \<input type="text" id="inputContraseña" placeholder="Escribe tu contraseña"> \<button onclick="enviarDatos()">Enviar\</button>\
\<script src="red\_social.js">\</script>\</body>\</html>Does't have an accouunt yet?
Sign Upor login with
WELCOME
</section> <section id="modal-denied" class="access-denied">WRONG PARAMETERS
</section> <button id="retry" class="primary-botton retry "> RETRY </button> </body> <script src="./main.js"></script> </html> ``````css @import './reset.scss'; body { position: relative; display: grid; place-items: center; background-image: url(../assets/820cff50cb608fb5321461b275b72ab1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw; height: 100vh; } .content { display: flex; justify-content: center; align-items: center; gap: 2rem; background-color: #ffffff; padding: 6rem; width: 90%; max-width: 100rem; height: 60rem; border-radius: 6px; box-shadow: -5px 1px 29px 0px lightslategrey; .girl-work { width: 60%; min-height: auto; max-height: 100%; } } .login { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; width: 40%; height: 100%; padding: 3rem; border-radius: 6px; box-shadow: -5px 1px 29px 0px #9099a2; } .login-tittle { font-size: 2.4rem; } .login-subtitle-text { display: flex; justify-content: space-between; align-items: center; } .login-subtitle { font-size: 1.4rem; font-weight: 300; color: rgb(192, 191, 191); } .strong-color { color: #9870fb; text-decoration: underline; font-size: 1.3rem; cursor: pointer; &:hover { text-decoration: none; } } .forgot-password { position: absolute; right: 0; font-size: 1.2rem; } .login-form { display: flex; flex-direction: column; gap: 2rem; width: 100%; } .login-label { position: relative; display: flex; flex-direction: column; font-size: 1.4rem; font-weight: 500; gap: 0.6rem; .input-login { height: 4.4rem; padding: 1.4rem; border: 1px solid #c0bfbf; border-radius: 4px; outline: #9870fb; } } .remeber-me { display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; list-style: none; color: #c0bfbf; width: auto; cursor: pointer; & input { cursor: pointer; } } .primary-botton { background-color: #9870fb; border: solid 1px #9870fb; color: #ffffff; border-radius: 4px; height: 4.4rem; cursor: pointer; &:hover { background-color: transparent; color: #9870fb; } } .or-login-with { position: relative; margin: 1rem 0; display: flex; font-size: 1.2rem; justify-content: center; border-top: 1px solid #c0bfbf; p { position: absolute; top: -8px; background-color: #ffffff; color: rgb(192, 191, 191); padding: 0 1rem; } } //Social-networks Buttons .social-networks-login-buttons { display: flex; justify-content: space-between; } .secundary-button { display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: 49%; height: 5rem; background-color: #ffffff; border-radius: 4px; font-weight: 500; cursor: pointer; .icon-button { height: 50%; } } .google-botton { border: solid 1px #dc6561; color: #dc6561; } .facebook-botton { border: solid 1px #3d6ad6; color: #3d6ad6; } //ACCESS .access-approved, .access-denied { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 50rem; height: 30rem; background-color: #ffffff; border-radius: 6px; box-shadow: -5px 1px 29px 0px #9099a2; z-index: 20; img { width: 30%; } } .display-flex { display: flex; } .display-none { display: none; } //RETRY .retry { position: absolute; bottom: 30%; color: #ffffff; width: 12rem; &:hover { color: #ffffff; } } ```JavaScript: ```js const content = document.getElementById('content') const modalApproved = document.getElementById('modal-approved') const modalDenied = document.getElementById('modal-denied') const retry = document.getElementById('retry') const nameModal = document.getElementById('name') let access = false retry.addEventListener('click', () => {location.reload()}) retry.classList.add('display-none') class UsersDataBase { constructor(name, username, password) { this.name = name this.username = username this.password = password } } const user1 = new UsersDataBase ('Jonathan', '[email protected]', 'user1.12345') const user2 = new UsersDataBase ('Juan', '[email protected]', 'user2.12345') const user3 = new UsersDataBase ('Diego', '[email protected]', 'user3.12345') const user4 = new UsersDataBase ('Maria', '[email protected]', 'user4.12345') const user5 = new UsersDataBase ('Merelin', '[email protected]', 'user5.12345') const users = [user1, user2, user3, user4, user5] const loginButton = document.getElementById('login-button') loginButton.addEventListener('click', findUser) function findUser (event) { event.preventDefault() console.log(users) const inputEmail = document.getElementById('input-email').value const inputPassword = document.getElementById('input-password').value for (let i = 0; i < users.length; i++) { if(users[i].username === inputEmail && users[i].password === inputPassword) { nameModal.innerHTML = users[i].name.toUpperCase() access = true break } else { if(i == 4) { modalDenied.classList.add('display-flex') } } } if(access == true) { retry.innerHTML = 'HOME' modalApproved.classList.add('display-flex') } content.classList.add('display-none') retry.classList.toggle('display-none') } ```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?