My goal is to incorporate the current geolocation feature into a weather widget that I am developing. At the moment, I can only show data from cities based on an external source. My coding knowledge is quite limited.
I am not a professional in this field, but I am dedicated to teaching myself more about coding.
Despite my efforts, I have been unsuccessful in integrating the geolocation feature so far. The code snippets I've tried have not produced the desired outcome.
I am considering starting from scratch with a new approach, although it feels daunting to learn all the required information.
I found suggestions both here and from OpenWeatherAPI advising me to utilize the following links: https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key> or const api =
https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${apiKey}`
#mode of widget (light)
mode = "dark"
#api Key from OpenWeatherMap API
apiKey = "API key"
#list of city IDs from API database
cityList = "5814616,1835847"
units = "metric;
command: "curl -s 'http://api.openweathermap.org/data/2.5/group?id=#{cityList}&units=#{units}&appid=#{apiKey}'"
#http://api.openweathermap.org/data/2.5/group?id=7046,7049,2008861&units=metric&appid=API Key
refreshFrequency: '15m'
render: (output) -> """
<div id='weather' class='#{mode}'>#{output}</div>
""""
update: (output) ->
weatherData = JSON.parse(output)
console.log(weatherData)
inner = ""
inner += "<div class='weatherBox'>""
for i in [0...weatherData.cnt]
city = weatherData.list[i].name
condition = weatherData.list[i].weather[0].main
temperature = Math.round(weatherData.list[i].main.temp)
rainChance = weatherData.list[i].clouds.all
windSpeed = Math.round(weatherData.list[i].wind.speed * 10) / 10
icon = weatherData.list[i].weather[0].icon
inner += "<div class='city'><div class='leftBox'><img src='clock-weather.widget/icons/weather/#{icon}.svg' alt='#{icon}'></img></div><div class='middleBox'><div class='cityName'>"
inner += city
inner += "</div><div class='condition'>"
inner += condition
inner += "</div><div class='rainChance'>Chance of Rain ""
inner += rainChance
inner += " %</div></div><div class='rightBox'><div class='temperature'>"
inner += temperature
inner += "°</div><div class='wind'>"
inner += windSpeed
inner += " km/h</div></div></div>"
console.log(city + condition + temperature)"
inner += "</div>""
$(weather).html(inner)
style: """"
color: white
font-family: Helvetica Light
font-weight: 400
width: 100%
position: absolute
top: calc(27%)
font-size: 14px
#weather
border-radius: 10px
background-color: rgba(0,0,0,0.45)
width: 300px
height: 70px
position: absolute
top: 0
left 50%
transform: translate(-50%,0)
letter-spacing: 0px
#weather.dark
background-color: rgba(0,0,0,0.0)"
#weather.light
background-color: rgba(0,0,0,0.0)
color: black
#weather.light header
color: rgba(50,50,50,0.8)
#weather.dark header
color: rgba(300,300,300,300.10)
header
padding: 10px 0 10px 0
display: flex
flex-direction: row
position: fixed
top: 0
.weatherBox
overflow-y: scroll
height: 100%
.city
padding: 5px
display: flex
flex-direction: row
//border-top: 1px solid rgba(300,300,300,10)
.city .leftBox
width: auto
padding: 0 15px 0 0
margin-top: 0 5px 0 0
.leftBox img
width: 40px
height: 40px
.city .middleBox
flex-grow: 1
.middleBox .cityName
font-size: 20px
line-height: 5px
font-weight: 500
.middleBox .condition
font-size: 13px
line-height: 20px
margin-top: 10px
.middleBox .rainChance
font-size: 13px
line-height: 15px
.city .rightBox
width: 30%
text-align: right
.rightBox .temperature
font-size: 40px
line-height: 20px
font-weight: 300
.rightBox .wind
font-size: 13px
line-height: 45px
font-weight: 300
text-align: center
"" ""
`