New function : convertMarkdown

README.md

@@ -32,6 +32,7 @@ Enjoy! =D
 * [jQuery](https://jquery.com/)
 * [jQuery UI](https://jqueryui.com/)
 * [Moment.js](https://momentjs.com/)
+* [Marked.js](https://github.com/markedjs/marked)
 
 ## Documentation 
 La documentation est disponible sur [function.divlo.fr/documentation](https://function.divlo.fr/documentation).

css/style.css

@@ -80,6 +80,9 @@ header {
     width: 80px !important;
     height: 40px !important;
 }
+pre code {
+    color: #e83c8c !important;
+}
 #currencyOfTheValue, #currencyAfter, #convertNumberType {
     width: 270px !important;
 }

incl/footer.php

@@ -10,6 +10,7 @@
         <script defer src="/scripts/libs/moment.js"></script>
         <script defer src="/scripts/libs/jquery-ui-min.js"></script>
         <script defer src="/scripts/libs/bootstrap-datepicker-min.js"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
         <script defer src="/scripts/variables.js"></script>
         <script defer src="/scripts/fonctions_annexes.js"></script>
         <script defer src="/scripts/fonctions_principales.js"></script>

php/config.php

@@ -83,6 +83,11 @@ switch ($currentpage) {
         $description = "<a href='https://en.wikipedia.org/wiki/Heap%27s_algorithm' target='_blank'>Heap's algorithm</a> est un algorithme qui génère toutes les permutations uniques possibles d'une chaîne de caractère, ce sont en quelque sorte toutes les possibilités d'anagramme d'un mot (en changeant de place, les lettres d’un mot, permettent d’en créer un nouveau), par contre les mots n'ont pas besoin d'être de vrais mots qui ont du sens.";
         $image = 'https://function.divlo.fr/img/function-image/heapAlgorithm.png';
         break; 
+    case '/views/function-views/convertMarkdown.php':
+        $title = "Markdown";
+        $description = "Convertis du Markdown en HTML.";
+        $image = 'https://function.divlo.fr/img/function-image/convertMarkdown.png';
+        break; 
     default:
         $title = 'Erreur 404';
         $description = "Cette page n'existe pas!";

scripts/main.js

@@ -202,6 +202,19 @@ $(function () {
         }
     });
 
+    if (chemin === "/views/function-views/convertMarkdown.php" && localStorage.getItem('convertedHTML') && localStorage.getItem('texteMarkdown')) {
+        $('.results').html(localStorage.getItem('convertedHTML'));
+        $('#texteMarkdown').val(localStorage.getItem('texteMarkdown'));
+    }
+
+    $("#texteMarkdown").bind("keyup change", () => {
+        const textMarkdown = $('#texteMarkdown').val();
+        const convertedHTML = marked(textMarkdown);
+        localStorage.setItem("convertedHTML", convertedHTML);
+        localStorage.setItem("texteMarkdown", textMarkdown);
+        $('.results').html(convertedHTML);
+    });
+
     /* Changement du texte accueil (exemples de fonction) */
     if(chemin === "/" || chemin === '/index.php') {
         let index=-1;

scripts/variables.js

@@ -19,6 +19,7 @@ texteFonctionChange = [
   '<a href="/views/function-views/convertRomanArabicNumbers.php">convertir des nombres arabes en nombres romains</a>',
   `<a href="/views/function-views/armstrongNumber.php">vérifier si un nombre fait partie des nombres d'Armstrong</a>`,
   `<a href="/views/function-views/heapAlgorithm.php">génèrer toutes les permutations uniques possibles d'une chaîne de caractère</a>`,
+  '<a href="/views/function-views/convertMarkdown.php">convertir du Markdown en HTML</a>',
   '<a href="/views/function-views/weatherRequest.php">connaître la météo</a>'
 ];
 

views/function-list.php

@@ -111,6 +111,16 @@
             </div>
         </div>
     </div>
+    
+    <div class="row">
+        <div class="col-sm-12 pb-4">
+            <div class="text-center pb-5">
+                <h2 class="function-list-title"><a href="./function-views/convertMarkdown.php">Markdown</a></h2>
+                <a href="./function-views/convertMarkdown.php"><img class="function-list-image" src="/img/function-image/convertMarkdown.png" alt="Markdown"></a>
+                <p class="function-list-description">Convertis du Markdown en HTML.</p>
+            </div>
+        </div>
+    </div>
 
 </div>
 

views/function-views/convertMarkdown.php

@@ -0,0 +1,25 @@
+<!-- Config -->
+<?php include("../../php/config.php");?>
+
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Page Content -->
+<div class="container">
+    <h1><span class="important"><?php echo $title?></span> :</h1>
+    <p class="pt-3 text-center"><?php echo $description?></p>
+    <div class="text-center">
+        <img class="function-image" src="/img/function-image/convertMarkdown.png" alt="Markdown">
+    </div>
+    <div class="row">
+        <div class="col-sm-6">
+            <textarea rows="6" name="texteMarkdown" id="texteMarkdown" placeholder="Votre texte..." class="form-control"></textarea>
+        </div>
+        <div class="col-sm-6 results">
+            <p>Votre texte...</p>
+        </div>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>