Fake Weather App

I used HTML, CSS, and Javascript, and VS studio code software for this project. The full code I wrote is included below.

Full Code

<!DOCTYPE html>
<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>Document</title>
  </head>
<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
    }

  
    button {
    display: block;
    margin: 20px auto;
    background: #1a64d6;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    padding: 16px 24px;
    border-radius: 30px;
    box-shadow: rgb(37 39 89 / 8%) 0px 8px 8px 0;
    border: 1px solid #1a64d6;
    }

  
    button:hover {
    background: #ffffff;
    color: #1a64d6;
    transition: all 200ms ease;
    cursor: pointer;
    border: 1px solid #1a64d6;
    box-shadow: rgb(37 39 89 / 8%) 0px 8px 8px 0;
    }
    

    h1 {
    color: #1a64d6;
    text-align: center;
    line-height: 48px;
    margin: 0 auto;}
    
  
    h2 {
    font-size: 18px;
    opacity: 0.7;
    text-align: center;
    font-family: monospace;
    font-weight: lighter;}

  
    h3 {
    text-align: center;
    opacity: 100%;
    font-family: Helvetica, Arial, sans-serif;
    }
  
  
    li
    {
    padding: 20px;
    }
  
  
    ul {
    padding-left: 0;
    text-align: center;
    max-width: 400px;
    display: block;
    margin: 0 auto;
    list-style: none
    }

  
    ul :hover {
    text-align: center;
    max-width: 400px;
    background-color: #fffbef;
    border-radius: 13px;
    transition: all 200ms ease-in-out;


    }
.tokyo-percent {
    font-weight: bold;
}
  
  
.top-weather {
    font-size: 34px;
    text-align: center;
}
  
  
.sub-percent {
    text-align: center;
    font-size: 18px;
    opacity: 0.7;
    text-align: center;
    font-family: monospace;
}
  
  
.subbold-percent {
    font-weight: bold;
    opacity: 100%;
}
</style>

  <body><div>
    <h1><span class="icon">🌤</span> <br />
    Currently <span class="degrees">21</span>° in <span class="city">Tokyo</span></h1>
    <div class="top-weather">
<div> 13° / <span><span class="tokyo-percent">23°</span>
    </div></div><br>

   <ul>
    <li><h3>🌧Tomorrow</h3>
    <div class="sub-percent">
          10° / <span class="subbold-percent">22°</span></div></li>

    <li><h3>🌥 Saturday</h3>
    <div class="sub-percent">
          15° / <span class="subbold-percent">17°</span></div></li>

    <li><h3>☀️ Sunday</h3>
    <div class="sub-percent">
          25° / <span class="subbold-percent">28°</span></div></li>
    
</ul>

<button>change city</button>
<h2>Coded by Jenny Matiga</h2>
<script>


let icon = document.querySelector(".icon");
let degrees = document.querySelector(".degrees");
let city = document.querySelector(".city");


function weather() {

let live = prompt("where do you live?");
let temp = prompt("what is the temperature?");

    if (temp > 0 ) {
        icon.innerHTML = "😄";
        degrees.innerHTML = temp;
        city.innerHTML = live;
    } else {
        icon.innerHTML = "☹️";
        degrees.innerHTML = temp;
        city.innerHTML = live;
    }
    
}

let changeCityButton = document.querySelector("button");
changeCityButton.addEventListener("click",weather);



</script>
  </body>
</html>
Previous

Code - The Language of flowers
Next

Craft - KN95 Mask Cover (Under Construction)