DWboutin/conversion.html

## conversion.html
<!DOCTYPE html">
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>Exercice Sommatif 2</title>
  </head>
  <body>
    <script>
      ("use strict");
      // quand des variables ne sont pas dans un "scope" elle seront globale sous l'objet windows
      // sans scope "var myNumber = 1" peut être accessible avec window.myNumber ce qui peut causer des problèmes
      (function () {
        const MONNAIE = "Monnaies";
        const LONGUEURS = "Longueurs";
        const POIDS = "Poids";
        const VOLUMES = "Volumes";
        const liste1Options = {
          "": "Select consersion",
          [MONNAIE]: MONNAIE,
          [LONGUEURS]: LONGUEURS,
          [POIDS]: POIDS,
          [VOLUMES]: VOLUMES,
        };

        // séparer en fonction aussi basique du genre ça te fera prendre de bon réflexes pour coder des tests
        const createContainer = () => {
          const container = document.createElement("div");
          container.setAttribute("class", "container");

          return container;
        };

        const createBox = () => {
          const box = document.createElement("div");
          box.setAttribute("id", "box");

          return box;
        };

        // la logique de création des 2 listes est la même, alors on peut seulement passer le ID car c'est ce qui change
        const createSelectList = (id) => {
          const list = document.createElement("select");
          list.setAttribute("id", id);

          return list;
        };

        const fillListWith = (listElement, valObject) => {
          Object.keys(valObject).forEach((key) => {
            var option = document.createElement("option");
            option.value = key;
            option.innerHTML = valObject[key];
            listElement.appendChild(option);
          });
        };

        const emptyList = (listElement) => {
          while (listElement.length > 0) {
            listElement.remove(0);
          }
        };

        const getOptionValues = (selectedValue) => {
          switch (selectedValue) {
            case MONNAIE:
              return {
                ["USD/EUR"]: "Dollars en Euro (1 USD = 0.87325 EUR)",
                ["EUR/USD"]: "Euro en Dollars (1 EUR = 1.14515 USD)",
                ["USD/CAD"]:
                  "Dollars en Dollars Canadien (1 USD = 1.25124 CAD)",
                ["CAD/USD"]:
                  "Dollars Canadien en Dollars (1 CAD = 0.79921 USD)",
                ["EUR/CAD"]: "Euro en Dollars Canadien (1 EUR = 1.43315 CAD)",
                ["CAD/EUR"]: "Dollars Canadien en Euro (1 CAD = 0.69776 EUR)",
              };
              break;
            case LONGUEURS:
              return {
                ["Inch/cm"]: "Pouces en Centimètres (pouces * 2,54)",
                ["cm/Inch"]: "Centimètres en Pouces (cm / 2,54)",
                ["km/Miles"]: "Kilometre en Miles (km * 0.62137)",
                ["Miles/km"]: "Miles en Kilometres (miles/0.62137)",
              };
              break;
            case POIDS:
              return {
                ["lb/kg"]: "Livres en Kilogrammes (lb/2.2046)",
                ["kg/lb"]: "Kilogrammes en Livres (kg * 2.2046)",
              };
              break;
            case VOLUMES:
              return {
                ["l/gal"]: "Litres en Gallons (gal/0.26417)",
                ["gal/l"]: "Gallons en Litres (L * 0.26417)",
              };
              break;
            default:
              return {};
              break;
          }
        };

        // la logique est contenu dans une fonction à part qui gère toutes les interactions et est beaucoup plus facile à lire
        const init = () => {
          const container = createContainer();
          const box = createBox();
          const list1 = createSelectList("droplist1");
          const list2 = createSelectList("droplist2");

          document.body.appendChild(container);
          container.append(box);
          box.append(list1);
          box.append(list2);

          fillListWith(list1, liste1Options);

          list1.onchange = (e) => {
            const selectedValue = e.target.value;
            const optionValues = getOptionValues(selectedValue);

            emptyList(list2);
            fillListWith(list2, optionValues);
          };
        };

        // appeler la fonction de init() pour qu'elle fasse son travail
        init();
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html">
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<title>Exercice Sommatif 2</title>
	</head>
	<body>
	<script>
	("use strict");
	// quand des variables ne sont pas dans un "scope" elle seront globale sous l'objet windows
	// sans scope "var myNumber = 1" peut être accessible avec window.myNumber ce qui peut causer des problèmes
	(function () {
	const MONNAIE = "Monnaies";
	const LONGUEURS = "Longueurs";
	const POIDS = "Poids";
	const VOLUMES = "Volumes";
	const liste1Options = {
	"": "Select consersion",
	[MONNAIE]: MONNAIE,
	[LONGUEURS]: LONGUEURS,
	[POIDS]: POIDS,
	[VOLUMES]: VOLUMES,
	};

	// séparer en fonction aussi basique du genre ça te fera prendre de bon réflexes pour coder des tests
	const createContainer = () => {
	const container = document.createElement("div");
	container.setAttribute("class", "container");

	return container;
	};

	const createBox = () => {
	const box = document.createElement("div");
	box.setAttribute("id", "box");

	return box;
	};

	// la logique de création des 2 listes est la même, alors on peut seulement passer le ID car c'est ce qui change
	const createSelectList = (id) => {
	const list = document.createElement("select");
	list.setAttribute("id", id);

	return list;
	};

	const fillListWith = (listElement, valObject) => {
	Object.keys(valObject).forEach((key) => {
	var option = document.createElement("option");
	option.value = key;
	option.innerHTML = valObject[key];
	listElement.appendChild(option);
	});
	};

	const emptyList = (listElement) => {
	while (listElement.length > 0) {
	listElement.remove(0);
	}
	};

	const getOptionValues = (selectedValue) => {
	switch (selectedValue) {
	case MONNAIE:
	return {
	["USD/EUR"]: "Dollars en Euro (1 USD = 0.87325 EUR)",
	["EUR/USD"]: "Euro en Dollars (1 EUR = 1.14515 USD)",
	["USD/CAD"]:
	"Dollars en Dollars Canadien (1 USD = 1.25124 CAD)",
	["CAD/USD"]:
	"Dollars Canadien en Dollars (1 CAD = 0.79921 USD)",
	["EUR/CAD"]: "Euro en Dollars Canadien (1 EUR = 1.43315 CAD)",
	["CAD/EUR"]: "Dollars Canadien en Euro (1 CAD = 0.69776 EUR)",
	};
	break;
	case LONGUEURS:
	return {
	["Inch/cm"]: "Pouces en Centimètres (pouces * 2,54)",
	["cm/Inch"]: "Centimètres en Pouces (cm / 2,54)",
	["km/Miles"]: "Kilometre en Miles (km * 0.62137)",
	["Miles/km"]: "Miles en Kilometres (miles/0.62137)",
	};
	break;
	case POIDS:
	return {
	["lb/kg"]: "Livres en Kilogrammes (lb/2.2046)",
	["kg/lb"]: "Kilogrammes en Livres (kg * 2.2046)",
	};
	break;
	case VOLUMES:
	return {
	["l/gal"]: "Litres en Gallons (gal/0.26417)",
	["gal/l"]: "Gallons en Litres (L * 0.26417)",
	};
	break;
	default:
	return {};
	break;
	}
	};

	// la logique est contenu dans une fonction à part qui gère toutes les interactions et est beaucoup plus facile à lire
	const init = () => {
	const container = createContainer();
	const box = createBox();
	const list1 = createSelectList("droplist1");
	const list2 = createSelectList("droplist2");

	document.body.appendChild(container);
	container.append(box);
	box.append(list1);
	box.append(list2);

	fillListWith(list1, liste1Options);

	list1.onchange = (e) => {
	const selectedValue = e.target.value;
	const optionValues = getOptionValues(selectedValue);

	emptyList(list2);
	fillListWith(list2, optionValues);
	};
	};

	// appeler la fonction de init() pour qu'elle fasse son travail
	init();
	})();
	</script>
	</body>
	</html>