Show-the-local-weather

1

So I made my project for this challenge but I am unable to figure out how to properly apply the container_fluid or img-responsive features to allow mobile phone use of the code, which is html and javascript.

This is my pen https://codepen.io/codeslobode/pen/ZagWBa
the HTML is below

<div class="text-center container-fluid">
  <h1> Your Weather Report </h1>
  <h2> by codeslobode </h2>
<ul class="list-unstyled">
  <li class="btn btn-default" id ="city"> </li>
  <li class="btn btn-default" id ="weatherType"> </li>
  <li class="btn btn-default" id="far" > </li>
  <li class="btn btn-default" id="windSpeed"> </li>
</ul>
</div>

Javascript

$(document).ready(function(){
  var long;
  var lat;
  var far;
  var cel;
  var kelvin;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
   long= position.coords.longitude;
   lat= position.coords.latitude;
 //     
     
var api = "https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=cb7c605cd1f3e9c1b7c52e17c612ae60";
      //
$.getJSON(api, function(data){
  //
  var weatherType= data.weather[0].description;
   kelvin = data.main.temp;
  var windSpeed = data.wind.speed;
  var city = data.name;
  var tempSwap=true;
   far=(kelvin*(9/5)-459.67).toFixed(2);
  cel=(kelvin-273).toFixed(2);
console.log(city);
  console.log(weatherType);
  console.log(far);
    console.log(windSpeed);

$("#city").html(city);
$("#weatherType").html(weatherType);
 $("#far").html(far + " &#8457;");
$("#far").click(function(){
  if (tempSwap===false){
        $("#far").html(far +" &#8457;");

    tempSwap=true;
  }
  else{
    $("#far").html(cel + " &#8451;");

    tempSwap=false;
  }
});
  windSpeed= (2.237*(windSpeed)).toFixed(1);
        $("#windSpeed").html(windSpeed + "mph");   
if (far<70){
$('body').css("background-image", 'url(http://78.media.tumblr.com/17e4bf9d1b017da2a0a067763ee1da91/tumblr_nxwc5vz1uF1uetppko3_1280.jpg)')
}
else  if (far>70){
$('body').css("background-image", 'url(http://78.media.tumblr.com/bf4aa3e0fa7f29c22de379425e40beaa/tumblr_oo2u9dAVoB1uetppko1_1280.jpg)')  
}
});
      

});
    
    
  }
});
2

You shouldn’t be using both versions of Bootstrap on the same page. Your code works with version 3.

3

Thanks I took out bootstrap4 but still not mobile code :frowning:

4

setting height to 100% on both body and html and background-size to cover and background-repeat to no-repeat on body might help!

1 Like
5

Thank you very much rachnaban! so far this has been helpful. I applied the settings and it at least let me display the image, header, and the outline of the button to be visible on mobile app but i can’t get the actual code to start. The buttons are blank wont display the city temperature and etc data.

This is the CSS i added to implement your advice. ill keep working on it, but i’m reaching a point where i’m not sure what to do next to display my js data in the css buttons. If someone can spot what in the below css needs changing relative to the above html and javascript(which have not been changed) let me know thanks :smile:

body{
 background-repeat:no-repeat;
    background-position: center center;
    background-image:url("https://78.media.tumblr.com/bf4aa3e0fa7f29c22de379425e40beaa/tumblr_oo2u9dAVoB1uetppko1_1280.jpg");
    color:#FFF;
    min-height:100%;
   width: 100%;
  padding: 0;
  margin: 0;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn {
margin-left:auto;
margin-right:auto;
}
6

Hi @codeslobode, I cannot see the above changes in the codepen link which you had shared previously. Please share the link again

7

Yes i forked it to play around with another version here is that link with the css