I have been currently working on a weather app, and I have 2 versions(sort of) One that works with cards, and my most recent attempt, to work as carousel's. Right now I am just trying to get the carousel to work in general. I have tried a few things, and I'm sure I am just overlooking something simple, like perhaps maybe a missing script tag to load it. I have 2 versions inside this one, the one I was trying for myself, and then the one straight from the bootstrap CDN, just to see if it worked. Turns out the one copied directly from there doesn't work, this is what also leads me to believe I am missing something in script. Everything below with the ajax methods is part of my first version, as I am not using it in this instance. I've also tried commenting it out just because, and no luck. Here's what I've got:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Title
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.card:hover
{
-webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
}
.cardHolder
{
padding-left: 15px!important;
padding-right: 15px!important;
/*text-align: center;*/
}
.card {
/*display: inline-block;*/
}
#rowDiv
{
margin: auto;
text-align: center;
width: 60%;
}
#submitWeather
{
height: 40px;
font-size: 15px;
font-weight: bold;
}
/*#h3Center*/
/*{*/
/*text-align: center!important;*/
/*}*/
</style>
</head>
<body>
<div class="jumbotron" style="margin-bottom:0; color: white; background-color: burlywood">
<h2 class="text-center" style="font-size:50px; font-weight:600">
Get Current Weather
</h2>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<h3 class="text-xl-right text-primary" id="h3Center">
Enter city name
</h3>
<span id="error"></span>
</div>
<div class="row form-group form-inline justify-content-center" id="rowDiv">
<input type="text" name="city" id="city" class="form-control" placeholder="City Name">
<button id="submitWeather" class="btn btn-primary">
Search City
</button>
</div>
</div>
<!--<div id="mainCarousel" class="carousel slide" data-ride="carousel">-->
<!--<ol class="carousel-indicators">-->
<!--<li data-target="mainCarousel" data-slide-to="0" class="active"></li>-->
<!--<li data-target="mainCarousel" data-slide-to="1"></li>-->
<!--<li data-target="mainCarousel" data-slide-to="2"></li>-->
<!--</ol>-->
<!--<div class="carousel-inner">-->
<!--<div class="carousel-item active" id="carousel0">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png">-->
<!--</div>-->
<!--<div class="carousel-item" id="carousel1">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png">-->
<!--</div>-->
<!--<div class="carousel-item" id="carousel2">-->
<!--<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png">-->
<!--</div>-->
<!--</div>-->
<!--<a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev">-->
<!--<span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--<span class="sr-only">Previous</span>-->
<!--</a>-->
<!--<a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next">-->
<!--<span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--<span class="sr-only">Next</span>-->
<!--</a>-->
<!--</div>-->
<!---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://puu.sh/Ci994/032784aba7.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://puu.sh/Ci82C/2637fb03aa.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.carousel').carousel();
$(document).ready(function()
{
$('.cardHolder1').toggle();
$('.cardHolder').toggle();
$('#submitWeather').click(function()
{
var city = $("#city").val();
if (city !== '')
{
$.ajax({
url: "http://api.openweathermap.org/data/2.5/forecast?q="
+ city
+ "&units=imperial"
+ "&APPID=3c5c80a5cc759dc7c25ab64c0c9ebadd",
type: "GET",
datatype: "jsonp"
}).done(function(data)
{
console.log(data);
console.log(data.list[0].main.temp);
$('.cardHolder').slideToggle();
$('.cityName').html(city);
$('.tempDiv').html('<h6>Current Temp - ' + data.list[0].main.temp + ' Degrees</h6>');
$('.humDiv').html('<h6>Sky Description - ' + data.list[0].weather[0].description + '</h6>');
$('.lowTemp').html('<h6>Lowest Temp - ' + data.list[0].main.temp_min + '</h6>');
$('.cloudDiv').html(data.list[0].dt_txt);
$('.lowTemp1').html('<h6>Lowest Temp - ' + data.list[8].main.temp_min + '</h6>');
$('.tempDiv1').html('<h6>Current Temp - ' + data.list[8].main.temp + ' Degrees</h6>');
$('.humDiv1').html('<h6>Sky Description - ' + data.list[8].weather[0].description + '</h6>');
$('.cloudDiv1').html(data.list[8].dt_txt);
$('.lowTemp2').html('<h6>Lowest Temp - ' + data.list[16].main.temp_min + '</h6>');
$('.tempDiv2').html('<h6>Current Temp - ' + data.list[16].main.temp + ' Degrees</h6>');
$('.humDiv2').html('<h6>Sky Description - ' + data.list[16].weather[0].description + '</h6>');
$('.cloudDiv2').html(data.list[16].dt_txt);
$('#city').val('');
})
} else
{
$('#error').html('Field can not be empty');
}
})
})
</script>
</body>
</html>
