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> |
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
shortcut key to add emoji: "windows button" + "."