Exercice n°1 Javascript : Choix tee-shirt

Ajouter un commentaire

Voici un premier exercice pour apprendre le Javascript que l’on nous a donné dans notre formation web design. Il regroupe plusieurs aspects du développement web.

algorithmique
session et timeout
composant html basique

Enoncé de l’exercice

Pour cet exercice, il vous faudra coder la solution suivante, on nous a donné 1h30 pour la réaliser mais vous pouvez prendre davantage de temps le but étant de développer votre logique de création.

Vous devez créer un champ de texte pour le login, qui, si vous tapez votre prénom, vous donne accès à la page suivante. Si vous saisissez le mauvais prénom, vous récoltez un message d’erreur.
Lors de la connexion à la page, une session se met en place. Cette session dure 1 minute, au bout d’une minute, vous devez recharger la page pour continuer à utiliser l’application web.
L’application web en elle-même est une application pour choisir un tee-shirt, vous devez mettre en place un choix pour :
La taille du tee-shirt
Le type de col : évasé, en V ou rond
La couleur du tee-shirt (au moins deux)
Au changement d’une de ces options, l’application devra charger le tee-shirt en question.

Visuel de l’application web

L’application web est disponible à cette adresse, vous pouvez vous en inspirer pour résoudre l’exercice. Bien que chaque ait sa propre manière de coder et d’interprêter un énoncer, ce visuel devrait vous aider.

Le nom à entrer est : Alex

https://www.security-helpzone.com/uploads/2015-May/tee-shirt.html

Correction de l’exerce

Voici le code entier du programme.


<!DOCTYPE html>
<html>
<head>
<title>Exercice javascript numéro 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> 
#idPage { display: none; } 
img { max-width: 100px; max-height: 300px; } 
</style> 
<script type="text/javascript"> 


var timeWait = 60000;
var isLoggedMember = false;
var loggedWindow;
var windowExpire = window.alert; 
var teeshirtColor = "white";
var teeshirtType = "V"; 

var urlNoirEvase = "http://i2.cdscdn.com/pdt2/9/6/3/1/200x200/mp01302963/rw/tshirt-col-evase-noir-zotikos-po.jpg";
var urlNoirRond = "http://solendro.com/media/catalog/product/e/m/emporio-armani-t-shirt-noir-col-rond-aigle-pas-cher-face.jpg";
var urlNoirV = "http://www.leshopparis.com/photos/584/loupe/584_039_1.jpg"; 
var urlBlancEvase = "http://i10.twenga.com/mode/tee-shirt-femme/tee-shirt-col-rond-tp_460635915412258575f.jpg";
var urlBlancRond = "http://www.commeuncamion.com/wp-content/thumbnails/uploads/2014/01/t-shirt-blanc-col-rond-uniqlo1.jpg1-tt-width-590-height-590-fill-1-crop-1-bgcolor-FFFFFF.jpg";
var urlBlancV = "http://static.kiabi.com/images/tee-shirt-jersey-col-v-blanc-homme-au302_1_fr1.jpg"; 

// expiration code 

setTimeout("isExpire()", timeWait); 

function isExpire() { 
	console.log("Checked : expiration"); 
}

// si le membre n'est pas connecté 

if (! isLoggedMember) { 

	// tant que l'utilisateur n'a pas validé sa session 

	while (true) {

		loggedWindow = confirm("Votre session va expirer, relogguez-vous !"); 

		if (loggedWindow) {
			location.reload();
		}
	} 
}

// connection

connect() {

	console.log("Check : connect"); 

	var s = document.getElementById("idUser").value; 

	console.log(s); 

	if (s.toLowerCase() === "alex") {

		isLogged = true;
		document.getElementById("idConnected").innerHTML = "Connecté : " + s;
		document.getElementById("idPage").style.display = "initial";
	}
	else {
		alert("Mauvais nom d'utilisateur !");
	}
} 

// attribuer le type de col pour l'image

imageType(e) { 

	console.log("Check : Image type"); 

	var s = e.options[ e.selectedIndex ].text; 

	teeshirtType = s; 

	imageSet();
} 

// attribuer une couleur à une image

function imageColor(c) {
	console.log("Check : Color"); 

	teeshirtColor = c; 

	imageSet();
} 

// attribuer une nouvelle image suivant les variables chargées

function imageSet() {

	console.log('Check : Set'); 

	if (teeshirtType === "Evasé") {
		if (teeshirtColor === "black") {
			imageUpdate(urlNoirEvase);
		}
		else if (teeshirtColor === "white") {
			imageUpdate(urlBlancEvase);
		}
	}
	else if (teeshirtType === "Rond") {
		if (teeshirtColor === "black") {
			imageUpdate(urlNoirRond);
		}
		else if (teeshirtColor === "white") {
			imageUpdate(urlBlancRond);
		}
	}
	else if (teeshirtType === "V") {
		if (teeshirtColor === "black") {
			imageUpdate(urlNoirV);
		}
		else if (teeshirtColor === "white") {
			imageUpdate(urlBlancV);
		}
	}
} 

// met à jour l'image suivant son id

function imageUpdate(u) {
	console.log('Check : Update'); 

	document.getElementById('idImage').src = u;
} 


</script> 
</head>

<body> 

<!-- Connexion utilisateur --> 

<div id="idConnected">
	<input id="idUser" type="text" name="username" value="Votre nom" /> 
	<button onclick="connect();">Connexion</button>
</div> <p></p> 
	
<!-- Image --> 
	
<div id="idPage"> 

	<img id="idImage" src="" alt="Choisir un tee-shirt de fou !"/> 
	
	<p></p>
	Col :
	<select name="type" onchange="imageType(this);">
		<option>Evasé</option>
		<option>Rond</option>
		<option>V</option>
	</select> 

	<p></p>
	Couleur :
	<input type="radio" name="c" value="white" onclick="imageColor('white');" checked="checked" />Blanc
	<input type="radio" name="c" value="black" onclick="imageColor('black');" checked="unchecked" />Noir 
	
	<p></p>
	Taille : 
	<select name="col">
		<option>Taille S</option>
		<option>Taille XXL</option>
	</select> 

</div> 

</body>
</html>

Laisser un commentaire Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.