Laboratoria · fe-ercg · May 21, 2024 · May 21, 2024 · May 23, 2024 · May 24, 2024
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/analyzer.js b/src/analyzer.js
@@ -1,21 +1,58 @@
 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.trim() === "") {
+      return 0;
+    }
+    const words = text.trim().split(/\s+/);
+    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`.
+    const characters = text.split('');
+    return characters.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`.
+    const charactersExcluding = text.replace(/[^\w]|_/g, '');
+    return charactersExcluding.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`.
+
+  getAverageWordLength: (text) => {
+    const words = text.trim().split(/\s+/);
+    const characters = text.replace(/[^\w.,]|_/g, '');
+
+    const wordsSize = words.length;
+    const charactersSize = characters.length;
+    const average = Math.round((charactersSize/wordsSize)*100)/100;
+
+    return average;
   },
+
   getNumberCount: (text) => {
-    //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+    const numbers = text.match(/\b-?\d+(\.\d+)?\b/g);
+
+    if (numbers === null) {
+      return 0; 
+    }
+
+    return numbers.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`.
+    const numbers = text.match(/\b-?\d+(\.\d+)?\b/g);
+    if (numbers === null) {
+      return 0; 
+    }
+
+    let sum = 0;
+
+    for ( let i = 0; i<numbers.length; i++){
+      const number = Number(numbers[i]);
+      sum = sum + number;
+    }
+
+    return sum;
   },
 };
 

diff --git a/src/image/bg-city.gif b/src/image/bg-city.gif
diff --git a/src/image/pp-city.png b/src/image/pp-city.png
diff --git a/src/index.html b/src/index.html
@@ -5,9 +5,55 @@
   <meta charset="utf-8">
   <title>Analizador de texto</title>
   <link rel="stylesheet" href="style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <link href="https://fonts.googleapis.com/css2?family=Podkova:wght@400..800&display=swap" rel="stylesheet">
 </head>
 
 <body>
+  <section>
+
+    <header>
+      <h1>Analizador de texto</h1>
+    </header>
+    <main>
+
+      <div id="analizer-content">
+        <ul>
+          <li data-testid="word-count"
+              class="analizer-content-list">
+              Palabras:</li>
+          <li data-testid="character-count"
+              class="analizer-content-list">
+              Caracteres:</li>
+          <li data-testid="character-no-spaces-count"
+              class="analizer-content-list">
+              Caracteres sin espacios:</li>
+          <li data-testid="word-length-average"
+              class="analizer-content-list">
+              Promedio longitud:</li>
+          <li data-testid="number-count"
+              class="analizer-content-list">
+              Numeros:</li>
+          <li data-testid="number-sum"
+              class="analizer-content-list">
+              Suma de los numeros:</li>
+        </ul>
+
+        <div id="analizer-input">
+          <textarea name="user-input"></textarea>
+
+          <button id="reset-button">Limpiar</button>
+        </div>
+      </div>
+
+    </main>
+
+    <footer>
+      <p>by: M Fernanda Castillo</p>
+    </footer>
+  </section>
   <script src="index.js" type="module"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,46 @@
-import analyzer from './analyzer.js';
+import analyzer from "./analyzer.js";
 
-//TODO: escuchar eventos del DOM e invocar  los métodos del objeto `analyzer`
+const textarea = document.getElementsByName("user-input")[0];
+const buttonClean = document.getElementById('reset-button');
+
+function updateValues(input){
+  // WORD COUNT
+  const wordCount = analyzer.getWordCount(input);
+  const wordCountShow = document.querySelector('[data-testid="word-count"]');
+  wordCountShow.innerHTML = `Palabras: ${wordCount}`;
+
+  // CHARACTER COUNT
+  const characterCount = analyzer.getCharacterCount(input);
+  const characterCountShow = document.querySelector('[data-testid="character-count"]');
+  characterCountShow.innerHTML = `Caracteres: ${characterCount}`;
+
+  // CHARACTER COUNT EXCLUDING
+  const characterCountExcluding = analyzer.getCharacterCountExcludingSpaces(input);
+  const characterCountExcludingShow = document.querySelector('[data-testid="character-no-spaces-count"]');
+  characterCountExcludingShow.innerHTML = `Caracteres sin espacios: ${characterCountExcluding}`;
+
+  // AVERAGE WORDS
+  const averageWords = analyzer.getAverageWordLength(input);
+  const averageWordsShow = document.querySelector('[data-testid="word-length-average"]');
+  averageWordsShow.innerHTML = `Promedio longitud: ${averageWords}`;
+
+  // NUMBER COUNT
+  const numberCount = analyzer.getNumberCount(input);
+  const numberCountShow = document.querySelector('[data-testid="number-count"]');
+  numberCountShow.innerHTML = `Numeros: ${numberCount}`;
+
+  // NUMBER SUM
+  const numberSum = analyzer.getNumberSum(input);
+  const numberSumShow = document.querySelector('[data-testid="number-sum"]');
+  numberSumShow.innerHTML = `Suma de los numeros: ${numberSum}`;
+}
+
+textarea.addEventListener("input", function () {
+  const input = textarea.value;
+  updateValues(input);
+});
+
+buttonClean.addEventListener('click', function(){
+  textarea.value='';
+  updateValues('');
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,123 @@
+body{
+    /* background: rgb(129,121,178);
+    background: linear-gradient(0deg, rgba(129,121,178,1) 0%, rgba(98,92,144,1) 5%, rgba(25,25,63,1) 74%); */
+    background-image: url('./image/bg-city.gif');
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    font-family: "Podkova", serif;
+
+    display: grid;
+    place-content: center;
+    min-height: 100vh;
+}
+section{
+    padding: 2rem 5rem;
+
+    border-radius: 30px;
+
+    background-color: rgba(181, 163, 196, 0.475);
+    backdrop-filter: blur(8px);
+}
+header{
+    text-align: center;
+}
+
+h1{
+    font-family: "Podkova", serif;
+    font-weight: 700;
+    font-size: 4rem;
+    color: #e8edcc;   
+}
+
+ul{
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+}
+
+.analizer-content-list{
+    list-style-type: none;
+
+    color: #D25285;   
+    font-size: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+
+    background-color: rgba(25, 25, 63, 0.738);
+    padding: 8px 15px;
+    width: 250px;
+    min-height: 50px;
+
+    border-radius: 20px;
+}
+
+textarea[name="user-input"]{
+    min-width: 450px;
+    min-height: 300px;
+
+
+    background-color: rgba(223, 214, 239, 0.563);
+
+    background-image: url('../image/pp-city.png');    
+    background-repeat: no-repeat;
+    background-size: 60%;
+    background-position: 230px 150px;
+
+
+    border-radius: 32px;
+    border-width: 4px;
+    border-color: #D25285;
+
+    padding: 2rem;
+    color: #19193f;
+    font-size: 24px;
+    font-family: "Patrick Hand";
+    font-weight: 700;
+
+    outline: none;
+    resize: none;
+    caret-color: #19193f;
+}
+
+#reset-button{
+    text-align: center;
+    width: 12rem;
+    padding: 8px;
+
+    font-family: "Patrick Hand";
+    font-size: 32px;
+    color: #fdf9ff;
+
+    margin-top: 2rem;
+    border-radius: 32px;
+    border-width: 0;
+    cursor: pointer;
+
+    background-color: #ff68a4;
+}
+
+#reset-button:active{
+    background: #E6B861;
+}
+
+footer{
+    text-align: end;
+    color: #f7eaee;
+}
+
+#analizer-content{
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+}
+#analizer-input{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}