so this my third attempt at using api after doing the pokemon api project and i want feedback on what i can do better on
i was getting confused a little on just getting the data in the console but i got it. I was wondering how i could improve make my js more organized and need confirm if my kelvin to f function is correct
also i want to hide my api key how would i go about that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>weather map</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1>Todays weather</h1>
<h4>type in a us zip code</h5>
<input type="number" id='input1' placeholder="type in zip code">
<button type="button" id="search">Search</button>
<div id="info">
<div id="temps"></div>
<div id="feeltemp"></div>
</div>
<script src="script.js"></script>
</body>
</html>
const input1 = document.getElementById("input1");
const button = document.getElementById("search");
const info = document.getElementById("info")
const key = '23862e68da6c3fc6f6001c4e91ae5026';
const temp = document.getElementById("temps");
const feeltemp = document.getElementById("feeltemp");
const f = (input) =>{
return Math.floor((input -273.15) *9/5 + 32);
}
console.log(f(298.706))
const fetchData = async (input1) =>{
const err ="no data";
try{
const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?zip=${input1},us&appid=${key}`);
const data = await res.json();
const { weather, main} = data;
temp.innerHTML = `The Temperature is ${f(main.temp)}f`;
console.log(weather[0]);
console.log(data)
}catch(err){
console.log(err);
}
}
console.log(1+1);
button.addEventListener('click',() =>{
fetchData(input1.value)
});
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#input1, #input2{
width: 5%;
}
button{
width: 5%;
}
#info{
border: 1px solid black;
width: 40%;
}
