Day 06 vowel counter finished

AxelOP96 · AxelOP96 · commit c4f19ccaf9e7 · 2024-02-24T19:45:30.000-03:00
diff --git a/day06/css/styles.css b/day06/css/styles.css
@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+    box-sizing: border-box;
+}
+body{
+    background-color: #3B3B98;
+}
+.container{
+    background-color: white;
+    color: black;
+    width: 40%;
+    margin: 10em auto;
+    padding: 3em;
+    border-radius: 10px;
+}
+input{
+    width: 60%;
+    border: none;
+    border-bottom: 1px solid orange;
+    outline: none;
+}
+.button{
+    padding: 0.5em 1em;
+    background-color: blueviolet;
+    color: white;
+    outline: none;
+    border-radius: 5px;
+    border: none;
+}
+.result{
+    margin-top: 3.5rem;
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+}
diff --git a/day06/script.js b/day06/script.js
@@ -0,0 +1,20 @@
+let button = document.querySelector(".button");
+const word = document.querySelector(".input");
+
+
+button.addEventListener("click", count);
+
+function count(){
+    let result = document.querySelector(".result");
+    let wordVal = word.value.toLowerCase();
+    let countVowels=0;
+    for (let index = 0; index < wordVal.length; index++) {
+        //if(word[index] === 'a'|| word[index] === 'e' || word[index] === 'i' || word[index] === 'o' || word[index] === 'u'){
+        if(wordVal[index].match(/([a,e,i,o,u])/)){
+            countVowels++;
+
+        }
+
+    }
+    result.innerHTML = "La cantidad de vocales en la palabra es " + countVowels;
+}
diff --git a/day06/vowel-counter.html b/day06/vowel-counter.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contador de Vocales</title>
+    <link rel="stylesheet" href="./css/styles.css">
+</head>
+<body>
+    <main class="container">
+        <h2>Contador de vocales</h2>
+        <input class="input" type="text" placeholder="Ingrese una palabra" autofocus>
+        <button class="button">Cuenta</button>
+        <p class="result"></p>
+    </main>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -29,7 +29,7 @@ <h2 class="center">Dias 1-20</h2>
                     <a href="./day05/palindrome-checker.html">Dia 5</a>
                 </div>
                 <div class="align">
-                    <a href="">Dia 6</a>
+                    <a href="./day06/vowel-counter.html">Dia 6</a>
                 </div>
                 <div class="align">
                     <a href="">Dia 7</a>
