freeCodeCamp Intermediate front end develoment proyect.
A Pen by Paulina Fischer on CodePen.
Created
December 27, 2019 11:27
-
-
Save paulinafischer/77d594399366ae4e05a380de0e4a2190 to your computer and use it in GitHub Desktop.
The Local Weather
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Gochi+Hand|Monoton|Prompt|Russo+One|Viga" rel="stylesheet"> | |
| </head> | |
| <div class="jumbotron"> | |
| <video autoplay muted loop poster= "http://wallpapercave.com/wp/TtjLdl8.jpg"> | |
| <source src="http://res.cloudinary.com/dfqxzvppi/video/upload/v1486374128/Northernlights2_HD_converted_ngorea.mp4" type="video/mp4"> | |
| <source src="http://res.cloudinary.com/dfqxzvppi/video/upload/v1487758857/Northernlights2_HD_converted_ior1o3_x2jnpe.ogv" type="video/ogv"> | |
| </video> | |
| <div class="text-container-fluid"> | |
| <h1 class="animated flipInX">The Weather<h1> | |
| <hr> | |
| <p id = "location"></p> | |
| <p id = "weather"></p> | |
| <p id = "temp"></p> | |
| <canvas id="icon" width="128" height="128" ></canvas> | |
| <br> | |
| <button id = "clBtn" type="button" class="btn btn-info animated flipInX"><strong>C°</strong></button> | |
| <button id = "fhBtn" type="button" class="btn btn-info animated flipInX"><strong>F°</strong></button> | |
| <p id = "date"></p> | |
| </div> | |
| </div> | |
| <div class="panel-footer text-center"> <p id ="yo">Created by: Paulina Fischer<br>Powered by: Dark Sky</p><br><p id="ref">Library from | |
| <a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp.</p> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (navigator.geolocation){ | |
| navigator.geolocation.getCurrentPosition(function(position){ | |
| var skycons = new Skycons({"color": "green"}); | |
| var latitude = position.coords.latitude | |
| var longitude = position.coords.longitude | |
| var geolocation = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + '%2C' + longitude + '&language=en'; | |
| var data; | |
| var url = "https://api.darksky.net/forecast/e2cb814dd4e531fadcf785d19ad6aa64/" + latitude + "," + longitude + "?callback=?&units=si"; | |
| $.getJSON(geolocation).done(function(location) { | |
| console.log(location); | |
| var location = location.results[0].address_components[1].long_name + ", " + location.results[0].address_components[3].long_name; | |
| $("#location").html(location); | |
| }) | |
| $.getJSON(url, function(apidata) { | |
| data=apidata | |
| $("#weather").html(data.currently.summary); | |
| $("#temp").html(data.currently.temperature); | |
| $("#icon").addClass(data.currently.icon); | |
| debugger; | |
| skycons.set("icon", data.currently.icon); | |
| skycons.play(); | |
| console.log(data); | |
| }); | |
| $('#fhBtn').click(function() { | |
| var cel = data.currently.temperature; | |
| $("#temp").html(Math.round(cel*1.8+32)); | |
| }); | |
| $('#clBtn').click(function() { | |
| var cel = data.currently.temperature; | |
| $("#temp").html(cel); | |
| }); | |
| var current = $.now(); | |
| var maxDate = new Date(current); | |
| var currenDate = maxDate.toString(); | |
| $("#date").html(currenDate); | |
| }); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> | |
| <script src="https://darkskyapp.github.io/skycons/skycons.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .jumbotron { | |
| position: relative; | |
| background-color:black; | |
| } | |
| .jumbotron video { | |
| width: 100%; | |
| height:auto; | |
| } | |
| .jumbotron .text-container-fluid { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| background: rgba(28,31,39, 0.6) | |
| } | |
| .text-container-fluid{ | |
| width: 100%; | |
| height: auto; | |
| position: absolute; | |
| } | |
| h1{ | |
| font-family: 'Monoton', cursive; | |
| font-size:60px; | |
| width:100%; | |
| color:white; | |
| text-align:center; | |
| top:20%; | |
| position:relative; | |
| } | |
| p{ | |
| font-family: 'Prompt', sans-serif; | |
| font-size:30px; | |
| color:#FDF5E6; | |
| } | |
| #yo{ | |
| font-family: 'Russo One', sans-serif; | |
| font-size:15px; | |
| color:black; | |
| } | |
| #fhBtn,#clBtn { | |
| background-color: rgba(50, 70, 56, 0.4); | |
| border-color: green; | |
| color:green; | |
| text-shadow: 1px 1px #008B8B; | |
| font-size:20px; | |
| } | |
| #temp{ | |
| font-size:60px; | |
| color:#7FFF00; | |
| } | |
| #date{ | |
| font-size:15px; | |
| } | |
| #ref{color:black; | |
| font-size:14px;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment