Created
April 8, 2020 18:40
-
-
Save mattdelacdev/ed441a0bb986e2cf673ee9a408cf6717 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>SheCodes</title> | |
| <style> | |
| body { | |
| font-family: Cerebri Sans, Helvetica, Arial, sans-serif; | |
| } | |
| section { | |
| margin: 120px 0; | |
| } | |
| h1, | |
| h2 { | |
| font-weight: 900; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 0; | |
| } | |
| h1 { | |
| color: #272044; | |
| text-align: center; | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #885df1; | |
| padding: 0 0 24px; | |
| } | |
| p { | |
| font-size: 18px; | |
| line-height: 28px; | |
| font-family: PT Mono, monospace; | |
| text-align: center; | |
| } | |
| button { | |
| border-radius: 25px; | |
| margin: 0 auto; | |
| display: block; | |
| background-color: #fff; | |
| border: 1px solid #885df1; | |
| color: #885df1; | |
| font-size: 16px; | |
| line-height: 22px; | |
| padding: 16px 24px; | |
| text-decoration: none; | |
| transition: all 200ms ease; | |
| } | |
| button:hover { | |
| color: #fff; | |
| background: #885df1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h1> | |
| 👩💻 SheCodes is a Coding Workshop for Women | |
| </h1> | |
| <h2> | |
| Access a new career in Technology | |
| </h2> | |
| <p> | |
| She Codes teaches coding, design and management skills to women | |
| <br /> | |
| <strong> | |
| Limited amount of spots! | |
| </strong> | |
| </p> | |
| <br /> | |
| <button> | |
| Apply Now | |
| </button> | |
| </section> | |
| <script> | |
| function updateHeading(newHeading) { | |
| let heading = document.querySelector("h1"); | |
| heading.innerHTML = newHeading; | |
| } | |
| function canApply() { | |
| let age = prompt("How old are you?"); | |
| return age >= 18; | |
| } | |
| function apply() { | |
| let firstName = prompt("What is your first name?"); | |
| if (canApply()) { | |
| updateHeading(`Hi ${firstName}! Welcome to SheCodes 👩💻`); | |
| } else { | |
| updateHeading(`Sorry ${firstName}, you can't apply to SheCodes.`); | |
| } | |
| } | |
| let applyButton = document.querySelector("button"); | |
| applyButton.addEventListener("click", apply); | |
| </script> | |
| </body> | |
| </html> |
I have the same question before removing let t didn't change the headline. can you explain why this happened?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello! After I submitted my homework for week 2, I decided to play around with this refactoring by refactoring my homework. I did it in the exact some logical flow of this example, but what was a "temp" variable (equivalent to the "age" variable here) was returning as 'undefined' and the javascript not changing the heading. I looked into it and found this solution on Stack Overflow (https://stackoverflow.com/questions/17583544/referenceerror-variable-is-not-defined). It basically told me that since my variable was enclosed in a function, it would not apply universally. I got the gist of it, and when I changed:
...
function aboveZero() { let temp = prompt("What is the temperature right now?"); return temp >= 0; }...
to
function aboveZero() { temp = prompt("What is the temperature right now?"); return temp >= 0; }Everything worked 100%.
I looked at my code forwards and backwards and saw no differences between the sample above, but it just wasn't working until I got rid of the "let" declaration.
Could this be explained?