Merge pull request #16 from SirSoliloque/mise_en_page_v2 (844489b8) · Commits · Victor Friboulet / instant-weather

css/style.css

+49 −7

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,59 @@ 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;

		}

		#pluie{
		color: #2b3a55;
		}

		#neige{
		color: #2b3a55;
		}

		#vent{
		color: #2b3a55;
		}

		#grele{
		color: #2b3a55;
		max-width: 40px;
		}

		#soleil{
		color: #ffdd00;
		}

		#brume{
		color: #2b3a55;
		max-width: 40px;
		}

		#orage{
		color: #ffeb0a;
		}

icone/brouillard.png

0 → 100644

+2.13 KiB

Loading image diff...

icone/rain.png

0 → 100644

+980 B

Loading image diff...

index.html

+15 −4

Original line number	Diff line number	Diff line
		@@ -5,12 +5,15 @@
		<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>


		<select id="villeListe" class="cache" aria-label="ville">
		<option>--Sélectionner une ville--</option>
		</select>
		@@ -18,19 +21,27 @@
		<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">
		<img src="icone/brouillard.png" id = "brume" class="cache">
		<i id = "orage" class="fa-solid fa-bolt fa-beat" class="cache"></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>
		<script src="js/WeatherCard.js"></script>
		<script src="js/arriere-plan.js"></script>
		<script src ="js/interface.js"></script>

		<img scr = "icone/rain.png" id = "brume">

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

js/arriere-plan.js

+65 −0

Original line number	Diff line number	Diff line
		let titre = document.getElementById("instantWeather")
		let fond = document.getElementById("fond")


		function actualiserArrierePlan(weatherCard){
		let typetemps = weatherCard.determineWeather()//methode Victor
		console.log(typetemps);
		@@ -8,40 +9,104 @@ function actualiserArrierePlan(weatherCard){
		fond.style.background = 'url("../image/theme_clair.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("soleil").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'neige'){
		fond.style.background = 'url("../image/theme_neigeux.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("neige").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'nuage'){
		fond.style.background = 'url("../image/theme_nuageux.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("nuage").style.display = "block"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'pluie'){
		fond.style.background = 'url("../image/theme_pluie.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("pluie").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'vent'){
		fond.style.background = 'url("../image/theme_vent.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("vent").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'brume'){
		fond.style.background = 'url("../image/theme_brume.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("brume").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		else if(typetemps == 'grele'){
		fond.style.background = 'url("../image/theme_grele.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("grele").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("orage").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		}
		else if(typetemps == 'orage'){
		fond.style.background = 'url("../image/theme_orageux.jpg") no-repeat fixed'
		fond.style.backgroundSize = 'cover'
		titre.classList.add('sombre')
		document.getElementById("orage").style.display = "block"
		document.getElementById("nuage").style.display = "none"
		document.getElementById("neige").style.display = "none"
		document.getElementById("soleil").style.display = "none"
		document.getElementById("brume").style.display = "none"
		document.getElementById("vent").style.display = "none"
		document.getElementById("pluie").style.display = "none"
		document.getElementById("grele").style.display = "none"
		}
		}
		No newline at end of file