ValeryC/app.css

## app.css
body {
  font-family: 'Trebuchet MS';
  text-align: center;
  color :#fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5) ;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aquamarine;
  background-position: center;
  background-size: cover;
}

h1 {
  font-size: 3em;
  position: relative;
}

i.wi {
  font-size: 5em;
  line-height: 3em;
}

h2 {
  font-size: 2em;
}

.tooltip {
  opacity :0;
  position: absolute;
  top : 0px;
  left : 10px;
  color: #fff;
  background-color: #222;
  border-radius: 5px;
  padding: 10px;
  font-size: 12px;
  transition: opacity .3s, top .5s;
  right: 0px;
}

h1:hover .tooltip {
  top: -50px;
  opacity: 1;
  right: 0px;
}

## app.js
const weatherIcons = {
  "Rain" : "wi wi-day-rain",
  "Clouds" : "wi wi-day-cloudy",
  "Clear" : "wi wi-day-sunny",
  "Snow" : "wi wi-day-snow",
  "mist" : "wi wi-day-fog",
  "Drizzle" : "wi wi-day-sleet",
}

function capitalize(str){
  return str[0].toUpperCase()+ str.slice(1)
}

async function main(withIP = true){
let ville
//1/ prendre l'adresse IP du pc qui ouvre la page : 'https://api.ipify.org?format=json'
  if(withIP){

const ip = await fetch('https://api.ipify.org?format=json')
  .then(resultat => resultat.json())
  .then(json => json.ip)

ville = await fetch('https://freegeoip.net/json/' + ip)
  .then(resultat=>resultat.json())
  .then(json => json.city)
} else{
  ville = document.querySelector('#ville').textContent
}


const meteo = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${ville}
  &appid=85814619fd1cc40c08b3da31f05df2c1&lang=fr&units=metric`)
  .then(resultat=> resultat.json())
  .then(json => json)

console.log(meteo)
displayWheatherInfos(meteo)
}

function displayWheatherInfos(data){
  const name = data.name
  const temperature = data.main.temp
  const conditions = data.weather[0].main
  const description =data.weather[0].description

  document.querySelector('#ville').textContent = name
  document.querySelector('#temperature').textContent = Math.round(temperature)
  document.querySelector('i.wi').className =weatherIcons[conditions]
  document.querySelector('#conditions').textContent = capitalize(description)
  document.body.className = conditions.toLowerCase()
}

const ville = document.querySelector('#ville')
ville.addEventListener('click', ()=>{
  ville.contentEditable = true
})

ville.addEventListener('keydown', (e) => {
  if(e.keyCode ===13) {
    e.preventDefault()
    ville.contentEditable = false
    main(false)
  }
})

main()

## appmeteo.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>La météo c'est cool !</title>
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
</head>
<body>

  <section id="app">
    <h1>
      <span id="ville"></span>
      <span class="tooltip">Tape another city if you want</span>
    </h1>
 <i class="wi"></i>

    <h2>
      <span id="temperature"></span>°C (<span id="conditions"></span> )
    </h2>


  </section>
<script src="./app.js"></script>
</body>
</html>
	body {
	font-family: 'Trebuchet MS';
	text-align: center;
	color :#fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5) ;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: aquamarine;
	background-position: center;
	background-size: cover;
	}

	h1 {
	font-size: 3em;
	position: relative;
	}

	i.wi {
	font-size: 5em;
	line-height: 3em;
	}

	h2 {
	font-size: 2em;
	}

	.tooltip {
	opacity :0;
	position: absolute;
	top : 0px;
	left : 10px;
	color: #fff;
	background-color: #222;
	border-radius: 5px;
	padding: 10px;
	font-size: 12px;
	transition: opacity .3s, top .5s;
	right: 0px;
	}

	h1:hover .tooltip {
	top: -50px;
	opacity: 1;
	right: 0px;
	}
	const weatherIcons = {
	"Rain" : "wi wi-day-rain",
	"Clouds" : "wi wi-day-cloudy",
	"Clear" : "wi wi-day-sunny",
	"Snow" : "wi wi-day-snow",
	"mist" : "wi wi-day-fog",
	"Drizzle" : "wi wi-day-sleet",
	}

	function capitalize(str){
	return str[0].toUpperCase()+ str.slice(1)
	}

	async function main(withIP = true){
	let ville
	//1/ prendre l'adresse IP du pc qui ouvre la page : 'https://api.ipify.org?format=json'
	if(withIP){

	const ip = await fetch('https://api.ipify.org?format=json')
	.then(resultat => resultat.json())
	.then(json => json.ip)

	ville = await fetch('https://freegeoip.net/json/' + ip)
	.then(resultat=>resultat.json())
	.then(json => json.city)
	} else{
	ville = document.querySelector('#ville').textContent
	}



	const meteo = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${ville}
	&appid=85814619fd1cc40c08b3da31f05df2c1&lang=fr&units=metric`)
	.then(resultat=> resultat.json())
	.then(json => json)

	console.log(meteo)
	displayWheatherInfos(meteo)
	}

	function displayWheatherInfos(data){
	const name = data.name
	const temperature = data.main.temp
	const conditions = data.weather[0].main
	const description =data.weather[0].description

	document.querySelector('#ville').textContent = name
	document.querySelector('#temperature').textContent = Math.round(temperature)
	document.querySelector('i.wi').className =weatherIcons[conditions]
	document.querySelector('#conditions').textContent = capitalize(description)
	document.body.className = conditions.toLowerCase()
	}

	const ville = document.querySelector('#ville')
	ville.addEventListener('click', ()=>{
	ville.contentEditable = true
	})

	ville.addEventListener('keydown', (e) => {
	if(e.keyCode ===13) {
	e.preventDefault()
	ville.contentEditable = false
	main(false)
	}
	})

	main()
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>La météo c'est cool !</title>
	<link rel="stylesheet" href="app.css">
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
	</head>
	<body>

	<section id="app">
	<h1>
	<span id="ville"></span>
	<span class="tooltip">Tape another city if you want</span>
	</h1>
	<i class="wi"></i>

	<h2>
	<span id="temperature"></span>°C (<span id="conditions"></span> )
	</h2>


	</section>
	<script src="./app.js"></script>
	</body>
	</html>