Cambios index

Laboratoria · Dec 13, 2023 · 73342ec · 73342ec
2 parents a1b0002 + f0ddbf3
commit 73342ec
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 66 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,10 +1,7 @@
-export const footer = () => {
-    const htmlTemplate =
-    <p> Dev by Cami & Vane </p>
+export const Footer = () => {
+    const Footer = document.createElement("footer");
+    Footer.id = "footer"
+    Footer.innerHTML = `<footer> Dev by Cami & vane </footer>`;
 
-
-    const footer = document.createElement('footer');
-    footer.classList.add('container');
-    footer.innerHTML = htmlTemplate;
-    return footer;
-} 
+    return Footer
+}
diff --git a/src/components/header.js b/src/components/header.js
@@ -1,7 +1,7 @@
 export const Header = () => {
     const Header = document.createElement("header");
     Header.id = "header"
-    Header.innerHTML = `<h1> w a r s i e p e d i a </h1>`;
+    Header.innerHTML = `<h1> w a r s i e p e d i a </h1> <h2>May the Force be with you</h2>`;
 
     return Header
 }
diff --git a/src/components/returnButton.js b/src/components/returnButton.js
@@ -1,6 +1,5 @@
-const buton = () =>{
+export const buton = () =>{
     const button = document.createElement('button')
     button.textContent='now click here'
     return button;
 }
-export default buton;
diff --git a/src/index.html b/src/index.html
@@ -2,32 +2,11 @@
 <html>
   <head>
     <meta charset="utf-8">
-<<<<<<< HEAD
-    <title>Dataverse Chat</title>
-    <link rel="stylesheet" href="style.css" />
-    <!--Aquí puedes importar tu archivo de CSS para agregar estilos.-->
-=======
     <title>Warsiepedia</title>
     <link rel="stylesheet" href="./style.css" />
->>>>>>> 374008ea736d620ed24472e113b6f1be4d344bc3
   </head>
   <body>
     <div id="root"></div>
-    <section>
-      <section class="header"></section>
-      <main class="container">
-        <section class="containerControllers"></section>
-        <section id="cardContainer" class="container">
-          <ul class="container">
-            <li class="container" itemtype="character" itemscope></li>
-            <ul class="container">
-              holaaa
-
-
-          </ul>
-        </section>
-      </main>
-    </section>
     <script src="index.js" type="module"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,11 @@
 import { setRootElement, setRoutes } from './router.js';
 import {Home} from './views/home.js'
 import { onURLChange } from './router.js';
+<<<<<<< HEAD
 import {example} from './views/example.js';
+=======
+//import {Example} from './views/example.js';
+>>>>>>> f0ddbf36c21f4736f12f50458920976e226e3ff3
 import {Error} from './views/error.js';
 // En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
 
@@ -33,7 +37,12 @@ window.addEventListener('popstate', ({objetivo}) => {
  });
  */
 const routes = {
+<<<<<<< HEAD
     "/":example,
+=======
+    "/": Home,
+    //"/example":Example,
+>>>>>>> f0ddbf36c21f4736f12f50458920976e226e3ff3
     "/error": Error,
 };
 
@@ -44,6 +53,6 @@ setRootElement(viewContainer);
 document.addEventListener("DOMContentLoaded", (event) => {
     console.log("DOM fully loaded and parsed")
     console.log(event.target.location.pathname);
-    onURLChange(event.target.location.pathname);
+    onURLChange(event.target.location);
 })
 
diff --git a/src/router.js b/src/router.js
@@ -44,15 +44,16 @@ const renderView = (pathname, props={}) => {
 
   export const navigateTo = (pathname, props={}) => {
     // actualizar el historial del navegador a partir de las urls con pushState
-    const URLvisited= window.location.hostname + pathname; 
+    const URLvisited= window.location.origin + pathname; 
     history.pushState({},"", URLvisited);
     // render the view with the pathname and props
     renderView(pathname, props);
   }
 
   export const onURLChange = (location) => {
+    console.log(location,"location")
     // parse the location for the pathname and search params
     // convert the search params to an object
     // render the view with the pathname and object
-    renderView(location);
+    renderView(location.pathname);
 }
diff --git a/src/style.css b/src/style.css
@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css?family=Jura");
 @import url("https://fonts.googleapis.com/css?family=Days+One");
-@import url("https://fonts.cdnfonts.com/css/star-wars");
+@import url("https://db.onlinewebfonts.com/c/cc3019aa6439ef893839b8a0d6d0391d?family=Star+Jedi");
+/*@import url("https://fonts.cdnfonts.com/css/star-wars");*/
 @import url("https://db.onlinewebfonts.com/c/636d3dac53dffe0023a68f90abacf4c1?family=JuraLight");
 @import url("https://db.onlinewebfonts.com/c/a575960e7b96141e7ec34bc95aa772e2?family=SF+Atarian+System+Extended+V2+V1");
 @import url("https://db.onlinewebfonts.com/c/28cac7a2ebb776327ddf96d71c30fe9b?family=SF+Atarian+System+Extended+Bold+V2+V1");
@@ -20,12 +21,46 @@ header {
   background-repeat: no-repeat;
   background-size: 100%;
   font-size: large;
-  font-family: 'Star Wars', sans-serif;
+  font-family: 'Star Jedi', sans-serif;
   width: 100%;
   height: 150px;
 }
 
 body {
   background-image: url(https://cdn.wallpapersafari.com/38/0/tNfnSd.png);
   align-content: baseline;
-}
+}
+
+  h1 {
+    color: transparent;
+    padding-top: 0px;
+    text-align: center;
+    font-family: 'Star Jedi', sans-serif;
+    -webkit-text-stroke: 2px yellow;
+    font-size: 60px;
+  }
+
+  h1:hover {
+    text-shadow: 0 0 30px rgb(232, 232, 101);
+  }
+
+  h2 {
+    color: aliceblue;
+    text-align: center;
+    font-family: "jura";
+  }
+
+  h2:hover {
+    text-shadow: 0 0 25px yellow;
+  }
+
+
+
+
+  footer {
+    display: flex;
+    color: yellow;
+    letter-spacing: 3px;
+    font-family: "Star Jedi";
+    justify-content: center;
+  }
diff --git a/src/views/error.js b/src/views/error.js
@@ -1,3 +1,9 @@
 export const Error = () => {
-    return document.createElement('p').textContent("hola mundo");
+    const errorView = document.createElement('div');
+
+    const errorMessage = document.createElement('p');
+    errorMessage.innerHTML = `Error`
+    errorView.appendChild(errorMessage);
+
+    return errorView
 };
diff --git a/src/views/example.js b/src/views/example.js
@@ -1,3 +1,9 @@
 export const example = () => {
     return document.createElement('p').textContent("hola mundo");    
 };
+<<<<<<< HEAD
+=======
+export const Example = () => {
+    return document.createElement('p').textContent("hola mundo");
+};
+>>>>>>> f0ddbf36c21f4736f12f50458920976e226e3ff3
diff --git a/src/views/home.js b/src/views/home.js
@@ -1,32 +1,39 @@
-import { template } from "@babel/core";
-import buton from "../components/returnButton.js";
-import footer from "../components/footer.js"
-import data from "../data/dataset.js";
-import buton from "../components/returnButton.js";
+// import { template } from "@babel/core";
+// import buton from "../components/returnButton.js";
+import {Footer} from "../components/footer.js"
+// import data from "../data/dataset.js";
+// import buton from "../components/returnButton.js";
 import { Header } from "../components/header.js";
 
 export const Home = () => {
-    const section = document.createElement('section'); //se crea una sección para contener el header
-    const headerHome = section; //se asigna 
-    const header = Header(); //se llama al componente
-    headerHome.appendChild(header) //se agrega el componente a la sección
-    return Home
+    const divContainerHome = document.createElement('div'); //se crea una sección para contener el header
+
+    //se llaman componentes
+    const headerComponent = Header();
+
+    const footerComponent = Footer(); 
+
+    //se agregan los componentes al contenedor de toda la vista Home
+    divContainerHome.appendChild(headerComponent);
+    divContainerHome.appendChild(footerComponent);
+
+    return divContainerHome
 }
 
-export const Example = () => {
-const example = () => {
-    const container = document.createElement('span');
-    const tittle = document.createElement('h1')
-    tittle.textContent='jajaja'
-    container.append(tittle, buton())
-    return container
-};
-};
+// export const Example = () => {
+// const example = () => {
+//     const container = document.createElement('span');
+//     const tittle = document.createElement('h1')
+//     tittle.textContent='jajaja'
+//     container.append(tittle, buton())
+//     return container
+// };
+// };
 
-const footer = () => {
-const view = document.createElement ("section");
-    const footerTitle= document.createElement('h1')
-    footerTitle.textContent='Devs Cami & Vane'
-    view.append (footerTitle)
-    return view
-};
+// const footer = () => {
+// const view = document.createElement ("section");
+//     const footerTitle= document.createElement('h1')
+//     footerTitle.textContent='Devs Cami & Vane'
+//     view.append (footerTitle)
+//     return view
+// };