FreeCodeCamp Project, Weather App

Developer
Twesh Chowdhury
Size
4,000 Kb
Views
40,480
  1. FreeCodeCamp Project, Weather App Previews
  2. FreeCodeCamp Project, Weather App HTML Codes
  3. FreeCodeCamp Project, Weather App CSS Codes
  4. FreeCodeCamp Project, Weather App JS Codes

How do I make an freecodecamp project, weather app?

What is a freecodecamp project, weather app? How do you make a freecodecamp project, weather app? This script and codes were developed by Twesh Chowdhury on 15 June 2022, Wednesday.

FreeCodeCamp Project, Weather App Previews
IQ Test

FreeCodeCamp Project, Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp Project, Weather App</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Lato:300|Open+Sans+Condensed:300" rel="stylesheet">
<main class="box text-center" style="padding-top:50px">
<h2>FreeCodeCamp Weather App</h2>	<h3 class="text-center"> A Mini-Project by Twesh Chowdhury </h3>	<h4> API from Open Weather Map </h4>
<!--	<div class="text-center">	<p class="btn btn-default text-center" id="data"></p>	</div>	-->	<div class="box2 text-center">	<p><br></p>	<p class="city inline thick"></p>	<p class="fTemp btn btn-default inline"></p><br>	<p><br></p>	<p class="capitalize" id="weatherType"> </p>	<p id="windSpeed"> </p>	<p id="weatherIcon"> </p>	</div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp Project, Weather App - Script Codes CSS Codes

body { height: 200px; background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, red, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #FFA17F, #00223E); /* Standard syntax (must be last) */ font-family: 'Lato', sans-serif;
}
.btn { background: linear-gradient(grey, white); font-size: 1.6rem;
}
.inline { display: inline;
}
p.thick { font-weight: bolder; font-style: italic;
}
p.capitalize { text-transform: capitalize;
}
.box2 { width: 100%; height: 100%; border: 2px solid black; background-color: transparent; font-family: 'Lato', sans-serif; font-size: 2rem; margin-bottom: 20px; overflow: hidden; border-bottom: solid 9px yellow;
}
#weatherIcon { width: 50px; height: 50px; border-radius: 10px; border-color: black; border-width: 2px; border-style: solid; margin-left: auto; margin-right: auto;
}
h2 { font-size: 4rem; border-bottom: 4px solid black; padding-top: 50px;
}
.box { width: 100%; padding-left: 100px; padding-right: 100px; margin-top: 100px; overflow: hidden; border-radius: 10px; text-align: left; position: absolute; left: 50%; margin-right: -50%; top: 100px; transform: translate(-50%, -50%); background-color: transparent;
}
.box > ul { list-style-type: none;
}
.box > li { margin-right: 50px;
}

FreeCodeCamp Project, Weather App - Script Codes JS Codes

$(document).ready(function() {	var lat;	var long;	$.getJSON("http://ip-api.com/json", function(data2) {	lat = data2.lat;	long = data2.lon;	console.log("lat: "+lat + "long: "+long);	//create API with geolocation from FreeCodeCamp exercise	var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&appid=d36eee88e882a7a97c95739d9434a91b';	console.log(api);	//JSON call for API from Open Weather	$.getJSON(api, function(data) {	var weatherType = data.weather[0].description;	var kelvin = data.main.temp;	var windSpeed = data.wind.speed;	var city = data.name;	var fTemp = ((kelvin) * (9 / 5) - 459.67).toFixed(1);	var cTemp = ((kelvin) - 273).toFixed(1);	var tempSwap= true;	var iconID = data.weather[0].icon;	console.log(iconID);	$("#api").html("API accessed from: " + api);	$("#data").html("latitude: " + lat + "<br>longitude: " + long);	$(".city").html(city+" |");	$(".fTemp").html(fTemp +'&#8457');	$(".fTemp").click(function(){	if(tempSwap===false){	$(".fTemp").html(+cTemp +'&#8451');	tempSwap=true;	}	else{	$(".fTemp").html(fTemp +'&#8457');	tempSwap=false;	}	})	$("#weatherType").html(weatherType);	windSpeed = (2.237*windSpeed).toFixed(1);	$("#windSpeed").html("Wind Speed is: "+ windSpeed + " mph");	var temp4 = 'http://openweathermap.org/img/w/' + iconID + '.png';	console.log(temp4);	//$(".box3").css('background-image', url('http://openweathermap.org/img/w/' + iconID + '.png'));	$('#weatherIcon').css('background-image', 'url(' + temp4 + ')');	});
});	//$("#data").html("latitude: " + lat + "<br>longitude: " + long);	//console.log(api);	//console.log(api);
});
FreeCodeCamp Project, Weather App - Script Codes
FreeCodeCamp Project, Weather App - Script Codes
Home Page Home
Developer Twesh Chowdhury
Username twesh
Uploaded June 15, 2022
Rating 3
Size 4,000 Kb
Views 40,480
Do you need developer help for FreeCodeCamp Project, Weather App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twesh Chowdhury (twesh) Script Codes
Name
JavaScript Reference
Javascript Calculator
A Pen by Twesh Chowdhury
FreeCodeCamp Project, Quote Bot
Naska Homepage
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!