readme listo y test

.eslintrc

@@ -2,7 +2,8 @@
     "env": {
       "browser": true,
       "es6": true,
-      "jest": true
+      "jest": true,
+      "node": true
     },
     "parserOptions": {
       "ecmaVersion": 2020,

.gitignore

@@ -3,4 +3,5 @@
 coverage/
 node_modules/
 .vscode/
-.env
+.env
+.vercel

DEV012-dataverse-chat/src/components/cards.js

@@ -0,0 +1,32 @@
+import { navigateTo } from "../router.js";
+
+export const renderItems = (dataset) => {
+  const ul = document.createElement("ul");
+  dataset.forEach((element) => {
+    const li = document.createElement("li");
+    li.setAttribute("itemscope", "");
+    li.setAttribute("itemtype", "One Piece");
+    li.classList.add("cards");
+    li.innerHTML = `
+      <h3 itemprop="name">${element.name}</h3>
+      <img src="${element.imageUrl}" alt="${element.id}">
+      <p class="description" itemprop="description">${element.description}</p>
+      <h4 class = "bountyValue" itemprop="bounty">${element.facts.bounty}</h4>
+      `;
+    const apiSaved = localStorage.getItem("apiKey");
+    li.addEventListener("click", (e) => {
+      e.preventDefault();
+
+      if (apiSaved === null) {
+        navigateTo("/api-key");
+      }else{
+        navigateTo(`/detail-${element.id}`,element);
+      }
+
+
+
+    });
+    ul.appendChild(li);
+  });
+  return ul;
+};

DEV012-dataverse-chat/src/components/chat.js

@@ -0,0 +1,83 @@
+import { openIAapi, openIAapiIndividual } from "../lib/chatApi.js";
+import { characters } from "../lib/chatApi.js";
+
+
+export const renderChat = (element) => {
+  const container = document.createElement("div");
+  container.id = "chatContainer";
+  const chatSection = document.createElement("section");
+  chatSection.id = "chatSection";
+  const divTextarea = document.createElement("div");
+  divTextarea.classList.add("divTextarea")
+  const inputChat = document.createElement("textarea");
+  inputChat.id = "inputChat";
+  inputChat.placeholder = "Chat with your favourite character";
+  const sendButton = document.createElement("button");
+  sendButton.id = "sendButton";
+  sendButton.innerHTML = `<i class="bi bi-send"></i>`;
+
+  sendButton.addEventListener("click", () => {
+
+    const userText = container.querySelector("#inputChat").value;
+    const showUserText = document.createElement("p");
+
+
+    showUserText.innerHTML = userText;
+    showUserText.style.color = "blue"
+    chatSection.appendChild(showUserText);
+
+    const clearTextarea = container.querySelector("#inputChat");
+    clearTextarea.value = "";
+    const route = window.location.pathname;
+    if (route === "/panel") {
+
+      openIAapi(characters, userText)
+        .then((response) => //{if (response.status === 401 || response.status === 403) {
+          //throw new Error("Error de autenticación: Token inválido o faltante.");}
+          response.json())
+
+        .then((data) => {
+          const apiAnswer = document.createElement("p");
+          apiAnswer.innerHTML = data.choices[0].message.content;
+          chatSection.appendChild(apiAnswer);
+        })
+
+        .catch((error) => {
+          console.error("Error en la solicitud:", error);
+          const apiError = document.createElement("p");
+          apiError.innerHTML = "Authentication error: invalid or missing token.";
+          apiError.style.color = "red";
+          apiError.style.fontSize = "25px";
+          container.appendChild(apiError);
+        })
+    } else {
+      openIAapiIndividual(element.name, userText)
+        .then((response) =>
+          // {if (response.status === 401 || response.status === 403) {
+          //   throw new Error("Error de autenticación: Token inválido o faltante.");}
+          response.json())
+
+        .then((data) => {
+          const apiAnswer = document.createElement("p");
+          apiAnswer.innerHTML = data.choices[0].message.content;
+          chatSection.appendChild(apiAnswer);
+        })
+
+        .catch((error) => {
+          console.error("Error en la solicitud:", error);
+          const apiError = document.createElement("p");
+          apiError.innerHTML = "Authentication error: invalid or missing token.";
+          apiError.style.color = "red";
+          apiError.style.fontSize = "25px";
+          container.appendChild(apiError);
+        })
+    }
+  });
+  container.appendChild(chatSection);
+  divTextarea.appendChild(inputChat);
+  divTextarea.appendChild(sendButton);
+  container.appendChild(divTextarea);
+
+  return container;
+};
+

DEV012-dataverse-chat/src/components/footer.js

@@ -0,0 +1,5 @@
+export const renderFooter = () => {
+  const footer = document.createElement("footer");
+  footer.textContent= " Developers: Vanessa Robledo- Yanina Chiolo- Yamileth Caldera";
+  return footer;
+}

DEV012-dataverse-chat/src/components/header.js

@@ -0,0 +1,9 @@
+export const renderHeader = () => {
+  const header = document.createElement("header");
+  header.classList.add("headerStyle")
+  const h1 = document.createElement("h1");
+  h1.textContent = "One Pedia"
+  h1.classList.add("title")
+  header.appendChild(h1);    
+  return header;
+}

DEV012-dataverse-chat/src/components/nav.js

@@ -0,0 +1,96 @@
+import { navigateTo } from "../router.js";
+
+export const renderNav = () => {
+  const nav = document.createElement("nav");
+  nav.classList.add("navStyle");
+  nav.innerHTML += `
+  <button id="homeButton" class="homeButton"><img class="home-img" src="./img/home-button.png" alt="Home-img"/></button>
+  <label for="menu">☰</label>
+  <input type="checkbox" id="menu">
+  <div class= "div-filtros">
+  <label for="origin">Filter:</label>
+  <select id="origin" name="origin" data-testid="select-filterOrigin">
+  <option disabled selected value="">Select Origin</option>
+  <option value="East Blue">East Blue</option>
+  <option value="North Blue">North Blue</option>
+  <option value="West Blue">West Blue</option>
+  <option value="South Blue">South Blue</option>
+  <option value="Grand Line">Grand Line</option>
+  <option value="New World">New World</option>
+  <option value="Unknown">Unknown</option>
+  </select>
+  <label for="crew">Filter:</label>
+  <select id="crew" name="crew" data-testid="select-filter">
+  <option disabled selected value="">Select Crew</option>
+  <option value="Straw Hat Pirates">Straw Hat Pirates</option>
+  <option value="Kuja Pirates">Kuja Pirates</option>
+  <option value="Marines">Marines</option>
+  <option value="Blackbeard Pirates">Blackbeard Pirates</option>
+  <option value="Big Mom Pirates">Big Mom Pirates</option>
+  <option value="Heart Pirates">Heart Pirates</option>
+  <option value="Revolutionaries">Revolutionaries</option>
+  <option value="Red-Haired Pirates">Red Haired Pirates</option>
+  <option value="Kid Pirates">Kid Pirates</option>
+  <option value="Baroque Works">Baroque Works</option>
+  <option value="Spade Pirates">Spade Pirates</option>
+  <option value="Roger Pirates">Roger Pirates</option>
+  <option value="Buggy Pirates">Buggy Pirates</option>
+  <option value="Bonney Pirates">Bonney Pirates</option>
+  </select>  
+  <label for="a-to-z">Sort:</label>
+  <select id="a-to-z" name="a-to-z" data-testid="select-sort">
+  <option disabled selected value="">Select Order</option>
+  <option value="asc">A-Z</option>
+  <option value="desc">Z-A</option>
+  </select>
+  <label for="bounty">Sort:</label>
+  <select id="bounty" name="bounty" data-testid="select-bounty">
+  <option disabled selected value="">Select Bounty</option>
+  <option value="asc">Lowest</option>
+  <option value="desc">Highest</option>
+  </select>
+  <button data-testid="button-clear" class="button">Clear</button>
+  <button id="facts" class="button">Facts</button>
+  <button id="apiKey" class="button">Api Key</button>
+  <button id="everyoneButton" class="button">Chat With Everyone</button>
+  </div>`;
+
+  const homeIcon = nav.querySelector("#homeButton");
+  homeIcon.addEventListener("click", (e) => {
+    e.preventDefault();
+    navigateTo("/");
+  });
+
+  const title = document.createElement("h2");
+
+
+  title.id = "titulo";
+  title.style.display = "none";
+  title.classList.add("detallesStyle");
+  nav.appendChild(title);
+
+  const apiKeyInput = nav.querySelector("#apiKey");
+  apiKeyInput.addEventListener("click", (e) => {
+
+    e.preventDefault();
+    navigateTo("/api-key");
+  })
+
+  const everyoneButton = nav.querySelector("#everyoneButton");
+
+  const apiSaved = localStorage.getItem("apiKey");
+
+
+  everyoneButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    if (apiSaved === null) {
+      navigateTo("/api-key")
+    } else {
+      navigateTo("/panel");
+    }
+  });
+
+
+
+  return nav;
+}