Local weather show

Developer
Koku
Size
5,293 Kb
Views
16,192
  1. Local weather show Previews
  2. Local weather show HTML Codes
  3. Local weather show CSS Codes
  4. Local weather show JS Codes

How do I make an local weather show?

What is a local weather show? How do you make a local weather show? This script and codes were developed by Koku on 06 November 2022, Sunday.

Local weather show Previews
IQ Test

Local weather show - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local weather show </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <!--- Instertion of google fonts library --> <link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet" type="text/css"> <!-- Insertion of JQUERY Library--> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"> </script>
</head>
<body> <div class="band"> <img class="city-image", src="https://i.dailymail.co.uk/i/pix/2015/06/25/11/29F4EBB700000578-0-image-a-4_1435227893464.jpg"/><img class="city-image", src="https://i.dailymail.co.uk/i/pix/2015/06/25/12/29F4EC5700000578-3138897-image-a-12_1435230743713.jpg"/><img class="city-image", src="https://i.dailymail.co.uk/i/pix/2015/06/25/12/29F4EC6B00000578-3138897-image-a-8_1435230739154.jpg"/><img class="city-image", src="https://i.dailymail.co.uk/i/pix/2015/06/25/12/29F4EC2300000578-3138897-image-a-13_1435230745743.jpg"/> <div id="city"> City-name </div> </div> <div id="global_weather"> <!-- why layout messes with height auto or not setting it here? --> <!-- Start of date_and_time component--> <div id="date_and_time"> <div id="date"> </div> <div id="time"> </div> </div> <!-- End of date_and_time--> <!-- Start of weather component --> <div id="weather"> <h2> Current weather</h2> <img id ="weather_img" src="#" /> <div id="weather-type"> </div> <!-- start of temperatureandunit component and to break inline display --> <div id="temperatureandunit"> <div style="display:inline"> Temp: </div> <div id="temperature"></div> <div id="temperature_unit">°C</div> </div> <!-- End of the first inline block and temperaureandunit --> <!-- start of minandmax component and Second inline display start --> <div id="minandmax"> <p id="min"> min:</p> <div id="temperature_min">temp_min</div> <p>°C</p> <p id="max"> max:</p> <div id="temperature_max">temp_max</div> <p> °C</p> </div> <!-- End of minandmax component and Second inline display start --> </div> <!-- end of weather component --> </div> <!-- End fo global_weather --> <footer > Built with HTML, CSS, JQUERY & REACT <h3> By K.KUSIAKU </h3> </footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local weather show - Script Codes CSS Codes

body{ background:#232B2B; font-family:'Nova Mono', Monospace; margin:0; padding:0;
}
p{ display:inline;
}
h2, h3{ text-align:center;
}
.band{ position:relative; /*height:200px;*/ font-size:50px; font-family:'Nova Mono', Monospace;
}
#city{ position:absolute; top:20%; left:45%; text-align:center;
}
.city-image{ width:25%; height:auto; /*float:left;*/
}
#date{ margin-top:150px; text-align:center; font-size:30px;
}
#date_and_time{ position:absolute; left:20%; height:390px; float:left;
}
footer{ color:white; padding-top:10px; text-align:center;
}
img { margin:auto; width:100px; heigth:auto;
}
#global_weather{ color:white; position:relative; background-color:rgb(31,117,254); height:400px; margin:0 -8px 0 -8px; padding:auto;
}
#max{ color:black; margin-left:20px;
}
#min{ color:black;
}
#minandmax{ margin-top:50px;
}
#temperature{ display:inline; font-size:20px;
}
#temperature_min{ display:inline;
}
#temperature_max{ display:inline; }
#temperature_unit{ display:inline; font-weight:bold; color:#C32148;
}
#temperatureandunit{ padding-top:30px; text-align:center;
}
#time{ text-align:center; font-size:30px;
}
#weather { position:absolute; right:25%; height:390px;
}
#weather-type{ text-align:center;
}

Local weather show - Script Codes JS Codes

"use strict";
var week = { 1: "Monday", 2: "Tuesday", 3: "Wednesday", 4: "Thursday", 5: "Friday", 6: "Saturday", 0: "Sunday"
};
var months = { 0: "January", 1: "Feburary", 2: "March", 3: "April", 4: "May", 5: "June", 6: "July", 7: "August", 8: "September", 9: "October", 10: "November", 11: "December"
};
function kelvin_to_celcius(kelvin) { return kelvin - 273.15;
}
function kelvin_to_farenheit(kelvin) { return (kelvin - 273.15) * 1.80 + 32.00;
}
var temperature = { "kelvin": "0.00", "degree": "0.00", "farenheit": "0.00", "min": "0.00", "max": "0.00"
};
/* Date variable to be display not updated automaticly currently. Must be fixed using react */
function completeDay() { var currentDate = new Date(); var date = week[currentDate.getUTCDay()] + ', ' + currentDate.getUTCDate() + ' ' + months[currentDate.getUTCMonth()] + ' ' + currentDate.getUTCFullYear(); var current_Date = React.createElement( "div", null, date ); // Date React component ReactDOM.render(current_Date, document.getElementById('date'));
}
setInterval(completeDay, 1000);
/* time React component to show local time of the city
to be well encapsulated according to react tutorial https://facebook.github.io/react/*/
function timeClock() { var time = new Date().toLocaleTimeString(); if (time.match(/\d{2}/) == "00") { time = time.replace(/\d{2}/, "23"); // for 23h } else { time = time.replace(/(\d{2})/, function ($1) { return $1 - 1; }); } /*{new Date().toLocaleTimeString()}*/ var currentLocalTime = React.createElement( "div", null, time ); ReactDOM.render(currentLocalTime, document.getElementById('time'));
}
setInterval(timeClock, 1000);
$(document).ready(function () { $.getJSON("//api.openweathermap.org/data/2.5/weather?id=2643743&appid=96add8018632da1be388fc940ff471e3", function (response) { $("#city").html(response.name); $("#weather_img").attr("src", "http://api.openweathermap.org/img/w/" + response.weather[0].icon + ".png"); $("#weather-type").html(response.weather[0].description); temperature.kelvin = response.main.temp.toPrecision(4); temperature.min = response.main.temp_min.toPrecision(4); temperature.max = response.main.temp_max.toPrecision(4); temperature.degree = kelvin_to_celcius(temperature.kelvin).toPrecision(4); temperature.min = kelvin_to_celcius(temperature.min).toPrecision(4); temperature.max = kelvin_to_celcius(temperature.max).toPrecision(4); temperature.farenheit = kelvin_to_farenheit(temperature.kelvin).toPrecision(4); $("#temperature").html(temperature.degree); $("#temperature_min").html(temperature.min); $("#temperature_max").html(temperature.max); }); //$("#date").html(date); // temp conversion part $("#temperature_unit").click(function () { var unit = $("#temperature_unit").text(); if (unit == "°C") { $("#temperature_unit").html("F"); $("#temperature").html(temperature.farenheit); } if (unit == "F") { $("#temperature_unit").html("°C"); $("#temperature").html(temperature.degree); } }); //document ready end
});
Local weather show - Script Codes
Local weather show - Script Codes
Home Page Home
Developer Koku
Username KKOKU
Uploaded November 06, 2022
Rating 3
Size 5,293 Kb
Views 16,192
Do you need developer help for Local weather show?

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!

Koku (KKOKU) Script Codes
Name
Koku KUSIAKU profile page 2
A Pen by Koku
Slider for stackoverflow
Page responsive
Iframe test
Twitch Channel With JQUERY
Rando quote machine
Twitch.tv channels React static
Example
Campers LeaderBoard
Create amazing Facebook ads 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!