Skip to content

Instantly share code, notes, and snippets.

@matthieua

matthieua/html-css-exercise.html

Last active June 24, 2024 19:12
Show Gist options
  • Save matthieua/7947403b259cf9ecd1b73da0298edfad to your computer and use it in GitHub Desktop.
Save matthieua/7947403b259cf9ecd1b73da0298edfad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html-css-exercise.html
<!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>
@Samiranezar
Copy link

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>

@ONLII
Copy link

ONLII commented Jul 27, 2023 

<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">&#x1F327;Tomorrow</li>
  <p>
    10° / <strong>22°</strong>
  </p>
  <li><h3><class="clear-inside">&#x1F325;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>

@Emi224
Copy link

Emi224 commented Jul 30, 2023

Its my first time coding but it was a nice challenge. I struggled with the shadow displaying over the lists

@Amukelanie
Copy link

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°
Change City

Coded by Amukelani Chauke

@ruthellen69
Copy link

<title>WEEK 1 ASSIGNMENT</title> <style> h1 { color: #4b09f1; text-align: center; font-size: 35px; } p { text-align: center; font-size: 20px; } h2 { text-align: center; font-size: 30px; } h3 { text-align: center; font-size: 25px; padding: 20px; margin-left: 50px; margin-right: 50px; border-radius: 10px; } h4 { text-align: center; font-size: 25px; } h5 { text-align: center; font-size: 25px; } .first { font-weight: normal; } .tomorrow:hover { background-color: #FFFBEF; color: black; padding: 15px 20px; margin: 30px auto; border-radius: 5px; } .saturday:hover { background-color: #FFFBEF; color: black; } .sunday:hover { background-color: #FFFBEF; color: black; } 
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;
}

</style>

🌤
Currently 21° in Tokyo

13°/23°

🌧Tomorrow

10° / 22°

🌥Saturday

15° / 17°

☀️Sunday

25° / 28°

Change city
Coded by Ruth Haye

🌤
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.

@ruthellen69
Copy link

ruthellen69 commented Jul 31, 2023 via email

@Boomer4664
Copy link

Boomer4664 commented Aug 7, 2023 •
edited
Loading

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>

@SaadiyahL
Copy link

SaadiyahL commented Aug 27, 2023 •
edited
Loading

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>

@mabzitababy001
Copy link

hi!
im still on my workshop homework

@mabzitababy001
Copy link

🌤
Currently 21° in Nigeria
13° / 23°
🌧Tomorrow
10° / 22°

🌥 Saturday
15° / 17°

☀️ Sunday
25° / 28°

Change city
Coded by Mabel Agada E.

@ednawy
Copy link

ednawy commented Sep 10, 2023 •
edited
Loading

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!

@nacmsaboori
Copy link

Shortcut key to open emoji picker on vs code: "windows" + "."

@Symplipampam
Copy link

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

@Phephisani97
Copy link

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!

@gislu9
Copy link

gislu9 commented Oct 13, 2023

I ended up with 112 lines but in comparison, my code is a bit repetitive, but it is part of learning!

@Zaemah
Copy link

Zaemah commented Oct 24, 2023

It was bit challenging as a beginner, but I tried and I'm proud of myself for that

@simplysally
Copy link

quite challenging but managed after a second attempt

@dfernando8
Copy link

It was a really nice first challenge. There are some optimising opportunities in mine which I will definitely take away.

@chiogzy
Copy link

chiogzy commented Nov 24, 2023

This was challenging but fun. I enjoyed every bit of it. especially trying to re-create

@Hiwialex
Copy link

Hiwialex commented Dec 11, 2023 •
edited
Loading

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!

@Khosir
Copy link

Khosir commented Jan 12, 2024

Yoh really struggle with this one I just hope its OKAY

@DiamondBl
Copy link

I Enjoyed this first challenge. Got lost for a bit but worked out in the end.

@Monica-Mei
Copy link

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.

@lilianpearl23
Copy link

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.

@Twintinny
Copy link

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!

@noniec
Copy link

noniec commented Feb 22, 2024

I had fun with the week 1 homework though I got confused at some point but it still came out well

@noniec
Copy link

noniec commented Mar 1, 2024

Week 2 was fun. I think I am getting better

@trgdigek
Copy link

trgdigek commented Mar 3, 2024

I hope I pass the homework. I struggled with it. I am sure there are a few things I did differently

@Smoothprudy
Copy link

i struggled with the shading,but i really had fun and it has been a long and exciting week for me.

@YuliiaDemeter
Copy link

This time it was more difficult than always. I will train again after this task. It's really not easy to connect everything. But thanks Matt! It's fun! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment