Optimisation & Hotfix

404.php

@@ -9,8 +9,8 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center">Erreur <span class="yellow-color">404</span></h1>
+  <h1 class="mt-4 text-center">Erreur <span class="important">404</span></h1>
-  <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="yellow-color">Revenir à la page d'accueil ?</a></p>
+  <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="important">Revenir à la page d'accueil ?</a></p>
 </div>
 
 <!-- Footer -->

css/style.css

@@ -1,74 +1,77 @@
+:root {
+    --footer-height: 182px; 
+    --border-header-footer: 3px rgba(255,255,255,0.7) solid;
+    --background-color: #181818;
+    --text-color: rgb(222, 222, 222);
+    --important: #ffd800;
+}
+
 /* GENERAL */
 html {
     position: relative;
     min-height: 100%;
 }
 body {
-    background-color: #181818;
+    background-color: var(--background-color);
-    color:rgba(222, 222, 222, 0.9);
+    color: var(--text-color);
     font-family: 'Montserrat', 'Arial', sans-serif;
-    margin: 0 0 182px; /* bottom = footer height */
+    margin: 0 0 var(--footer-height); /* bottom = footer height */
+}
+.important {
+    color: var(--important);
 }
 b {
     font-weight: bold;
+    color: var(--important);
 }
-.yellow-color, .yellow-color:hover {
+a, a:hover {
-    color: #ffd800;
+    color: var(--important);
+}
+h1 {
+    font-family: 'Roboto', 'sans-serif';
+}
+p {
+    font-size: 18px; 
+    line-height: 1.9; 
 }
 
 /* HEADER */
 header {
     margin-bottom: 5%;
 }
+#header-container {
+    padding-bottom: 0;
+}
 .navbar {
-    border-bottom: 3px rgba(255,255,255,0.7) solid;
+    border-bottom: var(--border-header-footer);
 }
 
 /* CONTENT */
 .container {
     padding-bottom: 25px;
 }
-.container > h1, .container > .row > h1 {
-    font-family: 'Roboto', 'sans-serif';
-}
-.container > p, .container > .row > p {
-    font-size: 18px; 
-    line-height: 1.9; /* représente un facteur multiplicateur de la taille de la police appliquée à l'élément */
-}
-.container > p > a, .container > .row > a, .container > table > tbody > tr > td > a, .container > .row > table > tbody > tr > td > a, footer > p > a {
-    color: #ffd800;
-    font-weight: bold;
-}
-.container > p > a:hover, .container > .row > p > a:hover, footer > p > a:hover {
-    color: rgba(255,255,255,1);
-    font-weight: bold;
-    text-decoration: underline;
-}
 .function-list-title {
     margin: auto;
     padding-bottom: 45px;
 }
 .table {
-    color: #fff;
+    color: white;
 }
 
 /* FOOTER */
 footer
 {
-    border-top: 3px rgba(255,255,255,0.7) solid;
+    border-top: var(--border-header-footer);
     position: absolute;
     left: 0;
     bottom: 0;
-    height: 182px;
+    height: var(--footer-height);
     width: 100%;
 }
 .footer-text
 {
-	font-family: 'Montserrat', sans-serif;
 	font-size: 18px;
-	font-weight: 700;
     padding: 0 0 25px 0;
-	color: #9a9da2;
 }
 footer i
 {

incl/footer.php

@@ -1,7 +1,7 @@
         <footer class="text-center">
-            <a href="#" class="yellow-color"><i class="fas fa-arrow-up"></i></a>
+            <a href="#" class="important"><i class="fas fa-arrow-up"></i></a>
-            <div class="realDateTime">Affichage de l'heure en temps réel : <span class="yellow-color text-center" id="realDateTime"></span></div>
+            <div class="realDateTime">Affichage de l'heure en temps réel : <span class="important" id="realDateTime"></span></div>
-            <div class="footer-text"><a href="https://divlo.fr/" target="_blank" class="yellow-color">Divlo</a> | Tous droits réservés</div>
+            <div class="footer-text"><a href="https://divlo.fr/" target="_blank">Divlo</a> | Tous droits réservés</div>
         </footer>
 
     </body>

incl/header.php

@@ -34,6 +34,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
         <script src="https://kit.fontawesome.com/ed4e9fbefd.js"></script>
         <!-- Google Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto|Varela+Round&display=swap" rel="stylesheet">
@@ -46,7 +47,7 @@
     <body>
         <header>    
             <nav class="navbar navbar-expand-lg navbar-dark static-top">
-                <div class="container">
+                <div class="container" id="header-container">
                     <!-- Brand -->
                     <a class="navbar-brand" href="/index.php"><img src="/img/FunctionProject_brand-logo.png" alt=""></a>
 

index.php

@@ -26,13 +26,13 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center">Bienvenue sur <span class="yellow-color">FunctionProject</span>! 🎉</h1>
+  <h1 class="mt-4 text-center">Bienvenue sur <span class="important">FunctionProject</span>! 🎉</h1>
   <p class="pt-3">FunctionProject est un projet créé par <a href="https://divlo.fr/" target="_blank">Divlo</a> qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme <b>savoir la météo</b>, générer un <b>nombre aléatoire</b>, etc. 
   <br> <br>
-  <a href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a> 
+  <a class="d-flex justify-content-center" href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
-  <br> <br>
+  <br>
-  L'intégralité du <a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a> de ce site est disponible sur <a href="https://github.com/Divlo">mon profil GitHub</a> <i class="fab fa-github"></i>. <br>
+  <span class="d-flex justify-content-center">L'intégralité du&nbsp;<a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a>&nbsp;de ce site est disponible sur&nbsp;<a href="https://github.com/Divlo">mon profil GitHub</a>&nbsp;<span><i class="fab fa-github"></i></span>.</span>
-  Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir. <i class="fas fa-code"></i>
+  Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir <i class="fas fa-code"></i>.
   <br><br>
   Vous pouvez m'envoyer vos avis, suggestion d'ajouts, éventuel bug/problème grâce à ce <a href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/" target="_blank">Feedback Formulaire</a> 📝.
   </p>

scripts/fonctions.js

@@ -1,7 +1,7 @@
 /////////////////////////////////////////////////////////////////
 /* Fonctions Principales */
 
-// Permet de faire une requête à l'API openweathermap.org
+// Requête à l'API openweathermap.org
 function weatherRequest(url,toDo) {
         $.ajax({
             url : url,
@@ -12,33 +12,24 @@ function weatherRequest(url,toDo) {
                 switch (toDo) {
                     case 'time': 
                         $('.results').html("La date et l'heure de " + city + " : " + showDateTimeValue); 
-                        $("#cityName").click(function() {
+                        $("#cityName, #submitWeatherRequest").click(function() {
-                            document.location.replace("../../views/function-views/weatherRequest.php");
+                            document.location.replace("../../function-views/weatherRequest.php");
-                          });
+                        });
-                          $("#submitWeatherRequest").click(function() {
-                            document.location.replace("../../views/function-views/weatherRequest.php");
-                          });
                       break;
                       case 'weather':
                           if(city === 'Moscou')
                           {
                             $('.results').html(`🌎 Position : <a href='https://www.google.com/maps/place/${city}/' class="yellow-color" target="_blank">${city}, RU</a><br>⏰ Date et heure : ${showDateTimeValue}<br>☁️ Météo : ${capitalize(json.weather[0].description)}<br> 🌡️ Température : ${json.main.temp} °C<br> 💧 Humidité : ${json.main.humidity}% <br> <img src="https://openweathermap.org/img/wn/${json.weather[0].icon}@2x.png"/>`); 
-                            $("#cityName").click(function() {
+                            $("#cityName, #submitWeatherRequest").click(function() {
-                                document.location.replace("../../views/function-views/weatherRequest.php");
+                                document.location.replace("../../function-views/weatherRequest.php");
-                              });
+                            });
-                              $("#submitWeatherRequest").click(function() {
-                                document.location.replace("../../views/function-views/weatherRequest.php");
-                              });
                           }
                           else
                           {
                             $('.results').html(`🌎 Position : <a href='https://www.google.com/maps/place/${city}/' class="yellow-color" target="_blank">${city}, ${json.sys.country}</a><br>⏰ Date et heure : ${showDateTimeValue}<br>☁️ Météo : ${capitalize(json.weather[0].description)}<br> 🌡️ Température : ${json.main.temp} °C<br> 💧 Humidité : ${json.main.humidity}% <br> <img src="https://openweathermap.org/img/wn/${json.weather[0].icon}@2x.png"/>`); 
-                            $("#cityName").click(function() {
+                            $("#cityName, #submitWeatherRequest").click(function() {
-                                document.location.replace("../../views/function-views/weatherRequest.php");
+                                document.location.replace("../../function-views/weatherRequest.php");
-                              });
+                            });
-                              $("#submitWeatherRequest").click(function() {
-                                document.location.replace("../../views/function-views/weatherRequest.php");
-                              });
                           }
                       break;
                     default:
@@ -53,9 +44,9 @@ function weatherRequest(url,toDo) {
 }
 
 // Génère un nombre aléatoire entre un minimum inclus et un maximum inclus 
-function randomNumber(minEntered, maxEntered) {
+function randomNumber(min, max) {
-    let min = Math.ceil(minEntered);
+    min = Math.ceil(min);
-    let max = Math.floor(maxEntered);
+    max = Math.floor(max);
 
     if (!isNaN(min) && !isNaN(max) && min < max)
     {
@@ -73,54 +64,40 @@ function randomNumber(minEntered, maxEntered) {
 }
 
 // Calcule l'âge de quelqu'un selon la date de naissance
-function calculateAge(birthDate) {
+function calculateAge(birthDateEntered) {
-    // Vérifie si la valeur entrée correspond à une date de naissance
-    if(birthDate.length === 10 && typeof birthDate === 'string' && birthDate[2] === '/' && birthDate[5] === '/' && !isNaN(parseInt(birthDate[0] + birthDate[1] + birthDate[3] + birthDate[4] + birthDate[6] + birthDate[7])))
-    {
-        // Les variables de la fonction
-        let birthDateDay = parseInt(birthDate[0] + birthDate[1]);
-        let birthDateMonth = parseInt(birthDate[3] + birthDate[4]);
-        let birthDateYear = parseInt(birthDate[6] + birthDate[7] + birthDate[8] + birthDate[9]);
-        dateTimeUTC('0');
 
-        // Vérifie si la date entrée correspond à une date valide  
+    // Les variables de la fonction
-        if(birthDateDay <= 31 && birthDateMonth <=12 && birthDateYear <= parseInt(year))
+    let birthDateDay = parseInt(birthDateEntered[0] + birthDateEntered[1]);
-        {
+    let birthDateMonth = parseInt((birthDateEntered[3] + birthDateEntered[4]) - 1);
-            // Initialise la date de naissance 
+    let birthDateYear = parseInt(birthDateEntered[6] + birthDateEntered[7] + birthDateEntered[8] + birthDateEntered[9]);
-            let birthDate = new Date(birthDateYear + '-' + birthDateMonth + '-' + birthDateDay);
+    dateTimeUTC('0');
-            let ageDiff = timeNow - birthDate; // résultat en millisecondes
+    day = parseInt(day)
+    month = parseInt(month - 1);
+    year = parseInt(year);
 
-            // Vérifie si tu es déjà né
+    let dateNow = moment([year, month, day]);
-            if(ageDiff > 0)
+    let birthDate = moment([birthDateYear, birthDateMonth, birthDateDay]);
-            {
-                let ageDiffYear = ageDiff / 1000 / 60 / 60 / 24 / 365.25; // résultat en années
-                let ageYear = parseInt(ageDiffYear, 10); // Le 10 permet spécifier que parseInt doit utliser la base 10
 
-                let ageDiffDay = parseInt((ageDiff / 1000 / 60 / 60 / 24) - (ageYear * 365.25), 10);
+    // Calcule l'âge - Moment.js
-                let ageDiffMonth = ageDiffDay / 30;
+    let ageYears = dateNow.diff(birthDate, 'year');
-
+    birthDate.add(ageYears, 'years');
-                let ageMonth = parseInt(ageDiffMonth, 10);
-                let ageDay = ageDiffDay - (ageMonth * 30);
-
-                // Si c'est ton anniversaire aujourd'hui
-                if(birthDateDay === parseInt(day) && birthDateMonth === parseInt(month))
-                {
-                    return 'Vous avez ' + ageYear + ' ans. Joyeux Anniversaire! 🥳';
-                }
     
-                else
+    let ageMonths = dateNow.diff(birthDate, 'months');
-                {
+    birthDate.add(ageMonths, 'months');
-                    return 'Vous avez ' + ageYear + ' ans, ' + ageMonth + ' mois et ' + ageDay + ' jour(s).';
+    
-                }
+    let ageDays = dateNow.diff(birthDate, 'days');
-            }
+
-            else
+    // Vérifie si la valeur entrée correspond à une date de naissance valide
-            {
+    if(birthDate._isValid === true)
-                return "Vous n'êtes pas encore né...";
+    {
-            }
+        // Si c'est ton anniversaire aujourd'hui
+        if(birthDateDay === parseInt(day) && birthDateMonth === parseInt(month))
+        {
+            return 'Vous avez ' + ageYears + ' ans. Joyeux Anniversaire! 🥳';
         }
         else
         {
-            return messageError;
+            return 'Vous avez ' + ageYears + ' ans, ' + ageMonths + ' mois et ' + ageDays + ' jour(s).';
         }
     }
     else 
@@ -215,19 +192,7 @@ function convertPuissanceToNumber(num) {
     }
 }
 
-// Calcul une valeur (= 100%) selon le pourcentage (ex: 25% de 100 = 25) 
+// Majuscule à la 1ère lettre d'une string
-function calculPercentagePart(percentage,value) {
-    if (!isNaN(percentage) && !isNaN(value))
-    {
-        return value * (percentage / 100);
-    }
-    else 
-    {
-        return messageError;
-    }
-}
-
-// Met une majuscule à la 1ère lettre d'une string
 function capitalize (s) { 
     if (typeof s !== 'string') return ''
     return s.charAt(0).toUpperCase() + s.slice(1)
@@ -352,7 +317,7 @@ function realDateTime(id)
     return true;
 }
 
-// Permet de récupérer le décalage en secondes depuis UTC grâce à l'API
+// Récupére le décalage en secondes à partir de l'heure UTC grâce à l'API
 function timeZone(json) {
     if(json.name === 'Moscou') // Il faut ajouter + 1h de décallage à Moscou
     {

scripts/main.js

@@ -11,15 +11,12 @@ $(function () {
     {
         let city = $('#cityName').val();
         let cityName = city.split(' ').join('+'); 
-        if(cityName === '')
+        if(isEmptyValue(cityName))
         {
-            $('.results').html("Vous ne pouvez pas rentré une valeur vide.");
+            $('.results').html(emptyMessageError);
-            $("#cityName").click(function() {
+            $("#cityName, #submitWeatherRequest").click(function() {
                 document.location.replace("../function-views/weatherRequest.php");
-              });
+            });
-              $("#submitWeatherRequest").click(function() {
-                document.location.replace("../function-views/weatherRequest.php");
-              });
         }
         else 
         {
@@ -35,7 +32,7 @@ $(function () {
 
         if(isEmptyValue(minEntered) || isEmptyValue(maxEntered))
         {
-            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+            $('.results').html(emptyMessageError);
         }
         else 
         {
@@ -53,15 +50,15 @@ $(function () {
 
     $( "#submitCalculateAge" ).click(function() 
     {
-        let birthDate = $('#birthDateValue').val();
+        let birthDateEntered = $('#birthDateValue').val();
 
-        if(isEmptyValue(birthDate))
+        if(isEmptyValue(birthDateEntered))
         {
-            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+            $('.results').html(emptyMessageError);
         }
         else 
         {
-            let result = calculateAge(birthDate);
+            let result = calculateAge(birthDateEntered);
             if(result === messageError)
             {
                 $('.results').html(messageError);
@@ -69,12 +66,6 @@ $(function () {
             else 
             {
                 $('.results').html(result);
-                $("#birthDateValue").click(function() {
-                    document.location.replace("../function-views/calculateAge.php");
-                  });
-                  $("#submitCalculateAge").click(function() {
-                    document.location.replace("../function-views/calculateAge.php");
-                  });
             }
         }
     });
@@ -87,7 +78,7 @@ $(function () {
 
         if(isEmptyValue(temperatureValue))
         {
-            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+            $('.results').html(emptyMessageError);
         }
         else 
         {
@@ -110,7 +101,7 @@ $(function () {
 
         if(isEmptyValue(firstValueEntered) || isEmptyValue(secondValueEntered))
         {
-            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+            $('.results').html(emptyMessageError);
         }
         else 
         {
@@ -129,6 +120,7 @@ $(function () {
         }
     });
 
+    /* Permet d'afficher l'heure en temps réel sur le footer */
     window.onload = realDateTime('realDateTime');
 
     // Fin de l'import des fonctions

scripts/variables.js

@@ -1,18 +1,10 @@
 /* LES VARIABLES */
 
-const anneeJulienne = 365.25; // Jours ou 31 557 600 secondes
+/* Messages d'erreur */
-const uniteAstronomique = 150000000; // en km - Système : Système astronomique d'unités
+const emptyMessageError = "Vous ne pouvez pas rentré de valeur vide.";
-
-/* Variables utilisés dans les fonctions */
 const messageError = "Vous n'avez pas rentré de valeur valide.";
+
+/* Varibales pour les fonctions */
 let timeNow = new Date();
 let utcOffset = timeNow.getTimezoneOffset();
-timeNow.setMinutes(timeNow.getMinutes() + utcOffset);
+timeNow.setMinutes(timeNow.getMinutes() + utcOffset);
-
-// Les Variables de la lumière (en m)
-const vitesseLumiere = 299792458; // en m/s - Symbole usuel : c
-const secondeLumiere = 299792458; // en m
-const minuteLumiere = 17987547480; // en m
-const heureLumiere = 1079252848800; // en m
-const jourLumiere = 25902068371200; // en m
-const anneeLumiere = 9460730472580800; // en m

views/error404.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color">La météo</span> :</h1>
+  <h1 class="mt-4 text-center"><span class="important">La météo</span> :</h1>
   <p class="pt-3 text-center">Affiche la météo et l'heure local selon la ville.</p>
   <div class="form-group">
 		<label for="cityName">Entrez le nom d'une ville :</label>

views/function-list.php

@@ -27,7 +27,7 @@
 <!-- Page Content -->
 <div class="container">
     <div class="row">
-        <h1 class="function-list-title">La liste des <span class="yellow-color">Fonctions</span> :</h1>
+        <h1 class="function-list-title">La liste des <span class="important">Fonctions</span> :</h1>
         <!-- <p class="text-center">(Uniquement les fonctions pouvant être testé sont affichés.)</p> -->
             <table class="table table-bordered">
                 <thead>

views/function-views/calculateAge.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color"><?php echo $title?></span></h1>
+  <h1 class="mt-4 text-center"><span class="important"><?php echo $title?></span></h1>
   <p class="pt-3 text-center"><?php echo $description?></p>
   <div class="form-group">
 		<label for="birthDateValue">Entrez la date de naissance au format (dd/mm/yyyy) :</label>

views/function-views/convertDistance.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color"><?php echo $title?></span> :</h1>
+  <h1 class="mt-4 text-center"><span class="important"><?php echo $title?></span> :</h1>
   <p class="pt-3 text-center"><?php echo $description?></p>
   <br>
   <div class="form-group">

views/function-views/convertTemperature.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color"><?php echo $title?></span> :</h1>
+  <h1 class="mt-4 text-center"><span class="important"><?php echo $title?></span> :</h1>
   <p class="pt-3 text-center"><?php echo $description?></p>
   <div class="form-group">
 		<label for="temperatureValue">Entrez la température :</label>

views/function-views/randomNumber.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color"><?php echo $title?></span> :</h1>
+  <h1 class="mt-4 text-center"><span class="important"><?php echo $title?></span> :</h1>
   <p class="pt-3 text-center"><?php echo $description?></p>
   <div class="form-group">
 		<label for="minValue">Entrez la valeur minimale :</label>

views/function-views/weatherRequest.php

@@ -9,7 +9,7 @@
 
 <!-- Page Content -->
 <div class="container">
-  <h1 class="mt-4 text-center"><span class="yellow-color"><?php echo $title?></span> :</h1>
+  <h1 class="mt-4 text-center"><span class="important"><?php echo $title?></span> :</h1>
   <p class="pt-3 text-center"><?php echo $description?></p>
   <div class="form-group">
 		<label for="cityName">Entrez le nom d'une ville :</label>