theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Optimisation & Hotfix

Browse Source
This commit is contained in:
Divlo 2019-08-18 20:06:06 +02:00
parent 15bba4aef2
commit b176b370ca
15 changed files with 109 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
404.php
View File

@ -9,8 +9,8 @@
<!-- Page Content -->
<div class="container">
<h1 class="mt-4 text-center">Erreur <span class="yellow-color">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>
<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="important">Revenir à la page d'accueil ?</a></p>
</div>
<!-- Footer -->

59
css/style.css
View File

@ -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;
color:rgba(222, 222, 222, 0.9);
background-color: var(--background-color);
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 {
color: #ffd800;
a, a:hover {
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
{

6
incl/footer.php
View File

@ -1,7 +1,7 @@
<footer class="text-center">
<a href="#" class="yellow-color"><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="footer-text"><a href="https://divlo.fr/" target="_blank" class="yellow-color">Divlo</a> | Tous droits réservés</div>
<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="important" id="realDateTime"></span></div>
<div class="footer-text"><a href="https://divlo.fr/" target="_blank">Divlo</a> | Tous droits réservés</div>
</footer>
</body>

3
incl/header.php
View File

@ -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>

10
index.php
View File

@ -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>
<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>
<a class="d-flex justify-content-center" href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
<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>.
<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>

119
scripts/fonctions.js
View File

@ -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() {
document.location.replace("../../views/function-views/weatherRequest.php");
});
$("#submitWeatherRequest").click(function() {
document.location.replace("../../views/function-views/weatherRequest.php");
});
$("#cityName, #submitWeatherRequest").click(function() {
document.location.replace("../../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");
});
$("#cityName, #submitWeatherRequest").click(function() {
document.location.replace("../../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");
});
$("#cityName, #submitWeatherRequest").click(function() {
document.location.replace("../../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) {
let min = Math.ceil(minEntered);
let max = Math.floor(maxEntered);
function randomNumber(min, max) {
min = Math.ceil(min);
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) {
// 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');
function calculateAge(birthDateEntered) {
// 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
// Les variables de la fonction
let birthDateDay = parseInt(birthDateEntered[0] + birthDateEntered[1]);
let birthDateMonth = parseInt((birthDateEntered[3] + birthDateEntered[4]) - 1);
let birthDateYear = parseInt(birthDateEntered[6] + birthDateEntered[7] + birthDateEntered[8] + birthDateEntered[9]);
dateTimeUTC('0');
day = parseInt(day)
month = parseInt(month - 1);
year = parseInt(year);
// 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 dateNow = moment([year, month, day]);
let birthDate = moment([birthDateYear, birthDateMonth, birthDateDay]);
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! 🥳';
}
// Calcule l'âge - Moment.js
let ageYears = dateNow.diff(birthDate, 'year');
birthDate.add(ageYears, 'years');
else
{
return 'Vous avez ' + ageYear + ' ans, ' + ageMonth + ' mois et ' + ageDay + ' jour(s).';
}
}
else
{
return "Vous n'êtes pas encore né...";
}
let ageMonths = dateNow.diff(birthDate, 'months');
birthDate.add(ageMonths, 'months');
let ageDays = dateNow.diff(birthDate, 'days');
// Vérifie si la valeur entrée correspond à une date de naissance valide
if(birthDate._isValid === true)
{
// 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)
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
// 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
{

32
scripts/main.js
View File

@ -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.");
$("#cityName").click(function() {
$('.results').html(emptyMessageError);
$("#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

18
scripts/variables.js
View File

@ -1,18 +1,10 @@
/* 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 */
/* Messages d'erreur */
const emptyMessageError = "Vous ne pouvez pas rentré de valeur vide.";
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);
// 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
timeNow.setMinutes(timeNow.getMinutes() + utcOffset);

2
views/error404.php
View File

@ -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>

2
views/function-list.php
View File

@ -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>

2
views/function-views/calculateAge.php
View File

@ -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>

2
views/function-views/convertDistance.php
View File

@ -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">

2
views/function-views/convertTemperature.php
View File

@ -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>

2
views/function-views/randomNumber.php
View File

@ -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>

2
views/function-views/weatherRequest.php
View File

@ -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>