done

evahuertas · May 26, 2024 · bd7e9b8 · bd7e9b8
1 parent 837bbe7
commit bd7e9b8
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 132 deletions.
diff --git a/algoritmia/bonus-chuck.js b/algoritmia/bonus-chuck.js
@@ -1,6 +1,6 @@
-/** Este ejercicio no puntúa. Podéis hacerlo bonus- https://www.codewars.com/kata/570669d8cb7293a2d1001473 . La función siempre devolver false, pero no podéis utilizar la palabra false */
+/** Este ejercicio no puntúa. Podéis hacerlo bonus- https://www.codewars.com/kata/570669d8cb7293a2d1001473 . La función siempre devolver false, pero NO podéis utilizar la palabra false */
 
-function ifChuckSaysSo(){
+function ifChuckSaysSo() {
 
 }
 

diff --git a/dom/JavaScript Tip Percentage Calculator.png b/dom/JavaScript Tip Percentage Calculator.png
diff --git a/dom/README.md b/dom/README.md
@@ -1,5 +1,18 @@
-# Extender funcionalidad del contador
+# Calcular propina
 
-1. Añade un input de tipo [number](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_number) para que el usuario pueda introducir un número arbitrario entre -5 y 5. Añade también un botón para añadir la cantidad al contador. 
+## Qué debemos hacer
 
-2. Implementa la lógica necesaria para que, al hacer clic en el botón asociado al input, se sume (o reste) el valor del input al contador.
+0. Asociar un evento click al botón "Calculate"
+1. Obtener el valor que pone el usuario en el campo Bill Amount
+2. Obtener el valor que pone el usuario en el campo Percentage Tip
+3. Calcular el total de la propina en Tip Amount.
+4. Calcular el total de la cuenta en el campo Total
+
+Recuerda, una cosa cada vez. Realiza varios console.log para ver que vas obteniendo toda la información que esperas
+
+Colocar el símbolo de la moneda es opcional.
+
+## Recuerda
+
+- ¿Cómo obtener el valor de un campo input o establecerlo? Ten en cuenta que TODOS elementos son de tipo _input_ [enlace](https://simpledev.io/lesson/get-input-value-js/)
+- Normalmente, el tipo de dato que se obtiene de un control de tipo _input_ es de tipo *string*
diff --git a/dom/app.js b/dom/app.js
@@ -0,0 +1 @@
+// ¿En tu páis de origen es normal dejar propina?
diff --git a/dom/css/bootstrap.min.css b/dom/css/bootstrap.min.css
diff --git a/dom/css/main.css b/dom/css/main.css
diff --git a/dom/img/headerBcg.jpeg b/dom/img/headerBcg.jpeg
diff --git a/dom/img/mainBcg.jpeg b/dom/img/mainBcg.jpeg
diff --git a/dom/img/questionBcg.jpeg b/dom/img/questionBcg.jpeg
diff --git a/dom/index.html b/dom/index.html
@@ -5,40 +5,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <!-- bootstrap css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
-        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
-    <!-- main css -->
-    <link rel="stylesheet" href="css/main.css">
-    <!-- google fonts -->
-    <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
-
-    <!-- font awesome -->
-    <title>Counter Project</title>
+    <link rel="stylesheet" href="style.css">
+    <title>Tip Calculator</title>
 </head>
 
 <body>
-
-
-    <div class="container">
-        <div class="row max-height align-items-center">
-            <div class="col-10 mx-auto col-md-6 text-center main-container p-5">
-                <h1 class="text-uppercase">counter</h1>
-                <h1 id="counter">0</h1>
-                <div class="btn-container d-flex justify-content-around flex-wrap">
-                    <button class="btn counterBtn prevBtn text-uppercase m-2">lower count</button>
-                    <button class="btn counterBtn nextBtn text-uppercase m-2">add count</button>
-                </div>
-                <label class="form-label" for="custom">Custom value</label>
-                <input class="form-control" type="number" value="0" name="custom" id="custom-input">
-                <button id="add-custom-button" class="btn customBtn text-uppercase m-2">Add custom value</button>
-            </div>
-        </div>
+    <h1><span id="tip-word">Tip</span> calculator</h1>
+    <div id="calculator">
+        <label>Bill Amount:</label><input type="number" id="bill-amount"></br>
+        <label>Percentage Tip:</label><input type="number" id="percentage-tip"></br>
+        <label>Tip Amount:</label><input type="number" id="tip-amount" min="0" disabled></br>
+        <label>Total:</label><input type="number" id="total" disabled></br>
+        <button id="calculate">Calculate</button>
     </div>
-
-
-    <!-- script js -->
-    <script src="js/app.js"></script>
+    <script src="app.js"></script>
 </body>
 
 </html>
diff --git a/dom/js/app.js b/dom/js/app.js
diff --git a/dom/style.css b/dom/style.css
@@ -0,0 +1,46 @@
+
+h1 {
+    color: darkcyan;
+    font-size: 50px;
+    text-align:center;
+
+}
+
+span#tip-word {
+    color:palevioletred;
+}
+
+div#calculator{
+    color: white;
+    font-size: 35px;
+    width: 600px;
+    background-color: rgb(48, 48, 168);
+    border-radius: 25px;
+    padding: 50px;
+    margin: auto;
+}
+label{
+    display:inline-block;
+    width: 300px;
+    margin-right: 25px;
+    padding: 15px;
+}
+
+input{
+    margin-right: 50px;
+    width: 100px;
+    height: 25px;
+    padding: 2.5px 40px;
+    text-align: center;
+}
+
+#calculate{
+    background-color: rgb(236, 46, 46);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    width: 150px;
+    height: 35px;
+    font-size: 25px;
+    margin: 25px 200px 15px 200px;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// ¿En tu páis de origen es normal dejar propina?