-
-
Save matthieua/7947403b259cf9ecd1b73da0298edfad 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> | |
| </body> | |
| </html> |
hi all. I am currently doing homework of week 2 and there is something with line 103 and I can not understand what it is. if anyone could help pls...
<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>
<script>
Function changeCity() {
Let city = promt(“which city do you live in?”);
Let temperature = promt(“what temperature is it?”);
Let h1 = document.queryselector(“h1”);
H1.innerHTML = “Currently” + temperature + city + “,
Alert(“ ”);
}
Let changeButton = document.queryselector(“changeCity”);
changeButton.addEventListener(“click”, changeCity)
</script>
c
<p>Coded by Samira Nezar</p>
<style>
h1 {
color: blue;
text-align: center;
}
.blue-emoji {
color: blue;
}
h2 {
text-align: center;
font-size: 40px;
font-weight: 100;
}
.black-emoji {
color: black;
}
ul{
list-style: none;
padding: 0;
text-align: center;
}
.clear-inside {
font-size: 48px;
text-shadow: 0 0 5px black;
}
p{
color: gray;
}
p{
text-align: center;
}
button{
margin: 20px auto;
color: #fff;
display: block;
font-size: 14px;
background-color: #1A64D6;
padding: 16px 24px;
border-radius: 30px;
border: 1px solid #1A64D6;
transition: all 200ms ease;
cursor: auto;
}
.button {
color: #fff;
background-color: #1A64D6;
}
.hover-element {
inline-size: 200px;
block-size: 50px;
background-color: #ccc;
padding: 10px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.hover-element:hover {
background-color: #f0f0f0;
color: #333;
}
</style>
<title>Weather Forecast</title>
🌤
Currently 21° in Tokyo
13° / 23°
<ul class="hover"><h3>
<li><class="black-emoji">🌧Tomorrow</li>
<p>
10° / <strong>22°</strong>
</p>
<li><h3><class="clear-inside">🌥Saturday</h3></li>
<p>
15° / <strong>17°</strong>
</p>
<li>
<h3>☀️ Sunday</h3>
</li>
<p>
25° / <strong>28°</strong>
</p>
</ul></h3>
<button>Change City</button>
<p>Coded by Matt Delac</p>
Its my first time coding but it was a nice challenge. I struggled with the shadow displaying over the lists
I struggled a lot when it comes to replicating the project😯.
<title>SheCodes</title> <style>h1 {
color:#1a64d6;
text-align: center;
font-size: 34px;
line-height: 48px;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h2 {
color:#1a64d6;
text-align: center;
margin: auto;
font-size: 34px;
line-height: 48px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h3{
color:black;
text-align: center;
}
forecast {
text-align: center;
margin: auto;
position: fixed;
}
ul{
padding: 0;
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li{
text-align: center;
padding: 10px;
border-radius: 10px;
max-width: 400px;
margin: auto;
}
button.checkout {
color: black;
background: white;
text-align:center;
display:block;
padding: 20px 150px;
margin:auto;
}
button.checkout:hover{
color: black;
background:rgb(243, 184, 117) ;
}
button {
color:white;
text-align: center;
display: list-item;
padding: 15px 20px;
background: rgb(10, 2, 44);
border:1px solid rgb(69, 29, 248);
margin: auto;
border-radius: 30px;
justify-content: match parents;
}
button:hover {
color: rgb(69, 29, 248);
background-color: aliceblue;
text-align: center;
}
.footer {
width: 100%;
margin:auto;
text-align: center;
position: fixed;
bottom: 0px;
font-size: 18px;
opacity: 0.7;
font-family: monospace;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
</style><h1><strong>⛅<strong></h1>
</div>
<div class="forecast">
Currently 21° in South Africa
13°/23°
-
🌧Tomorrow
10°/22° -
🌤Saturday
15°/17° -
☀Sunday
25°/ 28°
Coded by Amukelani Chauke
button {
padding: 15px 20px;
color: #7c52ef;
display: block;
margin: 30px auto;
background: transparent;
transition: all 200ms ease-in-out;
text-decoration: none;
font-size: 16px;
border-radius: 40px;
border: 1px solid #7c52ef;
box-shadow: 5px 5px 10px rgba (0, 0, 0, 0.3);
}
button:hover {
color: #fff;
background-color:#480ee9 ;
}
.contact-details {
text-align: center;
font-size: 14px;
}
🌤 Currently 21° in Tokyo
13°/23°
🌧Tomorrow
10° / 22°
🌥Saturday
15° / 17°
☀️Sunday
25° / 28°
🌤
Currently 21° in Tokyo
13°/23°
🌧Tomorrow
10° / 22°
🌥Saturday
15° / 17°
☀️Sunday
25° / 28°
Change city
Coded by Ruth Haye
Really grateful for this experience. I am learning.
WOW!! A week of learning and then it continues.. My assignment is not exactly the same which I know was not the brief! I feel I did well for the amount of learning that I have done and the achievement in the result. Better next time as I find more becomes a habit and less a STEEP learning curve.. Loving it!
<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 Matt Delac
</p>
I certainly learned a lot from this one. Although I think I went overboard. Here's how I wrote the code for mine. It was fun to code this. I understood the topics we covered in the lessons a lot more in-depth when writing the code for this Weather App.
<title>Weather app</title><style>
h1{
color: #1A64D6 ;
text-align: center;
margin: 20px -40px 20px auto;
}
.temperature-light{
color: #000000;
font-weight: lighter;
}
.temperature-bold{
color: #000000;
font-weight: bold;
}
ul{
list-style: none;
text-align: center;
}
li{
margin-bottom: 25px;
}
.temperature-light-second{
color: #4C4C4C;
font-weight: lighter;
}
.temperature-bold-second{
color: #4C4C4C;
font-weight: bold;
}
.weather-button{
display: block;
margin: auto;
text-align: center;
color: #000000;
background-color: #ffffff;
border: 1px solid #ffffff;
padding: 30px 120px;
border-radius: 12px;
}
.change-city-button{
display: block;
margin: auto;
text-align: center;
color: #ffffff;
background-color: #1A64D6 ;
padding: 15px 20px;
border: 1px solid #1A64D6;
border-radius: 30px;
}
.weather-button:hover{
cursor: default;
color: #000000;
background-color: #FFFBEF;
}
.change-city-button:hover{
cursor: pointer;
color: #1A64D6;
background-color: #ffffff;
}
.days{
color: #000000;
font-weight: bold;
}
p{
color: #4C4C4C ;
margin: 20px -20px 20px auto;
text-align: center;
font-size: larger;
font-family: monospace;
font-size: larger;
}
</style>
🌤
Currently 21° in South Africa
13° / 23°
</h1>
<ul>
<li>
<button class="weather-button">
<span class="days">🌧Tomorrow</span>
<br/>
<br/>
<span class="temperature-light-second">10°</span>
<span class="temperature-bold-second">/ 22° </span>
</button>
</li>
<li>
<button class="weather-button">
<span class="days">🌥 Saturday</span>
<br/>
<br/>
<span class="temperature-light-second">15°</span>
<span class="temperature-bold-second">/ 17° </span>
</button>
</li>
<li>
<button class="weather-button">
<span class="days">☀️ Sunday</span>
<br/>
<br/>
<span class="temperature-light-second">25°</span>
<span class="temperature-bold-second">/ 28°</span>
</button>
</li>
</ul>
<button class="change-city-button">
Change city
</button>
<p>
Coded by Matlhatse Letsoalo
</p>
</h1>
<ul>
<li>
<button class="weather-button">
<span class="days">🌧Tomorrow</span>
<br/>
<br/>
<span class="temperature-light-second">10°</span>
<span class="temperature-bold-second">/ 22° </span>
</button>
</li>
<li>
<button class="weather-button">
<span class="days">🌥 Saturday</span>
<br/>
<br/>
<span class="temperature-light-second">15°</span>
<span class="temperature-bold-second">/ 17° </span>
</button>
</li>
<li>
<button class="weather-button">
<span class="days">☀️ Sunday</span>
<br/>
<br/>
<span class="temperature-light-second">25°</span>
<span class="temperature-bold-second">/ 28°</span>
</button>
</li>
</ul>
<button class="change-city-button">
Change city
</button>
<p>
Coded by Matlhatse Letsoalo
</p>
hi!
im still on my workshop homework
🌤
Currently 21° in Nigeria
13° / 23°
🌧Tomorrow
10° / 22°
🌥 Saturday
15° / 17°
☀️ Sunday
25° / 28°
Change city
Coded by Mabel Agada E.
Originally I was going to make a div and span of everything, thank god I inspected Matt's code while doing mine because I definitely would've over-engineered 😅 Can't wait for the next lesson!
Shortcut key to open emoji picker on vs code: "windows" + "."
thank you so much for this opportunity matt, although i used span a lot and i couldnt get the pink box hovering i'm grateful for what i learnt thisweek
My weather page did not come out the exact same as Matt's but it looks so good. I think that I coded the emojis incorrectly. Here is my solution.
<style> body { font-size: 20px; display: block; margin: 0 auto; text-align: center; } ``` h1 { color: blue; text-align: center; } h2 { font-weight: normal; } button { color: white; background-color: blue; border: 10px solid blue; border-radius: 60px; display: block; margin: 0 auto; margin-bottom: 50px; transition: all 150ms ease-in-out; } button:hover { cursor: pointer; background: white; color: blue; } p:hover { cursor: pointer; background: bisque; } ``` </style> 🌤Currently 21 ° in Tokyo
13 °/ 23°
** 🌧 Tomorrow **
10 °/ ** 22°**** 🌥 Saturday **
15 °/ 17°** ☀ Sunday **
25 °/ 28°Change city
Coded By Tiara Goodman
where did you get colorful emoji, mine are black!
I ended up with 112 lines but in comparison, my code is a bit repetitive, but it is part of learning!
It was bit challenging as a beginner, but I tried and I'm proud of myself for that
quite challenging but managed after a second attempt
It was a really nice first challenge. There are some optimising opportunities in mine which I will definitely take away.
This was challenging but fun. I enjoyed every bit of it. especially trying to re-create
This one was challenging for me. Especially making the emojis colored was impossible. BTW, The way I did all the homework (the code) didn't match even once🤭 It is a wonderful progress though🙌 Thanks, Matt!
Yoh really struggle with this one I just hope its OKAY
I Enjoyed this first challenge. Got lost for a bit but worked out in the end.
I struggled to add the hovering shadow effect on my first weeks Homework and the emojis gave me a hard time but other than that, I think it was pretty decent.
What a fun project. my original code l failed to put the weather symbols, l didn't even think of using emojis and spent a whole 3 hours!!! Re did it in 30 minutes.
This project was fun! the Emoji stressed me out a bit but once I got that sorted it was quite smooth. Thanks Matt!
Hi, I still cannot get the emoji to work on my code. Can someone please help me understand what I need to do to get my emoji up and running. Thank you!
I had fun with the week 1 homework though I got confused at some point but it still came out well
Week 2 was fun. I think I am getting better
I hope I pass the homework. I struggled with it. I am sure there are a few things I did differently
i struggled with the shading,but i really had fun and it has been a long and exciting week for me.
thank you, I will @CyndyChurilla