Browse Source

Crêpes

master
BSP 1 year ago
commit
9f70419b4b
4 changed files with 282 additions and 0 deletions
  1. +44
    -0
      README.md
  2. +18
    -0
      index.html
  3. +219
    -0
      script.js
  4. +1
    -0
      style.css

+ 44
- 0
README.md View File

@ -0,0 +1,44 @@
# On fait des crêpes ?
## Aujourd'hui, j'ai envie de crêpes
> Consignes : à partir du contexte ci-dessous, proposer une retranscription sous la forme d’un algorithme.
**Ingrédients** :
- 375 grammes de farine
- 75 grammes de sucre
- 90 grammes de beurre fondu
- 1 litre de lait
- 2 pincées de sel
- 6 œufs
**Recette de pâte à crêpes** :
- mélanger la farine, le sel et le sucre
- ajouter les œufs
- faire fondre le beurre et l’ajouter à la préparation
- ajouter le lait
- faire cuire les crêpes
**Remarques** :
- sans œufs, pas de crêpes
- sans lait, pas de crêpes
- sans farine, pas de crêpes
- sans sucre, on peut faire des crêpes mais elles seront moins bonnes
- sans beurre, on peut faire des crêpes mais elles seront moins bonnes
- si tous les ingrédients sont réunis, les crêpes seront délicieuses
## Concrètement ?
Tout est dans le fichier `script.js` :
- `const _ordre` : Ordre dans lequel les ingrédients seront traités
- `const _ingredients_recette` : Ingrédients et leur quantité nécessaires à la recette :
- `stop` : si un problème de valeur empêche la réalisation de la recette
- `valeur` : quantité requise
- `unite` : unité de valeur
- `const _ingredients_sous_la_main` : Ingrédients et quantités sous la main pour réaliser (ou pas) la recette
- `const _labels` :
- FR|EN|... : Langue de rédaction des labels
- `clé de la phrase` : `texte rédigé dans la langue associée`
- `const lang` : Langue d'affichage (cf langue des _labels)

+ 18
- 0
index.html View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>On fait des crêpes ?</title>
<link rel="stylesheet" href="style.css" media="all" />
</head>
<body>
<div class="flex-container">
<div id="recette" class="flex-item"><h3>Ingrédients pour la recette :</h3></div>
<div id="ingredients" class="flex-item"><h3>Ingrédients sous la main :</h3></div>
</div>
<pre id="console"></pre>
<script src="script.js"></script>
</body>
</html>

+ 219
- 0
script.js View File

@ -0,0 +1,219 @@
document.addEventListener('DOMContentLoaded', function(){
//~ Ordre dans lequel les ingrédients seront traités
const _ordre = [
'farine', 'sel', 'sucre', 'oeuf', 'beurre', 'lait'
];
//~ Ingrédients et leur quantité nécessaires à la recette
const _ingredients_recette = {
'farine' : {
'stop' : true, //~ si pas la valeur, on arrête ou pas la recette ?
'valeur' : 375, //~ valeur requise
'unite' : 'gramme', //~ unité de valeur
},
'sucre' : {
'stop' : false,
'valeur' : 75,
'unite' : 'gramme',
},
'beurre' : {
'stop' : false,
'valeur' : 90,
'unite' : 'gramme',
},
'lait' : {
'stop' : true,
'valeur' : 1,
'unite' : 'litre',
},
'sel' : {
'stop' : false,
'valeur' : 2,
'unite' : 'pincée',
},
'oeuf' : {
'stop' : true,
'valeur' : 6,
'unite' : 'unité',
},
};
//~ Quantité sous la main des ingrédients nécessaires à la réalisation de la recette
const _ingredients_sous_la_main = {
'farine' : 375,
'sucre' : 75,
'beurre' : 90,
'lait' : 1,
'sel' : 2,
'oeuf' : 6,
};
//~ Si, à terme, on veut gérer du multilingue, Cf lang
const _labels = {
'FR': {
'miam' : 'A table !',
'depart' : 'C\'est parti pour les crêpes !',
'cuisson' : 'On fait cuire les crêpes.',
'trop' : '(Vous en avez mis ## en trop)',
'pas_assez' : '(Il vous en manque ##)',
'pbs_oeuf' : 'Problème de quantité d\'oeufs, pas de crêpes !',
'pbs_lait' : 'Problème de quantité de lait, pas de crêpes !',
'pbs_farine' : 'Problème de quantité de farine, pas de crêpes !',
'pbs_sel' : 'Problème de quantité de sel ! On croise les doigts pour que ce ne soit pas trop beurk !',
'pbs_sucre' : 'Problème de quantité de sucre, ce sera moins bon...',
'pbs_beurre' : 'Problème de quantité de beurre, ce sera moins bon...',
'ajout_farine' : 'On ajoute la farine.',
'ajout_sel' : 'On ajoute le sel.',
'ajout_sucre' : 'On ajoute le sucre.',
'ajout_oeuf' : 'On ajoute les oeufs.',
'ajout_beurre' : 'On fait fondre le beurre et on ajoute ça à la préparation.',
'ajout_lait' : 'On ajoute le lait.',
},
};
//~ Si, à terme, on veut gérer du multilingue, Cf _labels
const lang = 'FR';
/**
* La quantité disponible de l'ingrédient correspond il aux besoins de la recette ?
* @param string ingredient Ingrédient concerné
* @return boolean true: la quantité correspond || false: la quantité ne correspond pas
*/
function verifier_ingredient(ingredient){
if(_ingredients_sous_la_main.hasOwnProperty(ingredient) && _ingredients_recette.hasOwnProperty(ingredient)){
if(_ingredients_sous_la_main[ingredient] === _ingredients_recette[ingredient].valeur){
return true;
}
}
return false;
}
/**
* Un problème de quantité ? On définit le bon texte à retourner (si trop ou pas assez) !
* @param string ingredient Ingrédient concerné
* @return string label à retourner
*/
function retourne_chaine_probleme(ingredient){
let diff = 0;
let chaine = '';
var str = _labels[lang]['pbs_'+ingredient];
if(_ingredients_sous_la_main[ingredient] > _ingredients_recette[ingredient].valeur){
diff = _ingredients_sous_la_main[ingredient] - _ingredients_recette[ingredient].valeur;
chaine = _labels[lang]['trop'];
}else{
diff = _ingredients_recette[ingredient].valeur - _ingredients_sous_la_main[ingredient];
chaine = _labels[lang]['pas_assez'];
}
return str
+ " "
+ chaine.replace(
'##',
diff
+ ' '
+ _ingredients_recette[ingredient].unite
+ (diff > 1 ? 's' : '')
);
}
/**
* Le manque d'ingrédient implique t il la fin de la recette ?
* @param string ingredient Ingrédient concerné
* @return boolean true: fin de recette || false: on continue la recette
*/
function verifier_fin_recette(ingredient){
return _ingredients_recette[ingredient].stop;
}
/**
* Permet de faire des crèpes, ou pas...
* @return boolean Définit la réussite de la recette
*/
function faire_des_crepes(){
//~ Let's go !
log(_labels[lang].depart);
//~ On vérifie tous les ingrédients
let tout_est_ok = _ordre.every(function(ingredient){
//~ La quantité d'un ingrédient ne convient pas
if(!verifier_ingredient(ingredient)){
log(
retourne_chaine_probleme(ingredient)
);
//~ Si l'ingrédient est essentiel, on indique l'arrêt du traitement
return !(verifier_fin_recette(ingredient));
}else{
//~ La quantité correspond à la recette
log(_labels[lang]['ajout_'+ingredient]);
return true;
}
});
//~ Si aucun problème d'ingrédient n'a été détecté, on passe à la cuisson et miam !
if(tout_est_ok){
log(_labels[lang].cuisson);
log(_labels[lang].miam);
return true;
}
return false;
}
/**
* Ajoute une chaine de caractères à la zone de log
* @param string str Chaîne de caractères à afficher
*/
function log(str = ""){
document.querySelector('#console').innerHTML += str+"<br>";
}
/**
* Initialisation : affichage des ingrédients nécessaires à la recette
* et de ceux disponibles dans les placards.
*/
function init(){
//~ Affichage des ingrédients nécessaires à la recette
let str_recette = "<ul>";
for(let x in _ingredients_recette){
str_recette += `<li>`
+ x.charAt(0).toUpperCase() + x.slice(1)
+ ` : `
+ _ingredients_recette[x].valeur
+ ` `
+ _ingredients_recette[x].unite
+ (_ingredients_recette[x].valeur > 1 ? `s` : ``)
+ `</li>`;
}
str_recette += "</ul>";
document.querySelector('#recette').innerHTML += str_recette;
//~ Affichage des ingrédients disponibles dans les placards
let str_ingredients = "<ul>";
for(let x in _ingredients_sous_la_main){
str_ingredients += `<li>`
+ x.charAt(0).toUpperCase() + x.slice(1)
+ ` : `
+ _ingredients_sous_la_main[x]
+ ` `
+ _ingredients_recette[x].unite
+ (_ingredients_sous_la_main[x] > 1 ? `s` : ``)
+ `</li>`;
}
str_ingredients += "</ul>";
document.querySelector('#ingredients').innerHTML += str_ingredients;
}
init();
//~ Let's go !
faire_des_crepes();
});

+ 1
- 0
style.css View File

@ -0,0 +1 @@
.flex-container {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;width: 500px;margin: 0 auto;}.flex-item{font-family: arial, sans-serif;width: 250px;font-size: 14px;}.flex-item ul{padding-left: 25px;}.flex-item:nth-child(1) {-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}.flex-item:nth-child(2) {-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 0 1 auto;-ms-flex: 0 1 auto;flex: 0 1 auto;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}#console{background-color: black;color: white;font-size: 12px ;font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;width: 550px;display: block;padding: 10px;line-height: 130%;white-space: pre-line;margin: 25px auto;}

Loading…
Cancel
Save