🎨 Replaced author with title and vice versa

ProjetProgWeb/app.js

@@ -144,16 +144,16 @@ function displayResults(results, aCount) {
 
             let header = document.createElement('div')
 
-            let qAuthor = elem[0]
-            let author = document.createElement('h3')
-            let pre_replacement = new RegExp(searchString, 'gi').exec(qAuthor)
-            author.innerHTML = qAuthor.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
-
             let qTitle = elem[2]
-            let title = document.createElement('p')
+            let title = document.createElement('h3')
-            pre_replacement = new RegExp(searchString, 'gi').exec(qTitle)
+            let pre_replacement = new RegExp(searchString, 'gi').exec(qTitle)
             title.innerHTML = qTitle.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
 
+            let qAuthor = elem[0]
+            let author = document.createElement('p')
+            pre_replacement = new RegExp(searchString, 'gi').exec(qAuthor)
+            author.innerHTML = qAuthor.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
+
             let firstElement = document.createElement('div')
             firstElement.classList.add('result-element-header')
 
@@ -167,8 +167,8 @@ function displayResults(results, aCount) {
                 }
             }
 
-            firstElement.append(author, onlineButton)
+            firstElement.append(title, onlineButton)
-            header.append(firstElement, title)
+            header.append(firstElement, author)
 
             let content = document.createElement('div')
             content.classList.add('element-content')

ProjetProgWeb/index.php

@@ -54,6 +54,7 @@
 
         <!-- TODO Footer avec lien vers depot github -->
 
+        <script src="https://code.highcharts.com/highcharts.src.js"></script>
         <script src="app.js"></script>
 
     </body>

ProjetProgWeb/stylesheet.css

@@ -312,6 +312,10 @@ header {
     transform: translateX(100px);
 }
 
+.result-element-header + p {
+    margin-top: 0;
+}
+
 .result-element:hover {
     box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 15px;
 }
@@ -322,15 +326,6 @@ header {
     cursor: pointer;
 }
 
-.result-element h3 {
-    overflow-wrap: break-word;
-}
-
-.result-element-header {
-    display: flex;
-    align-items: center;
-}
-
 .result-element-header button {
     background: none;
     border: none;