From ba9f3b6522c856a29b90e61bced6633da0fb79b2 Mon Sep 17 00:00:00 2001 From: Brenda Moraga Date: Wed, 28 Dec 2022 11:02:42 -0300 Subject: [PATCH 1/2] aplicando componentes vistos en construyendo una spa --- src/componentes/home.js | 19 +++++++++++++++++ src/componentes/login.js | 16 ++++++++++++++ src/componentes/register.js | 16 ++++++++++++++ src/index.html | 1 + src/main.js | 42 +++++++++++++++++++++++++++++++++++-- 5 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 src/componentes/home.js create mode 100644 src/componentes/login.js create mode 100644 src/componentes/register.js diff --git a/src/componentes/home.js b/src/componentes/home.js new file mode 100644 index 00000000..d0fcf30c --- /dev/null +++ b/src/componentes/home.js @@ -0,0 +1,19 @@ +// eslint-disable-next-line import/no-cycle +import { onNavigate } from '../main.js'; + +export const Home = () => { + const HomeDiv = document.createElement('div'); + const buttonRegister = document.createElement('button'); + const buttonLogin = document.createElement('button'); + + buttonRegister.textContent = 'Registrate'; + buttonLogin.textContent = 'Inicia sesión'; + + buttonRegister.addEventListener('click', () => onNavigate('/register')); + buttonLogin.addEventListener('click', () => onNavigate('/login')); + + HomeDiv.appendChild(buttonRegister); + HomeDiv.appendChild(buttonLogin); + + return HomeDiv; +}; \ No newline at end of file diff --git a/src/componentes/login.js b/src/componentes/login.js new file mode 100644 index 00000000..eb145504 --- /dev/null +++ b/src/componentes/login.js @@ -0,0 +1,16 @@ +// eslint-disable-next-line import/no-cycle +import { onNavigate } from '../main.js'; + +export const Login = () => { + const HomeDiv = document.createElement('div'); + HomeDiv.textContent = 'Bienvenida al Login'; + const buttonHome = document.createElement('button'); + + buttonHome.textContent = 'Regresar al Home'; + + buttonHome.addEventListener('click', () => onNavigate('/')); + + HomeDiv.appendChild(buttonHome); + + return HomeDiv; +}; \ No newline at end of file diff --git a/src/componentes/register.js b/src/componentes/register.js new file mode 100644 index 00000000..eb145504 --- /dev/null +++ b/src/componentes/register.js @@ -0,0 +1,16 @@ +// eslint-disable-next-line import/no-cycle +import { onNavigate } from '../main.js'; + +export const Login = () => { + const HomeDiv = document.createElement('div'); + HomeDiv.textContent = 'Bienvenida al Login'; + const buttonHome = document.createElement('button'); + + buttonHome.textContent = 'Regresar al Home'; + + buttonHome.addEventListener('click', () => onNavigate('/')); + + HomeDiv.appendChild(buttonHome); + + return HomeDiv; +}; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 788db3c9..2ecb2884 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,7 @@ Document +
\ No newline at end of file diff --git a/src/main.js b/src/main.js index ac27e91a..db24b5ba 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,43 @@ // Este es el punto de entrada de tu aplicacion -import { myFunction } from './lib/index.js'; +// import { myFunction } from './lib/index.js'; -myFunction(); +// myFunction(); + +/* eslint-disable import/no-cycle */ +import { Home } from './componentes/home'; +import { Register } from './componentes/register'; +import { Login } from './componentes/login'; + +const rootDiv = document.getElementById('root'); + +const routes = { + '/': Home, + '/register': Register, + '/login': Login, +}; + +export const onNavigate = (pathname) => { + window.history.pushState( + {}, + pathname, + window.location.origin + pathname, + ); + + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + } + + rootDiv.appendChild(routes[pathname]()); +}; + +const component = routes[window.location.pathname]; + +window.onpopstate = () => { + while (rootDiv.firstChild) { + rootDiv.removeChild(rootDiv.firstChild); + } + rootDiv.appendChild(routes[window.location.pathname]()); +}; + +rootDiv.appendChild(component()); \ No newline at end of file From 8760a2e37b1305463428edcf0958796a0337fc8c Mon Sep 17 00:00:00 2001 From: Daniela Rocha Date: Wed, 28 Dec 2022 12:38:24 -0500 Subject: [PATCH 2/2] =?UTF-8?q?maquetaci=C3=B3n=20pag=20inicio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.html | 25 +++++++++++++++- src/style.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/style.css diff --git a/src/index.html b/src/index.html index 2ecb2884..59015214 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,32 @@ Document + -
+ +
+
+

LA APP

+

Todos tus conciertos y música en un solo lugar

+ +
+
+
+ + + + Olvide mi contraseña +
+ + +
+
+ +
+
+ + \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..6915d071 --- /dev/null +++ b/src/style.css @@ -0,0 +1,77 @@ +/* #root{ + width: 200px; + height: 200px; + background-color: aqua; +} */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: flex; + justify-content: center; + +} +.ContainerPadre{ + width: 375px; + height: 740px; + background-color: rgb(218, 246, 237); + margin: 5% 0; +} + +.contenedorHeader{ + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: max-content; + background-color: blanchedalmond; + padding: 40% 0 3% 3%; +} +.contenedorHeader p{ + margin-top: 30%; +} + +.contenedorMain{ + width: 100%; + height: max-content; + +} + +.contendorInicio{ + width: 100%; + height: max-content; + margin-top: 15%; + background-color: beige; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.inputInicio{ + width: 70%; + height: min-content; + padding: 3%; + margin-bottom: 3%; + border: solid 2px black; + border-radius: 10px; +} + +.btn-InicioSesion{ + width: 70%; + height: min-content; + margin-top: 10%; + padding: 3%; + border-radius: 50px; + background-color: #CDFF06; + font-weight: 700; +} + +.recuperarContraseña{ + text-decoration: none; + margin-top: 5%; +} \ No newline at end of file