From 545a5d2b380a4bf3fc392c422e95c3a94c10c6e0 Mon Sep 17 00:00:00 2001
From: didier amyot <didier.amyot@gmail.com>
Date: Tue, 24 Oct 2023 09:47:31 -0400
Subject: [PATCH] Added correction for exo 4

---
 exercice_001/exo4.html | 51 ++++++++++++++++++++++++++++++++
 exercice_001/exo4.js   | 67 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 exercice_001/exo4.html
 create mode 100644 exercice_001/exo4.js

diff --git a/exercice_001/exo4.html b/exercice_001/exo4.html
new file mode 100644
index 0000000..fed25e9
--- /dev/null
+++ b/exercice_001/exo4.html
@@ -0,0 +1,51 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>title</title>
+    <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+
+    <div class="columns">
+        <div class="column">
+            <h1 class="title" id="main-title">#main-title</h1>
+        </div>
+    </div>
+
+    <div class="columns">
+        <div class="column">
+            <div id="rect" style="width: 400px; height: 400px; border-color: black; border: solid; background-color: deeppink;">
+                <span>#rect</span>
+            </div>
+
+            <div>
+                <p>Le rectangle possede une aire de : <span id="area">#area</span></p>
+                <p>Le rectangle possede un périmetre de : <span id="perimeter">#perimeter</span></p>
+            </div>
+        </div>
+    </div>
+
+    <div class="columns">
+        <div class="column">
+            <form>
+                <label> Nouvelle hauteur
+                    <input class="input" id="height" min="0" placeholder="#height" type="number">
+                </label>
+                <br>
+
+                <label> Nouvelle largeur
+                    <input class="input" id="width" min="0" placeholder="#width" type="number">
+                </label>
+                <button class="button is-primary" type="button" onclick="changeRectangle()">Changer</button>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script src="exo4.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/exercice_001/exo4.js b/exercice_001/exo4.js
new file mode 100644
index 0000000..cf0b997
--- /dev/null
+++ b/exercice_001/exo4.js
@@ -0,0 +1,67 @@
+document.getElementById("main-title").innerText = "Le Respectable Rectangle";
+
+function isNumber(str) {
+    return str !== "" && !isNaN(str);
+}
+
+function changeHeight() {
+    let inputHeight = document.getElementById("height").value;
+    if(isNumber(inputHeight)){
+        document.getElementById("rect").style.height = inputHeight + 'px';
+    }
+}
+
+function changeWidth() {
+    let inputWidth = document.getElementById("width").value;
+    if(isNumber(inputWidth)){
+        document.getElementById("rect").style.width = inputWidth + 'px';
+    }
+}
+
+function getRectangleWidth() {
+    return document.getElementById("rect").offsetWidth;
+}
+
+function getRectangleHeight() {
+    return document.getElementById("rect").offsetHeight;
+}
+
+function computeArea(width, height) {
+    return width * height;
+}
+
+function computePerimeter(width, height) {
+    return 2 * width + 2 * height;
+}
+
+function setRectangleArea(area) {
+    document.getElementById("area").innerText = area;
+}
+
+function changeArea(){
+    let width = getRectangleWidth();
+    let height = getRectangleHeight();
+    let area = computeArea(width, height);
+    setRectangleArea(area);
+}
+
+function setRectanglePerimeter(perimeter) {
+    document.getElementById("perimeter").innerText = perimeter;
+}
+
+function changePerimeter() {
+    let width = getRectangleWidth();
+    let height = getRectangleHeight();
+    let perimeter = computePerimeter(width, height);
+    setRectanglePerimeter(perimeter);
+}
+
+function changeRectangle(){
+    changeHeight();
+    changeWidth();
+    changeArea();
+
+
+
+    changePerimeter();
+}
\ No newline at end of file