Created
November 21, 2019 15:05
-
-
Save matthieua/c67de99135528487ed789bdfc9c58114 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>Weather App</title> | |
| <style> | |
| h1, | |
| h2, | |
| h3 { | |
| text-align: center; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| h1 { | |
| color: #1a64d6; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 0; | |
| } | |
| h2 { | |
| margin: 0; | |
| font-size: 34px; | |
| line-height: 48px; | |
| font-weight: 400; | |
| } | |
| ul { | |
| padding: 0; | |
| } | |
| li { | |
| list-style: none; | |
| text-align: center; | |
| padding: 10px 0; | |
| border-radius: 10px; | |
| transition: all 200ms ease-in-out; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| } | |
| li:hover { | |
| background: #fffbef; | |
| } | |
| p { | |
| font-size: 18px; | |
| opacity: 0.7; | |
| text-align: center; | |
| font-family: monospace; | |
| } | |
| button { | |
| display: block; | |
| margin: 20px auto; | |
| border: 1px solid #1a64d6; | |
| background: #1a64d6; | |
| color: #fff; | |
| font-size: 16px; | |
| line-height: 22px; | |
| padding: 16px 24px; | |
| border-radius: 30px; | |
| transition: all 200ms ease; | |
| box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: white; | |
| color: #1a64d6; | |
| border: 1px solid #1a64d6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| 🌤 | |
| <br /> | |
| Currently 21° in Tokyo | |
| </h1> | |
| <h2>13° / <strong>23°</strong></h2> | |
| <ul> | |
| <li> | |
| <h3> | |
| 🌧Tomorrow | |
| </h3> | |
| <p>10° / <strong>22°</strong></p> | |
| </li> | |
| <li> | |
| <h3> | |
| 🌥 Saturday | |
| </h3> | |
| <p>15° / <strong>17°</strong></p> | |
| </li> | |
| <li> | |
| <h3> | |
| ☀️ Sunday | |
| </h3> | |
| <p>25° / <strong>28°</strong></p> | |
| </li> | |
| </ul> | |
| <button> | |
| Change city | |
| </button> | |
| <p> | |
| Coded by Matt Delac | |
| </p> | |
| <script> | |
| function changeCity() { | |
| let city = prompt("What city do you live in?"); | |
| let temperature = prompt("What temperature is it?"); | |
| let heading = document.querySelector("h1"); | |
| if (temperature < 0) { | |
| heading.innerHTML = | |
| "☹️<br />Currently " + temperature + "°C in " + city; | |
| } else { | |
| heading.innerHTML = | |
| "😄<br />Currently " + temperature + "°C in " + city; | |
| } | |
| } | |
| let changeButton = document.querySelector("button"); | |
| changeButton.addEventListener("click", changeCity); | |
| </script> | |
| </body> | |
| </html> |
Thank you Matt, Am enjoying to code step by step. It's amazing!
this step-by-step is a great way to learn. Would love to explore the refactoring more
Wow! We had almost the same code. So proud of myself! I had a hard time adding the emoji but I later figured I could use the line break tag.
shortcut key to add emoji: "windows button" + "."
I think I did good, here is my solution
<title>Weather App</title> <style> h1, h2, h3 { text-align: center; font-family: Helvetica, Arial, sans-serif; } h1 {
color: #1a64d6;
font-size: 34px;
line-height: 48px;
margin: 0;
}
h2 {
margin: 0;
font-size: 34px;
line-height: 48px;
font-weight: 400;
}
ul {
padding: 0;
}
li {
list-style: none;
text-align: center;
padding: 10px 0;
border-radius: 10px;
transition: all 200ms ease-in-out;
max-width: 400px;
margin: 0 auto;
}
li:hover {
background: #fffbef;
}
p {
font-size: 18px;
opacity: 0.7;
text-align: center;
font-family: monospace;
}
button {
display: block;
margin: 20px auto;
border: 1px solid #1a64d6;
background: #1a64d6;
color: #fff;
font-size: 16px;
line-height: 22px;
padding: 16px 24px;
border-radius: 30px;
transition: all 200ms ease;
box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
cursor: pointer;
}
button:hover {
background: white;
color: #1a64d6;
border: 1px solid #1a64d6;
}
</style>
🌤
Currently 21° in Tokyo
13° / 23°
-
🌧Tomorrow
10° / 22°
-
🌥 Saturday
15° / 17°
-
☀️ Sunday
25° / 28°
<button>Change city</button>
<p>Coded by Princess</p>
<script>
function apply() {
let city = prompt("What city do you leave in?");
let temperature = prompt("What temperature is it?");
let heading = document.querySelector("h1");
if (temperature >= 1) {
heading.innerHTML =
"😄" +
"<br>" +
"Currently" +
" " +
temperature +
"°C" +
" " +
"in" +
" " +
city;
} else {
if (temperature < 0) {
heading.innerHTML =
"☹️" +
"<br>" +
" " +
"Currently" +
" " +
temperature +
"°C" +
" " +
"in" +
" " +
city;
}
}
}
let applyButton = document.querySelector("button");
applyButton.addEventListener("click", apply);
</script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
if you using mac hold Ctrl + command + space