From 339bcfbae4636b5b755605c539d514ca9feb64bb Mon Sep 17 00:00:00 2001 From: Nik Topler Date: Mon, 31 Aug 2020 20:42:23 +0200 Subject: [PATCH] Updated search.php and improved CSS --- CSS/colors.css | 1 + CSS/index.css | 49 +++++++++++++++--- JS/main.js | 118 ++++++++++++++++++++++++++++++++++++------- add-ons/side-bar.php | 4 +- search.php | 11 +++- 5 files changed, 156 insertions(+), 27 deletions(-) diff --git a/CSS/colors.css b/CSS/colors.css index 57b10c8..a98b3fa 100644 --- a/CSS/colors.css +++ b/CSS/colors.css @@ -1,5 +1,6 @@ :root{ --bg: #ffffff; + --very-light-grey :#F7F7F7 ; --hover-light: #f2f3f4; --hover-medium: #dddddd; --hover-dark: #c4c4c4; diff --git a/CSS/index.css b/CSS/index.css index a0a0b50..3a1fbba 100644 --- a/CSS/index.css +++ b/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{ diff --git a/JS/main.js b/JS/main.js index 9817ef8..efd7339 100644 --- a/JS/main.js +++ b/JS/main.js @@ -45,12 +45,14 @@ window.onclick = (e) => { else if(!extraSearchOptions.classList.contains('disable')) clickInOutCheck(extraSearchOptions,e.target) } -window.onkeydown = (e) => { - // console.log(e.keyCode === 91 || e.keyCode === 93) +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() }) +// for(let i = 0; i < document.querySelectorAll('a').length; i++) +// 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,14 +229,17 @@ 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) + 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) + suggestWords() /* Search news articles */ } function mobileVersionNavigationBar() { @@ -365,12 +375,12 @@ let resultArray = [] let searchSuggestOptionSelectedWord const maxNumberSuggestWords = 6 -async function fetchWords() { - const res = await fetch(`https://api.datamuse.com/sug?s=${mainSearchInput.value}`) +async function fetchWords(input) { + 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') - else createElementsForCountry(newCountriesArray[i],'no','list') + if(newCountriesArray[i] === lastSelectedCountry) createElementsForCountry(newCountriesArray[i], 'active', '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 = ' 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) \ No newline at end of file diff --git a/add-ons/side-bar.php b/add-ons/side-bar.php index d508843..a8fc7ac 100644 --- a/add-ons/side-bar.php +++ b/add-ons/side-bar.php @@ -2,14 +2,14 @@
Top Stories - For you Following Saved news
- COVID-19