Skip to content

Instantly share code, notes, and snippets.

@achingachris
Created September 22, 2022 20:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
const form = document.querySelector('.section-head form'),
input = document.querySelector('.section-head input'),
msg = document.querySelector('.section-head .msg'),
list = document.querySelector('.city-array .cities'),
apiKey = '4d8fb5b93d4af21d66a2948710284366'
form.addEventListener('submit', (e) => {
e.preventDefault()
let inputValue = input.value
// to add all searched cities to the list. First check if the city is already added, if not, proceed to add one
const listItems = list.querySelectorAll('.city-array .city')
const listItemsArray = Array.from(listItems)
if (listItemsArray.length > 0) {
const filteredArray = listItemsArray.filter((el) => {
let content = ''
if (inputValue.includes(',')) {
if (inputValue.split(',')[1].length > 2) {
inputValue = inputValue.split(',')[0]
content = el
.querySelector('.city-name span')
.textContent.toLowerCase()
} else {
content = el.querySelector('.city-name').dataset.name.toLowerCase()
}
} else {
content = el.querySelector('.city-name span').textContent.toLowerCase()
}
return content == inputValue.toLowerCase()
})
if (filteredArray.length > 0) {
msg.textContent = `${
filteredArray[0].querySelector('.city-name span').textContent
} Weather information Already Added`
input.focus()
return
}
}
// getting weather data
const url = `https://api.openweathermap.org/data/2.5/weather?q=${inputValue}&appid=${apiKey}&units=metric`
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data)
const { main, name, sys, weather } = data
const icon = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${weather[0]['icon']}.svg`
const li = document.createElement('li')
li.classList.add('city')
const innerMarkupResponse = `
<h2 class="city-name" data-name="${name},${sys.country}">
<span>${name}</span>
<sup>${sys.country}</sup>
</h2>
<div class="city-temp">${Math.round(main.temp)}<sup>°C</sup></div>
<div>
<p>minimum and max temp</p>
<span>${main.temp_min}<sup>°C</sup></span> || <span>${
main.temp_max
}<sup>°C</sup></span>
</div>
<figure>
<img class="city-icon" src="${icon}" alt="${
weather[0]['description']
}">
<figcaption>${weather[0]['description']}</figcaption>
</figure>
`
li.innerHTML = innerMarkupResponse
list.appendChild(li)
})
.catch(() => {
msg.textContent = 'Please search for a valid city 😩'
})
msg.textContent = ''
form.reset()
input.focus()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment