🎨 Code cleaning and style improvement

ProjetProgWeb/api.php

@@ -11,7 +11,10 @@ $author_name = filter_var($_GET['author'], FILTER_SANITIZE_ADD_SLASHES);
 $q = $_GET['q'];
 
 if (strlen($author_name) < 3) {
-    print_r(json_encode(array("status" => 400, "message" => "Le nom de l'auteur doit comporter un minimum de 3 caractères.")));
+    print_r(json_encode(array(
+        "status" => 400,
+        "message" => "Le nom de l'auteur doit comporter un minimum de 3 caractères."
+    )));
     exit();
 }
 
@@ -25,6 +28,6 @@ $json_object = match ($q) {
 $json = json_encode(array(
     "status" => 200,
     "message" => "Success", "data" => $json_object
-    ),JSON_PRETTY_PRINT);
+    ));
 
-print_r($json);
+echo $json;

ProjetProgWeb/app.js

@@ -85,13 +85,25 @@ function fadeIn() {
 
 window.addEventListener('scroll', fadeIn);
 
+function updateUnderline(number) {
+    pagesNumbers.childNodes.forEach(elem => {
+        if (elem.innerHTML == number) {
+            elem.style.textDecoration = "underline"
+        } else {
+            elem.style.textDecoration = 'none'
+        }
+    })
+}
+
 let resultsArray = []
 let count = 0
+let nbPages = 0
 
 function displayResults(results) {
 
     if (results.status === 400) {
         loader.style.display = "none"
+        error.classList.remove("fade-out");
         error.classList.add("fade-in");
         errorMessage.innerHTML = results.message
         return;
@@ -119,7 +131,7 @@ function displayResults(results) {
 
         loader.style.display = "none"
 
-        let nbPages = Math.ceil(count / RESULTS_NUMBER)
+        nbPages = Math.ceil(count / RESULTS_NUMBER)
 
         for (let i = 0 ; i < nbPages ; i++) {
             let number = document.createElement('p')
@@ -127,10 +139,7 @@ function displayResults(results) {
             if (i === 0)
                 number.style.textDecoration = 'underline'
             number.onclick = (e) => {
-                document.querySelectorAll('.page-nav div p').forEach(elem => {
-                    elem.style.textDecoration = 'none'
-                })
-                e.target.style.textDecoration = 'underline' // TODO Mettre dans browseResults
+                updateUnderline(e.target.innerHTML)
                 browseResults(i + 1)
             }
             pagesNumbers.appendChild(number)
@@ -144,8 +153,9 @@ function displayResults(results) {
 let currentPage = 1
 
 function browseResults(wantedPage) {
-    if (wantedPage > 0) {
+    if (wantedPage > 0 && wantedPage < nbPages+1) {
         emptyResults()
+        updateUnderline(wantedPage)
         currentPage = wantedPage
         wantedPage *= RESULTS_NUMBER
         resultsArray.slice(wantedPage - RESULTS_NUMBER, wantedPage).forEach(result => {

ProjetProgWeb/stylesheet.css

@@ -328,15 +328,7 @@ header {
     fill: #302B2B;
     width: 20px;
     height: 20px;
-    background: #DE6161;
-    border-radius: 1px;
-    padding: 2px;
     margin-left: auto;
-    border: 1px solid #824D4D;
-}
-
-#error-button:hover {
-    background: #CA5D5D;
 }
 
 .loader {
@@ -417,7 +409,7 @@ header {
     padding: 0 15px 0 15px;
     border-radius: 20px;
     color: #1a5f7d;
-    background: linear-gradient(245deg, rgba(57, 179, 231, 0.50) -15%, rgba(0, 149, 219, 0.50) 110%);
+    background: linear-gradient(245deg, rgba(57, 179, 231, 0.15) -15%, rgba(0, 149, 219, 0.15) 110%);
 }
 
 .page-nav div {