harrisonmalone/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="./index.js"></script>
</head>
<body>
  <h1>Weather app 🌻</h1>
  <form>
    <p>Search by city</p>
    <input type="text" name="search" id="search">
    <input type="submit" value="Search">
  </form>
  <div id="weather">
    <!-- weather goes here -->
  </div>
</body>
</html>

## index.js
const renderWeather = () => {
  const { current, location } = JSON.parse(localStorage.getItem("weather"))
  // todos
  // 1. put the data in the weather div
  const div = document.getElementById("weather")
  // .appendChild
  // .innerHTML
  // .prepend
  // .insertAdjacentHTML
  const { precip, temperature, feelslike, weather_icons } = current
  div.insertAdjacentHTML("afterbegin", `
    <h2>Location: ${location.name}</h2>
    <ul>
      <li>Temperature: ${temperature} degrees</li>
      <li>Precipitation: ${precip}%</li>
      <li>Feels like: ${feelslike} degrees</li>
    </ul>
    <img src="${weather_icons[0]}" />
  `)
}

const getWeatherDataCurrentLocation = async () => {
  try {
    const response = await fetch("http://api.weatherstack.com/current?access_key=38dc0a08ba364082a8994237ba2f5d65&query=Melbourne")
    const data = await response.json()
    // todos
    // 1. put the data in local storage
    localStorage.setItem("weather", JSON.stringify(data))
    // 2. call a function which will put the data on the page
    renderWeather()
  } catch(err) {
    console.log(err)
  }
}

const getWeatherData = async (city) => {
  try {
    const response = await fetch(`http://api.weatherstack.com/current?access_key=38dc0a08ba364082a8994237ba2f5d65&query=${city}`)
    const data = await response.json()
    // todos
    // 1. put the data in local storage
    localStorage.setItem("weather", JSON.stringify(data))
    // 2. call a function which will put the data on the page
    renderWeather()
  } catch(err) {
    console.log(err)
  }
}

// select the form
const form = document.querySelector("form")

form.addEventListener("submit", (event) => {
  event.preventDefault()
  const search = event.target[0].value
  getWeatherData(search)
})

if (localStorage.getItem("weather")) {
  renderWeather()
} else {
  getWeatherDataCurrentLocation()
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script defer src="./index.js"></script>
	</head>
	<body>
	<h1>Weather app 🌻</h1>
	<form>
	<p>Search by city</p>
	<input type="text" name="search" id="search">
	<input type="submit" value="Search">
	</form>
	<div id="weather">
	<!-- weather goes here -->
	</div>
	</body>
	</html>
	const renderWeather = () => {
	const { current, location } = JSON.parse(localStorage.getItem("weather"))
	// todos
	// 1. put the data in the weather div
	const div = document.getElementById("weather")
	// .appendChild
	// .innerHTML
	// .prepend
	// .insertAdjacentHTML
	const { precip, temperature, feelslike, weather_icons } = current
	div.insertAdjacentHTML("afterbegin", `
	<h2>Location: ${location.name}</h2>
	<ul>
	<li>Temperature: ${temperature} degrees</li>
	<li>Precipitation: ${precip}%</li>
	<li>Feels like: ${feelslike} degrees</li>
	</ul>
	<img src="${weather_icons[0]}" />
	`)
	}

	const getWeatherDataCurrentLocation = async () => {
	try {
	const response = await fetch("http://api.weatherstack.com/current?access_key=38dc0a08ba364082a8994237ba2f5d65&query=Melbourne")
	const data = await response.json()
	// todos
	// 1. put the data in local storage
	localStorage.setItem("weather", JSON.stringify(data))
	// 2. call a function which will put the data on the page
	renderWeather()
	} catch(err) {
	console.log(err)
	}
	}

	const getWeatherData = async (city) => {
	try {
	const response = await fetch(`http://api.weatherstack.com/current?access_key=38dc0a08ba364082a8994237ba2f5d65&query=${city}`)
	const data = await response.json()
	// todos
	// 1. put the data in local storage
	localStorage.setItem("weather", JSON.stringify(data))
	// 2. call a function which will put the data on the page
	renderWeather()
	} catch(err) {
	console.log(err)
	}
	}

	// select the form
	const form = document.querySelector("form")

	form.addEventListener("submit", (event) => {
	event.preventDefault()
	const search = event.target[0].value
	getWeatherData(search)
	})

	if (localStorage.getItem("weather")) {
	renderWeather()
	} else {
	getWeatherDataCurrentLocation()
	}