Laboratoria · DanielaRoch · Dec 28, 2022 · Dec 28, 2022
diff --git a/src/componentes/home.js 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;
+};
diff --git a/src/componentes/login.js 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;
+};
diff --git a/src/componentes/register.js 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;
+};
diff --git a/src/index.html b/src/index.html
@@ -5,8 +5,32 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <!-- <div id="root"></div> -->
   <script type="module" src="main.js"></script>
+  <div class="ContainerPadre">
+    <header class="contenedorHeader">
+      <h1>LA APP</h1>
+      <p>Todos tus conciertos y música en un solo lugar</p>
+
+    </header>
+    <main class="contenedorMain">
+    <div class="contendorInicio">
+      <input type="text" placeholder="Ingresa nombre de usuario" class="inputInicio">
+      <input type="text" placeholder="Contraseña" class="inputInicio">
+      <button class="btn-InicioSesion">Iniciar Sesión</button>
+      <a href="" class="recuperarContraseña">Olvide mi contraseña</a>
+      <hr/>
+
+
+    </div>
+    <div class="contenedorInicioGoogle">
+
+    </div>
+  </div>
+</main>
+<footer></footer>
 </body>
 </html>
diff --git 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());
diff --git a/src/style.css 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%;
+}