How to work weather without asking location - javascript

i have created weather app, which asks location at all reload " allow or block", when i click block, the weather doesnot work after every reload. the problem is that, i want to change code, i want to work weather without asking allow or block, i want to show it immediately, please help me. thanks.
there is my code
const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");
const notificationElement = document.querySelector(".notification");
// App data
const weather = {};
weather.temperature = {
unit : "celsius"
}
// APP CONSTS AND VARS
const KELVIN = 273;
// API KEY
const key = "82005d27a116c2880c8f0fcb866998a0";
// CHECK IF BROWSER SUPPORTS GEOLOCATION
if('geolocation' in navigator){
navigator.geolocation.getCurrentPosition(setPosition, showError);
}else{
notificationElement.style.display = "block";
notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
}
// SET USER'S POSITION
function setPosition(position){
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
getWeather(latitude, longitude);
}
// SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
function showError(error){
notificationElement.style.display = "block";
notificationElement.innerHTML = `<p> ${error.message} </p>`;
}
// GET WEATHER FROM API PROVIDER
function getWeather(latitude, longitude){
let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
fetch(api)
.then(function(response){
let data = response.json();
return data;
})
.then(function(data){
weather.temperature.value = Math.floor(data.main.temp - KELVIN);
weather.description = data.weather[0].description;
weather.iconId = data.weather[0].icon;
weather.city = data.name;
weather.country = data.sys.country;
})
.then(function(){
displayWeather();
});
}
// DISPLAY WEATHER TO UI
function displayWeather(){
iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
descElement.innerHTML = weather.description;
locationElement.innerHTML = `${weather.city}, ${weather.country}`;
}
// C to F conversion
function celsiusToFahrenheit(temperature){
return (temperature * 9/5) + 32;
}
// WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET
tempElement.addEventListener("click", function(){
if(weather.temperature.value === undefined) return;
if(weather.temperature.unit == "celsius"){
let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
fahrenheit = Math.floor(fahrenheit);
tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
weather.temperature.unit = "fahrenheit";
}else{
tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
weather.temperature.unit = "celsius"
}
});
html
<div class="container">
<div class="app-title">
<p>Weather</p>
</div>
<div class="notification"> </div>
<div class="weather-container">
<div class="weather-icon">
<img src="icons/unknown.png" alt="">
</div>
<div class="temperature-value">
<p>- °<span>C</span></p>
</div>
<div class="temperature-description">
<p> - </p>
</div>
<div class="location">
<p>-</p>
</div>
</div>
</div>

Due to security reasons there is no way around the browser asking the user if he wants to disclose his location if you try doing it with javascript.
You might however want to look into geolocation via IP, which is not as exact (and if the user uses a VPN doesnt work at all), but maybe a way to go for you.
This should you get you started: https://whatismyipaddress.com/geolocation

You can also make a get request to http://ip-api.com/json and use the data from it.

Related

click event listener method is not working on a specific div

I am trying to add an event listener to my "degree section div" but it is not working nor am I getting any errors. I have tried multiple ways of traversing the DOM to reach the "degree-section" div but to no avail.
Any kind of help is welcome and appreciated
Code:
let city = document.querySelector('#city');
let searchbtn = document.querySelector('.search-btn');
let city_name = document.querySelector('.city-name');
let temp = document.querySelector('.temp');
let feels_like = document.querySelector('.feels-like');
let humidity = document.querySelector('.humidity');
let locationIcon = document.querySelector('.weather-icon');
let checkbox = document.getElementById('celcius');
let weather_sec = document.querySelector('.weather-info');
let degree_section = weather_sec.firstElementChild;
let degree_section_span = degree_section.getElementsByTagName('span')[0];
//let wind = document.querySelector('.wind');
async function getUrl(city) {
try {
let theUrl = url + city + '&appid=' + apiKey;
let response = await fetch(theUrl, {
mode: 'cors'
})
let data = await response.json();
//Get data from api and change html content based on the recieved data
let temp_data = data.main.temp
temp.textContent = temp_data;
let feels_like_data = data.main.feels_like;
feels_like.textContent = feels_like_data + "K";
let humidity_data = data.main.humidity;
humidity.textContent = humidity_data;
let {
icon
} = data.weather[0];
locationIcon.innerHTML = `<img src="icons/${icon}.png">`;
//change K to C
degree_section.addEventListener('click', () => {
//logging a message just to check if it is working
console.log("c")
})
} catch (err) {
let error = document.createElement('span')
error.className = "error";
error.textContent = "Location does not exist"
let top_center_div = document.querySelector('.top-center')
top_center_div.appendChild(error)
city_name.textContent = "No city found"
}
}
searchbtn.addEventListener('click', (e) => {
let cityName = city.value;
city_name.textContent = cityName
console.log(cityName)
getUrl(cityName)
})
<body>
<div class="loc-container">
<div class="location">
<h1 class="city-name">City</h1>
<div class="weather-icon"><img src="icons/unknown.png" /></div>
</div>
</div>
<div class="weather-info">
<div class="degree-section">
<h2 class="temp">0.0</h2>
<span>K</span>
</div>
<div class="info-section">
<div class="info-flex">
<h3 class="feels-like">0K</h3>
<h4>Feels Like</h4>
</div>
<div class="info-flex">
<h3 class="humidity">0</h3>
<h4>Humidity</h4>
</div>
<div class="info-flex">
<h3 class="wind">0</h3>
<h4>Wind</h4>
</div>
</div>
</div>
<div class="top-center">
<div class="form">
<input type="text" name="city" id="city" required>
<label for="city" class="label-name"><span class="search-name">Search City...</span></label>
</div>
<!-- <i class="fas fa-search search-btn"></i> -->
<i class="material-icons search-btn" style="font-size: 35px;">search</i>
</div>
<script src="weather.js"></script>
</body>
This is what "data" looks like
{"coord":{"lon":72.8479,"lat":19.0144},"weather":[{"id":711,"main":"Smoke","description":"smoke","icon":"50d"}],"base":"stations","main":{"temp":303.14,"feels_like":303.45,"temp_min":301.09,"temp_max":303.14,"pressure":1014,"humidity":45},"visibility":2500,"wind":{"speed":3.09,"deg":120},"clouds":{"all":20},"dt":1638773692,"sys":{"type":1,"id":9052,"country":"IN","sunrise":1638754125,"sunset":1638793848},"timezone":19800,"id":1275339,"name":"Mumbai","cod":200}
Thank you in advance!
I believe the problem is with
let degree_section_span = degree_section.getElementsByTagName('span')[0];
since it selects the wrong element. Try changing it to
let degree_section_span = weather_sec.querySelector('.check');
and see if it works. You can also change the variable name to something more appropriate, while you're at it.
EDIT:
I think this is what you're trying to do. For the sake of siplicity , I removed everything not related to temp:
let target = weather_sec.querySelector("div.check"),
temp_data = data.main.temp;
temp.textContent = temp_data;
target.addEventListener('click', () => {
cel = parseInt(temp_data) - 273.15;
temp.textContent = cel.toFixed(2);
temp.nextElementSibling.textContent = "C";
});
So after 48hrs of debugging I finally figured out what is wrong. If you see in my HTML I have a div.top-center at the bottom. And due to some dimension issues in my css file the height of div.top-center spanned the entire page so essentially all of my divs were being wrapped inside div.top-center so even if I assigned a click event to my div.degree-section the target was always div.top-center and that is why the click event was not showing the proper output.

How to update JSON query / data after new user input?

I'm creating a weather dashboard that updates every 5 seconds. I would like the user to be able to change the target city, and have the dashboard update with the new data.
Problem is every time they input a new city, the previous data stays and it seems to be looping through all the inputs the user has made so far.
I would like the data to be updated after the user inputs a new city, rather than added. This is my code:
window.onload = function() {
const api_key = "c7eedc2fa8594d69aa6122025212904";
const inputCity = document.getElementById("inputCity");
const getCity = document.querySelector("form");
getCity.addEventListener("submit", e => {
// Prevent the form from submission
e.preventDefault();
var inputVal = inputCity.value;
var api_url = "http://api.weatherapi.com/v1/forecast.json?key=" + api_key + "&q=" + inputVal + "&days=3&aqi=no&alerts=no";
// Get the dataset
function refreshData() {
fetch(api_url).then(response => {
response.json().then(json => {
var dataset = json;
var output = formatResponse(dataset);
})
// Catch error - for example, the user doesn't input a valid city / postcode / country
.catch(error => console.log("not ok")); // TO BE IMPROVED
})
}
refreshData(); // Display the dashboard immediately
setInterval(refreshData, 5000); // And then refresh the dashboard every X milliseconds
});
function formatResponse(dataset) {
console.log(dataset);
// Current temp
var currentTemp = [dataset.current.temp_c];
console.log(currentTemp);
document.getElementById("currentTempDsp").innerHTML = currentTemp + "°";
// Current state icon
var currentIcon = [dataset.current.condition.icon];
console.log(currentIcon);
document.getElementById("iconDsp").src = "http://" + currentIcon;
// Current state text
var currentText = [dataset.current.condition.text];
console.log(currentText[0]);
document.getElementById("currentStateDsp").innerHTML = currentText;
}
}
<form id="getCity" class="search">
<label id="labelCity">Search for a city...</label></br>
<input type="text" id="inputCity" class="inputCity" placeholder="Type city name here...">
<button id="submitCity" type="submit" class="submitCity"><i class="fas fa-search"></i>Submit</button>
</form>
<div class="state">
<h2 id="currentTempDsp"></h2>
<img id="iconDsp"/>
<span id="currentStateDsp"></span>
</div>
</div>
</div>
When you create an interval using setInterval() it continues to execute until the page is reloaded, navigated away from, or explicitly cleared using clearInterval(). Simply setting more intervals will not stop any previous ones from firing.
Use a globally-scoped variable to store the return value of setInterval() - check if it's set in the beginning of your submit event handler and clear it if it is.
A simplified example of how you could get this done:
const locations = [{
temp: 73,
conditions: 'Sunny'
}, {
temp: 22,
conditions: 'Mostly Cloudy'
}];
var currentInterval = null;
const updateTemp = locationData => {
document.querySelector(".number").innerText = locationData.temp;
document.querySelector(".conditions").innerText = locationData.conditions;
console.log(`updated interface with temperature (${locationData.temp}) and conditions (${locationData.conditions}) data`);
}
[...document.querySelectorAll('.add-location')].forEach(button => {
button.addEventListener('click', (e) => {
// clear the interval
if (currentInterval) {
clearInterval(currentInterval);
currentInterval = null;
console.log('cleared currentInterval');
}
updateTemp(locations[parseInt(e.srcElement.dataset.loc)]);
currentInterval = setInterval(function () {
updateTemp(locations[parseInt(e.srcElement.dataset.loc)]);
}, 2500);
});
});
* {
font-family: sans-serif;
}
.temp {
font-size: 2em;
}
.conditions {
font-style: italic;
}
<div class="temp">
<span class="number">--</span>
<span class="deg">°</span>
</div>
<div class="conditions">--</div>
<div>
<button class="add-location" data-loc="0">Add location 0</button>
<button class="add-location" data-loc="1">Add location 1</button>
</div>

Javascript (firebase): how can the firebase database key of a clicked item be obtained?

I have a firebase database structure like this
and I have a loop function
var jobTitle = document.getElementById('jobTitle');
var jobDescription= document.getElementById('jobDescription');
firebase.auth().onAuthStateChanged((user) => {
if (user) {
database = firebase.database();
var ref = database.ref('/Jobs/');
ref.on('value', gotData, errData);
}
})
var jobSnap = {};
function gotData(data) {
var date = Today;
var jobs = data.val();
var keys = Object.keys(jobs);
var container = document.getElementById('pos_1');
var container2 = document.getElementById('jobapp');
for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `
<li class="pos-card" id="pos_1">
<div class="content">
<div class="title new">`+jobs[k].JobTitle+`</div>
<div class="dept">Customer Service</div>
<div class="date">date</div>
<div class="refer">Apply</div>
</div>
<ul class="desc">
<li>`+jobs[k].JobSummary+`</li>
</ul>
</li>
`;
container.innerHTML += newCard;
}
}
function errData(err) {
console.log('Error!');
console.log(err);
}
This is the function that submits the application to the DB under the respective job id.
function newApplication() {
var database = firebase.database();
var applicant_Name = document.getElementById('name').value;
var applicant_Number = document.getElementById('phone').value;
var applicant_email = document.getElementById('email').value;
var AuthorId = firebase.auth().currentUser.uid;
var cover_letter = document.getElementById('cover_letter').value;
var JobId = jobSnap.key;
var postData = {
ApplicantName: applicant_Name,
ApplicantNumber: applicant_Number,
Applicantemail: applicant_email,
Author: AuthorId,
Cover_letter: cover_letter,
};
var newPostKey = firebase.database().ref().child('Applications').push().key;
var updates = {};
updates['/Applications/' + newPostKey] = postData;
updates[ JobId + '/Applications/' + newPostKey] = postData;
return firebase.database().ref().update(updates);
}
that retrieves all entries in the database Jobs node and display them like this
When a user clicks the apply button on a job an application fades in; all the code that retrieves the Jobs and application are in the same html file. What I need to do is find a way to capture the firebase job key of the job that was clicked so that i can save the job application under the respective jobs. I have tried many methods but still no luck how can I implement this?
You'll need to keep track of the key of each item in the HTML. A common way to do that is by injecting it into the id attribute in the HTML:
var newCard = `
<li class="pos-card" id="${k}">
Then you can use the id when the user clicks on an element to find the item in the database.
A more idiomatic way to write your code would be:
function gotData(data) {
var date = Today;
var container = document.getElementById('pos_1');
var container2 = document.getElementById('jobapp');
data.forEach(function(jobSnap) { // loop over all jobs
var key = jobSnap.key;
var job = jobSnap.val();
var newCard = `
<li class="pos-card" id="${key}">
<div class="content">
<div class="title new">${job.JobTitle}</div>
<div class="dept">Customer Service</div>
<div class="date">${date}</div>
<div class="refer">Apply</div>
</div>
<ul class="desc">
<li>${job.JobSummary}</li>
</ul>
</li>
`;
container.innerHTML += newCard;
}
}
If the list is dynammic then you can assign it a unique id and add onclick listener
In your JS function,
Function name(value)
{
}

Javascript / Blockchain.info Websocket API Address Subscription

I am new to bitcoin, Blockchain.info API and javascript, however, i am trying to implement a code that tracks Live Payments notification on a particular bitcoin address. The idea here is... after the user scans the QR image <img src="http://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=12fMma2J15qre9bZPsX3AerdgWd9Poe9ee">, and makes payment to the BTC address, 12fMma2J15qre9bZPsX3AerdgWd9Poe9ee, the Div with ID #websocket will instantly display Live (without refreshing the webpage), the amount of Bitcoins Transaferred to the address, thus switching the initial content of the div from monitoring... to the amount transferred Recieved: 0.003 BTC.
I have written a piece of code ... but i'm not sure what i'm missing. Please Help. Thank you.
The code:
<div class="row">
<div class="col-md-4 ">
<img src="http://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=12fMma2J15qre9bZPsX3AerdgWd9Poe9ee">
<div id="websocket">
Monitoring Transactions ...
</div>
<script>
var btcs = new WebSocket("12fMma2J15qre9bZPsX3AerdgWd9Poe9ee");
btcs.onopen = function() {
btcs.send(JSON.stringify({"op":"addr_sub", "addr":"12fMma2J15qre9bZPsX3AerdgWd9Poe9ee"}));
};
btcs.onmessage = function (onmsg) {
var response = JSON.parse(onmsg.data);
var getOutputs = response.x.out;
var countOuts = getOutputs.length;
for (i=0; i < countOuts; i++){
var outAdd = response.x.out[i].addr;
var address = "12fMma2J15qre9bZPsX3AerdgWd9Poe9ee";
if (outAdd == address){
var amount =response.x.out[i].value;
var calAmount = Amount / 100000000;
document.getElementById("websocket").innerHTML = "Recieved" + calAmount + "BTC";
}
}
};
</script>
</div>
<div class="col-md-8">
<!-- more html stuff goes here -->
</div>
</div>
I don't see anywhere in the code a connection being made to blockchain's api, so I'm guessing this
var btcs = new WebSocket("12fMma2J15qre9bZPsX3AerdgWd9Poe9ee");
should use the api's address instead of the target bitcoin wallet address.
Probably you need to put wss://ws.blockchain.info/inv while starting a new socket at the place of address.
<div class="row">
<div class="col-md-4 ">
<img src="http://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=12fMma2J15qre9bZPsX3AerdgWd9Poe9ee">
<div id="websocket">
Monitoring Transactions ...
</div>
<script>
var btcs = new WebSocket("wss://ws.blockchain.info/inv");
btcs.onopen = function() {
btcs.send(JSON.stringify({"op":"addr_sub", "addr":"12fMma2J15qre9bZPsX3AerdgWd9Poe9ee"}));
};
btcs.onmessage = function (onmsg) {
var response = JSON.parse(onmsg.data);
var getOutputs = response.x.out;
var countOuts = getOutputs.length;
for (i=0; i < countOuts; i++){
var outAdd = response.x.out[i].addr;
var address = "12fMma2J15qre9bZPsX3AerdgWd9Poe9ee";
if (outAdd == address){
var amount =response.x.out[i].value;
var calAmount = Amount / 100000000;
document.getElementById("websocket").innerHTML = "Recieved" + calAmount + "BTC";
}
}
};
</script>
</div>
<div class="col-md-8">
<!-- more html stuff goes here -->
</div>
</div>

how to display name from firebase

I have this part of my code and I am trying to have the user name display from firebase when a user comes to map. but when I run the code it erase all the html and prints 2 lines of code :
5Frederick619
•5Profile-10
essentially erasing all my code
<!--you can-->
<div class="row">
<div class="col-md-12 youcan">
<h4>You can:</h4>
<ul>
<li><span>1</span> Track the location your friends my brother</li>
<li><span>2</span> Track the location your friends my brother</li>
<li><span>3</span> Track the location your friends my brother</li>
<li><span>4</span> Track the location your friends my brother</li>
<script>
var endpoint;
endpoint = new Firebase('https://keepitstreet.firebaseio.com/maps/openmap');
endpoint.on('child_added', function(childSnapshot) {
var uuid = childSnapshot.key()
var point = childSnapshot.val()
var username = childSnapshot.val();
var name = username.name;
document.write('<li><span>5</span>'+ name +'</li>');
})
</script>
</ul>
</div>
</div>
<!--/you can-->
document.write is meant to be used when opening a new window and inserting content into it, so when called on a loaded document, it will clear it. that's why your entire html is being deleted, except for the last thing your writing to the document.
what you need is to add the new item. you could do something like this:
function getPosts() {
var endpoint;
var list = document.querySelector('.youcan ul');
endpoint = new Firebase('https://keepitstreet.firebaseio.com/maps/openmap');
endpoint.on('child_added', function(childSnapshot) {
var uuid = childSnapshot.key()
var point = childSnapshot.val()
var username = childSnapshot.val();
var name = username.name;
appendPosts(name)
})
function appendPosts(name) {
var li = document.createElement('li');
li.textContent = name;
list.appendChild(li);
}
}

Categories

Resources