Laboratoria · GiselleLop · Aug 18, 2023 · Aug 18, 2023 · Aug 18, 2023 · Aug 22, 2023
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "jest": "^27.0.1",
     "jsdom": "^21.1.1",
     "opener": "^1.5.1",
-    "serve": "^13.0.2"
+    "serve": "^14.2.0"
   },
   "engines": {
     "node": ">=16.x"
@@ -42,4 +42,4 @@
     "version": "6.5.1",
     "commit": "6b34188e22b8e83f25d135e6ed3ffbe1501c6f4c"
   }
-}
+}
diff --git a/src/analyzer.js b/src/analyzer.js
@@ -1,22 +1,61 @@
 const analyzer = {  
   getWordCount: (text) => {
-    //TODO: esta función debe retornar el recuento de palabras que se encuentran en el parámetro `text` de tipo `string`.
+    if (text==="") {
+      return 0
+    } 
+    const regexWord = /[\s\n]+/g
+    const words = text.replace(/[.,;?¿!¡{}:'"/-1234567890]/gi,"").trim().split(regexWord);
+    return words.length
   },
   getCharacterCount: (text) => {
-    //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`.
+    if (text==="") {
+      return 0
+    }  
+    const character = text.split("");
+    return character.length
   },
   getCharacterCountExcludingSpaces: (text) => {
-    //TODO: esta función debe retornar el recuento de caracteres excluyendo espacios y signos de puntuación que se encuentran en el parámetro `text` de tipo `string`.
+    if (text==="") {
+      return 0
+    }  
+    const caraSig = text.replace(/[.,; ?¿!¡{}:'"-]/gi,"").split("");
+    return caraSig.length
   },
   getAverageWordLength: (text) => {    
-    //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`.
+    const espacios = /[\s]+/
+    let sum = 0
+    const arrPalabras = text.trim().split(espacios)
+
+    for(let i=0; i<arrPalabras.length ; i++) {
+      sum = sum + arrPalabras[i].length
+
+    }
+    const prom = sum/arrPalabras.length
+
+    return parseFloat(prom.toFixed(2))
+
   },
   getNumberCount: (text) => {
-    //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+    const num = text.match(/\b\d+(\.\d+)\b|\b\d+\b/g);
+    if(num===null) {
+      return 0
+    }
+    else {
+      return num.length
+    } 
   },
+
   getNumberSum: (text) => {
-    //TODO: esta función debe retornar la suma de todos los números que se encuentran en el parámetro `text` de tipo `string`.
+    let suma = 0
+    const numberArray = text.match(/\b\d+(\.\d+)\b|\b\d+\b/g)
+    if (numberArray===null){
+      return 0 
+    }
+    for(let i=0; i<numberArray.length; i++) {
+      suma = suma + parseFloat(numberArray[i])
+    }
+    return suma
+
   },
 };
-
-export default analyzer;
+export default analyzer;
diff --git a/src/fonts/04B_30__.TTF b/src/fonts/04B_30__.TTF
diff --git a/src/fonts/1up.ttf b/src/fonts/1up.ttf
diff --git a/src/fonts/EHSMB.TTF b/src/fonts/EHSMB.TTF
diff --git a/src/fonts/FakeHope.ttf b/src/fonts/FakeHope.ttf
diff --git a/src/fonts/Golden Age Shad.ttf b/src/fonts/Golden Age Shad.ttf
diff --git a/src/fonts/Kitchen Restaurant.otf b/src/fonts/Kitchen Restaurant.otf
diff --git a/src/fonts/Mario-Kart-DS.ttf b/src/fonts/Mario-Kart-DS.ttf
diff --git a/src/fonts/Marviona.otf b/src/fonts/Marviona.otf
diff --git a/src/fonts/New Ramen.ttf b/src/fonts/New Ramen.ttf
diff --git a/src/fonts/Pixel Digivolve.otf b/src/fonts/Pixel Digivolve.otf
diff --git a/src/fonts/SKULL BONES Bold22.otf b/src/fonts/SKULL BONES Bold22.otf
diff --git a/src/fonts/Spicy Taquito.ttf b/src/fonts/Spicy Taquito.ttf
diff --git a/src/fonts/Super Corn.ttf b/src/fonts/Super Corn.ttf
diff --git a/src/fonts/TT Octosquares Trial Black.ttf b/src/fonts/TT Octosquares Trial Black.ttf
diff --git a/src/fonts/TT Octosquares Trial DemiBold.ttf b/src/fonts/TT Octosquares Trial DemiBold.ttf
diff --git a/src/fonts/easy tormenta.otf b/src/fonts/easy tormenta.otf
diff --git a/src/index.html b/src/index.html
@@ -1,13 +1,26 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Text Analyzer</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
 
-<head>
-  <meta charset="utf-8">
-  <title>Analizador de texto</title>
-  <link rel="stylesheet" href="style.css" />
-</head>
 
-<body>
-  <script src="index.js" type="module"></script>
+  <body>
+    <header>
+      <h1 class="title">Text Analyzer</h1>
+    </header>
+    <main>
+      <textarea name="user-input"></textarea>
+      <div class="metricsContainerPrincipal"></div>
+      <button id="reset-button" type="submit">CLEAN METRICS</button>
+    </main>
+
+  <footer>
+    Created by Giselle Lopez
+  </footer>
 </body>
-</html>
+</html>
+<script src="index.js" type="module"></script>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,64 @@
-import analyzer from './analyzer.js';
+import analyzer from "./analyzer.js";
 
-//TODO: escuchar eventos del DOM e invocar  los métodos del objeto `analyzer`
+const inputText = document.querySelector('[name="user-input"]');
+inputText.addEventListener("keyup", () => calculateMetrics(inputText.value));
+
+const metrics = [
+  "Words",
+  "Characters",
+  "Characters without space",
+  "Numbers",
+  "Sum of numbers",
+  "Average word length",
+];
+const metricsContainer = document.querySelector(".metricsContainerPrincipal");
+for (const metric of metrics) {
+  const container = document.createElement("div");
+  const subTitle = document.createElement("h1");
+  container.classList.add("metric-container");
+  container.id = metric;
+  subTitle.textContent = metric + ": " + 0;
+  container.append(subTitle);
+  metricsContainer.appendChild(container);
+}
+
+function calculateMetrics(text) {
+  const metricContainers = document.querySelectorAll(".metric-container");
+  metricContainers.forEach((container) => {
+    const metricId = container.id;
+    switch (metricId) {
+    case "Words":
+      container.querySelector("h1").textContent =
+          "Words: " + analyzer.getWordCount(text);
+      break;
+    case "Characters":
+      container.querySelector("h1").textContent =
+          "Characters: " + analyzer.getCharacterCount(text);
+      break;
+    case "Characters without space":
+      container.querySelector("h1").textContent =
+          "Characters without space: " +
+          analyzer.getCharacterCountExcludingSpaces(text);
+      break;
+    case "Numbers":
+      container.querySelector("h1").textContent =
+          "Numbers: " + analyzer.getNumberCount(text);
+      break;
+    case "Sum of numbers":
+      container.querySelector("h1").textContent =
+          "Sum of numbers: " + analyzer.getNumberSum(text);
+      break;
+    case "Average word length":
+      container.querySelector("h1").textContent =
+          "Average word length: " + analyzer.getAverageWordLength(text);
+      break;
+    default:     
+      break;
+    }
+  });
+}
+const buttonReset = document.getElementById("reset-button");
+buttonReset.addEventListener("click", ()=> {
+  inputText.value = '';
+  calculateMetrics(inputText.value)
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,151 @@
+@font-face {
+  font-family: fontPrincipal;
+  src: url(../src/fonts/TT\ Octosquares\ Trial\ DemiBold.ttf);
+}
+@font-face{
+font-family: titleFont;
+src:url(../src/fonts/Golden\ Age\ Shad.ttf);
+}
+
+@keyframes changeColors{
+  0%{background-position: 0 50%;}
+  50%{background-position: 100% 50%;}
+  100%{background-position: 0 50%;}
+}
+
+html {
+  background: linear-gradient(45deg,palegoldenrod,pink,palegreen,skyblue);
+  background-size: 400% 400%;
+  position: relative;
+  animation: changeColors 10s ease-in-out infinite; height: 100%;
+} 
+body, header, footer, main {
+display: flex;
+place-content: center;
+align-items: center;
+flex-direction: column;
+width: 100%;
+
+}
+body {
+height: 100%;
+gap: 10px;
+}
+main{
+gap: 15px;
+height: 70%;
+}
+.title {
+ color: black;
+ font-size: 40px;
+ font-family: titleFont;
+margin: 15px 0;
+}
+footer {
+  font-family: fontPrincipal;
+  font-size: 15px;
+  height: 15%;
+}
+header {
+  height: 15%;
+}
+
+textarea[name="user-input"] {
+    padding: 15px;
+    width:70%;
+    height: 190px;
+    border-width: 2px;
+    border-radius: 10px;
+    border-color:black;
+    background-color: rgba(255, 255, 255, 0.5); 
+    font-family: fontPrincipal;
+
+}
+
+#reset-button {
+  color: black; 
+   transition-duration: 0.2s;
+   font-family: fontPrincipal;
+   letter-spacing: 3px;
+   font-weight:bolder;
+   font-size: 16px;
+   border-color:black;
+   border-width: 2px;
+   padding: 10px;
+   border-radius: 10px;
+   background: linear-gradient(45deg,rgb(255, 241, 83),rgb(255, 88, 116),rgb(83, 242, 83),rgb(35, 193, 255));
+   background-size: 400% 400%;
+   position: relative;
+   animation: changeColors 10s ease-in-out infinite;
+} 
+#reset-button:hover {
+color: white;
+font-size: 18px;
+}
+.metricsContainerPrincipal {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(20px, auto);
+
+}
+.metric-container {
+font-size: 8px;
+display: flex;
+place-content: center;
+align-items: center;
+ font-family: fontPrincipal;
+ border-color: white ;
+ color: white;
+ border-style:solid;
+ max-width: 250px;
+ height: auto;
+ border-width: 2px;
+ border-radius: 10px;
+ padding: 0px 10px;
+ display: flex;
+ background-color: rgb(0, 0, 0, 0.7);
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+  .title {
+    margin-top: 30px;
+    font-size: 50px;
+  }
+  .metricsContainerPrincipal {
+    height: 30%;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: minmax(70px, auto);
+  }
+  .metric-container {
+    font-size: 12px;
+  text-align: center;}
+  textarea[name="user-input"] {
+    height: 70%;
+  }
+  #reset-button {
+     font-size: 35px;
+
+  } 
+  footer {
+  font-size: 25px;
+  }
+
+}
+
+@media only screen and (max-width: 768px) {
+  .title {
+    font-size: 30px;
+  }
+  .metricsContainerPrincipal {
+    grid-template-columns: repeat(2, 0.6fr);
+  }
+  .metric-container {
+    font-size: 7px;
+    text-align: center;
+  }
+  textarea[name="user-input"] {
+    height: 220px;
+  }
+}
+