Updated security

I added sensitive information (keys/tokens/passwords,database,...)
to environment variables.

.env_sample

@@ -0,0 +1,3 @@
+IMAGE_API_KEY=YOUR_IMAGE_API_KEY
+USER_LOCATION_API_KEY=YOUR_USER_LOCATION_API_KEY
+WEATHER_API_KEY=YOUR_WEATHER_API_KEY

.gitignore

@@ -0,0 +1,8 @@
+.env
+node_modules
+package.json
+package-lock.json
+vendor
+composer.json
+composer.lock
+composer.phar

CSS/index.css

@@ -1000,11 +1000,10 @@ body{
                     cursor: pointer;
                     margin: 0 8px 8px 0;
                     display: inline-flex;
-                    transition: all ease-in-out .18;
+                    transition: all ease-in-out .35;
                 }
                 .search-box:hover {
-                    border: 1px solid var(--hover-dark);
-                    box-shadow: 0px 0px 2px var(--hover-medium);
+                    border: 1px solid var(--font-light);
                 }
 
                 .weather-article {

JS/main.js

@@ -39,13 +39,23 @@ window.onload = async () => {
 window.onclick = (e) => {  
     
     if(logInOptions.classList.contains('active')) clickInOutCheck(logInOptions, e.target)
+    else if(!suggestMainInput.classList.contains('disable')) clickInOutCheck(suggestMainInput, e.target)
     else if(!extOptProfile.classList.contains('disable')) clickInOutCheck(extOptProfile, e.target)
     else if(selectCountryDiv.classList.contains('active')) clickInOutCheck(selectCountryDiv, e.target)
     else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions, e.target)
 }
 
-// for(let i = 0; i < document.querySelectorAll('a').length; i++)
-//     document.querySelectorAll('a')[i].addEventListener('click', (e) => { e.preventDefault() })
+async function getPrivateInfo(word) {
+    let formData = new FormData
+        formData.append(word, '') 
+
+    const response =  await fetch('privateInfo.php', {                          
+        method: "POST", 
+        body: formData
+    })
+    const data = await response.text()
+    return data
+}
 
 function openLinks(string) { window.location.replace(websiteURL + string) }
 
@@ -57,7 +67,8 @@ let userLocationInformationValue
 async function getuserLocationInformationValue() { userLocationInformationValue = await getUsersCountry() }
 
 async function getUsersCountry() {
-    const response = await fetch('https://ipinfo.io?token=ea08233c62eaef')
+    const key = await getPrivateInfo('user')
+    const response = await fetch(`https://ipinfo.io?token=${key}`)
     const data = await response.json()
     const userCountryAcronym = data.country.toLowerCase()
     const userCountry = getAcronymCountry(userCountryAcronym)
@@ -65,7 +76,7 @@ async function getUsersCountry() {
     const userRegion = data.region
     const userLocation = data.loc
     const userTimeZone = data.timezone
-    return [userCountry,userCountryAcronym,userCity,userRegion,userLocation,userTimeZone]
+    return [userCountry, userCountryAcronym, userCity, userRegion, userLocation, userTimeZone]
 }
 
 let weatherArrayToday
@@ -73,7 +84,8 @@ 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`)
+    const key = getPrivateInfo('weather')
+    const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.weatherapi.com/v1/forecast.json?key=${key}&q=${city}&days=7`)
     const data = await response.json()
     weatherArrayToday = data.forecast.forecastday[0]
     weatherArrayTommorow = data.forecast.forecastday[1]
@@ -152,10 +164,12 @@ function updateWeather() {
 function changeTemperatureUnit(element) {
     const unit = element.innerHTML
     const temperatureElements = document.querySelectorAll('.temperature')
+
     let numberString
     let number
     let newUnit 
     let convertMethod
+
     if(unit === temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1)) return
     if(unit === 'F' && temperatureElements[0].innerHTML.charAt(temperatureElements[0].innerHTML.length - 1) === 'C') {
         newUnit = '°F'
@@ -182,11 +196,13 @@ function changeTemperatureUnit(element) {
         convertMethod = fahrenheitToKelvin
         numberString = -2
     }
+
     for(let i = 0; i < temperatureElements.length; i ++) {
         number = removeCharactersInString(temperatureElements[i].innerHTML, 0, numberString)
         number = convertMethod(number)
         temperatureElements[i].innerHTML = Math.round(number) + newUnit
     }
+
     document.querySelectorAll('.weather-article .active')[0].classList.remove('active')
     element.classList.add('active')
 }
@@ -214,18 +230,18 @@ async function headlines() {
         if(!window.location.pathname.includes('search')) return newSearch(extra) 
         if(window.location.search.match(regularExpressions.url.query) === null) return openLinks(filePath.headlines) 
 
-
+        addDisableSideElements()
+        console.log(extra === undefined)
         let locationSearch 
-        if(extra !== undefined) console.log(createUrlExtraOptions())
-        else {
+        if(extra === undefined) {
             searchInputValue = window.location.search.match(regularExpressions.url.query)[0].slice(3, -1)
             mainSearchInput.value = addCharacterBetweenSpaceInString(searchInputValue, '+', ' ')
+            updateSearchBox(mainSearchInput.value.trim())
+        } else {
+            console.log(createUrlExtraOptions())
         }
 
-
-
         hideSuggestWords()
-        addDisableSideElements()
         suggestWords()
 
         /* Search news articles */
@@ -355,8 +371,9 @@ function removeActiveSidebarCategory() {
 }
 
 mainSearchInput.onfocus = () => {
-    if(!extraSearchOptions.classList.contains('disable')) manageExtraSearchOptions()
+    if(!extraSearchOptions.classList.contains('disable')) return manageExtraSearchOptions()
     else if(mainSearchInput.value.length !== 0) showSuggestWords()
+    manageSuggestWords()
 }
 
 mainSearchInput.oninput = () => {
@@ -370,10 +387,9 @@ mainSearchInput.onkeyup = (e) => {
     let suggestDivActiveKey = suggestMainInput.querySelectorAll('div.active.key')
     if(e.keyCode === 13) {
 
-        if(suggestDivActiveKey.length === 1) {
-            historyPushState(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(suggestDivActiveKey[0].firstElementChild.innerHTML, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
+        if(suggestDivActiveKey.length === 1) historyPushState(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(suggestDivActiveKey[0].firstElementChild.innerHTML, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
+        else historyPushState(location.origin + location.pathname, `?q=${addCharacterBetweenSpaceInString(mainSearchInput.value, ' ', '+')}&`, `cou=${getCountryAcronym(selectedCountry.innerHTML)}&`,`bg=${backgroundColor}`)
         mainSearch()
-        }
         // if(!suggestMainInput.classList.contains('disable')) hideSuggestWords()
         // return mainSearch()
     } 
@@ -511,7 +527,6 @@ function generateCountries() {
 
     removeDuplicates(suggestCountriesArray)
 
-
     for(let i = 0; i < suggestCountriesArray.length; i++) {
         if(i === 0 && selectedC == null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries') 
         else if(i === suggestCountriesArray.length - 1 && selectedC !== null) createElementsForCountry(suggestCountriesArray[i], 'active', 'suggested-countries')
@@ -520,6 +535,7 @@ function generateCountries() {
     selectedC = null
     
     let newCountriesArray = removeSelectedValuesFromArray(suggestCountriesArray, countries)
+
     for(let i = 0; i < newCountriesArray.length; i++) 
         createElementsForCountry(newCountriesArray[i], 'not-active', 'normal') 
 }
@@ -636,6 +652,7 @@ function clickInOutCheck(parent,target) {
     checkIfClickIsOnElement(noChildren, target)
     
     if(clickOnOpenedElement == false && parent == extraSearchOptions) manageExtraSearchOptions()
+    else if(clickOnOpenedElement == false && parent == suggestMainInput) hideSuggestWords()
     else if(clickOnOpenedElement == false && parent == extOptProfile) manageExtraProfileOptions()
     else if(clickOnOpenedElement == false && parent == selectCountryDiv) hideSelectCountry()
     else if(clickOnOpenedElement == false && parent == logInOptions) manageLoginOptions()
@@ -652,11 +669,7 @@ function doesElementHaveChildren(parent) {
     }
     else noChildren.push(parent)
 }
-function checkIfClickIsOnElement(array,target) {
-   for(let i = 0; i < array.length; i++) 
-       if(array[i] === target) 
-            return clickOnOpenedElement = true
-}
+function checkIfClickIsOnElement(array, target) { return array.filter(val => { return val === target}) }
 
 
 exactPhrase.oninput = () => { inputExtraSearchOptionChange() }
@@ -698,14 +711,13 @@ function followSearchWord(element) {
     }
 } 
 
-
 async function suggestWords() {
     let fetchArray = []
     let suggestWordsArray = []
     let input = mainSearchInput.value.split(' ')
     let n = 0
 
-    while(suggestWordsArray.length < 12) { 
+    while(suggestWordsArray.length < 16) { 
         fetchArray = await fetchWords(input[n])
 
         for(let i = 0; i < fetchArray.length; i++)
@@ -731,7 +743,27 @@ function generateSuggestWords(array) {
     }
 }
 
-function addDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.add('disable')) }
+async function updateSearchBox(query) {
+    let i = 0
+    let images = await fetchImages(query)
+    if(images.hits.length === 0) {
+        images = await fetchImages('nature')
+        i = Math.round(Math.random() * images.hits.length)
+    } 
+
+    let searchBox = document.querySelector('article.search.aside')
+        searchBox.firstElementChild.firstElementChild.innerHTML = capitalizeString(mainSearchInput.value)
+        searchBox.firstElementChild.querySelector('figure img').src = images.hits[i].webformatURL 
+        searchBox.firstElementChild.querySelector('figure img').classList.remove('disable')
+}
+async function fetchImages(query) {
+    const key = await getPrivateInfo('images')
+    const response = await fetch(`https://pixabay.com/api/?key=${key}&q=${query}&image_type=photo`)
+    const image = await response.json()
+    return image
+}
+
+function addDisableSideElements() { mainAsideContent.querySelectorAll('article').forEach(article => article.classList.add('disable')) }
 function removeDisableSideElements() { mainAsideContent.querySelectorAll('article.disable').forEach(article => article.classList.remove('disable')) }
 
 function saveNews(element) {
@@ -761,8 +793,7 @@ function followNews(element) {
         //PHP
 }
 
-
-
+function capitalizeString(string) { return string.charAt(0).toUpperCase() + string.slice(1) }
 
 /* API */
 
@@ -807,14 +838,3 @@ let newArray = [1 ,2, 123, 23, 4, 3.123, 12, 93, 0]
 let result = newArray.filter( val => { return val % 2 === 1} )
 // 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)
-}

JS/variables.js

@@ -11,7 +11,6 @@
     const websiteURL = 'http://localhost:8080/News-website/'
     // const websiteURL = 'https://news.niktopler.com'
 
-
     const topStoriesURL = '&t=topstories&'
     const everythingURL = '&t=everything&'
     const sourcesURL = '&t=sources&'

privateInfo.php

@@ -0,0 +1,15 @@
+<?php 
+require_once realpath(__DIR__ . '/vendor/autoload.php');
+use Dotenv\Dotenv;
+$dotend = Dotenv::createImmutable(__DIR__);
+$dotend->load();
+
+if($_SERVER['REQUEST_METHOD'] !== 'POST') return;
+if(isset($_POST['images'])) return image();
+if(isset($_POST['user'])) return user();
+if(isset($_POST['weather'])) return weather();
+
+function image() { echo $_ENV['IMAGE_API_KEY']; }
+function user() { echo $_ENV['USER_LOCATION_API_KEY']; }
+function weather() { echo $_ENV['WEATHER_API_KEY']; }
+    

search.php

@@ -39,9 +39,9 @@
                 <aside id="main-side-content-container">
                     <article class="search aside">
                         <header>
-                            <div>Slovenia</div>
+                            <div></div>
                             <figure>
-                                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" class="border-radius-50">
+                                <img src="" class="border-radius-50 disable">
                             </figure>
                             <span>Topic</span>
                         </header>
@@ -120,5 +120,6 @@
     <?php include 'add-ons/footer-scripts.php' ?>
 
 </body>
-
 <?php include 'add-ons/footer-scripts.php' ?>
+
+