From 6a99344a4c40a2135c8ee06a5bdf85d58dbd5fbb Mon Sep 17 00:00:00 2001 From: P M Date: Wed, 18 Mar 2020 02:37:47 -0300 Subject: [PATCH] Welcome to the pasta club MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tarea 2 terminada. Se requirio: un formmulario que capture el primern ombre, segundo nombre, apellido y edad del usuario. Tras ser completado, el h1 debería modificarse para incluir el nombre del usuario y su información debería mostrarse en un campo --- css/styles.css | 148 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 112 +++++++++++++++++++++++++++++++++++++ pasta.js | 78 ++++++++++++++++++++++++++ 3 files changed, 338 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 pasta.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..9b796cc --- /dev/null +++ b/css/styles.css @@ -0,0 +1,148 @@ +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; + display: inline-block; + width: 562px; +} + +.box .text{ + position: absolute; + z-index: 999; + margin: 0 auto; + left: 0; + right: 0; + top: 18%; + text-align: center; + width: 80%; +} + +h1 { + 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%; + +} +h3 { + 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: 500px; + height: 320px; + background-color: rgba(185, 250, 124, 0.838); + padding: 20px; + border-radius: 8px; +} + +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; + margin-left: 215px; +} + + +#join-button:hover { + font-weight: bold; + width: 75px; + height: 35px; + +} + +#two { + background-color: white; +} + +#reveal-text{ + display: none; +} +#welcome-text{ + vertical-align: middle; + font-size: 20px; + font-family: Georgia, 'Times New Roman', Times, serif; + margin-top: 85px; + +} +#under-18{ + display: none; +} + +#text-under-18{ + vertical-align: middle; + font-size: 20px; + font-family: Georgia, 'Times New Roman', Times, serif; + margin-top: 110px; +} + +table { + background-color:rgb(239, 226, 210, 0.838); + margin-top: 30px; + width: 550px; + height: 320px; + padding: 20px; + border-radius: 8px; + text-align: center; +} +th { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 20px; + margin-top: 50px; + padding-bottom: 20px; +} +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/index.html b/index.html new file mode 100644 index 0000000..0d472ef --- /dev/null +++ b/index.html @@ -0,0 +1,112 @@ + + + + + + + + + + The Pasta Club + + +
+ Frame +

Welcome to
the Pasta Club!

+

+
+

Please fill in the form if you'd like to join:

+
+ + +

+ + +

+ + +

+ + +

+ + +

+ +
+
+
+
Hey there,

! +We are pleased to announce you are now a member of our club! We will log you in with an assigned username:

-

 +
You may change your username and password only after verifying your e-mail address. An e-mail with a secret link should be waiting for you in your inbox! +
+
+ + + + + + + + + + + + + + + + +
Meanwhile, you can take a peek at what our wonderful members are doing...
+ + summer-squash-vegan-mac-n-cheese-with-herb-pesto + + + + simplest-zucchini-parmesan-pasta + + + + the-best-weeknight-pasta-sauce + + + + stovetop-mac-and-cheese + +
+ + arrabiata-pasta-with-shrimp + + + + cashew-pesto-pasta + + + + garlic-herb-spaghetti-with-baked-chicken-meatballs + + + + fusilli-alfredo-with-mushrooms + +
+
+ +
You are under 18, thus, you are not allowed to join. Thank you so much for your interest.
+ You might want to check out our Kids Pasta Club! Where fun is what counts
+ + + + + + + \ No newline at end of file diff --git a/pasta.js b/pasta.js new file mode 100644 index 0000000..5493881 --- /dev/null +++ b/pasta.js @@ -0,0 +1,78 @@ +// 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! +// vas a crear un botón de acción que una vez que lo apretás, va a +// mostrar toda la información junta en un campo de texto +// Y va a cambiar el

para decir "Bienvenido, nombreDeUsuario"! +/* +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; +} +*/ + + + +function getInputIntoText() { + userName = document.getElementById('name').value; + const userSecondName = document.getElementById('second_name').value; + const userSurname = document.getElementById('surname').value; + const userAge = Number(document.getElementById('age').value); + document.getElementById('usernameText').replaceWith(userName) + document.getElementById('userSecondNameText').replaceWith(userSecondName) + document.getElementById('userSurnameText').replaceWith(userSurname) + document.getElementById('userAgeText').replaceWith(userAge) + document.getElementById('assignedUsernameText').replaceWith(userName) +}; + +var userName; +const $joinButton = document.querySelector("#join-button"); + +$joinButton.onclick = function() { + + getInputIntoText(); +if (Number(document.getElementById('age').value) > 18){ +// get the element +var div1 = document.getElementById('form-hide'); + +// set an event listener for it + div1.addEventListener('click',function(){ + + this.parentNode.removeChild(this); + + document.querySelector("#reveal-text").style.display = "block"; + + const newPastaHeader = `Welcome to
the Pasta Club, ${userName}!` + document.getElementById('pasta-header').innerHTML = newPastaHeader + document.querySelector("h1").style.marginTop = "3%"; +}); + +} +else{ + var div1 = document.getElementById('form-hide'); + +// set an event listener for it + div1.addEventListener('click',function(){ + + this.parentNode.removeChild(this); + + document.querySelector("#under-18").style.display = "block"; + + const newPastaHeader = `We are sorry...` + document.getElementById('pasta-header').innerHTML = newPastaHeader + document.querySelector("h1").style.marginTop = "15%"; +}); +} + + + + + +} \ No newline at end of file