Updated search.php and improved CSS

CSS/colors.css

@@ -1,5 +1,6 @@
 :root{
     --bg: #ffffff;
+    --very-light-grey :#F7F7F7 ;
     --hover-light: #f2f3f4;
     --hover-medium: #dddddd;
     --hover-dark: #c4c4c4;

CSS/index.css

@@ -543,7 +543,7 @@ body{
                 /* background-color: rebeccapurple; */
             }
             .main-content-section.full {
-                grid-template-columns: 750px 1fr;
+                grid-template-columns: 820px 1fr;
                 grid-template-rows: 6rem auto;
             }
             .main-content-section.single {
@@ -556,23 +556,22 @@ body{
                width: 750px;
             }
             h1.search {
-                font-size: 2.2rem;
+                font-size: 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;
+                grid-column: 1/2;
             }
             .main-content-container {
                 grid-column: 1/2;
                 grid-row: 2/3;
             }
             #main-content-section.full #main-side-content-container{
-                grid-row: 2/3;
+                grid-row: 1/3;
                 grid-column: 2/3;
             }
             #main-content-header.search section {
@@ -617,6 +616,7 @@ body{
             .header-main-content.search figure.rectangle{
                 color: var(--font-medium);
             }
+
             /*
             .main-content-section.full {
                 width: auto;
@@ -885,8 +885,45 @@ body{
             }
 
             /** Main Aside */
-                #main-side-content-container{
+                /* #main-side-content-container{
                     padding-top: 25px;
+                } */
+
+
+                .suggested-words {
+                    background-color: var(--very-light-grey);
+                    border-radius: 20px;
+                }
+                .suggested-words header {
+                    margin-bottom: 10px;
+
+                }
+                .suggested-words div,
+                .suggested-words footer {
+                    color: var(--font-dark);
+                }
+                .suggested-words div {
+                    font-size: 1.1rem;
+                    cursor: pointer;
+                    padding: 5px 0 5px 10px;
+                }
+                .suggested-words div:hover {
+                    background-color: var(--hover-medium);
+                }
+                .suggested-words hr {
+                    border-bottom: 1px solid var(--hover-medium);
+                    width: 100%;
+                }
+                .suggested-words footer {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    font-size: 0.9rem;
+                    margin: 10px 0 0 0;
+                }
+                .suggested-words footer a {
+                    padding: 10px;
                 }
 
                 .weather-article{

JS/main.js

@@ -45,12 +45,14 @@ window.onclick = (e) => {
     else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions,e.target)
 }
 
-window.onkeydown = (e) => {
+window.onkeydown = test
-    // console.log(e.keyCode === 91 || e.keyCode === 93)
+
+function test() {
+    // alert(this)
 }
 
-for(let i = 0; i < document.querySelectorAll('a').length; i++)
+// for(let i = 0; i < document.querySelectorAll('a').length; i++)
-    document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() })
+//     document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() })
 
 function openLinks(string) { window.location.replace(websiteURL + string) }
 
@@ -72,6 +74,10 @@ async function getUsersCountry() {
     const userTimeZone = data.timezone
     return [userCountry,userCountryAcronym,userCity,userRegion,userLocation,userTimeZone]
 }
+
+let weatherArrayToday
+let weatherArrayTommorow
+let weatherArray2Days
 async function getWeather() {
     city = changeDiacritics(userLocationInformationValue[3])
     const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.weatherapi.com/v1/forecast.json?key=4d93fac43abe41dda15152718201307&q=${city}&days=7`)
@@ -95,6 +101,7 @@ function getLanguageAcronym(target) {
             return languageAcronyms[i]
 }
 
+
 function getCountryAcronym(target) {
     for(let i = 0; i < countries.length; i++)
         if(countries[i] === target)
@@ -222,7 +229,9 @@ async function headlines() {
         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)
+        addDisableSideElements()
     }
     function search() {
         if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines) 
@@ -230,6 +239,7 @@ async function 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)
+        suggestWords()
         /* Search news articles */
     }
     function mobileVersionNavigationBar() {
@@ -365,12 +375,12 @@ let resultArray = []
 let searchSuggestOptionSelectedWord
 const maxNumberSuggestWords = 6
 
-async function fetchWords() {
+async function fetchWords(input) {
-    const res = await fetch(`https://api.datamuse.com/sug?s=${mainSearchInput.value}`)
+    const res = await fetch(`https://api.datamuse.com/sug?s=${input}`)
     return words = await res.json()
 }
 async function manageSuggestWords() {
-    let  suggestWordsArray = await fetchWords()
+    let  suggestWordsArray = await fetchWords(mainSearchInput.value)
     if(suggestWordsArray.length === 0) return hideSuggestWords()
     
     if(suggestWordsArray.length > 6) suggestWordsArray = removeCharactersInString(suggestWordsArray, 4, suggestWordsArray.length)
@@ -407,7 +417,6 @@ function selectSuggestedSearchOption(element) {
     let elementInnerHTML = addCharacterBetweenSpaceInString(element.firstElementChild.innerHTML, ' ', '+')
         mainSearchInput.value = element.firstElementChild.innerHTML
     searchArticles()
-
 } 
 
 function addCharacterBetweenSpaceInString(word ,replace ,character) { 
@@ -424,7 +433,8 @@ function updateCountrySelect(country) {
     hideSelectCountry()
 }
 
-function createUrlPath(type,search) {
+function createUrlPath(type, search) {
+    if(search === undefined && location.pathname.includes(type)) return 
     let path 
     let query = ''
     if(type === 'headlines') path = filePath.headlines
@@ -433,9 +443,9 @@ function createUrlPath(type,search) {
         query = `q=${search}&`
     } 
     else if(type === 'following') path = filePath.following
-    else if(type === 'forYou') path = filePath.forYou
+    else if(type === 'for-you') path = filePath.forYou
     else if(type === 'library') path = filePath.library
-    else if(type === 'covid19') path = filePath.covid19
+    else if(type === 'covid-19') path = filePath.covid19
     else if(type === 'world') path = filePath.world
     else if(type === 'business') path = filePath.business
     else if(type === 'technology') path = filePath.technology
@@ -477,7 +487,7 @@ function generateCountries() {
     
     let newCountriesArray = removeSelectedValuesFromArray(suggestCountriesArray, countries)
     for(let i = 0; i < newCountriesArray.length; i++) 
-        createElementsForCountry(newCountriesArray[i],'not-active','normal') 
+        createElementsForCountry(newCountriesArray[i], 'not-active', 'normal') 
 }
 function removeDuplicates(array) { array.splice(0, array.length, ...(new Set(array))) }
 function removeSelectedValuesFromArray(array, target) { return target.filter(val => !array.includes(val)) }
@@ -549,8 +559,8 @@ searchCountriesInput.oninput = () => {
 
     newCountriesArray = newCountriesArray.filter((e) => { return e != null })
     for(let i = 0; i < newCountriesArray.length; i++) {
-        if(newCountriesArray[i] === lastSelectedCountry) createElementsForCountry(newCountriesArray[i],'active','list')
+        if(newCountriesArray[i] === lastSelectedCountry) createElementsForCountry(newCountriesArray[i], 'active', 'list')
-        else createElementsForCountry(newCountriesArray[i],'no','list')
+        else createElementsForCountry(newCountriesArray[i], 'no', 'list')
     }
 }
 
@@ -633,11 +643,9 @@ 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')
@@ -645,7 +653,6 @@ function saveSearchWord(element) {
     }
 }
 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')
@@ -658,6 +665,60 @@ function followSearchWord(element) {
 } 
 
 
+async function suggestWords() {
+    let fetchArray = []
+    let suggestWordsArray = []
+    let input = mainSearchInput.value.split(' ')
+    let n = 0
+    while(suggestWordsArray.length < 8) { 
+        fetchArray = await fetchWords(input[n])
+
+        for(let i = 0; i < fetchArray.length; i++)
+            if(suggestWordsArray.indexOf(fetchArray[i].word) === -1 && fetchArray[i].word !== mainSearchInput.value) suggestWordsArray.push(fetchArray[i].word)
+        
+        input[n] = removeCharactersInString(input[n], 0, -1)
+        if(input.length === 0) break
+        if(n == input.length) n = 0
+        else n++
+    }
+    document.querySelector('.suggested-words footer').innerHTML = 'More'    
+    removeDisableSideElements()
+    generateSuggestWords(suggestWordsArray)
+}
+
+let moreSuggestWordsArray = []
+function generateSuggestWords(array) {
+    let section = document.querySelector('.suggested-words section')
+        section.innerHTML = ''
+
+    for(let i = 0; i < array.length; i++) {
+        let div = document.createElement('div')
+            div.innerHTML = array[i]
+            // div.onclick = selectSuggestedSearchOption
+        let hr = document.createElement('hr')
+
+        if(i > 5) {
+            div.classList.add('disable')
+            hr.classList.add('disable')
+            moreSuggestWordsArray.push(div, hr)
+        } 
+        section.appendChild(div)
+        section.appendChild(hr)
+    }
+}
+function moreSuggestWords() { 
+    if(document.querySelector('.suggested-words footer').innerHTML.trim() === 'More') {
+        moreSuggestWordsArray.forEach(element => element.classList.remove('disable')) 
+        document.querySelector('.suggested-words footer').innerHTML = 'Less'    
+    } else {
+        moreSuggestWordsArray.forEach(element => element.classList.add('disable')) 
+        document.querySelector('.suggested-words footer').innerHTML = 'More'    
+    }
+}
+
+function addDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.add('disable')) }
+function removeDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.remove('disable')) }
+
 
 
 
@@ -684,3 +745,24 @@ function followSearchWord(element) {
 // }
 
 
+
+
+
+function sayHello (name, age) {
+    // console.log(name)
+    // console.log(age)
+    // console.log(this)
+}
+sayHello.call('This', 'Nik Topler', 18)
+
+const information = {
+    firstName : 'Nik',
+    lastName : 'Topler'
+}
+let { firstName } = information
+// console.log(firstName)
+
+
+let newArray = [1 ,2, 123, 23, 4, 3.123, 12, 93, 0]
+let result = newArray.filter( val => { return val % 2 === 1} )
+// console.log(result)

add-ons/side-bar.php

@@ -2,14 +2,14 @@
             <div class="side-bar-content grid fixed" id="side-bar-content">
                 <a href="#" class="side-menu-categories" onclick="createUrlPath('headlines')"><i
                         class="fal fa-newspaper fa-lg"></i>Top Stories</a>
-                <a href="#" class="side-menu-categories" onclick="createUrlPath('forYou')"><i
+                <a href="#" class="side-menu-categories" onclick="createUrlPath('for-you')"><i
                         class="fas fa-user-alt fa-lg"></i>For you</a>
                 <a href="#" class="side-menu-categories" onclick="createUrlPath('following')"><i
                         class="fal fa-star fa-lg"></i>Following</a>
                 <a href="#" class="side-menu-categories" onclick="createUrlPath('library')"><i
                         class="fas fa-bookmark fa-lg"></i>Saved news</a>
                 <hr>
-                <a href="#" class="side-menu-categories" onclick="createUrlPath('covid19')"><i
+                <a href="#" class="side-menu-categories" onclick="createUrlPath('covid-19')"><i
                         class="fad fa-shield-cross fa-lg"></i>COVID-19</a>
                 <hr>
                 <a href="#" class="side-menu-categories" onclick="createUrlPath('world')"><i

search.php

@@ -47,7 +47,16 @@
                 
             </div>
             <aside id="main-side-content-container">
-
+                <article class="suggested-words" class="disable">
+                    <header>
+                        <h1>Suggested Words</h1>
+                    </header>
+                    <section>
+                    </section>
+                    <footer onclick="moreSuggestWords()">
+                       More
+                    </footer>
+                </article>
             </aside>
         </section>
     </main>