Beautiful Weather App

Developer
Kenny Mark
Size
4,447 Kb
Views
20,240
  1. Beautiful Weather App Previews
  2. Beautiful Weather App HTML Codes
  3. Beautiful Weather App CSS Codes
  4. Beautiful Weather App JS Codes

How do I make an beautiful weather app?

An app I was asked to build by the folks at FreeCodeCamp. What is a beautiful weather app? How do you make a beautiful weather app? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Beautiful Weather App Previews
IQ Test

Beautiful Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beautiful Weather App</title> <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="weatherbox"> <center> <form onsubmit="return false;"> <input type="text" class="input" placeholder="Type in the name of your city"/><i class="material-icons search">search</i> <br /> <input type="submit" value="Get Temperature" class="btn"/> </form> </center> <div class="currweather"> <div class="weathericon"> <canvas id="icon1" width="50" height="64"></canvas> </div> <div class="weathertemp"></div> <div class="city"></div> </div> <!-- https://site.uplabs.com/posts/weather-widget-interface-inspiration -->
</div>
<div class="overlay"></div>
<script src ="http://darkskyapp.github.io/skycons/skycons.js""></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Beautiful Weather App - Script Codes CSS Codes

body { background: coral; background-size: cover; overflow-x: hidden; background-position: center;
}
.weatherbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; height: 400px; background: #fff; border-radius: 10px; z-index: 2; opacity: 1;
}
.overlay { height: 100vh; width: 100%; background: white; opacity: .5;
}
input { border: 0; outline: none; font-family: "Muli", sans-serif;
}
input[type="text"] { border-bottom: 2px solid coral; margin-top: 30px; margin-bottom: 20px; width: 70%; font-size: 14px;
}
input[type="submit"] { background: white; border-radius: 20px; border: 2px solid coral; padding: 6px 12px; cursor: pointer; font-size: 17px; transition: all .3s ease-in-out;
}
input[type="submit"]:hover { background: coral; color: white;
}
input[type="submit"]:active { transform: scale(1.1, 1.1);
}
.search { position: relative; font-size: 24px; right: 30px; top: 5px; color: #b3b3b3;
}
.currweather { border: 2px solid coral; width: 200px; height: 200px; margin: 50px auto; border-radius: 50%; font-family: "Varela Round", sans-serif; text-align: center; font-size: 20px;
}
.weathericon { position: absolute; left: 50%; transform: translateX(-50%);
}
#icon1 { color: coral;
}
.weathertemp { font-size: 30px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); color: coral;
}
.city { position: relative; top: 120px; width: 70%; margin: auto; height: 30px; font-size: 15px; color: coral;
}
@media (max-width: 620px) { .weatherbox { width: 300px; } .search { display: none; }
}

Beautiful Weather App - Script Codes JS Codes

// var id = "9c8bc3ae4a2800115a46f9be64eca325";
// $(".input").keydown(function(e) {
// if (e.which == 13) {
// $(".btn").click();
// }
// });
// $(".btn").click(function() {
// var input = $(".input").val();
// var url =
// "http://api.openweathermap.org/data/2.5/weather?q=" +
// input +
// "&units=metric&appid=" +
// id;
// $.ajax({
// type: "GET",
// crossDomain: true,
// dataType: "jsonp",
// url: url,
// success: getWeather
// });
// $(".input").val("");
// });
// function getWeather(city) {
// var tempvalue = $(".weathertemp").val();
// $(".weathertemp").html(city.main.temp + "°C");
// console.log("hi i got");
// $(".city").html(city.name + ", " + city.sys.country);
// }
// function stop() {
// var input = $("input").val();
// if (input.length < 5) {
// $(".search").fadeOut("slow");
// } else {
// $(".btn").on("click");
// $(".search").fadeIn("slow");
// }
// }
// //stop();
// $(".fahbutton").click(function() {
// calcFah();
// });
// function calcFah() {
// var input = $(".currTemp").val();
// var fah = input * 9 / 5 + 32;
// input.html("fah");
// }
// $(function() {
// function geolocation() {
// var navgeo = navigator.geolocation;
// if (navgeo) {
// navgeo.getCurrentPosition(function(p) {
// var lat = p.coords.latitude;
// var lon = p.coords.longitude;
// var API_KEY = "0b8570e06651ffb7c5078b511c6dcbec";
// var url =
// "https://api.darksky.net/forecast/" + API_KEY + "/" + lat + "," + lon;
// console.log(
// " The latitude is " + lat + " whiles the longtitude is = " + lon
// );
// $.ajax({
// type: "GET",
// url: url,
// crossDomain: true,
// dataType: "jsonp",
// success: locationWeather
// });
// });
// } else {
// alert("Allow your location in order to see the weather");
// }
// }
// geolocation();
// });
// function locationWeather(data) {
// //Your Location temperature
// var locTemp = data.currently.temperature;
// //conversion to celsius
// var cel = Math.round((locTemp - 32)* 5/9);
// $('.weathertemp').text( cel + " °C" );;
// console.log(data.timezone);
// showIcon(data);
// }
// function showIcon(data){
// var icon = data.currently.icon,
// iconCaps = icon.toString().toUpperCase().replace(/\-/, '_');
// var skycons = new Skycons({"color": "coral"});
// skycons.add(document.getElementById("icon1"), Skycons.CLEAR_DAY);
// skycons.play();
// console.log(iconCaps)
// }
Beautiful Weather App - Script Codes
Beautiful Weather App - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 4,447 Kb
Views 20,240
Do you need developer help for Beautiful 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!

Kenny Mark (kennymark) Script Codes
Name
Word Editor
Random Quote Machine
FseRec
Modal Thingy
Contact
Get Movie Cast App
Login FSe
Twitter Todo List
E-Commerce
FSE Homepage
Create amazing web content 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!