zYWWbrW

index.html

<div class="container">
  <h2 id="city"></h2>
  <div class="middle">
  <img src="" alt="icon" id="icon">
    <div class="degrees">
      <h1 id="temp"></h1>
      <span>&#176;</span>
    </div>
    <h3 id="desc"></h3>
  </div>
</div>

script.js

$(document).ready(function()
                  {
  navigator.geolocation.getCurrentPosition(success, error);
  
  function success(pos) {
    var lat = pos.coords.latitude;
    var long = pos.coords.longitude;
    weather(lat, long);
  }
  
  function error () {
    console.log('error');
  }
  function weather(lat, long) {
  var URL = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
$.getJSON(URL, function (data){

  updateDOM(data);
  
});
  
    
    
  }
                  

  function updateDOM(data) {
    var city = data.name;
    var temp = Math.round(data.main.temp);
    var desc = data.weather[0].description;
    var icon = data.weather[0].icon;
    
    $('#city').html(city);
    $('#temp').html(temp);
    $('#desc').html(desc);
    $('#icon').attr('src', icon);
  }
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.css

h1, h2, h3, span {
  margin: 0;
}
h1 {
  font-size: 16rem;
}

h2 {
  font-size: 3rem;
  
}

h3{
  font-size: 1.4rem;
}

span{
  
 font-size: 6rem;
}

.container {
  max-width: 500px;
  height: 100vh;
  border: 1px solid black;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 20% 80%;
  text-align: center;
  padding: 25px 5px;
}

.degrees {
display: grid;
grid-template-columns: auto auto;
justify content: center;
margin-left: 2rem;
}

zywwbrw.markdown

zYWWbrW

A Pen by Frank Martinez on CodePen.

License.