SanjaySpatel / weather-application

0 stars 0 forks source link

main.js #3

Open SanjaySpatel opened 1 year ago

SanjaySpatel commented 1 year ago

const api = { key: "584d99454895ef8bc20ffa0e66ed32c0", base: "https://api.openweathermap.org/data/2.5/" }

const searchbox = document.querySelector('.search-box'); searchbox.addEventListener('keypress', setQuery);

function setQuery(evt) { if (evt.keyCode == 13) { getResults(searchbox.value); } }

function getResults (query) { fetch(${api.base}weather?q=${query}&units=metric&APPID=${api.key}) .then(weather => { return weather.json(); }).then(displayResults); }

function displayResults (weather) { let city = document.querySelector('.location .city'); city.innerText = ${weather.name}, ${weather.sys.country};

let now = new Date(); let date = document.querySelector('.location .date'); date.innerText = dateBuilder(now);

let temp = document.querySelector('.current .temp'); temp.innerHTML = ${Math.round(weather.main.temp)}<span>°c</span>;

let weather_el = document.querySelector('.current .weather'); weather_el.innerText = weather.weather[0].main;

let hilow = document.querySelector('.hi-low'); hilow.innerText = ${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c; }

function dateBuilder (d) { let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

let day = days[d.getDay()]; let date = d.getDate(); let month = months[d.getMonth()]; let year = d.getFullYear();

return ${day} ${date} ${month} ${year}; }

AbdrrahimDahmani commented 1 year ago

dude your code will never work this section is for issues that your project has, but your repository is empty. If you are trying to create a project of html css and js you can firstly create a folder in your workspace then create 3 file index.html, styles.css and script.js for example, then you can push your code into github repository. follow some online tutorial the process is simple