First Version

2019-08-16 12:05:56 +02:00
commit ae77f24fc8
20 changed files with 977 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,4 @@
+htaccess
+scripts/config.js
+img/FunctionProject_brand-logo.psd
+img/FunctionProject.psd
--- a/README.md
+++ b/README.md
@@ -0,0 +1,22 @@
+# FunctionProject
+![Badge Status](https://cloud.divlo.fr/public_files/others/under_dev.svg)
+
+[À propos de Divlo](https://divlo.fr/) | [Youtube](https://www.youtube.com/c/Divlo) | [Twitch](https://www.twitch.tv/divlofr) | [Twitter](https://twitter.com/Divlo_FR) | [Steam](https://steamcommunity.com/id/Divlo/) | [Discord](https://discordapp.com/invite/WWK2JPz)
+
+## À propos de FunctionProject
+[FunctionProject](https://function.divlo.fr/) est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc. 
+
+Toutes les informations en détails sur le projet sont disponible sur [function.divlo.fr](https://function.divlo.fr/).
+
+(Projet uniquement en français pour le moment.)
+
+[![FunctionProject](https://cloud.divlo.fr/public_files/others/FunctionProject.png)](https://function.divlo.fr/)
+
+## La liste des Fonctions Principales :   
+| Nom | Description | Paramètre(s) |
+| -- | -- | -- |
+| **weatherRequest(url,toDo)** | Permet de faire une requête à l'API openweathermap.org. | - url : avec le nom de la ville. - toDo : afficher l'heure uniquement ou aussi la météo ? |
+| **randomNumber(minEntered, maxEntered)** | Génère un nombre aléatoire entre un minimum inclus et un maximum inclus. | - minEntered : Nombre Minimum - maxEntered : Nombre Maximum |
+| **calculateAge(birthDate)** | Calcule l'âge de quelqu'un selon la date de naissance. | - birthDate : date de naissance au format (dd/mm/yyyy). |
+| **convertTemperature(degre,unite)** | Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi. | - degre : Le nombre que vous voulez convertir - unite : l'unité du nombre que vous voulez convertir (°C ou °F)	|
+| **convertDistance (firstValue, unitFirstValue, unitFinalValue)** | Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre. | - firstValue : Le nombre que vous voulez convertir - unitFirstValue : l'unité du nombre que vous voulez convertir - unitFinalValue : l'unité de votre nombre après la conversion	|
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,72 @@
+/* GENERAL */
+body {
+    background-color: #181818;
+    color:rgba(222, 222, 222, 0.9);
+    font-family: 'Montserrat', 'Arial', sans-serif;
+}
+b {
+    font-weight: bold;
+}
+.yellow-color, .yellow-color:hover {
+    color: #ffd800;
+}
+
+/* HEADER */
+header {
+    margin-bottom: 5%;
+}
+.navbar {
+    border-bottom: 3px rgba(255,255,255,0.7) solid;
+}
+
+/* CONTENT */
+.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;
+}
+
+/* FOOTER */
+footer
+{
+    border-top: 3px rgba(255,255,255,0.7) solid;
+    padding: 20px 0 40px;
+    margin-top: 40px;
+}
+.footer-text
+{
+	font-family: 'Montserrat', sans-serif;
+	font-size: 18px;
+	font-weight: 700;
+	margin: 0 0 25px 0;
+	line-height: 1.1;
+	color: #9a9da2;
+}
+footer i
+{
+	font-size: 25px;
+	margin: 20px;
+	height: 30px;
+}
+footer i:hover
+{
+	font-size: 30px;
+}
--- a/img/FunctionProject.png
+++ b/img/FunctionProject.png
--- a/img/FunctionProject_brand-logo.png
+++ b/img/FunctionProject_brand-logo.png
--- a/img/FunctionProject_logo.png
+++ b/img/FunctionProject_logo.png
--- a/incl/footer.php
+++ b/incl/footer.php
@@ -0,0 +1,7 @@
+        <footer class="text-center">
+            <a href="#" class="yellow-color"><i class="fas fa-arrow-up"></i></a>
+            <div class="footer-text">Divlo | Tous droits réservés</div>
+        </footer>
+
+    </body>
+</html>
--- a/incl/header.php
+++ b/incl/header.php
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="fr" prefix="og: http://ogp.me/ns#">
+    <head>
+        <title>Function Project</title>
+        <link rel="icon" type="image/png" href="/img/FunctionProject_logo.png"/>
+
+        <!-- Meta Tag -->
+        <meta charset="utf-8">
+        <meta https-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="description" content="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."/> 
+        <link rel="canonical" href="function.divlo.fr"/> 
+        <meta name="Language" content="fr"/> 
+        <meta charset="utf-8">
+
+        <!--Open Graph Metadata-->
+        <meta property="og:title" content="Function Project">
+        <meta property="og:type" content="website"> 
+        <meta property="og:url" content="https://function.divlo.fr/"> 
+        <meta property="og:image" content="https://function.divlo.fr/img/FunctionProject.png"> 
+        <meta property="og:description" content="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc."> 
+        <meta property="og:locale" content="fr_FR">
+        <meta property="og:site_name" content="Function Project"> 
+
+        <!-- Twitter card Metadata -->
+        <meta name="twitter:card" content="summary">
+        <meta name="twitter:description" content="FunctionProject est un projet créé par Divlo qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme savoir la météo, générer un nombre aléatoire, etc.">
+        <meta name="twitter:title" content="Function Project">
+        <meta name="twitter:site" content="@Divlo_FR">
+        <meta name="twitter:image:src" content="https://function.divlo.fr/img/FunctionProject.png">
+        <meta name="twitter:creator" content="@Divlo_FR">
+
+        <!-- Frameworks and Tools -->
+        <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://kit.fontawesome.com/ed4e9fbefd.js"></script>
+        <!-- Google Fonts -->
+        <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto|Varela+Round&display=swap" rel="stylesheet">
+
+        <script type='text/javascript' src='/scripts/config.js'></script>
+        <script src="/scripts/main.js"></script>
+        <link rel="stylesheet" type="text/css" href="/css/style.css">
+    </head>
+    
+    <body>
+        <header>    
+            <nav class="navbar navbar-expand-lg navbar-dark static-top">
+                <div class="container">
+                    <!-- Brand -->
+                    <a class="navbar-brand" href="/index.php"><img src="/img/FunctionProject_brand-logo.png" alt=""></a>
+
+                    <!-- Hamburger icon on Mobile -->
+                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
+
+                    <!-- Navigation -->
+                    <div class="collapse navbar-collapse" id="navbarResponsive">
--- a/incl/menu.php
+++ b/incl/menu.php
@@ -0,0 +1,18 @@
+<ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/index.php">Accueil</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/views/function-list.php">Liste des fonctions</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/">Feedback Formulaire</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://github.com/Divlo/FunctionProject">Code Source</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
--- a/index.php
+++ b/index.php
@@ -0,0 +1,37 @@
+<!-- Header -->
+<?php include("./incl/header.php");?>
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="/index.php">Accueil<span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/views/function-list.php">Liste des fonctions</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/">Feedback Formulaire</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://github.com/Divlo/FunctionProject">Code Source</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center">Bienvenue sur <span class="yellow-color">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> 
+  <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>
+  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>
+</div>
+
+<!-- Footer -->
+<?php include("./incl/footer.php");?>
--- a/scripts/fonctions.js
+++ b/scripts/fonctions.js
@@ -0,0 +1,373 @@
+/////////////////////////////////////////////////////////////////
+/* Fonctions Principales */ https://www.google.com/maps/search/?api=1&query=48.86,2.35
+
+// Permet de faire une requête à l'API openweathermap.org
+function weatherRequest(url,toDo) {
+        $.ajax({
+            url : url,
+            dataType : "json",
+            success: function (json) { 
+                let city = json.name;
+                let showDateTimeValue = timeZone(json);
+                switch (toDo) {
+                    case 'time': 
+                        $('.results').html("La date et l'heure de " + city + " : " + showDateTimeValue); 
+                        $("#cityName").click(function() {
+                            document.location.replace("../../views/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() {
+                                document.location.replace("../../views/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() {
+                                document.location.replace("../../views/function-views/weatherRequest.php");
+                              });
+                              $("#submitWeatherRequest").click(function() {
+                                document.location.replace("../../views/function-views/weatherRequest.php");
+                              });
+                          }
+                      break;
+                    default:
+                }
+            },
+            statusCode: {
+                404: function() { 
+                    document.location.replace("../error404.php");
+                }
+            }
+        });
+}
+
+// Génère un nombre aléatoire entre un minimum inclus et un maximum inclus 
+function randomNumber(minEntered, maxEntered) {
+    let min = Math.ceil(minEntered);
+    let max = Math.floor(maxEntered);
+
+    if (!isNaN(min) && !isNaN(max) && min < max)
+    {
+        let randomNumber =  Math.floor(Math.random() * (max - min +1)) + min;
+        return randomNumber;
+    }
+    else if (min > max)
+    {
+        return "Votre nombre minimum est plus grand que le nombre maximum.";
+    }
+    else
+    {
+        return messageError;
+    }
+}
+
+// Calcule l'âge de quelqu'un selon la date de naissance
+function calculateAge(birthDate) {
+    // 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  
+        if(birthDateDay <= 31 && birthDateMonth <=12 && birthDateYear <= parseInt(year))
+        {
+            // Initialise la date de naissance 
+            let birthDate = new Date(birthDateYear + '-' + birthDateMonth + '-' + birthDateDay);
+            let ageDiff = timeNow - birthDate; // résultat en millisecondes
+
+            // Vérifie si tu es déjà né
+            if(ageDiff > 0)
+            {
+                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);
+                let ageDiffMonth = ageDiffDay / 30;
+
+                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
+                {
+                    return 'Vous avez ' + ageYear + ' ans, ' + ageMonth + ' mois et ' + ageDay + ' jour(s).';
+                }
+            }
+            else
+            {
+                return "Vous n'êtes pas encore né...";
+            }
+        }
+        else
+        {
+            return messageError;
+        }
+    }
+    else 
+    {
+        return messageError;
+    }
+}
+
+// Convertit des °C en °F et l'inverse aussi
+function convertTemperature(degree, unit) {
+    if (!isNaN(degree) && unit === "°C") 
+    {
+        const temperatureValue = ((degree * 9/5) + 32) + " °F";
+        return temperatureValue;
+    }
+    else if (!isNaN(degree) && unit === "°F")
+    {
+        const temperatureValue = (degree - 32) * 5/9 + " °C";
+        return temperatureValue;
+    }
+    else 
+    {
+        return messageError; 
+    }
+}
+
+// Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre
+function convertDistance (firstValue, unitFirstValue, unitFinalValue) {
+
+    let reference = ["pm",null,null,"nm",null,null,"µm",null,null,"mm","cm","dm","m","dam","hm","km",null,null,"Mm",null,null,"Gm",null,null,"Tm"];
+    let index1 = reference.indexOf(unitFirstValue); 
+    let index2 = reference.indexOf(unitFinalValue);
+
+    // Condition qui vérifie si les valeurs entrées sont justes
+    if (!isNaN(firstValue) && typeof unitFirstValue === 'string' && typeof unitFinalValue === 'string' && (index1.toString() && index2.toString()) != '-1')
+    {
+        // Conversion des longueurs : 
+        let difference = index1 - index2; 
+        let result = firstValue*Math.pow(10,difference);
+        let response = 'Conversion de longueur : ' + firstValue.toString() + ' ' + unitFirstValue + ' = ' + formatNumberResult(result) + ' ' + unitFinalValue;
+        return response;
+    }
+    else
+    {
+        return messageError;
+    }
+}
+
+
+/////////////////////////////////////////////////////////////////
+/* Fonctions Annexes */
+
+// Vérifie si une valeur est vide
+function isEmptyValue(value) {
+    if (value === '' || value === null || value === undefined) {
+        return true
+    } 
+    else {
+        return false
+    }
+}
+
+// Fonction qui formate les nombres avec des espaces (ex : 76120 = 76 120)
+function formatNumberResult(num) {
+    if (!isNaN(num))
+    {
+        if(num >= 1000)
+        {
+            return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ');
+        }
+        else
+        {
+            return num;
+        }
+    }
+    else 
+    {
+        return messageError;
+    }
+}
+
+// Fonction qui convertit les puissances de 10 en nombre (ex: 1e+20 = 100 000 000 000 000 000 000), ne peut pas dépasser 1e+20 (21 ne fonctionne pas)
+function convertPuissanceToNumber(num) {
+    if(!isNaN(num))
+    {
+        let number = formatNumberResult((num).toFixed(0));
+        return number;
+    }
+    else
+    {
+        return messageError;
+    }
+}
+
+// Fonction qui convertit un résultat en m/s en km/s
+function msToKms(num) {
+    if (!isNaN(num))
+    {
+        return num / 1000;
+    }
+    else 
+    {
+        return messageError;
+    }
+}
+
+// Fonction qui convertit un résultat en m/s en km/h
+function msToKmh(num) {
+    if (!isNaN(num))
+    {
+        return num * 3.6;
+    }
+    else 
+    {
+        return messageError;
+    }
+}
+
+// Fonction qui calcul une valeur (= 100%) selon le pourcentage (ex: 25% de 100 = 25) 
+function calculPercentagePart(percentage,value) {
+    if (!isNaN(percentage) && !isNaN(value))
+    {
+        return value * (percentage / 100);
+    }
+    else 
+    {
+        return messageError;
+    }
+}
+
+// Fonction qui 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)
+}
+
+// Fonction qui donne la date et l'heure selon l'UTC (Universal Time Coordinated)
+function dateTimeUTC(utc) {
+    if(typeof utc === 'string' && utc.length >= 1 && utc[0] === '-' || '0' || '+' || !isNaN(parseFloat(utc[0])))
+    {   
+        if (utc[0] === '0' && utc.length === 1)
+        {   
+            let enteredOffset = 0;
+            return showDateTime(enteredOffset);
+        }
+        else if (utc[0] === '+' || !isNaN(parseFloat(utc[0])))
+        {
+            if (utc.length === 2 && utc[0] === '+')
+            {
+                // Entered offset
+                let enteredOffset = parseFloat(utc[1])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);
+                return showDateTime(enteredOffset);
+            }
+            else if (utc.length === 3 && utc[0] === '+')
+            {
+                // Entered offset
+                let enteredOffset = parseFloat(utc[1] + utc[2])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);
+                return showDateTime(enteredOffset);
+            }
+            else if (utc.length === 1 && !isNaN(parseFloat(utc[0])))
+            {
+                // Entered offset
+                let enteredOffset = parseFloat(utc[0])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);
+                return showDateTime(enteredOffset);
+            }
+            else if (utc.length === 2 && !isNaN(parseFloat(utc[0])))
+            {
+                // Entered offset
+                let enteredOffset = parseFloat(utc[0] + utc[1])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);
+                return showDateTime(enteredOffset);
+            }
+            else
+            {
+                let enteredOffset = 0;
+                return showDateTime(enteredOffset);
+            }
+        }
+        else if (utc[0] === '-')
+        {
+            if (utc.length === 2 && utc[0] === '-')
+            {
+                // Entered offset
+                let enteredOffset = - parseFloat(utc[1])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);   
+                return showDateTime(enteredOffset);
+            }
+            else if (utc.length === 3 && utc[0] === '-')
+            {
+                // Entered offset
+                let enteredOffset = - parseFloat(utc[1] + utc[2])*60;
+                timeNow.setMinutes(timeNow.getMinutes() + enteredOffset);   
+                return showDateTime(enteredOffset);
+            }
+            else
+            {
+                let enteredOffset = 0;
+                return showDateTime(enteredOffset);
+            }
+        }
+        else 
+        {
+            let enteredOffset = 0;
+            return showDateTime(enteredOffset);
+        }
+    }
+    else if (utc === '' || !utc || utc === undefined)
+    {
+        utc = false;
+        let enteredOffset = 0;
+        return showDateTime(enteredOffset);
+    }
+    else
+    {
+        let enteredOffset = 0;
+        return showDateTime(enteredOffset);
+    }
+}
+
+// Fonction qui affiche la date et l'heure (format : dd/mm/yyyy - 00:00:00)
+function showDateTime(enteredOffset) {
+    year    = timeNow.getFullYear();
+    month   = ('0'+(timeNow.getMonth()+1)).slice(-2);
+    day     = ('0'+timeNow.getDate()).slice(-2);
+    hour    = ('0'+timeNow.getHours()).slice(-2);
+    minute  = ('0'+timeNow.getMinutes()).slice(-2);
+    second  = ('0'+timeNow.getSeconds()).slice(-2);
+    
+    showDateTimeValue = day + "/" + month + "/" + year + " - " + hour + ":" + minute + ":" + second;
+    timeNow.setMinutes(timeNow.getMinutes() - enteredOffset)
+
+    return showDateTimeValue;
+}
+
+// Fonction qui permet de récupérer le décalage en secondes depuis UTC grâce à l'API
+function timeZone(json) {
+    if(json.name === 'Moscou') // Il faut ajouter + 1h de décallage à Moscou
+    {
+        timeZoneValue = (json.timezone / 60 / 60) + 1;
+    }
+    else
+    {
+        timeZoneValue = json.timezone / 60 / 60;
+    }
+    let timeZoneStr = timeZoneValue.toString();
+    return dateTimeUTC(timeZoneStr); 
+}
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -0,0 +1,136 @@
+$(function () {
+
+    // Fichiers qui contient les variables 
+    $.getScript("/scripts/variables.js", function() {
+
+    // Fichiers qui contient les fonctions
+    $.getScript("/scripts/fonctions.js", function() {
+
+    /* ÉXECUTION DES FONCTONS */
+    $( "#submitWeatherRequest" ).click(function() 
+    {
+        let city = $('#cityName').val();
+        let cityName = city.split(' ').join('+'); 
+        if(cityName === '')
+        {
+            $('.results').html("Vous ne pouvez pas rentré une valeur vide.");
+            $("#cityName").click(function() {
+                document.location.replace("../function-views/weatherRequest.php");
+              });
+              $("#submitWeatherRequest").click(function() {
+                document.location.replace("../function-views/weatherRequest.php");
+              });
+        }
+        else 
+        {
+            let url = "https://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&lang=fr&units=metric&appid=" + config.APIkey + "";
+            weatherRequest(url, 'weather');
+        }
+    });
+
+    $( "#submitRandomNumber" ).click(function() 
+    {
+        let minEntered = $('#minValue').val();
+        let maxEntered = $('#maxValue').val(); 
+
+        if(isEmptyValue(minEntered) || isEmptyValue(maxEntered))
+        {
+            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+        }
+        else 
+        {
+            let result = randomNumber(minEntered, maxEntered);
+            if(result === messageError)
+            {
+                $('.results').html(messageError);
+            }
+            else 
+            {
+                $('.results').html("Nombre aléatoire compris entre " + minEntered + " inclus et " + maxEntered + " inclus : " + result);
+            }
+        }
+    });
+
+    $( "#submitCalculateAge" ).click(function() 
+    {
+        let birthDate = $('#birthDateValue').val();
+
+        if(isEmptyValue(birthDate))
+        {
+            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+        }
+        else 
+        {
+            let result = calculateAge(birthDate);
+            if(result === messageError)
+            {
+                $('.results').html(messageError);
+            }
+            else 
+            {
+                $('.results').html(result);
+                $("#birthDateValue").click(function() {
+                    document.location.replace("../function-views/calculateAge.php");
+                  });
+                  $("#submitCalculateAge").click(function() {
+                    document.location.replace("../function-views/calculateAge.php");
+                  });
+            }
+        }
+    });
+
+    $( "#submitConvertTemperature" ).click(function() 
+    {
+        let temperatureValue = $('#temperatureValue').val();
+        let degree = parseFloat(temperatureValue.slice(0, temperatureValue.length - 2));
+        let unit = temperatureValue.slice(temperatureValue.length - 2);
+
+        if(isEmptyValue(temperatureValue))
+        {
+            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+        }
+        else 
+        {
+            let result = convertTemperature(degree, unit);
+            if(result === messageError)
+            {
+                $('.results').html(messageError);
+            }
+            else 
+            {
+                $('.results').html(degree + " " + unit + " = " + result);
+            }
+        }
+    });
+
+    $( "#submitConvertDistance" ).click(function() 
+    {
+        let firstValueEntered = $('#firstValue').val();
+        let secondValueEntered = $('#secondValue').val();
+
+        if(isEmptyValue(firstValueEntered) || isEmptyValue(secondValueEntered))
+        {
+            $('.results').html("Vous ne pouvez pas rentré de valeur vide.");
+        }
+        else 
+        {
+            let firstValue = parseFloat(firstValueEntered.slice(0, firstValueEntered.length - 2));;
+            let unitFirstValue = firstValueEntered.slice(firstValueEntered.length - 2);
+
+            let result = convertDistance(firstValue, unitFirstValue, secondValueEntered);
+            if(result === messageError)
+            {
+                $('.results').html(messageError);
+            }
+            else 
+            {
+                $('.results').html(result);
+            }
+        }
+    });
+
+    // Fin de l'import des fonctions
+    });
+    // Fin de l'import des variables
+    });
+})
--- a/scripts/variables.js
+++ b/scripts/variables.js
@@ -0,0 +1,18 @@
+/* LES VARIABLES */
+
+const anneeJulienne = 365.25; // Jours ou 31 557 600 secondes
+const uniteAstronomique = 150000000; // en km - Système : Système astronomique d'unités
+
+/* Variables utilisés dans les fonctions */
+const messageError = "Vous n'avez pas rentré de valeur valide.";
+let timeNow = new Date();
+let utcOffset = timeNow.getTimezoneOffset();
+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
--- a/views/error404.php
+++ b/views/error404.php
@@ -0,0 +1,36 @@
+<!-- Header -->
+<?php include("../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">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>
+        <input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
+    </div>
+</div>
+<script>
+    $(function () {
+        $("#cityName").click(function() {
+            document.location.replace("../views/function-views/weatherRequest.php");
+        });
+        $("#submitWeatherRequest").click(function() {
+            document.location.replace("../views/function-views/weatherRequest.php");
+        }); 
+    })  
+</script>
+
+<!-- Footer -->
+<?php include("../incl/footer.php");?>
--- a/views/function-list.php
+++ b/views/function-list.php
@@ -0,0 +1,61 @@
+<!-- Header -->
+<?php include("../incl/header.php");?>
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/index.php">Accueil</a>
+                    </li>
+                    <li class="nav-item active">
+                        <a class="nav-link" href="/views/function-list.php">Liste des fonctions<span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/">Feedback Formulaire</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://github.com/Divlo/FunctionProject">Code Source</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<!-- Page Content -->
+<div class="container">
+    <div class="row">
+        <h1 class="function-list-title">La liste des <span class="yellow-color">Fonctions</span> :</h1>
+        <!-- <p class="text-center">(Uniquement les fonctions pouvant être testé sont affichés.)</p> -->
+            <table class="table table-bordered">
+                <thead>
+                    <tr>
+                        <th scope="col">Nom</th>
+                        <th scope="col">Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><a href="./function-views/weatherRequest.php">Météo</a></td>
+                        <td>Affiche la météo et l'heure local selon la ville.</td>     
+                    </tr>
+                    <tr>
+                        <td><a href="./function-views/randomNumber.php">Nombre aléatoire</a></td>
+                        <td>Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</td>  
+                    </tr>
+                    <tr>
+                        <td><a href="./function-views/calculateAge.php">Quelle âge avez-vous ?</a></td>
+                        <td>Calcule l'âge de quelqu'un selon la date de naissance.</td> 
+                    </tr>
+                    <tr>
+                        <td><a href="./function-views/convertTemperature.php">Conversion de Température</a></td>
+                        <td>Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</td>    
+                    </tr>
+                    <tr>
+                        <td><a href="./function-views/convertDistance.php">Conversion de Distance</a></td>
+                        <td>Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</td> 
+                    </tr>
+                </tbody>
+            </table>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../incl/footer.php");?>
--- a/views/function-views/calculateAge.php
+++ b/views/function-views/calculateAge.php
@@ -0,0 +1,26 @@
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">Quelle âge avez-vous ?</span></h1>
+  <p class="pt-3 text-center">Calcule l'âge de quelqu'un selon la date de naissance.</p>
+  <div class="form-group">
+		<label for="birthDateValue">Entrez la date de naissance au format (dd/mm/yyyy) :</label>
+        <input name="birthDateValue" type="text" id="birthDateValue" placeholder="(e.g : 31/03/2003)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitCalculateAge" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center"></p>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>
--- a/views/function-views/convertDistance.php
+++ b/views/function-views/convertDistance.php
@@ -0,0 +1,29 @@
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">Conversion de Distance</span> :</h1>
+  <p class="pt-3 text-center">Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</p>
+  <div class="form-group">
+		<label for="firstValue">Entrez la distance que vous voulez convertir :</label>
+        <input name="firstValue" type="text" id="firstValue" placeholder="(e.g : 50cm)" class="form-control">
+        <br>
+		<label for="secondValue">Entrez l'unité que vous voulez avoir après conversion :</label>
+        <input name="secondValue" type="text" id="secondValue" placeholder="(e.g : km)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitConvertDistance" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center"></p>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>
--- a/views/function-views/convertTemperature.php
+++ b/views/function-views/convertTemperature.php
@@ -0,0 +1,26 @@
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">Conversion de Température</span> :</h1>
+  <p class="pt-3 text-center">Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</p>
+  <div class="form-group">
+		<label for="temperatureValue">Entrez la température :</label>
+        <input name="temperatureValue" type="text" id="temperatureValue" placeholder="(e.g : 23°C)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitConvertTemperature" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center"></p>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>
--- a/views/function-views/randomNumber.php
+++ b/views/function-views/randomNumber.php
@@ -0,0 +1,29 @@
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">Nombre Aléatoire</span> :</h1>
+  <p class="pt-3 text-center">Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</p>
+  <div class="form-group">
+		<label for="minValue">Entrez la valeur minimale :</label>
+        <input name="minValue" type="text" id="minValue" placeholder="(e.g : 1)" class="form-control">
+        <br>
+		<label for="maxValue">Entrez la valeur maximale :</label>
+        <input name="maxValue" type="text" id="maxValue" placeholder="(e.g : 100)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitRandomNumber" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center"></p>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>
--- a/views/function-views/weatherRequest.php
+++ b/views/function-views/weatherRequest.php
@@ -0,0 +1,26 @@
+<!-- Header -->
+<?php include("../../incl/header.php");?>
+
+<!-- Menu -->
+<?php include("../../incl/menu.php");?>
+
+<!-- Page Content -->
+<div class="container">
+  <h1 class="mt-4 text-center"><span class="yellow-color">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>
+        <input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
+        <br>
+        <div class="form-row text-center">
+            <div class="col-12">
+                <button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
+            </div>
+        </div>
+        <br> <br>
+		<p class="results text-center"></p>
+    </div>
+</div>
+
+<!-- Footer -->
+<?php include("../../incl/footer.php");?>