add some style

.gitignore

@@ -1 +1,2 @@
 .idea
+.DS_Store

README.md

@@ -8,13 +8,11 @@ Les opérations possibles par la calculette sont l’addition, la soustraction,
 
 Un seul formulaire est requis pour faire cet exercice, mais il doit proposer autant de boutons de soumission qu’il y d’opérations possibles.
 
-Dans le cas où c’est la puissance qui est choisie, la deuxième valeur doit être un entier.
-
 Dans le cas où c’est la division qui est choisie, le diviseur ne peut pas être nul.
 
 Si l’utilisateur enfreint ces conditions, il faut l’en informer mais préserver les valeurs entrées dans le formulaire.
 
 Le programme côté serveur réalise l’opération demandée et affiche dans un paragraphe, sous la forme d’une phrase, le résultat précédé du calcul. Par exemple : *5 multiplié par 2.5 vaut 12.5*
 
-D’un point de vue technique, cet exercice est une occasion d’utiliser la structure de contrôle [switch](https://www.php.net/manual/fr/control-structures.switch.php).
+D’un point de vue technique, cet exercice est une occasion d’utiliser la structure de contrôle [switch](https://www.php.net/manual/fr/control-structures.switch.php) voire, en PHP8, d’adopter [match](https://www.php.net/manual/fr/control-structures.match.php).
 

index.php

@@ -1,41 +1,48 @@
 <!-- Données et choix du code à exécuter -->
 <?php
-$message = '';
-$result = null;
-$nbr1 = $nbr2 = 0;
-$operations = ['add' => '+', 'mult' => '*', 'sub' => '-', 'div' => '/', 'pow' => '**', 'mod' => '%'];
-if (isset($_GET['nbr1'], $_GET['nbr2'], $_GET['operation'])) {
-    if (array_key_exists($_GET['operation'], $operations)) {
-        $operation = $_GET['operation'];
-        if (is_numeric($_GET['nbr1']) && is_numeric($_GET['nbr2'])) {
-            //C’est ici qu’on fait le calcul car tout va bien
-            $nbr1 = (float) $_GET['nbr1'];
-            $nbr2 = (float) $_GET['nbr2'];
-            if (!$nbr2 && match ($operation) {
-                    'div', 'mod' => true,
-                    'add', 'sub', 'mult', 'pow' => false
-                }) {
-                $message = 'Diviser par 0 est une opération qui ne peut pas être réalisée';
-            } else {
-                $result = match ($operation) {
-                    'add' => $nbr1 + $nbr2,
-                    'mult' => $nbr1 * $nbr2,
-                    'sub' => $nbr1 - $nbr2,
-                    'div' => $nbr1 / $nbr2,
-                    'mod' => $nbr1 % $nbr2,
-                    'pow' => $nbr1 ** $nbr2
-                };
-            }
+function validated()
+{
+    $operations = ['add' => '+', 'mult' => '*', 'sub' => '-', 'div' => '/', 'pow' => '**', 'mod' => '%'];
+    if (!array_key_exists($_GET['operation'], $operations)) {
+        return ['error' => 'L’operation demandée n’est pas encore prévue par notre système.'];
+    }
+    if (!is_numeric($_GET['nbr1']) && !is_numeric($_GET['nbr2'])) {
+        return ['error' => 'Aucun des nombres fournis n’est valide.'];
+    }
+    if (!is_numeric($_GET['nbr1'])) {
+        return ['error' => 'Le premier nombre n’est pas un nombre valide.'];
+    }
+    if (!is_numeric($_GET['nbr2'])) {
+        return ['error' => 'Le second nombre n’est pas un nombre valide.'];
+    }
+    if ((float)$_GET['nbr2'] === 0.0 && ($_GET['operation'] === 'div' || $_GET['operation'] === 'mod')) {
+        return ['error' => 'Diviser par 0 est une opération qui ne peut pas être réalisée.'];
+    }
+    $nbr1 = (float)$_GET['nbr1'];
+    $nbr2 = (float)$_GET['nbr2'];
+    $operation = $_GET['operation'];
+    return compact('nbr1', 'nbr2', 'operation');
+}
+
 
-        } elseif (!is_numeric($_GET['nbr1']) && !is_numeric($_GET['nbr2'])) {
-            $message = 'Aucun des nombres fourni n’est valide';
-        } elseif (!is_numeric($_GET['nbr2'])) {
-            $message = 'Le second nombre n’est pas un nombre valide.';
-        } else {
-            $message = 'Le premier nombre n’est pas un nombre valide.';
-        }
-    } else {
-        $message = 'L’operation demandée n’est pas encore prévue par notre système.';
+function getResultMessage($nbr1, $nbr2, $operation): string
+{
+    return match ($operation) {
+        'add' => "Additionner ${nbr1} à ${nbr2} vaut ".($nbr1 + $nbr2),
+        'sub' => "Soustraire ${nbr2} de ${nbr1} vaut ".($nbr1 - $nbr2),
+        'mult' => "Multiplier ${nbr1} par ${nbr2} vaut ".($nbr1 * $nbr2),
+        'div' => "Diviser ${nbr1} par ${nbr2} vaut ".($nbr1 / $nbr2),
+        'mod' => "Le reste de la division de ${nbr1} par ${nbr2} vaut ".fmod($nbr1, $nbr2),
+        'pow' => "${nbr1} exposant ${nbr2} vaut ".($nbr1 ** $nbr2)
+    };
+}
+
+
+if (isset($_GET['nbr1'], $_GET['nbr2'], $_GET['operation'])) {
+    $old = $_GET;
+    $data = validated();
+    if (!isset($data['error'])) {
+        $resultMessage = getResultMessage($data['nbr1'], $data['nbr2'], $data['operation']);
     }
 }
 ?>
@@ -47,32 +54,47 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
     <title>Calcule-moi ça !</title>
 </head>
 <body>
-<h1>Super calculette à cinq opérations</h1>
+<h1>Calcule-moi ça !</h1>
 <!-- Le résultat - conditionnel -->
-<?php if (!$message && !is_null($result)): ?>
-    <section>
+<?php
+if (isset($resultMessage)): ?>
+    <section class="result">
         <h2>Résultat de votre calcul</h2>
-        <p><?= $nbr1 ?> <?= $operations[$operation] ?> <?= $nbr2 ?> = <?= $result ?></p>
+        <p class="calc"><?= $resultMessage ?></p>
     </section>
-<?php elseif ($message && is_null($result)): ?>
-    <section>
+<?php
+elseif (isset($data['error'])): ?>
+    <section class="error">
         <h2>Il y a un problème avec vos données</h2>
-        <p><?= $message ?></p>
+        <p><?= $data['error'] ?></p>
     </section>
-<?php endif; ?>
+<?php
+endif; ?>
+
+<!-- Le formulaire, s’affiche tout le temps -->
 <form action="<?= $_SERVER['PHP_SELF'] ?>">
     <fieldset>
         <legend>Entrez les nombres</legend>
         <div>
             <label for="nbr1">Premier nombre</label>
-            <input type="text" id="nbr1" value="<?= $nbr1 ?>" name="nbr1" placeholder="4 ou 4.3 par exemple">
+            <input type="text"
+                   id="nbr1"
+                   value="<?= $old['nbr1'] ?? 0 ?>"
+                   name="nbr1"
+                   placeholder="4 ou 4.3 par exemple"
+                   autofocus>
         </div>
         <div>
             <label for="nbr2">Second nombre</label>
-            <input type="text" id="nbr2" value="<?= $nbr2 ?>" name="nbr2" placeholder="4 ou 4.3 par exemple">
+            <input type="text"
+                   id="nbr2"
+                   value="<?= $old['nbr2'] ?? 0 ?>"
+                   name="nbr2"
+                   placeholder="4 ou 4.3 par exemple">
         </div>
     </fieldset>
     <fieldset>
@@ -82,7 +104,7 @@
         <button type="submit" name="operation" value="mult">*</button>
         <button type="submit" name="operation" value="div">/</button>
         <button type="submit" name="operation" value="mod">%</button>
-        <button type="submit" name="operation" value="pow">^</button>
+        <button type="submit" name="operation" value="pow">**</button>
     </fieldset>
 </form>
 </body>

styles.css

@@ -0,0 +1,77 @@
+@font-face {
+    font-family: 'pacificoregular';
+    src: url('pacifico-webfont.woff2') format('woff2'),
+    url('pacifico-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+body {
+    font-family: "Avenir Next", "Avenir", "Verdana", sans-serif;
+    font-size: 1.5em;
+    width: 60ch;
+    margin: 1em auto;
+}
+
+h1 {
+    font-family: pacificoregular, cursive;
+    text-align: center;
+    color: lightskyblue;
+    text-shadow: hsla(0, 100%, 0%, .1) 0 0 5px;
+}
+
+fieldset {
+    margin-bottom: 1em;
+    border: 1px solid lightgray;
+}
+
+fieldset + fieldset {
+    display: flex;
+}
+
+legend {
+    text-transform: uppercase;
+    font-weight: 500;
+    color: #424242;
+}
+
+input {
+    font-size: 1.5em;
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+button {
+    font-size: 1.5em;
+    font-weight: 500;
+    padding: 0.5em;
+    border: none;
+    border-radius: 0.5em;
+    background: lightskyblue;
+    box-shadow: hsla(0, 100%, 0%, .2) 0 0 5px;
+    color: white;
+    flex: 1 1 0px;
+    margin: 0.2em;
+}
+
+.result h2 {
+    text-align: center;
+    color: #696969;
+}
+
+.result p {
+    margin-top: 0.5em;
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    color: darkcyan;
+}
+
+.error {
+    border-radius: 1em;
+    border: 1px solid hsla(0, 100%, 0%, .2);
+    padding: 0.5em 1em;
+    background: hsla(340, 100%, 80%, 0.2);
+    margin-bottom: 2em;
+}