weather-application/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Weather app | Abhishek Chaudhary</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="style.css">
    <link type="text/css" rel="stylesheet" href="https://bootswatch.com/3/readable/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</head>

<body>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Description</h4>
            </div>
            <div class="modal-body">
                <div id="location">

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--end of modal========================-->

<div class="container-fluid">
    <div class="rows" id="weather-box">
        <div class="text-center text-primary header">Weather App</div>
        <div class="btn-group btn-group-justified">
            <!--               TODO: Remove onclicks-->
            <a href="#" class="btn btn-primary" id="ButtonC" onclick="toCelsius()">Celsius (&#8451;)</a>
            <!--                 <a href="#" class="btn btn-default" id="ButtonF" onclick="toFahrenheit()">Fahrenheit (&#8457;)</a> -->
            <a href="#" class="btn btn-warning btn-lg  btn-block" data-toggle="modal" data-target="#myModal"
               style="max-width:830px; min-width:255px;margin:auto;">Details</a>
        </div>
        <div class="rows">
            <div class="text-center col-md-12">
                <h3>Temperature :&#09;&#09;<span class="" id="temp-main">&#8451;</span></h3>
                <h4 id="weather"></h4><span id=icon><img src="" alt=""></span>
            </div>
            <div class="col-md-6">

                <h4></h4>
            </div>
        </div>
    </div>
</div>

<div class="text-center footer">
    Designed and <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by
    <b>
        <a href="https://abhishekchd.github.io/" target="_blank">
            Abhishek Chaudhary
        </a>
    </b><br/>
</div>
</body>

</html>