0

$(document).ready(function() {
  $("#submitForecast").click(function() {
    return getForecast();
  });
});

function getForecast() {
  var city = $("#city").val();
  var days = $("#days").val();

  if (city != '' && days != '') {

    $.ajax({
      url: 'http://api.openweathermap.org/data/2.5/forecast/daily?q=' + city + "&units=metric" + "&cnt=" + days + "&APPID=c10bb3bd22f90d636baa008b1529ee25",
      type: "GET",
      dataType: "jsonp",
      success: function(data) {
        var table = '';
        var header = '<h2 style="font-weight:bold; font-size:30px; margin-top:20px;">Weather forecast for ' + data.city.name + ', ' + data.city.country + '</h2>'
        for (var i = 0; i < data.list.length; i++) {
          table += "<tr>";
          table += "<td><img src='http://openweathermap.org/img/w/" + data.list[i].weather[0].icon + ".png'></td>";
          table += "<td>" + data.list[i].weather[0].main + "</td>";
          table += "<td>" + data.list[i].weather[0].description + "</td>";
          table += "<td>" + data.list[i].temp.morn + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.night + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.min + "&deg;C</td>";
          table += "<td>" + data.list[i].temp.max + "&deg;C</td>";
          table += "<td>" + data.list[i].pressure + "hpa</td>";
          table += "<td>" + data.list[i].humidity + "%</td>";
          table += "<td>" + data.list[i].speed + "m/s</td>";
          table += "<td>" + data.list[i].deg + "&deg;</td>";
          table += "</tr>";
        }

        $("#forecastWeather").html(table);
        $("#header").html(header);

        $("#city").val('');
        $("#days").val('')
      }
    });

  } else {
    $("#error").html("<div class='alert alert-danger' id='errorCity'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a>City field cannot be empty</div>");
  }
}
body {
    font-family: 'Tangerine', serif;
    background-color: #ffffff;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

#nav_bar {
    margin-bottom: 0px;
    padding: 0;
    background-color: white;
    border: none;
}

.weather {
    color: #4aa1f3 !important;
    font-size: 25px;
    font-weight: 600;
}

#nav_list > li > a {
    color: #4aa1f3 !important;
    font-weight: 500;
}

#logo {
    max-height: 42px;
    margin-right: 8px;
    display: inline-block;
    margin-top: -15px;
}

#headRow {
    background: url(images/bg.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 450px;
    margin-top: 0px;
    margin-left: 0px;
}

#colHeadText1 {
    color: white;
    padding-top: 30px;
    font-size: 45px;
}

#colHeadText2 {
    color: white;
    padding-top: 20px;
    padding-bottom: 30px;
    font-size: 50px;
}

ul#list_item {
    color: white;
    font-size: 35px;
    text-align: center;
}

#cityDiv {
    width: 60%;
    margin: auto;
    text-align: center;
}

input[type='text'] {
    height: 40px;
    font-size: 20px;
}

#submitCity {
    height: 40px;
    font-weight: bold;
}

#errorCity {
    width: 50%;
    margin: auto;
    text-align: center;
}

.footer {
    background-color: #4aa1f3;
    width: 100%;
    height: 80px;
    margin-top: 10px;
    bottom: 0;
}

#showWeather {
    width: 60%;
    margin: auto;
    background-color: #4aa1f3;
    color: white;
    border-radius: 25px;

}

table {
    color: #333333;
    font-family: Helvetical, Arial, sans-serif;
}

th {
    background: #4aa1f3;
    font-weight: bold;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;

}

td {
    background: #FAFAFA;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;

}

#welcome-paragraph {
    font-size: 20px;
    font-weight: normal;
    padding: 12px 25px 40px 25px;
    letter-spacing: 0.5px;
}

#rowDiv {
    margin: auto;
    width: 100%;
    font-size: 18px;
    align-items: center;
    height:50px;
    list-style: none;
    max-width: 1500x;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    justify-content: space-around;
}

#colDesc h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

#colDesc {
    border: 1px solid #e7e7e7;
    margin: 0 auto;
    height: auto;
}

.info-icon {
    text-align: center;
}

.info-icon i {
    font-size: 60px;
    margin-top: 10px;
    color: #4aa1f3;
}

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
    
.logo {
    font-family: "DM Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
  }

  .header {
    height: 50px;
  }
  
  .navbar {
    background-color:rgba(247, 95, 95, 0.897);
    position: fixed;
    width: 100%;
  }
  
  .navbar-container {
    align-items: center;
    height:50px;
    display:flex;
    list-style: none;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
 
  }
  
  a {
    text-decoration: none; 
    color: #252525;
  }
  
  .menu li a {
  }

  .menu > li {
      margin-left: 20px;
      text-decoration: none;
    }
  
  .menu {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    list-style:none;
    text-decoration: none; 
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App - Forecast</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
        <header class="headers">
                <nav class="navbars">
        
                    <div class="navbar-container">
                        <div class="logo">Mike Peavy</div>
                        <ul class="menu">
                            <li><a href="#bio">Bio</a></li>
                            <li><a href="#quiz">Portfolio</a></li>
                            <li><a href="https://github.com/Mike4141" target="_blank"> Github</a></li>
                        </ul>
                    </div>
                </nav>
            </header>

</nav> 

<div class="jumbotron" style="margin-bottom:0px; background-color:#4aa1f3; color:white;">
        <h2 class="text-center" style="font-size:40px; font-weight:600;">Get Weather Forecast</h2>
    </div>
    
    <div class="container" style="height:1350px;">
        <div class="row" >
            <div class="col-md-12" style="margin-bottom:10px;">
                <h3 class="text-center text-primary">Enter City Name</h3>
                <span id="error" class="text-center"></span>
            </div>
            
            <div class="row form-group form-inline" id="cityDiv">
               
                <input type="text" name="city" id="city" class="form-control" placeholder="Enter city name" >
                <input type="text" name="days" id="days" class="form-control" placeholder="Number: Min - 1 & Max - 16" >
                <button id="submitForecast" class="btn btn-primary">Search City</button>
            </div>
    
        </div>
        
        <div class= "change">
        <div class="row" style="margin-top:30px">
            <table class="table table-bordered">
               <div id="header"  class="text-center"></div>
               
                <thead>
                    <tr>
                            <th>Icon</th>
                            <th>Weather</th>
                            <th>Description</th>
                            <th>Morning Temperature</th>
                            <th>Night Temperature</th>
                            <th>Min. Temperature</th>
                            <th>Max. Temperature</th>
                            <th>Pressure</th>
                            <th>Humidity</th>
                            <th>Wind Speed</th>
                            <th>Wind Direction</th>
                    </tr>
                </thead>
                
                <tbody id="forecastWeather">
                    
                </tbody>
                
            </table>
        </div>
        
    </div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="row text-center" style="padding-top:30px;">
                <p style="color:white">Copyright &copy; Weather App</p>
            </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>   
     
<script src="forecast.js"></script>   
      
</body>
</html>

I'm fairly new to web development, and I'm looking for someone experienced to help me with a problem I'm having. I bought a course on Udemy on building a weather app. I want to make changes to it and do what I think would make it look nicer. How would I get my results to display in a row and still look good on desktops? If I need to provide a better description, please let me know if you need more details.

karel
  • 5,489
  • 46
  • 45
  • 50
Mitch Gizelbach
  • 21
  • 3
  • it looks good on mine. Do you mean how to handle too many columns? – Horatiu Jeflea Oct 04 '19 at 08:09
  • Yes basically, I was trying to think of a redesign that will make it look good as a mobile site right now on smaller screens when the results render they stretch longer than the nav, is there a way to make my results look better on smaller screens and not stick out past the nav? – Mitch Gizelbach Oct 04 '19 at 08:13
  • If you are looking for responsiveness, use `media-queries`. – Gosi Oct 04 '19 at 08:17
  • thanks ill add those in, how would i get each column to display next to eachother? – Mitch Gizelbach Oct 04 '19 at 08:25
  • Use Bootstrap's Table Responsive class `.table-responsive` It will neatly add a horizontal scroll for your table and not the entire page. – Gosi Oct 04 '19 at 08:49

2 Answers2

0

This article offers some neat table approaches for mobile views: https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

Always try to do the "responsiveness" with CSS.

Regarding desktop, a horizontal scroll can be used, but it's not every elegant. Try to keep a decent number of columns (maybe have the option to remove/add columns or get more info by clicking an item).

Horatiu Jeflea
  • 7,256
  • 6
  • 38
  • 67
0

If you really want to learn web development, then you should stop using jQuery and Bootstrap and learn the basics of Javascript and CSS first. For one, jQuery is on the way out (even Bootstrap is working on removing it in version 5) and Bootstrap itself promotes a bad, non-semantic coding style.

Don't use inline styles. All CSS belongs in the CSS file.

Don't use IDs, especially for styling. It's ok for identifying elements to hook your JavaScript on (and even then there can be better alternatives).

There are better ways to build HTML rather than just String concatenation. At the very least you should HTML-escape the external values you include in it. Have a look at this answer to a different question for some ideas: Email titles not displaying correctly when '&' is in the title, how to fix in JavaScript?

Finally, don't use JSONP for the API request. With CORS (which openweathermap seems to support) it's redundant and insecure.

RoToRa
  • 37,635
  • 12
  • 69
  • 105