Monthly salary calculator
+ + + + + + + \ No newline at end of file diff --git a/tareas/clase-5/tarea-clase-5.js b/tareas/clase-5/05. tarea 01/tarea-clase-5.js similarity index 84% rename from tareas/clase-5/tarea-clase-5.js rename to tareas/clase-5/05. tarea 01/tarea-clase-5.js index ecece12f..690e629e 100644 --- a/tareas/clase-5/tarea-clase-5.js +++ b/tareas/clase-5/05. tarea 01/tarea-clase-5.js @@ -1,3 +1,15 @@ + +const $botonCalcular = document.querySelector("#boton-calcular"); + +$botonCalcular.onclick = function() { + const salarioAnual = Number(document.querySelector("#salarioanual").value); + const salarioMensual = salarioAnual / 12 + console.log(salarioMensual) + document.getElementById("salario-mensual").value = salarioMensual; + // document.getElementById("salario-mensual").innerHTML = salarioMensual; + return false; +} + /* Cosas a tener en cuenta: 1. Los no tienen .innerText, en vez de eso, usan .value. https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input @@ -17,11 +29,17 @@ $botonCalcular.onclick = function() } */ -//TAREA: completar tareas/clase-5/index.html para que incluya tarea-clase-5.js + +// PRIMERA TAREA - DONE +//TAREA: completar tareas/clase-5/index.html para que incluya tarea-clase-5.js * //TAREA: crear un formulario donde un usuario pueda ingresar su salario anual. //cuando el usuario haga click en el botón "calcular", mostrar el salario mensual // en una caja de texto deshabilitada. --> + + + +// SEGUNDA TAREA //TAREA: En otro archivo html (no Index) y otro archivo js (no tarea-clase-5.js), // creá un formulario que capture el primer nombre, segundo nombre, apellido/s y edad del usuario // también vamos a crear un que diga Bienvenido!
@@ -41,6 +59,7 @@ Ejemplo form:
*
* */
+// TERCERA TAREA
//TAREA: En otro archivo distinto,
// Por cada clase de r/argentina programa existente, vamos a pedir:
// horas, minutos y segundos de cada video. Ej. Si un video dura
@@ -49,6 +68,8 @@ Ejemplo form:
// al apretar el botón "Calcular tiempo total", debe mostrar en un
// pre-creado el tiempo total de los videos.
+
+// CUARTA TAREA
//TAREA: En otro archivo distinto,
// Crear una lista de y - que contengan sólo números.
// Convertir esos números a un array y:
diff --git a/tareas/clase-5/05. tarea 02/css/styles.css b/tareas/clase-5/05. tarea 02/css/styles.css
new file mode 100644
index 00000000..6b2201db
--- /dev/null
+++ b/tareas/clase-5/05. tarea 02/css/styles.css
@@ -0,0 +1,147 @@
+body {
+ text-align: center;
+ background-image: url(https://images.unsplash.com/photo-1473093295043-cdd812d0e601?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1750&q=270)
+}
+
+.box{
+ position: relative;
+ width: 562px;
+}
+
+.box .text{
+ position: absolute;
+ z-index: 999;
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ top: 18%;
+ text-align: center;
+ width: 80%;
+}
+
+#pasta-header {
+ font-size: 50px;
+ font-family:Georgia, 'Times New Roman', Times, serif;
+ color: #c63202;
+ box-shadow: white;
+ text-shadow: 0 0 6px #fff;
+ margin-top: 8%;
+ font-weight: bold;
+}
+strong {
+ text-align: center;
+ font-size: 20px;
+ font-family:Georgia, 'Times New Roman', Times, serif;
+ font-weight: bold;
+}
+form {
+ text-align: left;
+ display: inline-block;
+ font-family:Arial, Helvetica, sans-serif;
+ width: 700px;
+ background-color: rgba(185, 250, 124, 0.838);
+ padding: 20px;
+ border-radius: 8px;
+}
+
+#age {
+ width: 150px;
+}
+
+label{
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ font-size: 18px;
+ text-align:left;
+ font-weight: bold;
+}
+
+input,
+textarea{
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ font-size: 18px;
+ border-radius: 4px;
+ width: 150px;
+ height: 22px;
+ box-sizing: border-box;
+ border: 1px solid #999;
+ margin-left: 30px;
+ padding-left: 10px;
+}
+
+input#email {
+ width: 300px;
+}
+
+#join-button {
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ font-size: 20px;
+ /*background-color: rgba(185, 250, 124, 0.838);*/
+ border: none;
+ border-radius: 8px;
+ /*width: 70px;
+ height: 30px;*/
+ border: 2px solid white;
+ transition-duration: 0.2s;
+}
+
+
+#join-button:hover {
+ font-weight: bold;
+ background-color: #c63202;
+
+}
+
+#two {
+ background-color: white;
+}
+
+#reveal-text{
+ display: none;
+}
+#welcome-text{
+ vertical-align: middle;
+ font-size: 20px;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+
+}
+#under-18{
+ display: none;
+}
+
+#text-under-18{
+ vertical-align: middle;
+ font-size: 20px;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+table {
+ background-color:rgb(239, 226, 210, 0.838);
+ margin-top: 30px;
+ width: 700px;
+ height: 460px;
+ padding: 20px;
+ margin: 50px;
+ border-radius: 8px;
+ text-align: center;
+}
+th {
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ font-size: 20px;
+ margin-top: 50px;
+ padding-bottom: 10px;
+}
+td {
+ padding: 10px;
+}
+td,
+img {
+ border-radius: 6px;
+}
+
+.member-img {
+ transition-duration: 0.2s;
+}
+
+.member-img:hover {
+ opacity: 0.500;
+}
\ No newline at end of file
diff --git a/tareas/clase-5/05. tarea 02/index.html b/tareas/clase-5/05. tarea 02/index.html
new file mode 100644
index 00000000..155f6529
--- /dev/null
+++ b/tareas/clase-5/05. tarea 02/index.html
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
The Pasta Club
+
+
+
+
+ 
+ Welcome to
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Welcome to
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+