diff --git a/index.css b/index.css index 3e19352..b766942 100644 --- a/index.css +++ b/index.css @@ -27,6 +27,7 @@ grid-column-end: end; grid-row-start: row3; grid-row-end: span 1; + padding-bottom: 10px; } #entirePageGrid .newsBlogWeatherGrid { grid-column-start: first; @@ -79,7 +80,7 @@ /* NEWS BLOG WEATHER GRID DISPLAY START */ #newsBlogWeatherGrid { display: grid; - grid-template-columns: [first] 5% [second] 35% [third] 5% [fourth] 50% [fifth] 5% [end]; + grid-template-columns: [first] 5% [second] 27% [third] 5% [fourth] 58% [fifth] 5% [end]; grid-template-rows: [row1-start] 100% [row1-end] auto; } #newsBlogWeatherGrid .containerForNews { /* =========================================================== */ @@ -157,10 +158,10 @@ } @media (min-width: 577px){ cardScroll { - + flex: 0 0 auto; margin-bottom: 3px; - border: 2px solid gray; + border: 2px solid #B0B7BC; width: 100%; height: auto; background: white; @@ -177,7 +178,7 @@ cardScroll { position: relative; flex: 0 0 auto; margin-bottom: 3px; - border: 2px solid gray; + border: 2px solid #B0B7BC; width: 100%; height: auto; background: white; @@ -197,9 +198,9 @@ cardScroll { flex: 0 0 auto; margin-bottom: 3px; - border: 2px solid gray; + border: 2px solid #B0B7BC; width: 100%; - height: 300px; + height: 400px; background: white; color: black; font-size:0.8em; @@ -230,10 +231,12 @@ cardScroll { float: none; width: 60%; display: flex; - background-color: blue; + background-color: #002244; position:absolute; bottom: 10px; - right:25% + right:25%; + border-radius: 15%; + color: #B0B7BC; } } @@ -242,7 +245,9 @@ cardScroll { float: right; width: 30%; display: inline-block; - background-color: blue; + background-color: #002244; + border-radius: 15%; + color: #B0B7BC } } /* Local News Articles Display */ @@ -256,19 +261,24 @@ cardScroll { float: right; width: 30%; display: inline-block; - background-color: blue; + background-color: #002244; + border-radius: 15%; + color: #B0B7BC; +} -}} +} @media (max-width: 576px){ #articleSaveBtn { float: none; width: 50%; display: flex; - background-color: blue; + background-color: #002244; position:absolute; bottom: 10px; - right:35% + right:35%; + border-radius: 15%; + color: #B0B7BC } @@ -325,6 +335,13 @@ input { /* mobile for news and blog display ================================================================================== */ @media (max-width: 576px) { + #entirePageGrid { + display: grid; + grid-template-columns: [first] 100% [end]; + grid-template-rows: [row1] 3.91187rem [row2] 3rem [row3] 8rem [row4] auto [end]; + align-items: stretch; + } + #container{ display: grid; grid-template-columns: [first] 50px [third] 126.15px [fourth] 90px [fifth] 73px [end]; @@ -353,7 +370,7 @@ input { margin-right: 3px; border: 2px solid gray; width: 130px; - height: 300px; + height: 200px; background: white; color: white; font-size:0.8em; @@ -372,7 +389,7 @@ input { #newsBlogWeatherGrid { display: grid; grid-template-columns: [first] 5% [second] 90% [third] 5% [end]; - grid-template-rows: [first] 700px [second] auto [end]; + grid-template-rows: [first] 524px [second] auto [end]; } #newsBlogWeatherGrid .containerForNews { grid-column-start: second; @@ -406,4 +423,52 @@ input { .row p{ border-right: none; } +/*Make sure you delete floating curly brackets.... (see next line) :/*/ +} +.btn-primary{ + color:#B0B7BC; + background-color:#002244; +} + +a { + color: #002244; +} +#table { + border :1px solid #B0B7BC; + border-radius: 5px; + background-color: #B0B7BC; + padding: 100px; + position: relative; } +#titleEntry{ + position: absolute; + top:10px; + left:10px; + + +} +#imageEntry{ + position: absolute; + top:40px; + + left:10px; +} + +#contentEntry{ + position: absolute; + bottom:10px; + right:10px; +} + +#blogEntryBtn{ + position: absolute; + bottom: 10px; + left: 10px; + +} +#uploader { + position: relative; + bottom: 30px; + right: 90px; + +} \ No newline at end of file diff --git a/main.js b/main.js index d88b8d5..7c1a6d4 100644 --- a/main.js +++ b/main.js @@ -270,16 +270,17 @@ function blogEntry () { if (admin == "True") { document.getElementById('blogEntry').style.display = "block"; - let blogEntryForm = `

Blog Entry

+ let blogEntryForm = `

Blog Entry

0% -
` +
` document.getElementById('blogEntry').innerHTML = blogEntryForm + @@ -315,8 +316,14 @@ let blogRef = blogsRef.push({ blogID: titleEntry, blogTitle: titleEntry, blogImg: imageURL, - blogContent: contentEntry + blogContent: contentEntry, + + + }) + document.getElementById('titleEntry').value="" + + document.getElementById('contentEntry').value="" }) }} diff --git a/steve.css b/steve.css deleted file mode 100644 index 7b987d0..0000000 --- a/steve.css +++ /dev/null @@ -1,11 +0,0 @@ -img { - width: 100px; - height: 100px - -} - -.round-image {border-radius:50%} -#icon { - border-radius:50%; - -} \ No newline at end of file diff --git a/steve.html b/steve.html deleted file mode 100644 index b1d1f07..0000000 --- a/steve.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/steve.js b/steve.js deleted file mode 100644 index 68a88c5..0000000 --- a/steve.js +++ /dev/null @@ -1,117 +0,0 @@ -let news = document.getElementById("news") -let submitBtn = document.getElementById("submitBtn") -let zipInput = document.getElementById("zipInput") -let zippers = 77002 - -window.onload=loadData(zippers) - - -submitBtn.addEventListener("click",function(){ - zippers= zipInput.value - loadData(zippers) -}) - function loadData(zippers){ - let localWeather= `https://api.openweathermap.org/data/2.5/weather?zip=${zippers}&units=imperial&apiKey=5c532f33d76a318783dd01c47721de8e` - fetch(localWeather) - .then(response=>response.json()) - .then(weatherItems=>{ - console.log(weatherItems.main) - console.log(weatherItems) - let sunsetHMS = new Date(weatherItems.sys.sunset*1000) - let sunriseHMS = new Date(weatherItems.sys.sunrise*1000) - let sunrise = sunriseHMS.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); - let sunset = sunsetHMS.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); - let windDirection = getDirection(weatherItems.wind.deg) - let windspeed= weatherItems.wind.speed - let WindRound= Math.round(windspeed) - let temperature =weatherItems.main.temp - let tempeRound = Math.round(temperature) - //search inside the object in the array - console.log(weatherItems.weather[0].main) - - - - let weatherBug = ` -

Weather from ${weatherItems.name}:

-

Current Temperature: ${tempeRound} Deg

-

Wind Speed : ${WindRound} Mph; Direction: ${windDirection}

-

Sunrise: ${sunrise} Sunset: ${sunset}

- - - ` - weather.innerHTML=weatherBug - - - let localNews= `https://gnews.io/api/v2/?q=${weatherItems.name}&token=114071df888d1c4880c2bff07c8ffc33` - //let Houston = `https://newsapi.org/v2/everything?sources=nbc-news&q=${json.name}+country=US&sortBy=popularity&apiKey=1a6cdc031db640ff9e62b8e0e7716746` - fetch(localNews) - .then(response=>response.json()) - - .then(function(json){ return json - - }) - .then (function(newsItems){ - console.log(newsItems) - let newsID = newsItems.articles.map(function(news){ - console.log(news) - if (news.image ==""){ - - return ` -
  • ${news.title}
    • - Click to get story - - - - `} - else { - return ` -
  • ${news.title}
    • - Click to get story - - - - ` - } - }) - - news.innerHTML=newsID.join("") - - - }) - - - - - - - - - -}) - - - -} - -let weatherunlocked = " https://api.weatherunlocked.com/api/current/Houston?app_id=bd380335&app_key=0e7fb52b9aa056322bb61397d5c1e88a" - -function getDirection(angle) { - let directions = ['North', 'North-East', 'East', 'South-East', 'South', 'South-West', 'West', 'North-West']; - return directions[Math.round(((angle %= 360) < 0 ? angle + 360 : angle) / 45) % 8]; - -} - - -var d = new Date(); -var localeTime = d.toLocaleTimeString(); -var localeTimeSansSeconds = localeTime.replace(/:(\d{2}) (?=[AP]M)/, " "); - -//console.log(getDirection(0)) -//console.log(getDirection(90)) -//console.log(getDirection(180)) -//console.log(getDirection(270)) -//console.log(getDirection(180)) -//console.log(getDirection(45)) -//console.log(getDirection(135)) -//console.log(getDirection(225)) -//console.log(getDirection(305)) diff --git a/storage.js b/storage.js deleted file mode 100644 index f4b302d..0000000 --- a/storage.js +++ /dev/null @@ -1,9 +0,0 @@ - - -// var ref= firebase.database().ref("Uploads"); -// var storage = firebase.storage(); -// var pathReference = storage.ref('images/stars.jpg'); -// pathReference.getDownloadURL().then(function(url) { -// ref.push().set({ -// imgurl: url -// });