marcoranieri/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Weather</title>
    <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <!-- TODO: Put your HTML code in here -->
    <h2><code>Livecode</code> - <small><em>sponsored by Kostas</em></small> 😎</h2>

    <form action="#">
      <input type="text" id="address" placeholder="Address here">
      <input type="submit" value="Submit" id="submit-btn">
    </form>

    <div id="card">
      <h2 id="city"></h2>
      <p id="main"></p>
      <p id="temp"></p>
    </div>

    <script src="main.js"></script>
  </body>
</html>

## index.js
// TODO: Write your JS code in here

const sponsoredByKostas = "76580c98285e42b6c92fe7baffecbcf8"

const cityField = document.querySelector("#city")
const mainField = document.querySelector("#main")
const tempField = document.querySelector("#temp")

const handleWeatherApi = (data) => {
  const city = data.name
  const main = data.weather[0].main
  const temp = data.main.temp

  cityField.innerText = city
  mainField.innerText = main
  tempField.innerText = temp
}


const form = document.querySelector("form")
form.addEventListener("submit", (event) => {
  event.preventDefault()
  const address = document.querySelector("#address").value

  const url = `http://api.openweathermap.org/data/2.5/weather?q=${address}&appid=${sponsoredByKostas}`

  fetch(url)
  .then(response => response.json() )
  .then((data) => {
    handleWeatherApi(data)
  })

})

var greet = function greet() {
  console.log("ciao");
};

greet()
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Weather</title>
	<link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<!-- TODO: Put your HTML code in here -->
	<h2><code>Livecode</code> - <small><em>sponsored by Kostas</em></small> 😎</h2>

	<form action="#">
	<input type="text" id="address" placeholder="Address here">
	<input type="submit" value="Submit" id="submit-btn">
	</form>

	<div id="card">
	<h2 id="city"></h2>
	<p id="main"></p>
	<p id="temp"></p>
	</div>

	<script src="main.js"></script>
	</body>
	</html>
	// TODO: Write your JS code in here

	const sponsoredByKostas = "76580c98285e42b6c92fe7baffecbcf8"

	const cityField = document.querySelector("#city")
	const mainField = document.querySelector("#main")
	const tempField = document.querySelector("#temp")

	const handleWeatherApi = (data) => {
	const city = data.name
	const main = data.weather[0].main
	const temp = data.main.temp

	cityField.innerText = city
	mainField.innerText = main
	tempField.innerText = temp
	}


	const form = document.querySelector("form")
	form.addEventListener("submit", (event) => {
	event.preventDefault()
	const address = document.querySelector("#address").value

	const url = `http://api.openweathermap.org/data/2.5/weather?q=${address}&appid=${sponsoredByKostas}`

	fetch(url)
	.then(response => response.json() )
	.then((data) => {
	handleWeatherApi(data)
	})

	})

	var greet = function greet() {
	console.log("ciao");
	};

	greet()