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..59015214 100644 --- a/src/index.html +++ b/src/index.html @@ -5,8 +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/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 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