diff --git a/CSS/*.css b/CSS/*.css
index e4aa39b..fefe42f 100644
--- a/CSS/*.css
+++ b/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;
}
\ No newline at end of file
diff --git a/CSS/colors.css b/CSS/colors.css
index 91cf6f5..57b10c8 100644
--- a/CSS/colors.css
+++ b/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;
diff --git a/CSS/index.css b/CSS/index.css
index 563b869..a0a0b50 100644
--- a/CSS/index.css
+++ b/CSS/index.css
@@ -533,13 +533,99 @@ body{
.about-container{
grid-column: 1/4;
}
- /** Main Section */
+ /** 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;
}
- }
+ } */
\ No newline at end of file
diff --git a/JS/main.js b/JS/main.js
index 9fb998b..9817ef8 100644
--- a/JS/main.js
+++ b/JS/main.js
@@ -205,8 +205,8 @@ function fahrenheitToKelvin(number) { return (number - 32) * 5/9 + 273 }
/* HEADLINES */
async function headlines() {
- await getWeather()
- updateWeather()
+ // await getWeather()
+ // 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,7 +297,10 @@ 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 = ' Follow'
+ element.firstElementChild.classList.remove('blue-color')
+ element.classList.remove('blue-color')
+ } else {
+ element.innerHTML = ' Following'
+ element.firstElementChild.classList.add('blue-color')
+ element.classList.add('blue-color')
+ }
+}
+
+
+
+
+
+
+
/* API */
// fetchNewsArticles()
diff --git a/JS/variables.js b/JS/variables.js
index 6c98c13..ee1cceb 100644
--- a/JS/variables.js
+++ b/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'
diff --git a/headlines.php b/headlines.php
index 4457bf0..2245f5f 100644
--- a/headlines.php
+++ b/headlines.php
@@ -29,7 +29,7 @@
-
+ -->
diff --git a/search.php b/search.php
index e58b9e3..8329919 100644
--- a/search.php
+++ b/search.php
@@ -29,6 +29,27 @@
+