-
-
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> |
I made the mistake of over-complicated the need to change H1 and H2, and ended up having my H2 changed to a default CSS as well from the way I coded them but realized how simple it is Matt's solution is! Great challenge indeed, can't wait to work more with Javascript.
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.
I didn't realize to put the
in the "❄️
" like that i kept putting it outside the "" was completely stuck im happy i had the idea of what to do though so ill take that
This is what I managed to come up with. I had to Google how to include a line break in Javascript but once I found the answer, I realised it was pretty self-explanatory. I definitely over complicated the phrases by adding so many " " but now I see there's an simpler/tidier way. Overall I'm happy with my outcome.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homework - Week 2</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
color: #1a64d6;
font-size: 34px;
}
h2 {
font-size: 34px;
font-weight: lighter;
line-height: 4px;
}
p {
color: rgb(90, 90, 90);
font-size: 18px;
font-family: monospace;
}
div {
margin: 10px 200px;
padding: 10px;
}
div:hover {
background-color: rgb(255, 244, 231);
transition: all 200ms ease-in-out;
}
button {
color: #ffffff;
font-size: 16px;
background-color: #1a64d6;
border: 1px solid #1a64d6;
border-radius: 30px;
padding: 16px 24px;
display: block;
margin: 0 auto;
}
button:hover {
color: #1a64d6;
background-color: #ffffff;
transition: all 200ms ease-in-out;
}
</style>
</head>
<body>
<h1>
🌤️
<br>
Currently 21° in Tokyo
</h1>
<h2>
13° /
<strong>
23°
</strong>
</h2>
<div>
<h3>
🌧️Tomorrow
</h3>
<p>
10° /
<strong>
22°
</strong>
</p>
</div>
<div>
<h3>
🌥️ Saturday
</h3>
<p>
15° /
<strong>
17°
</strong>
</p>
</div>
<div>
<h3>
☀️ Sunday
</h3>
<p>
25° /
<strong>
28°
</strong>
</p>
</div>
<button>
Change city
</button>
<p>
Coded by Rianne W
</p>
<script>
function changeCity() {
let city = prompt("What city do you live in?");
let temp = prompt("What is the temperature in your city?");
let h1 = document.querySelector("h1");
if (temp <= 0) {
h1.innerHTML = "🥶" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 10 && temp > 0) {
h1.innerHTML = "😰" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 15 && temp > 10) {
h1.innerHTML = "😐" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 20 && temp > 15) {
h1.innerHTML = "🙂" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 25 && temp > 20) {
h1.innerHTML = "😍" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 30 && temp > 25) {
h1.innerHTML = "🤪" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
if (temp <= 100 && temp > 30) {
h1.innerHTML = "🥵" + "<br>" + "Currently" + " " + temp + "°C" + " " + "in" + " " + city;
}
}
let applyButton = document.querySelector("button");
applyButton.addEventListener("click", changeCity);
</script>
</body>
</html>
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.
-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>
Thank you Sir Matt. My code was a lil different but it worked thesame.