Weather widget

June 24, 2022
Weather widget

CODE
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Weather</title>
	<link rel="stylesheet" href="weathercss.css">
</head>
<body>
	<div class="freespace1" onclick="hideloc()"></div><br>
	<div class="pages">
		<div class="first-page">
			<div class="row">
				<div class="row-text">
					<span id="day"></span><br><br>
					<span id="date"></span><br><br>
					<div class="weatherWidget" onclick="#"></div><br>
					<button id="btn" onclick="chngloc()">Change Location</button>
					<input type="text" id="newloc" autofocus>
					<button id="submit" onclick="newloc()">→</button>
					
				</div>
			</div>
		</div>

	</div>
		

	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		function hideloc(){
		document.getElementById("newloc").style.display = 'none';
		document.getElementById("submit").style.display = 'none';
	}
		function chngloc(){
			document.getElementById("newloc").style.display = 'unset';
			document.getElementById("submit").style.display = 'unset';
		}
		
		// Today's day ---------------------------------------day
		switch (new Date().getDay()) {
  		case 0:
    		day = "Sunday";
    		break;
  		case 1:
    		day = "Monday";
    		break;
  		case 2:
     		day = "Tuesday";
    		break;
  		case 3:
    		day = "Wednesday";
    		break;
  		case 4:
    		day = "Thursday";
    		break;
  		case 5:
    		day = "Friday";
    		break;
  		case 6:
    		day = "Saturday";
		}
		document.getElementById('day').innerHTML = day;

		// Today's date --------------------------------------date
		var d = new Date();
		var date = d.toLocaleString('en-US', {
    day: 'numeric', // numeric, 2-digit
    year: 'numeric', // numeric, 2-digit
    month: 'long', // numeric, 2-digit, long, short, narrow
});
		document.getElementById('date').innerHTML = date;


	
	xyz("India");
   function xyz(loc){
   	window.weatherWidgetConfig =  window.weatherWidgetConfig || [];
   	window.weatherWidgetConfig.push({
       selector:".weatherWidget",
       apiKey:"Q5PU8EYAFUPS794E82VET4ZUS", //Sign up for your personal key
       location:loc, //Enter an address
       unitGroup:"metric", //"us" or "metric"
       forecastDays:8, //how many days forecast to show
       title:loc, //optional title to show in the 
       showTitle:true, 
       showConditions:true
   });


   (function() {
   var d = document, s = d.createElement('script');
   s.src = 'https://www.visualcrossing.com/widgets/forecast-simple/weather-forecast-widget-simple.js';
   s.setAttribute('data-timestamp', +new Date());
   (d.head || d.body).appendChild(s);
   })();


   }

   function newloc(){
			var loc = document.getElementById("newloc").value;
			xyz(loc);
			

		}
</script>
<style>
	body{
	background-image: linear-gradient(to left,#dbe2f5, #c1def0,#b4e8f6,#c1def0,#dbe2f5);
}

.freespace1{
	height: 70px;
}
.pages{
	display: flex;
	align-items: center;
	justify-content: center;
}
.first-page{
	background-color: #4795bb;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 10cm;
	width: 9cm;
	border-radius: 25px;
	color: whitesmoke;
}
.row{
	height: 100%;
	border-radius: 25px;
	background: rgb(56 163 239 / 18%);
}
.row-text{
	padding: 35px;
	font-family: sans-serif;
	text-align: center;
}
#day{
	font-size: 32px;
	font-weight: bold;

}
#date{
	font-size: 20px;
}
#location{
	font-size: 15px;
}
#temp{
	font-size: 100px;
}
#desc{
	font-size: 20px;
}
.weatherWidget{
	opacity: 0.8;
}
#btn{
	width: 100%;
	height: 1cm;
	border: none;
	border-radius: 5px;
	background-color:  #26628a;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: white;
	cursor : pointer;
}
#newloc{
	width: 100%;
	height: 1cm;
	position: relative;
	bottom: 40px;
	display: none;
	border-radius:5px;
	border: none;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: black;
	outline: none;
}
#newloc:active{
	border: none;
}
#submit{
	height: 1cm;
	width: 1cm;
	border-radius: 5px;
	border: grey solid 1px;
	font-size: 23px;
	position: relative;
	bottom: 78.5px;
	left: 3.16cm;
	display: none;
	color: white;
	background-color: #26628a;
	cursor : pointer;
}
#submit:active{
	background-image: linear-gradient(to left, #334558 , #203655,#1b2e52, #0d2149, #0a1e44);
}
</style>
</body>
</html>
[NOTE : IF THE WIDGET IS NOT WORKING, TRY TURNING OFF THE TRACKER BLOCKER OR AD BLOCKER]
Search This Blog

Coderati

Weather widget

Comments

Post a Comment

Popular Posts

Password generator

Glowing Button
