-
-
Save matthieua/c67de99135528487ed789bdfc9c58114 to your computer and use it in GitHub Desktop.
| <!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> |
-Jeez: I first entered in an element.innerHTML something like this :
element.innerHTML = " emoji" + "
" ... aha so stupid.
-sometimes I still put " " to a let element inside an if statement, which is so wrong.
for exeample:
let city = "sth"
l element.innerHTML = "blabla" + "city";
Hello Mr. Delac
This code did not work in my browser.
I asked from Athena. Her answer helps me to solve this problem.
She changes code lines 126 and 127 to below codes.
window.addEventListener("load", function() {
document.querySelector("button").addEventListener("click", change);
Now I like to know more about "window."!
Thanks a lot for this courses.
thanks, Matt for this great opportunity, it's a life-changing one..... loving coding the more. Smile
thank you Matt! I have done almost the same, but i`ve stucked with the space between emoji and city.
by the way, how could I add emojis to my Visual Studio Code?
thank you Matt! I have done almost the same, but i`ve stucked with the space between emoji and city.
by the way, how could I add emojis to my Visual Studio Code?
if you using mac hold Ctrl + command + space
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>
Hiii
to break a line, you can use the
or
element; for emojis, check online for how to access it on your laptop. On Windows, which I use for instance, it's Windows + semi-colon.