♻️ fusion avec le travail de victor (c8b93473) · Commits · Victor Friboulet / instant-weather

css/style.css

+57 −8

Original line number	Diff line number	Diff line
		@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;500&family=Roboto:wght@100&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300&display=swap');


		body{
		@@ -6,7 +6,7 @@ body{
		background-size: cover;
		text-align: center;
		background-color: black;
		font-family: 'Young Serif', sans-serif;
		font-family: 'Heebo', sans-serif;
		border-image: 10px solid black;
		}

		@@ -14,13 +14,13 @@ h1{
		color: aliceblue;
		text-align: center;
		font-size: 500%;
		font-family: 'Young Serif', sans-serif;
		font-family: 'Heebo', sans-serif;
		}

		button{
		margin: 10px;
		font-size: large;
		font-family: 'Young Serif', sans-serif;
		font-family: 'Heebo', sans-serif;
		}


		@@ -39,17 +39,66 @@ button{
		margin-right: auto;
		width: 25%;
		font-size: large;
		margin-top : 30px;
		background-color: rgba(255,255,255,0.7);
		font-weight: bold;
		font-size: x-large;
		min-height: 250px;
		min-width: 300px;
		}

		#villeListe{
		margin-top: 10px;
		margin-right: 5.5%;
		font-size: large;
		font-family: 'Young Serif', sans-serif;
		font-family: 'Heebo', sans-serif;
		}

		#codePostalInput{
		font-size: large;
		font-family: 'Young Serif', sans-serif;
		font-size: medium;
		font-family: 'Heebo', sans-serif;
		width: 11%;

		}

		#nuage{
		color: #2b3a55;
		font-size: 250%;
		}

		#pluie{
		color: #2b3a55;
		font-size: 250%;
		}

		#neige{
		color: #2b3a55;
		font-size: 250%;
		}

		#vent{
		color: #2b3a55;
		font-size: 250%;
		}

		#grele{
		color: #2b3a55;
		max-width: 40px;
		font-size: 250%;
		}

		#soleil{
		color: #ffdd00;
		font-size: 250%;
		}

		#brume{
		color: #2b3a55;
		max-width: 40px;
		font-size: 250%;
		}

		#orage{
		color: #ffeb0a;
		font-size: 250%;
		}

icone/brouillard.png

0 → 100644

+2.13 KiB

Loading image diff...

icone/rain.png

0 → 100644

+980 B

Loading image diff...

index.html

+14 −10

Original line number	Diff line number	Diff line
		@@ -5,10 +5,12 @@
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/style.css" rel="stylesheet">
		<title>Instant Weather</title>
		<script src="https://kit.fontawesome.com/6faa555a95.js" crossorigin="anonymous"></script>
		</head>
		<body id="fond">
		<h1 id="instantWeather">Instant Weather</h1>
		<input type="search" id="codePostalInput" placeholder="Entrez votre code postal" aria-label="code postal"><button id="recherche" >Rechercher</button>

		<br>

		<label>Nombre de jours :</label>
		@@ -24,20 +26,23 @@
		<button id="voirInformations">Voir les informations</button>
		</div>



		<label>Nombre de jours :</label>
		<input id="inputNbJours" type="number" value="1" min="1" max="7"></input>

		<div class="resultat cache" id="resultat">
		<div class="weatherCard" id="weatherCard">
		<p>Ville : <span id="WCVille"></span></p>
		<p>Temps <span id="WCBref"></span></p>
		<div class = "icon">
		<i id ="nuage" class="fa-solid fa-cloud fa-beat cache"></i>
		<i id = "soleil" class="fa-solid fa-sun fa-beat cache"></i>
		<i id = "neige" class="fa-solid fa-snowflake fa-beat cache"></i>
		<i id = "pluie" class="fa-sharp fa-solid fa-cloud-rain fa-beat cache"></i>
		<i id = "vent" class="fa-solid fa-wind fa-beat cache"></i>
		<img src="icone/rain.png" id="grele" class = "cache" alt="icone_pluie">
		<img src="icone/brouillard.png" id = "brume" class="cache" alt="icone_brume">
		<i id = "orage" class="fa-solid fa-bolt fa-beat" ></i>
		</div>
		<p>Température min : <span id="WCTemperatureMin"></span></p>
		<p>Température max : <span id="WCTemperatureMax"></span></p>
		<p>Probabilité de pluie : <span id="WCPluie"></span></p>
		<p>Temps d'ensoleillements : <span id="WCEnsoleillement"></span> heures.</p>
		<p>(valeurs de test)</p>
		<p>Temps d'ensoleillements : <span id="WCEnsoleillement"></span></p>
		</div>
		</div>
		<script src="js/Token.js"></script>
		@@ -45,6 +50,5 @@
		<script src="js/arriere-plan.js"></script>
		<script src ="js/interface.js"></script>


		</body>
		</html>
		No newline at end of file

js/WeatherCard.js

+54 −44

Original line number	Diff line number	Diff line
		// Description: Classe WeatherCard
		class WeatherCard {
		json;
		city;
		forecast;
		ville;
		prevision;
		constructor(CodeInsee) {
		this.CodeInsee = CodeInsee;
		this.json = null;
		this.city = null;
		this.forecast = null;
		this.ville = null;
		this.prevision = null;
		}

		async fetchData(jour) {
		async remplir() {
		try {
		// Utilisez "await" pour attendre la réponse de la requête
		const response = await fetch(
		`https://api.meteo-concept.com/api/forecast/daily/${jour}?token=${Token}&insee=${this.CodeInsee}`
		`https://api.meteo-concept.com/api/forecast/daily?token=${Token}&insee=${this.CodeInsee}`
		);
		if (!response.ok) {
		throw new Error(`Erreur de requête: ${response.status}`);
		@@ -23,46 +23,56 @@ class WeatherCard{
		// Parsez la réponse en JSON
		const data = await response.json();
		this.json = data;
		this.city = data.city;
		this.forecast = data.forecast;

		/**
		this.ville = this.json.city;
		this.prevision = this.json.forecast;
		console.log(this.json);
		console.log(this.city);
		console.log(this.forecast);
		console.log(this.city.name);
		**/
		/*
		console.log(this.ville);
		console.log(this.prevision);
		console.log(this.ville.name);
		*/
		this.getjson();

		} catch (error) {
		console.error("Erreur lors de la récupération des données météo:", error);
		}
		}
		getprevision(jour) {
		let i = 0;
		while (i < 14 && i <= jour) {
		i++;
		}

		return this.prevision[Number(i)];
		console.error("day out of range");
		}
		getjson() {
		return this.json;
		}
		Ville() {
		return this.city["name"];
		return this.ville["name"];
		}
		probarain(){
		return this.forecast.probarain;
		pourcentPluie(jour) {
		return this.getprevision(jour).probarain;
		}
		latitudeVille() {
		return this.city.latitude;
		return this.ville.latitude;
		}
		longitudeVille() {
		return this.city.longitude;
		return this.ville.longitude;
		}
		TempMin(){
		return this.forecast.tmin;
		TempMin(jour) {
		return this.getprevision(jour).tmin;
		}
		TempMax(){
		return this.forecast.tmax;
		TempMax(jour) {
		return this.getprevision(jour).tmax;
		}
		Sunhour(){
		return this.forecast.sun_hours;
		ensoleillement(jour) {
		return this.getprevision(jour).sun_hours;
		}

		determineWeather(){
		let weather=this.forecast.weather;
		meteo(jour) {
		let weather = this.getprevision(jour).weather;
		if (weather < 0) {
		return Error;
		}