Updated and improved search experience

CSS/*.css

@@ -230,7 +230,7 @@ body{
         color: var(--blue-light);
     }
     .green-link{
-        color: var(--green-light);
+        color: var(--green-light) !important;
     }
 
     .radio-button{
@@ -276,8 +276,14 @@ body{
     }
 
     .red-color {
-        color: var(--red-medium);
+        color: var(--red-medium) !important;
     }
     .yellow-color{
-        color: var(--yellow-medium);
+        color: var(--yellow-medium) !important;
+    }
+    .light-green-color {
+        color: var(--light-green) !important;
+    }
+    .blue-color{
+        color: var(--blue-medium) !important;
     }

CSS/colors.css

@@ -12,6 +12,7 @@
     --red-medium: rgb(253,29,29);
     --yellow-medium: rgb(255,205,0);
     --green-light: rgb(6, 146, 6);
+    --light-green: rgb(11, 172, 11);
 
     --title: #1f2024;
 

CSS/index.css

@@ -535,11 +535,97 @@ body{
     }
         /** Main Section */ 
             .main-content-section {
+                display: grid;
                 width: 1180px;
                 min-width: 500px;
                 height: 100%;
                 margin-top: 3rem;
+                /* background-color: rebeccapurple; */
+            }
+            .main-content-section.full {
                 grid-template-columns: 750px 1fr;
+                grid-template-rows: 6rem auto;
+            }
+            .main-content-section.single {
+                grid-template-columns: 1fr auto 1fr;
+            }
+            .main-content-section.single 
+            .main-content-container {
+               grid-column: 2/3;
+               min-width: 500px;
+               width: 750px;
+            }
+            h1.search {
+                font-size: 2.2rem;
+                margin: auto;
+            }
+            #main-content-header.search {
+                /* background-color: orange; */
+                height: 6rem;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                grid-row: 1/2;
+                grid-column: 1/3;
+            }
+            .main-content-container {
+                grid-column: 1/2;
+                grid-row: 2/3;
+            }
+            #main-content-section.full #main-side-content-container{
+                grid-row: 2/3;
+                grid-column: 2/3;
+            }
+            #main-content-header.search section {
+                display: grid;
+                grid-template-columns: auto auto;
+            }
+            #main-content-header.search div {
+                grid-column: 2/3;
+                display: flex;
+                align-items: center;
+                justify-items: center;
+                height: 2.8rem;
+                margin: auto;
+            }
+            #main-content-header.search figure {
+                background-color: var(--bg);
+                box-shadow: 1px 1px 2px 1px var(--border-medium)
+            }
+            #main-content-header.search figure:hover {
+                cursor: pointer;
+                /* background-color: var(--hover-light); */
+            }
+            #main-content-header.search figure.circle {
+                border-radius: 50%;
+                width: 35px;
+                height: 35px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 15px;
+            }
+            #main-content-header.search figure.circle i {
+                display: flex;
+                align-items:center;
+                justify-items: center;
+                font-size: 18px;
+            }
+            #main-content-header.search figure.rectangle {
+                border-radius: 1rem;
+                padding: 0.6rem 1.2rem;
+            }
+            .header-main-content.search figure.rectangle{
+                color: var(--font-medium);
+            }
+            /*
+            .main-content-section.full {
+                width: auto;
+                display: flex;
+                align-content: center;
+                justify-items: center;
+            }
+            #main-content-container {
+                width: 750px;
             }
             .main-content-section figure article:last-child {
                 margin-bottom: 5rem;
@@ -555,7 +641,7 @@ body{
             .header-main-content a{
                 align-items: flex-end;
                 justify-content: flex-end;
-            }
+            } */
             #coronavirus-article{
                 grid-template-columns: 1fr 15px 10px;
             }
@@ -1127,7 +1213,7 @@ body{
             }
 
     /** Responsiveness */
-        @media screen and (max-width: 930px) {
+        /* @media screen and (max-width: 930px) {
             .navigation-bar{
                 grid-template-columns: 120px 1fr 85px;
             }
@@ -1144,5 +1230,5 @@ body{
                 z-index: 2;
             }
 
-        }
+        } */
     

JS/main.js

@@ -205,8 +205,8 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
 /* HEADLINES */
 
 async function headlines() {
-    await getWeather()   
+    // await getWeather()   
-    updateWeather()
+    // updateWeather()
     sidebarCategorySelect(document.querySelector('.fa-newspaper').parentElement)
 }
 
@@ -219,13 +219,17 @@ async function headlines() {
 
         if(mainSearchInput.value.length === 0) return
         let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
-        if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value, ' ','+')
+        if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value,' ','+')
         if(window.location.pathname.includes('search')) historyPushState(location.origin + location.pathname, `?q=${searchQuery}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
         else createUrlPath('search', searchQuery)
+        document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1)
     }
     function search() {
+        if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines)
+
         searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
         mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
+        document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1)
         /* Search news articles */
     }
     function mobileVersionNavigationBar() {
@@ -293,6 +297,9 @@ const regularExpressions = {
         query : /[\?|\&]+[q]+[=].*?[&]/g,
         country : /[\?|\&]+[c]+[o]+[u]+[=].{2}/g,
         backgroundColor : /[\&]+[b]+[g]+[=].*/g
+    },
+    string : {
+        symbols : /[@_!#$%^&*()<>?/|}{~:]/g
     }
 }
 
@@ -321,7 +328,10 @@ mainSearchInput.oninput = () => {
 }
 let place = 0
 mainSearchInput.onkeyup = (e) => {
-    if(e.keyCode === 13) return searchArticles()
+    if(e.keyCode === 13) {
+        if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
+        return searchArticles()
+    } 
     if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
 
     let suggestDivs = suggestMainInput.querySelectorAll('div')
@@ -400,7 +410,11 @@ function selectSuggestedSearchOption(element) {
 
 } 
 
-function addCharacterBetweenSpaceInString(word ,replace ,character) { return word.replace(replace, character) }
+function addCharacterBetweenSpaceInString(word ,replace ,character) { 
+    word = word.trim().replace(/\s\s+/g, ' ');
+    if(replace === ' ') return word.replace(/\s/g, character) 
+    else if(replace === '+')return word.replace(/\+/g, character)
+}
 
 function updateCountrySelect(country) {
     selectedCountry.innerHTML = country
@@ -617,6 +631,38 @@ function inputExtraSearchOptionChange() {
     }
 }
 
+
+function saveSearchWord(element) {
+    
+    if(element.firstElementChild.classList.contains('yellow-color')) {
+        element.firstElementChild.classList.remove('yellow-color', 'fa')
+        element.firstElementChild.classList.add('fal')
+
+    } 
+    else {
+        element.firstElementChild.classList.add('yellow-color', 'fa')
+        element.firstElementChild.classList.remove('fal')
+    }
+}
+function followSearchWord(element) {
+    console.log(element)
+    if(element.firstElementChild.classList.contains('blue-color')) {
+        element.innerHTML = ' <i class="fa fa-star"></i> Follow'
+        element.firstElementChild.classList.remove('blue-color')
+        element.classList.remove('blue-color')
+    } else {
+        element.innerHTML = ' <i class="fa fa-star"></i> Following'
+         element.firstElementChild.classList.add('blue-color')
+         element.classList.add('blue-color')
+    }
+} 
+
+
+
+
+
+
+
 /* API */
 
 // fetchNewsArticles()

JS/variables.js

@@ -8,7 +8,7 @@
     const colors = ['rgb(211, 47, 47)','rgb(123, 31, 162)','rgb(81, 45, 168)','rgb(48, 63, 159)','rgb(25, 118, 210)','rgb(2, 136, 209)','rgb(0, 151, 167)','rgb(0, 121, 107)','rgb(56, 142, 60)','rgb(104, 159, 56)','rgb(175, 180, 43)','rgb(251, 192, 45)','rgb(255, 160, 0)','rgb(245, 124, 0)','rgb(230, 74, 25)','rgb(93, 64, 55)','rgb(97, 97, 97)']
     const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
     const daysAcronyms = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
-    const websiteURL = 'http://localhost:8080/newsWebiste/'
+    const websiteURL = 'http://localhost:8080/News-website/'
     // const websiteURL = 'https://news.niktopler.com'
 
 

headlines.php

@@ -29,7 +29,7 @@
 
         <?php include 'add-ons/side-bar.php' ?>
 
-        <section class="main-content-section grid" id="main-content-section">
+        <!-- <section class="main-content-section grid" id="main-content-section">
             
             <figure id="main-content-container">
                 <header id="main-content-header" class="section-main-header header-main-content">
@@ -102,22 +102,9 @@
                             </section>
                         </footer>
                     </article>
-
-                    <!-- <article>
-                        <header>
-                            <h1>Popular news articles</h1>
-                        </header>
-                        <section>
-                            <div></div>
-                            <hr>
-                            <div></div>
-                            <hr>
-                        </section>
-                    </article> -->
-
                 </aside>
 
-        </section>
+        </section> -->
 
     </main>
 

search.php

@@ -29,6 +29,27 @@
 
         <?php include 'add-ons/side-bar.php' ?>
 
+        <section class="main-content-section full" id="main-content-section">
+            <header id="main-content-header" class="header-main-content search">
+                    <h1 class="search">Slovenia</h1>
+                    <section>
+                        <div>
+                            <figure class="circle" onclick="saveSearchWord(this)">
+                                <i class="fal fa-bookmark"></i>
+                            </figure>
+                            <figure class="rectangle" onclick="followSearchWord(this)">
+                                <i class="fa fa-star"></i> Follow
+                            </figure>
+                        </div>
+                    </section>
+                </header>
+            <div class="main-content-container">
+                
+            </div>
+            <aside id="main-side-content-container">
+
+            </aside>
+        </section>
     </main>
 
     <?php include 'add-ons/navigation-bar.php' ?>