mejora de diseño

omniboyOK · Aug 16, 2021 · 728b77c · 728b77c
1 parent 21f3e0b
commit 728b77c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 25 deletions.
diff --git a/static/form.js b/static/form.js
@@ -13,20 +13,22 @@ function handleSubmit(age, parch, sibSp, sex_male, embarked, clase, cabin) {
       // remove loader
       loader.classList.add("d-none");
 
-      // show result card
+      // get result card
       let card = document.getElementById("cardresult");
-      // remove old styles
-      card.classList.remove("bg-success");
-      card.classList.remove("bg-danger");
-      card.classList.remove("d-none");
-      data.survived
-        ? card.classList.add("bg-success")
-        : card.classList.add("bg-danger");
+
+      // reset result card state
+      clearCard(card);
+
+      // set result card styles
+      data.survived ? setSuccessCard(card) : setFailureCard(card);
 
       // set result text
       let result_text = document.getElementById("result");
       result_text.innerText = data.result;
 
+      // show result card
+      card.classList.remove("d-none");
+
       window.scrollTo(0, document.querySelector(".container").scrollHeight);
     })
     .catch((error) => {
@@ -70,11 +72,30 @@ function loadCabins() {
   if (clase) {
     clase.cabinas.forEach((cabina) => {
       if (cabina.valor > 0) {
-        let option = new Option('Cabina ' + cabina.tipo, cabina.tipo);
+        let option = new Option("Cabina " + cabina.tipo, cabina.tipo);
         /// jquerify the DOM object 'o' so we can use the html method
-        $(option).html('Cabina ' + cabina.tipo);
+        $(option).html("Cabina " + cabina.tipo);
         $("#cabin").append(option);
       }
     });
   }
 }
+
+function setSuccessCard(card) {
+  card.classList.add("border-success");
+  card.classList.add("text-success");
+}
+
+function setFailureCard(card) {
+  card.classList.add("border-danger");
+  card.classList.add("text-danger");
+}
+
+function clearCard(card) {
+  // remove old styles
+  card.classList.remove("border-success");
+  card.classList.remove("border-danger");
+  card.classList.remove("text-success");
+  card.classList.remove("text-danger");
+  card.classList.add("d-none");
+}
diff --git a/templates/index.html b/templates/index.html
@@ -20,24 +20,24 @@
     <![endif]-->
 </head>
 
-<body class="bg-warning">
-    <main class="container pt-4 pb-4 bg-white rounded-bottom">
-        <div class="row justify-content-center mb-3">
+<body class="bg-warning bg-gradient">
+    <main class="container pt-4 pb-4 rounded-bottom">
+        <div class="row justify-content-center mb-3 p-3 rounded">
             <div class="col-lg-6 align-self-center">
-                <h1 class="mb-3">Bienvenido/a al Titanic!</h1>
-                <h3 class="mb-3">Ingresa tus datos</h3>
-                <form
+                <div>
+                    <h1 class="mb-3">Bienvenido/a al Titanic! 🚢</h1>
+                </div>
+                <form class="card p-2"
                     action="javascript:handleSubmit(age.value, parch.value, sibSp.value, sex_male.value, embarked.value, clase.value, cabin.value)">
+                    <h3 class="mb-3">Obtene tu boleto:</h3>
                     <div class="row">
                         <!-- First Form Column -->
                         <div class="col-lg-6">
                             <div class="form-group mb-2">
                                 <label for="age">Edad</label>
                                 <input type="number" class="form-control" id="age" aria-describedby="ageHelp"
-                                    placeholder="Ingresa tu edad" required>
-                                <small id="ageHelp" class="form-text text-muted">Ingresa la edad que tendrias al comprar
-                                    el
-                                    boleto</small>
+                                    placeholder="Ingresa tu edad" min="18" max="99" required>
+                                <small id="ageHelp" class="form-text text-muted">Ingresa tu edad</small>
                             </div>
                             <div class="form-group mb-2">
                                 <label for="parch">Padres/Hijos</label>
@@ -106,7 +106,7 @@ <h3 class="mb-3">Ingresa tus datos</h3>
                 </form>
 
                 <!-- Result Section -->
-                <div class="card mt-3 mb-5 d-none text-white" id="cardresult">
+                <div class="card mt-3 mb-5 d-none" id="cardresult">
                     <div class="card-header">
                         El resultado de tu viaje fue...
                     </div>
@@ -127,10 +127,13 @@ <h2 id="result"></h2>
     </main>
     <footer class="text-center footer bg-primary">
         <div class="container">
-            <span class="text-white align-middle">Formulario hecho por
-                <a href="https://github.com/omniboyOK">Omniboy</a> /
-                Modelo predictivo hecho por
-                <a href="https://github.com/Mattzvl">Mattzvl</a>
+            <span class="text-white align-middle">
+                <small>
+                    Formulario hecho por
+                    <a href="https://github.com/omniboyOK">Omniboy</a> /
+                    Modelo predictivo hecho por
+                    <a href="https://github.com/Mattzvl">Mattzvl</a>
+                </small>
             </span>
         </div>
     </footer>