Updated search functions and responsiveness

CSS/*.css

@@ -9,8 +9,8 @@
 
 }
 body{
-    width: 100vw;
+    min-width: 100vw;
-    height: 100vh;
+    min-height: 100vh;
     font-family: 'Noto Sans', sans-serif;
 }
 
@@ -48,9 +48,7 @@ body{
     padding: 10px;
     color: var(--userTextInput);
 }
-.selected-option {
+.selected-option { background-color: var(--hover-light); }
-    background-color: var(--hover-light);
-}
 /* .selected-option:active {
     transition: all ease-in .18s;
 } */
@@ -58,55 +56,29 @@ body{
 /*? Reusable classes */
 
     /** Display */
-        .grid {
+        .grid { display: grid; }
-            display: grid;
+        .flex { display: flex; }
-        }
+        .disable { display: none !important; }
-        .flex {
-            display: flex;
-        }
-        .disable {
-            display: none !important;
-        }
 
     /** Position of elements */
-        .align-center{
+        .align-center{ align-items: center; }
-            align-items: center;
+        .justify-center{ justify-content: center; }
-        }
-        .justify-center{
-            justify-content: center;
-        }
 
     /** Position */
-        .relative{
+        .relative{ position: relative; }
-            position: relative;
+        .absolute{ position: absolute; }
-        }
+        .fixed{ position: fixed; }
-        .absolute{
-            position: absolute;
-        }
-        .fixed{
-            position: fixed;
-        }
 
     /** Border */
-        .border-radius-50{
+        .border-radius-50{ border-radius: 50%; }
-            border-radius: 50%;
-        }
 
     /** Cursor */
-        .pointer{
+        .pointer{ cursor: pointer; }
-            cursor: pointer;
+        .default-pointer{ cursor: default; }
-        }
+        .pointer-events-none{ pointer-events: none; }
-        .default-pointer{
-            cursor: default;
-        }
-        .pointer-events-none{
-            pointer-events: none;
-        }
 
     /** Link */
-        a{
+        a{ text-decoration: none; }
-            text-decoration: none;
-        }
     
     /** Img */
         .img{

CSS/index.css

@@ -1,7 +1,7 @@
 body{
     display: grid;
     grid-template-rows: 65px 1fr;
-    overflow-x: hidden;
+    overflow: hidden;
 }
 
 /*? Navigation Bar */
@@ -537,26 +537,110 @@ body{
     }
         /** Main Section */ 
             .main-content-section {
-                display: grid;
                 width: 1180px;
                 min-width: 500px;
                 height: 100%;
-                margin-top: 3rem;
+                padding: 20px;
-                /* background-color: rebeccapurple; */
+                margin-top: 65px;
             }
-            .main-content-section.full {
+            .main-content-container {
-                grid-template-columns: 820px 1fr;
+                height: 100%;
-                grid-template-rows: 6rem auto;
+                display: grid;
+                grid-template-columns: repeat(12,minmax(0,1fr));
+                grid-gap: 16px 32px;            
             }
-            .main-content-section.single {
+            .article-container { grid-column: 1/9; }
-                grid-template-columns: 1fr auto 1fr;
+            #main-side-content-container { grid-column: 9/13; } 
+            article.aside { border: none; }
+            article.aside.search {
+                display: grid;
+                grid-template-rows: auto auto;
             }
+            article.aside.search header {
+                display: grid;
+                grid-auto-rows: auto auto;
+                grid-auto-columns: 55px auto;
+                margin-bottom: 12px;
+            }
+            article.aside.search header figure {
+                grid-row: 1/3;
+                grid-column: 1/2;
+            }
+            article.aside.search header figure img {
+                width: 40px;
+                height: 40px;
+            }
+
+            article.aside.search header div {
+                grid-row: 1/2;
+                grid-column: 2/3;
+                display: flex;
+                align-content: center;
+                justify-items: center;
+                width: 100%;
+                height: 100%;
+                font-weight: 100;
+                font-size: 1.2rem;
+                color: var(--font-dark);
+            }
+            article.aside.search header span {
+                grid-row: 2/3;
+                grid-column: 2/3;
+                font-size: 0.8rem;
+                color: var(--font-dark);
+                margin: auto 0;
+                width: fit-content;
+            }
+            article.aside.search section {
+                display: inline-flex;
+                height: auto;
+                width: fit-content;
+            }
+            .white-button {
+                box-shadow: 0 1px 5px 0 var(--border-medium),
+                            0 1px 2px 0 var(--border-medium);
+                background-color: var(--bg);
+                border-radius: 0.9rem;
+                padding: 6px 12px;
+                margin: auto 0;
+                cursor: pointer;
+            }
+            .white-button i { 
+                color: var(--blue-light);
+                font-size: 0.9rem;
+            }
+            .white-button:first-child {
+                margin-right: 10px;
+            }
+            .white-button span { 
+                color: var(--font-dark); 
+                font-size: 1rem;
+            }
+            .white-button:hover {
+                box-shadow: 0 1px 6px 0 var(--border-dark),
+                            0 1px 1px 0 var(--border-dark);
+            }
+            .white-button:active {
+                background-color: var(--very-light-grey);
+            }
+            /* .main-content-container.full { grid-template-rows: 6rem auto; }
+            .main-content-container.single { grid-template-rows: 1fr; }
             .main-content-section.single 
             .main-content-container {
-               grid-column: 2/3;
+               grid-row: 1/2;
                min-width: 500px;
-               width: 750px;
             }
+            .main-content-section.full
+            .main-content-container {
+                grid-row: 2/3;
+            }
+            .main-content-container {
+                grid-column: 1/10;
+            }
+            #main-side-content-container {
+                grid-column: 11/15;
+            } */
+
             h1.search {
                 font-size: 2rem;
                 margin: auto;
@@ -568,14 +652,11 @@ body{
                 grid-row: 1/2;
                 grid-column: 1/2;
             }
-            .main-content-container {
+            /* #main-content-section.full 
-                grid-column: 1/2;
+            #main-side-content-container {
-                grid-row: 2/3;
-            }
-            #main-content-section.full #main-side-content-container{
                 grid-row: 1/3;
                 grid-column: 2/3;
-            }
+            } */
             #main-content-header.search section {
                 display: grid;
                 grid-template-columns: auto auto;
@@ -892,43 +973,41 @@ body{
                 } */
 
 
-                .suggested-words {
+                article.aside {
+                    border: none;
                     background-color: var(--very-light-grey);
-                    border-radius: 20px;
                 }
-                .suggested-words header {
+                .suggested-words header { margin-bottom: 10px; }
-                    margin-bottom: 10px;
+                .suggested-words header h1 {
-
-                }
-                .suggested-words div,
-                .suggested-words footer {
                     color: var(--font-dark);
-                }
+                    font-size: 1.3rem;
-                .suggested-words div {
+                    margin-bottom: 10px;
-                    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%;
+                    border-bottom: 1px solid var(--hover-medium);
                 }
-                .suggested-words footer {
+                .suggested-words div {
-                    display: flex;
+                    color: var(--font-dark);
-                    align-items: center;
+                }
-                    justify-content: center;
+                                
+                .search-box {
+                    background-color: var(--bg);
+                    border-radius: 12px;
+                    padding: 6px 10px;
+                    width: fit-content;
+                    border: 1px solid var(--hover-medium);
                     cursor: pointer;
-                    font-size: 0.9rem;
+                    margin: 0 8px 8px 0;
-                    margin: 10px 0 0 0;
+                    display: inline-flex;
+                    transition: all ease-in-out .18;
                 }
-                .suggested-words footer a {
+                .search-box:hover {
-                    padding: 10px;
+                    border: 1px solid var(--hover-dark);
+                    box-shadow: 0px 0px 2px var(--hover-medium);
                 }
 
-                .weather-article{
+                .weather-article {
                     height: 232px;
                     width: calc(100% - 40px);
                     grid-template-rows: 4.2rem 15px 1fr 15px 1.5rem;

JS/main.js

@@ -15,7 +15,7 @@ window.onload = async () => {
     else if (window.location.pathname.includes('setings')) setings()
     else if (window.location.pathname.includes('about')) about()
     else if (window.location.pathname.includes('help')) help()
-    else if (window.location.pathname.includes('search')) search()
+    else if (window.location.pathname.includes('search')) mainSearch()
 
     // changeBackgroundColor()
     let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
@@ -44,12 +44,6 @@ window.onclick = (e) => {
     else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions,e.target)
 }
 
-window.onkeydown = test
-
-function test() {
-    // alert(this)
-}
-
 // for(let i = 0; i < document.querySelectorAll('a').length; i++)
 //     document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() })
 
@@ -100,7 +94,6 @@ function getLanguageAcronym(target) {
             return languageAcronyms[i]
 }
 
-
 function getCountryAcronym(target) {
     for(let i = 0; i < countries.length; i++)
         if(countries[i] === target)
@@ -217,30 +210,66 @@ async function headlines() {
 }
 
 /* SEARCH */ 
-
+    function mainSearch(extra) {
-    function searchArticles() {
+        if(!window.location.pathname.includes('search')) return newSearch(extra) 
-
-        if(!mainSearchIcon.classList.contains('disable') && window.innerWidth < 930) mobileVersionNavigationBar()
-        else if(mainSearchIcon.classList.contains('disable') && window.innerWidth > 930) desktopVersionNavigationBar()
-
-        if(mainSearchInput.value.length === 0) return
-        let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
-        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) 
 
-        searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
+
-        mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
+        let locationSearch 
-        document.querySelectorAll('h1.search')[0].innerHTML = mainSearchInput.value.charAt(0).toUpperCase() + mainSearchInput.value.slice(1)
+        if(extra !== undefined) console.log(createUrlExtraOptions())
+        else {
+            searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
+            mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
+        }
+
+
+
+        hideSuggestWords()
+        addDisableSideElements()
         suggestWords()
+
         /* Search news articles */
     }
+    
+    function newSearch(extra) {
+        if(extra !== undefined) {
+            
+        }
+        // if(mainSearchInput.value.length === 0) return
+    
+        // if(!mainSearchIcon.classList.contains('disable') && window.innerWidth < 930) mobileVersionNavigationBar()
+        // else if(mainSearchIcon.classList.contains('disable') && window.innerWidth > 930) desktopVersionNavigationBar()
+
+        // let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
+        // if(extraSearchOptions.classList.contains('disable')) searchQuery = addCharacterBetweenSpaceInString(mainSearchInput.value,' ','+')
+
+
+
+        // else {
+        //     let urlPath = createUrlPath('search', searchQuery)
+        //     return console.log(urlPath)
+        // }
+
+    }
+
+    function createUrlExtraOptions(type) {
+        let hasWordsV = hasWords.value
+        let exactPhraseV = exactPhrase.value
+        let excludeWordsV = excludeWords.value
+
+        if(exactPhraseV.length !== 0 && hasWordsV.length === 0  && excludeWordsV.length === 0) return`"${exactPhraseV}"`
+        else if(hasWordsV.length !== 0 && exactPhraseV.length === 0  && excludeWordsV.length === 0) return devideStringIntoWords(hasWordsV,'HW')
+        else if(excludeWordsV.length !== 0 && exactPhraseV.length === 0  && hasWordsV.length === 0) return devideStringIntoWords(excludeWordsV,'EW')
+        else if (exactPhraseV.length !== 0 && hasWordsV.length !== 0  && excludeWordsV.length === 0) return `"${exactPhraseV}"+${devideStringIntoWords(hasWordsV,'HW')}`
+        else if(hasWordsV.length !== 0 && excludeWordsV.length !== 0 && exactPhraseV.length === 0) return `${devideStringIntoWords(hasWordsV,'HW')} ${devideStringIntoWords(excludeWordsV,'EW')}`
+        else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length === 0) return `"${exactPhraseV}" ${devideStringIntoWords(excludeWordsV,'EW')}`
+        else if(exactPhraseV.length !== 0 && excludeWordsV.length !== 0 && hasWordsV.length !== 0) return `"${exactPhraseV}" ${devideStringIntoWords(hasWordsV,'HW')} ${devideStringIntoWords(excludeWordsV,'EW')}`
+    }
+    function devideStringIntoWords(string, keyword){
+        if(keyword === 'HW') return `+${string.replace(/\s/g,' +')}`
+        if(keyword === 'EW') return  `-${string.replace(/\s/g,' -')}`
+    }
+
     function mobileVersionNavigationBar() {
         mainSearchIcon.classList.add('disable')
         mainSearchBackLeftIcon.classList.remove('disable')
@@ -337,28 +366,34 @@ mainSearchInput.oninput = () => {
 }
 let place = 0
 mainSearchInput.onkeyup = (e) => {
+    let suggestDivs = suggestMainInput.querySelectorAll('div')
+    let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
     if(e.keyCode === 13) {
-        if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
+
-        return searchArticles()
+        if(suggestDivActiveKey.length === 1) {
+            historyPushState(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(suggestDivActiveKey[0].firstElementChild.innerHTML, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
+            mainSearch()
+        }
+        // if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
+        // return mainSearch()
     } 
     if(suggestMainInput.classList.contains('disable') || suggestMainInput.querySelectorAll('div').length === 0) return
 
-    let suggestDivs = suggestMainInput.querySelectorAll('div')
 
     if(suggestMainInput.querySelectorAll('div.active').length === 0 && (e.keyCode === 40 || e.keyCode === 38)) {
         mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
         return suggestDivs[place].classList.add('active')
     } 
-    if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div .active')[0].classList.remove('active')
+    if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div .active')[0].classList.remove('active','key')
     if(e.keyCode === 40) {
         if(place === suggestDivs.length - 1) place = - 1
-        suggestDivs[place + 1].classList.add('active')
+        suggestDivs[place + 1].classList.add('active','key')
         place ++
         mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
     }
     else if(e.keyCode === 38) {
         if(place === 0) place = suggestDivs.length
-        suggestDivs[place - 1].classList.add('active')
+        suggestDivs[place - 1].classList.add('active','key')
         place --
         mainSearchInput.value = suggestDivs[place].firstElementChild.innerHTML
     }
@@ -389,15 +424,15 @@ async function manageSuggestWords() {
     for(let i = 0; i < suggestMainInput.getElementsByTagName('div').length;  i++) {
         suggestMainInput.getElementsByTagName('div')[i].onmouseover = () => { 
             place = i
-            if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div.active')[0].classList.remove('active')
+            if(suggestMainInput.querySelectorAll('div.active').length === 1) suggestMainInput.querySelectorAll('div.active')[0].classList.remove('active','key')
             suggestMainInput.getElementsByTagName('div')[i].classList.add('active') 
         }
-        suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active') }
+        suggestMainInput.getElementsByTagName('div')[i].onmouseleave = () => { suggestMainInput.getElementsByTagName('div')[i].classList.remove('active','key') }
     }
 }
 
 const suggestBox = words => {
-    let wordBoxes = words.map(word => `<div class="grid pointer" onclick="selectSuggestedSearchOption(this)">
+    let wordBoxes = words.map(word => `<div class="grid pointer" onclick="selectSuggestedSearchOption(this.firstElementChild)">
                                         <span>${word.word}</span>
                                     </div>`).join('')
     const html = `<hr class="absolute">${wordBoxes}`
@@ -413,13 +448,14 @@ function removeAllSuggestWordBoxes() {
 function selectSuggestedSearchOption(element) {
     removeActiveSidebarCategory()
     hideSuggestWords()
-    let elementInnerHTML = addCharacterBetweenSpaceInString(element.firstElementChild.innerHTML, ' ', '+')
+    let elementInnerHTML = addCharacterBetweenSpaceInString(element.innerHTML, ' ', '+')
-        mainSearchInput.value = element.firstElementChild.innerHTML
+    let selectedCountryAcronym = getCountryAcronym(selectedCountry.innerHTML)
-    searchArticles()
+    historyPushState(location.origin + location.pathname, `?q=${elementInnerHTML}&`, `cou=${selectedCountryAcronym}&`,`bg=${backgroundColor}`)
+    mainSearch()
 } 
 
 function addCharacterBetweenSpaceInString(word ,replace ,character) { 
-    word = word.trim().replace(/\s\s+/g, ' ');
+    word = word.trim().replace(/\s\s+/g, ' ')
     if(replace === ' ') return word.replace(/\s/g, character) 
     else if(replace === '+')return word.replace(/\+/g, character)
 }
@@ -452,8 +488,7 @@ function createUrlPath(type, search) {
     else if(type === 'sports') path = filePath.sports
     else if(type === 'health') path = filePath.health
     
-    path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
+    return path = `${path}?${query}cou=${getCountryAcronym(selectedCountry.innerHTML)}&bg=${backgroundColor}`
-    openLinks(path)
 }
 
 let activeCountry
@@ -669,61 +704,62 @@ async function suggestWords() {
     let suggestWordsArray = []
     let input = mainSearchInput.value.split(' ')
     let n = 0
-    while(suggestWordsArray.length < 8) { 
+
+    while(suggestWordsArray.length < 12) { 
         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)
+    removeDisableSideElements()
 }
 
 let moreSuggestWordsArray = []
 function generateSuggestWords(array) {
-    let section = document.querySelector('.suggested-words section')
+    let section = document.querySelector('article.suggested-words.aside section')
         section.innerHTML = ''
 
     for(let i = 0; i < array.length; i++) {
         let div = document.createElement('div')
             div.innerHTML = array[i]
-            div.classList.add('visible-auto')
+            div.classList.add('search-box')
-            // div.onclick = selectSuggestedSearchOption
+            div.onclick = () => selectSuggestedSearchOption(div)
-        let hr = document.createElement('hr')
-
-        if(i > 5) {
-            div.classList.add('visible-absolute')
-            hr.classList.add('visible-absolute')
-            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('visible-absolute')) 
-        let height = document.querySelectorAll('.suggested-words section div').length * 16 + document.querySelectorAll('.suggested-words section div').length + 
-        console.log(document.querySelectorAll('.suggested-words section div').length)
-        document.documentElement.style.cssText = `--suggest-more:${height}px`;
-        document.querySelector('.suggested-words footer').innerHTML = 'Less'    
-    } else {
-        document.documentElement.style.cssText = `--suggest-more:auto`;
-        // moreSuggestWordsArray.forEach(element => element.classList.add('visible-absolute')) 
-        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')) }
 
+function saveNews(element) {
+    
+    if(element.lastElementChild.textContent === 'Save') {
+        element.firstElementChild.classList.remove('far')
+        element.firstElementChild.classList.add('fas')
+        element.lastElementChild.textContent = 'Saved'
+    } else {
+        element.firstElementChild.classList.remove('fas')
+        element.firstElementChild.classList.add('far')
+        element.lastElementChild.textContent = 'Save'
+    }
+    //PHP
+}
+function followNews(element) {
 
+    if(element.lastElementChild.textContent === 'Follow') {
+        element.firstElementChild.classList.remove('far')
+        element.firstElementChild.classList.add('fas')
+        element.lastElementChild.textContent = 'Following'
+    } else {
+        element.firstElementChild.classList.remove('fas')
+        element.firstElementChild.classList.add('far')
+        element.lastElementChild.textContent = 'Follow'
+    }
+        //PHP
+}
 
 
 
@@ -769,4 +805,16 @@ let { firstName } = information
 
 let newArray = [1 ,2, 123, 23, 4, 3.123, 12, 93, 0]
 let result = newArray.filter( val => { return val % 2 === 1} )
-// console.log(result)
+// console.log(result)
+
+
+async function getSearchImage() {
+    const a = await fetch('https://pixabay.com/api/?key=18187948-25cec5ad4edb8ae89c0bd31f2&q=woman&image_type=photo')
+    let n = await a.json()
+    return n
+}
+// kkk()
+async function kkk() { 
+    let k = await getSearchImage() 
+    console.log(k)
+}

add-ons/navigation-bar.php

@@ -6,7 +6,7 @@
             <div class="menu-burger-icon">
             </div>
         </figure>
-        <a href="#" onclick="openLinks('headlines.php')" class="logo">Logo</a>
+        <a href="#" onclick="openLinks('headlines.php')" class="logo">Fews</a>
     </div>
 
     <div class="nav-search flex align-center justify-center relative" id="navigation-bar-middle">
@@ -15,7 +15,7 @@
                 placeholder="Search for latest news articles" autocomplete="off" value="">
             <figure class="search-icon-figure flex align-center justify-center relative" id="search-icon-figure">
                 <a href="#" class="search-icon flex align-center justify-center border-radius-50"
-                    id="main-search-icon-a" onclick="searchArticles()">
+                    id="main-search-icon-a" onclick="mainSearch()">
                     <i class="far fa-search" id="main-search-icon"></i>
                     <i class="far fa-arrow-left back-icon disable" id="main-search-icon-back-left"></i>
                 </a>
@@ -65,7 +65,7 @@
                 <button class="extra-option-btn ext-opt-reset pointer" id="extraOptionsClearButton"
                     onclick="resetExtraSearchOptions()">Clear</button>
                 <button class="extra-option-btn ext-opt-submit-disable pointer" id="extraOptionsSearchButton"
-                    onclick="">Search</button>
+                    onclick="mainSearch('extra')">Search</button>
             </footer>
         </aside>
         <aside class="search-words absolute disable" id="search-words" onmouseover="mouseSuggestHoverChange(true)" onmouseout="mouseSuggestHoverChange(false)">

headlines.php

@@ -29,9 +29,22 @@
 
         <?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">
+            <!-- <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> -->
             
-            <figure id="main-content-container">
+            <!-- <figure id="main-content-container">
                 <header id="main-content-header" class="section-main-header header-main-content">
                     <h1>Headlines</h1>
                     <a href="#" class="blue-link flex" onclick="showCategoryNews()">Categories</a>
@@ -44,67 +57,64 @@
                     <i class="fas fa-chevron-right corona-arrow pointer"></i>
                 </article>
 
-            </figure>
+            </figure> -->
+            <!-- <aside id="main-side-content-container">
+                <article class="weather-article grid relative">
+                    <header class="weather-main-header grid">
+                        <img src="" alt="" class="flex align-center justify-center">
+                        <label class="pointer"></label>
+                        <span class="temperature flex"></span>
+                    </header>
+                    <div class="weather-3-days grid">
+                        <section>
+                            <header></header>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="temperature flex"></span>
+                            </div>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="flex"></span>
+                            </div>
+                        </section>
+                        <section>
+                            <header></header>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="temperature flex"></span>
+                            </div>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="flex"></span>
+                            </div>
+                        </section>
+                        <section>
+                            <header></header>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="temperature flex"></span>
+                            </div>
+                            <div class="grid">
+                                <img src="" alt="" class="flex align-center justify-center">
+                                <span class="flex"></span>
+                            </div>
+                        </section>
 
-            <aside id="main-side-content-container">
+                    </div>
-
+                    <footer class="grid">
-                    <article class="weather-article grid relative">
+                        <section class="grid">
-                        <header class="weather-main-header grid">
+                            <div class="pointer active" onclick="changeTemperatureUnit(this)">C</div>
-                            <img src="" alt="" class="flex align-center justify-center">
+                            <div class="pointer" onclick="changeTemperatureUnit(this)">F</div>
-                            <label class="pointer"></label>
+                            <div class="pointer" onclick="changeTemperatureUnit(this)">K</div>
-                            <span class="temperature flex"></span>
+                        </section>
-                        </header>
+                        <section>
-                        <div class="weather-3-days grid">
+                            <a href="https://www.weatherapi.com/" target="_blank"
-                            <section>
+                                class="flex align-center justify-center">WeatherAPI</a>
-                                <header></header>
+                        </section>
-                                <div class="grid">
+                    </footer>
-                                    <img src="" alt="" class="flex align-center justify-center">
+                </article>
-                                    <span class="temperature flex"></span>
+            </aside> -->
-                                </div>
+        </section>
-                                <div class="grid">
-                                    <img src="" alt="" class="flex align-center justify-center">
-                                    <span class="flex"></span>
-                                </div>
-                            </section>
-                            <section>
-                                <header></header>
-                                <div class="grid">
-                                    <img src="" alt="" class="flex align-center justify-center">
-                                    <span class="temperature flex"></span>
-                                </div>
-                                <div class="grid">
-                                    <img src="" alt="" class="flex align-center justify-center">
-                                    <span class="flex"></span>
-                                </div>
-                            </section>
-                            <section>
-                                <header></header>
-                                <div class="grid">
-                                    <img src="" alt="" class="flex align-center justify-center">
-                                    <span class="temperature flex"></span>
-                                </div>
-                                <div class="grid">
-                                    <img src="" alt="" class="flex align-center justify-center">
-                                    <span class="flex"></span>
-                                </div>
-                            </section>
-
-                        </div>
-                        <footer class="grid">
-                            <section class="grid">
-                                <div class="pointer active" onclick="changeTemperatureUnit(this)">C</div>
-                                <div class="pointer" onclick="changeTemperatureUnit(this)">F</div>
-                                <div class="pointer" onclick="changeTemperatureUnit(this)">K</div>
-                            </section>
-                            <section>
-                                <a href="https://www.weatherapi.com/" target="_blank"
-                                    class="flex align-center justify-center">WeatherAPI</a>
-                            </section>
-                        </footer>
-                    </article>
-                </aside>
-
-        </section> -->
 
     </main>
 

search.php

@@ -29,35 +29,43 @@
 
         <?php include 'add-ons/side-bar.php' ?>
 
-        <section class="main-content-section full" id="main-content-section">
+        <section class="main-content-section single" 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 class="article-container">
+                    <article>
+
+                    </article>
+                </div>
+                <aside id="main-side-content-container">
+                    <article class="search aside">
+                        <header>
+                            <div>Slovenia</div>
+                            <figure>
+                                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" class="border-radius-50">
+                            </figure>
+                            <span>Topic</span>
+                        </header>
+                        <section>   
+                            <div class="white-button" onclick="saveNews(this)">
+                                <i class="far fa-bookmark"></i>
+                                <span>Save</span>
+                            </div> 
+                            <div class="white-button" onclick="followNews(this)">
+                                <i class="far fa-star fa-lg"></i>
+                                <span>Follow</span>
+                            </div>
+                        </section>
+                    </article>
+                    <article class="suggested-words aside disable">
+                        <header>
+                            <h1>Suggested Words</h1>
+                            <hr>
+                        </header>
+                        <section>
+                        </section>
+                    </article>
+                </aside>
             </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>