From e130a7f9a107ba157f2bf4b796c19f67b8cafecd Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Thu, 25 Jul 2019 15:11:34 +0530 Subject: [PATCH 1/6] Signed-off-by: Aman Singh --- Week-3/index.html | 14 +++ Week-3/scripts/Render.js | 82 ++++++++++++++++ Week-3/scripts/Update_View.js | 103 ++++++++++++++++++++ Week-3/scripts/Utility.js | 44 +++++++++ Week-3/scripts/source.js | 4 + Week-3/style/style.css | 178 ++++++++++++++++++++++++++++++++++ 6 files changed, 425 insertions(+) create mode 100644 Week-3/index.html create mode 100644 Week-3/scripts/Render.js create mode 100644 Week-3/scripts/Update_View.js create mode 100644 Week-3/scripts/Utility.js create mode 100644 Week-3/scripts/source.js create mode 100644 Week-3/style/style.css diff --git a/Week-3/index.html b/Week-3/index.html new file mode 100644 index 0000000..4a8c25c --- /dev/null +++ b/Week-3/index.html @@ -0,0 +1,14 @@ + +
+ + + + + + +
+
+
+
+
+ diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js new file mode 100644 index 0000000..af2b313 --- /dev/null +++ b/Week-3/scripts/Render.js @@ -0,0 +1,82 @@ +function setRightContent(){ + let rightContainer = document.createElement('div'); + rightContainer.setAttribute('class', 'right-container'); + let categoryTitle = document.createElement('h4'); + categoryTitle.textContent = "Select Category"; + let select = document.createElement("select"); + select.setAttribute('id','ddlnewschannel'); + select.options.add( new Option("Select a NEWS Channel",null) ); + select.options.add( new Option("The Times of India","The Times of India") ); + select.options.add( new Option("Hindustantimes","Hindustantimes.com") ); + select.options.add( new Option("News18","News18.com") ); + select.options.add( new Option("Firstpost","Firstpost.com") ); + select.options.add( new Option("Ndtv","Ndtv.com") ); + select.options.add( new Option("Livemint","Livemint.com") ); + select.options.add( new Option("The Hindu","The Hindu") ); + select.options.add( new Option("Thewire","Thewire.in") ); + rightContainer.appendChild(categoryTitle); + rightContainer.appendChild(select); + fullContainer.appendChild(rightContainer); + select.options[0].disabled = true; + select.onchange = () => { + let val=select.value; + changeContent(val); + } +} +function setLeftContent(){ + let url = 'https://newsapi.org/v2/top-headlines?' + + 'country=in&' + + 'apiKey=ac1fd7a9fc1342abb913e554a9525d85&'+'pageSize=30'; + fetch(url) + .then((resp) => resp.json()) + .then(function(data) { + popup.data=data; + fullContent(data); + }) + .catch(function(error) { + console.log(error); + }); + fullContainer.appendChild(container); + } +function init(){ + popup.setAttribute('class','popup'); + let app = document.querySelector('main'); + app.appendChild(popup); + fullContainer.setAttribute('class', 'fullcont'); + container.setAttribute('class', 'left-container'); + let appBody= document.createElement('div'); + appBody.setAttribute('class','main-container'); + let headerBox=document.createElement('div'); + headerBox.setAttribute('class','headerbox') + let toptag=document.createElement('h2'); + toptag.textContent="NEWSFEED"; + let toptagItalic=document.createElement('i'); + toptagItalic.textContent="yet Another Newsfeed"; + let checkEmail=document.createElement('div'); + checkEmail.setAttribute('class','check'); + let email = document.createElement("input"); + email.setAttribute('id','email'); + email.type = "text"; + let subscribebtn = document.createElement('button'); + subscribebtn.innerHTML="Subscribe"; + subscribebtn.setAttribute('id','btn-email'); + subscribebtn.addEventListener("click", emailSave); + checkEmail.appendChild(email); + checkEmail.appendChild(subscribebtn); + headerBox.appendChild(toptag); + headerBox.appendChild(toptagItalic); + headerBox.appendChild(checkEmail); + let header = document.querySelector('header'); + header.appendChild(headerBox); + let footerTag=document.createElement('p'); + footerTag.setAttribute('id','footertag'); + let str = "\u00A9 NewsFeed 2019"; + footerTag.textContent=str; + let foot = document.querySelector('footer'); + foot.appendChild(footerTag); + app.prepend(appBody); + appBody.append(fullContainer); + setLeftContent(); + setRightContent(); + document.addEventListener('click', clicked(this)); +} diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js new file mode 100644 index 0000000..8ab8a4b --- /dev/null +++ b/Week-3/scripts/Update_View.js @@ -0,0 +1,103 @@ +function changeContent(val){ + let data=popup.data; + let similar=0; + container.innerHTML = ''; + let size=data.articles.length; + let card; + for(index in data.articles){ + if(data.articles[index].source.name===val){ + card= document.createElement('div'); + card.setAttribute('class', 'box'); + let image = document.createElement('img'); + image.setAttribute('class','image'); + image.src=data.articles[index].urlToImage; + let rightSide = document.createElement('div'); + rightSide.setAttribute('class','vertical'); + let title = document.createElement('h4') + title.textContent = data.articles[index].title; + let metaDisc = document.createElement('h6'); + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = data.articles[index].publishedAt; + let description = document.createElement('p'); + description.setAttribute('class','description') + description.textContent = data.articles[index].description; + let btn = document.createElement('button'); + let content = data.articles[index].content; + let contentHead=data.articles[index].title; + if(content){ + btn.data=content; + btn.heading=contentHead; + } + else{ + btn.data=data.articles[index].description; + btn.heading=contentHead; + } + btn.setAttribute('id',index); + btn.innerHTML="Continue Reading"; + btn.setAttribute('class','btncontinue'); + let horizontalLine = document.createElement("HR"); + rightSide.appendChild(title); + rightSide.appendChild(metaDisc); + rightSide.appendChild(description); + rightSide.appendChild(btn); + card.appendChild(image) + card.appendChild(rightSide) + container.appendChild(card); + if(Number(index)===Number(size-1)){ + console.log + card.style.paddingBottom='40px'; + } + container.appendChild(horizontalLine); + } + } + card.style.paddingBottom='40px'; +} +function fullContent(data){ + container.innerHTML = ''; + let size=data.articles.length; + for(index in data.articles ){ + let card = document.createElement('div'); + card.setAttribute('class', 'box'); + let image = document.createElement('img'); + image.setAttribute('class','image'); + image.src=data.articles[index].urlToImage; + let rightSide = document.createElement('div'); + rightSide.setAttribute('class','vertical'); + let title = document.createElement('h4') + title.textContent = data.articles[index].title; + let metaDisc = document.createElement('h6'); + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = data.articles[index].publishedAt; + let description = document.createElement('p'); + description.setAttribute('class','description') + description.textContent = data.articles[index].description; + let btn = document.createElement('button'); + btn.setAttribute('id',index); + btn.innerHTML="Continue Reading"; + let content = data.articles[index].content; + let contentHead=data.articles[index].title; + if(content){ + btn.data=content; + btn.heading=contentHead; + } + else{ + btn.data=data.articles[index].description; + btn.heading=contentHead; + } + btn.setAttribute('class','btncontinue'); + let horizontalLine = document.createElement("HR"); + rightSide.appendChild(title); + rightSide.appendChild(metaDisc); + rightSide.appendChild(description); + rightSide.appendChild(btn); + card.appendChild(image) + card.appendChild(rightSide) + container.appendChild(card); + if(Number(index)===Number(size-1)){ + card.style.paddingBottom='40px'; + } + container.appendChild(horizontalLine); + } +} diff --git a/Week-3/scripts/Utility.js b/Week-3/scripts/Utility.js new file mode 100644 index 0000000..15a2443 --- /dev/null +++ b/Week-3/scripts/Utility.js @@ -0,0 +1,44 @@ + +function clicked(){ + return clickEvent => { + if(/^\d+$/.test(clickEvent.srcElement.id)){ + popup.style.display = 'block'; + popup.innerHTML = ''; + let content=(document.getElementById(clickEvent.srcElement.id)).data; + let textArea = document.createElement('div'), + horizontaLine = document.createElement('hr'), + titlepopup = document.createElement('div'), + closePopup = document.createElement('div'), + descriptionpopup = document.createElement('div'); + descriptionpopup.textContent = content; + titlepopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; + titlepopup.appendChild(horizontaLine); + closePopup.textContent = '\u2A2f'; + textArea.appendChild(titlepopup); + textArea.appendChild(closePopup); + textArea.setAttribute('id','titleandcross'); + titlepopup.setAttribute('id','titlepopup'); + descriptionpopup.setAttribute('id','descriptionpopup'); + closePopup.setAttribute('id','closePopup'); + popup.appendChild(textArea); + popup.appendChild(descriptionpopup); + fullContainer.style.opacity = '0.3'; + + } + else if(clickEvent.srcElement.id === 'closePopup'){ + popup.style.display = 'none'; + fullContainer.style.opacity = '1'; + } + } +} +function emailSave(){ + let regexEmail = /\S+@\S+\.\S+/; + let emailid= document.getElementById('email').value; + if(regexEmail.test(emailid)){ + localStorage.setItem(emailid, JSON.stringify(emailid)); + alert("Subscribed successfully"); + } + else{ + alert("Invalid Emailid"); + } +} diff --git a/Week-3/scripts/source.js b/Week-3/scripts/source.js new file mode 100644 index 0000000..34ea246 --- /dev/null +++ b/Week-3/scripts/source.js @@ -0,0 +1,4 @@ +let fullContainer=document.createElement('div'); +let container = document.createElement('div'); +let popup = document.createElement('div'); +window.onload = init; diff --git a/Week-3/style/style.css b/Week-3/style/style.css new file mode 100644 index 0000000..9d80e2a --- /dev/null +++ b/Week-3/style/style.css @@ -0,0 +1,178 @@ +#titleandcross{ + display: flex; +} +#titlepopup{ + width: 80%; + font-size: 20px; + font-weight: bold;} +#closePopup{ + line-height: 20px; + font-weight: bold; + color: white; + font-size: 0.8em; + font-family: Arial; + text-align: center; + margin-left: auto; + width: 20px; + cursor: pointer; + border-radius: 100%; + background-color: #bf0000; +} +.popup{ + display: none; + position: fixed;top: 50%; + left: 50%; + margin-top: -250px; + margin-left: -450px; + width : 70%; + height: 70%; + z-index:100; + background-color:white; + border: solid; + border-width: 1px; + overflow-y: scroll; + padding:10px; +} +img{ + width: 20%; +} +body{ + margin:0px; +} +header{ + position: fixed; + top: 0; + width:100%; + margin: 0px; + border-width: 0.1px; + background-color:#273854; +} +.headerbox{ +display: flex; +} +HR{ + margin: 0px; +} +h2{ + color: white; + padding:20px; + margin: 0px; +} +i{ + padding:25px; + margin: 0px; + color:#FFFFFD; +} +footer{ + position: fixed; + bottom: 0; + width: 100%; + border-width: 0.1px; + background-color:#273854; + color:#FFFFFD; +} +main{ + height: 80%; + width: 100%; + margin: 0px; + border-width: 0.1px; + +} +.fullcont{ + display: flex; +} +.main-container{ + padding-top: 68px; + width: 100%; +} +.left-container{ + display: flex; + width: 80%; + height: 100%; + flex-direction: column; +} +.check{ + margin-left: auto; + padding-top:20px; +} +.right-container{ + margin: 10px; + display: flex; + flex-direction: column; + width: 20%; +} +.cols{ + display: flex; + width: 100%; + overflow: hidden; + height: 30%; +} +#btnsubscribe{ + background-color: #242424; + color: #FFFFFD; +} +.image{ + width:20%; + height:20%; +} +card{ + display: inline-block; +} +.col-picture{ + margin-top: 16px; + margin-left: 32px; + width: 16%; +} +.col-content{ + width: 75%; + margin-top: 16px; + margin-bottom: 0px; + padding-bottom: 0px; + margin-left: 22px; +} +#ddlnewschannel{ + width: 70%; +} +#btn-email{ + color:#FFFFFD; + background-color: #242424; +} +h4,h6,p{ + padding: 0px; + margin: 0px; +} +#btn{ + background-color: #C75D48 +} +.box{ + display:flex; + height:25%; + margin: 10px; +} +.description{ + margin:10px 0px; +} +.vertical{ + display: flex; + flex-direction: column; + padding-left: 15px; +} +.metadisc{ + font-style: italic; +} +#footertag{ + text-align: center; + padding :15px +} +#email{ + width:60%; +} +.btncontinue{ + margin-top: auto; + width:150px; + background-color: #C75D48; +} +p{ + overflow: hidden; + text-overflow: ellipsis; +} From d7d4e263b749ab2ae8b2d7f6d8b6a341f3f65dea Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 26 Jul 2019 17:38:15 +0530 Subject: [PATCH 2/6] updated week -3 tasks with code standarads --- Week-3/index.html | 1 + Week-3/scripts/Render.js | 91 +++++++------------------- Week-3/scripts/Update_View.js | 119 +++++++++++++++++----------------- Week-3/scripts/Utility.js | 40 ++++++------ Week-3/scripts/constants.js | 17 +++++ Week-3/scripts/source.js | 47 +++++++++++++- Week-3/style/style.css | 8 +-- 7 files changed, 170 insertions(+), 153 deletions(-) create mode 100644 Week-3/scripts/constants.js diff --git a/Week-3/index.html b/Week-3/index.html index 4a8c25c..1a191d2 100644 --- a/Week-3/index.html +++ b/Week-3/index.html @@ -2,6 +2,7 @@
+ diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js index af2b313..0c0c4c0 100644 --- a/Week-3/scripts/Render.js +++ b/Week-3/scripts/Render.js @@ -1,82 +1,41 @@ -function setRightContent(){ - let rightContainer = document.createElement('div'); +function setRightContent(article_data,fullContainer,container){ + let rightContainer = document.createElement('div'), + categoryTitle = document.createElement('h4'), + select = document.createElement('select'), + datas=[]; + rightContainer.setAttribute('class', 'right-container'); - let categoryTitle = document.createElement('h4'); - categoryTitle.textContent = "Select Category"; - let select = document.createElement("select"); + categoryTitle.textContent =selectCategoryText; select.setAttribute('id','ddlnewschannel'); - select.options.add( new Option("Select a NEWS Channel",null) ); - select.options.add( new Option("The Times of India","The Times of India") ); - select.options.add( new Option("Hindustantimes","Hindustantimes.com") ); - select.options.add( new Option("News18","News18.com") ); - select.options.add( new Option("Firstpost","Firstpost.com") ); - select.options.add( new Option("Ndtv","Ndtv.com") ); - select.options.add( new Option("Livemint","Livemint.com") ); - select.options.add( new Option("The Hindu","The Hindu") ); - select.options.add( new Option("Thewire","Thewire.in") ); + select.options.add( new Option(defaultSelectChannelText,null) ); + for(item in article_data.articles){ + if(datas.indexOf(article_data.articles[item].source.name)!==-1){ + continue; + } + else{ + select.options.add( new Option(article_data.articles[item].source.name,article_data.articles[item].source.name) ); + datas.push(article_data.articles[item].source.name); + } + } rightContainer.appendChild(categoryTitle); rightContainer.appendChild(select); fullContainer.appendChild(rightContainer); select.options[0].disabled = true; select.onchange = () => { let val=select.value; - changeContent(val); + changeContent(val,fullContainer,container); } } -function setLeftContent(){ - let url = 'https://newsapi.org/v2/top-headlines?' + - 'country=in&' + - 'apiKey=ac1fd7a9fc1342abb913e554a9525d85&'+'pageSize=30'; - fetch(url) +function setLeftContent(fullContainer,container){ + let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=ac1fd7a9fc1342abb913e554a9525d85&pageSize=20`; + fetch(url) .then((resp) => resp.json()) .then(function(data) { - popup.data=data; - fullContent(data); + fullContainer.data=data; + fullContent(data,container); + setRightContent(data,fullContainer,container); }) .catch(function(error) { - console.log(error); }); - fullContainer.appendChild(container); + fullContainer.appendChild(container); } -function init(){ - popup.setAttribute('class','popup'); - let app = document.querySelector('main'); - app.appendChild(popup); - fullContainer.setAttribute('class', 'fullcont'); - container.setAttribute('class', 'left-container'); - let appBody= document.createElement('div'); - appBody.setAttribute('class','main-container'); - let headerBox=document.createElement('div'); - headerBox.setAttribute('class','headerbox') - let toptag=document.createElement('h2'); - toptag.textContent="NEWSFEED"; - let toptagItalic=document.createElement('i'); - toptagItalic.textContent="yet Another Newsfeed"; - let checkEmail=document.createElement('div'); - checkEmail.setAttribute('class','check'); - let email = document.createElement("input"); - email.setAttribute('id','email'); - email.type = "text"; - let subscribebtn = document.createElement('button'); - subscribebtn.innerHTML="Subscribe"; - subscribebtn.setAttribute('id','btn-email'); - subscribebtn.addEventListener("click", emailSave); - checkEmail.appendChild(email); - checkEmail.appendChild(subscribebtn); - headerBox.appendChild(toptag); - headerBox.appendChild(toptagItalic); - headerBox.appendChild(checkEmail); - let header = document.querySelector('header'); - header.appendChild(headerBox); - let footerTag=document.createElement('p'); - footerTag.setAttribute('id','footertag'); - let str = "\u00A9 NewsFeed 2019"; - footerTag.textContent=str; - let foot = document.querySelector('footer'); - foot.appendChild(footerTag); - app.prepend(appBody); - appBody.append(fullContainer); - setLeftContent(); - setRightContent(); - document.addEventListener('click', clicked(this)); -} diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js index 8ab8a4b..db662bb 100644 --- a/Week-3/scripts/Update_View.js +++ b/Week-3/scripts/Update_View.js @@ -1,81 +1,82 @@ -function changeContent(val){ - let data=popup.data; +function changeContent(val,fullContainer,container){ + let data=fullContainer.data; let similar=0; - container.innerHTML = ''; + container.innerHTML = ''; let size=data.articles.length; let card; - for(index in data.articles){ - if(data.articles[index].source.name===val){ + for(index in data.articles){ + let btn = document.createElement('button'), + image = document.createElement('img'), + rightSide = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + horizontalLine = document.createElement('hr'); + + if(data.articles[index].source.name===val){ card= document.createElement('div'); - card.setAttribute('class', 'box'); - let image = document.createElement('img'); - image.setAttribute('class','image'); - image.src=data.articles[index].urlToImage; - let rightSide = document.createElement('div'); - rightSide.setAttribute('class','vertical'); - let title = document.createElement('h4') - title.textContent = data.articles[index].title; - let metaDisc = document.createElement('h6'); - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = data.articles[index].publishedAt; - let description = document.createElement('p'); - description.setAttribute('class','description') - description.textContent = data.articles[index].description; - let btn = document.createElement('button'); - let content = data.articles[index].content; - let contentHead=data.articles[index].title; - if(content){ - btn.data=content; - btn.heading=contentHead; - } - else{ - btn.data=data.articles[index].description; - btn.heading=contentHead; - } - btn.setAttribute('id',index); - btn.innerHTML="Continue Reading"; - btn.setAttribute('class','btncontinue'); - let horizontalLine = document.createElement("HR"); - rightSide.appendChild(title); - rightSide.appendChild(metaDisc); - rightSide.appendChild(description); - rightSide.appendChild(btn); - card.appendChild(image) - card.appendChild(rightSide) - container.appendChild(card); - if(Number(index)===Number(size-1)){ - console.log - card.style.paddingBottom='40px'; - } - container.appendChild(horizontalLine); + card.setAttribute('class', 'box'); + image.setAttribute('class','image'); + image.src=data.articles[index].urlToImage; + rightSide.setAttribute('class','vertical'); + title.textContent = data.articles[index].title; + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = data.articles[index].publishedAt; + description.setAttribute('class','description') + description.textContent = data.articles[index].description; + let content = data.articles[index].content; + let contentHead=data.articles[index].title; + if(content){ + btn.data=content; + btn.heading=contentHead; + } + else{ + btn.data=data.articles[index].description; + btn.heading=contentHead; + } + btn.setAttribute('id',index); + btn.innerHTML=buttonText; + btn.setAttribute('class','btncontinue'); + rightSide.appendChild(title); + rightSide.appendChild(metaDisc); + rightSide.appendChild(description); + rightSide.appendChild(btn); + card.appendChild(image) + card.appendChild(rightSide) + container.appendChild(card); + if(Number(index)===Number(size-1)){ + card.style.paddingBottom='40px'; + } + container.appendChild(horizontalLine); + } } - } - card.style.paddingBottom='40px'; + card.style.paddingBottom='40px'; } -function fullContent(data){ +function fullContent(data,container){ container.innerHTML = ''; let size=data.articles.length; for(index in data.articles ){ - let card = document.createElement('div'); + let card = document.createElement('div'), + image = document.createElement('img'), + rightSide = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + btn = document.createElement('button'); + card.setAttribute('class', 'box'); - let image = document.createElement('img'); image.setAttribute('class','image'); image.src=data.articles[index].urlToImage; - let rightSide = document.createElement('div'); rightSide.setAttribute('class','vertical'); - let title = document.createElement('h4') title.textContent = data.articles[index].title; - let metaDisc = document.createElement('h6'); metaDisc.setAttribute('class','metadisc'); metaDisc.setAttribute('id','meta'); metaDisc.textContent = data.articles[index].publishedAt; - let description = document.createElement('p'); description.setAttribute('class','description') description.textContent = data.articles[index].description; - let btn = document.createElement('button'); btn.setAttribute('id',index); - btn.innerHTML="Continue Reading"; + btn.innerHTML=buttonText; let content = data.articles[index].content; let contentHead=data.articles[index].title; if(content){ @@ -87,7 +88,7 @@ function fullContent(data){ btn.heading=contentHead; } btn.setAttribute('class','btncontinue'); - let horizontalLine = document.createElement("HR"); + let horizontalLine = document.createElement('hr'); rightSide.appendChild(title); rightSide.appendChild(metaDisc); rightSide.appendChild(description); diff --git a/Week-3/scripts/Utility.js b/Week-3/scripts/Utility.js index 15a2443..8a8d49b 100644 --- a/Week-3/scripts/Utility.js +++ b/Week-3/scripts/Utility.js @@ -1,29 +1,28 @@ - -function clicked(){ +function clicked(clickEvent,fullContainer,popup){ return clickEvent => { - if(/^\d+$/.test(clickEvent.srcElement.id)){ - popup.style.display = 'block'; - popup.innerHTML = ''; - let content=(document.getElementById(clickEvent.srcElement.id)).data; + if(checkButtonClickRegex.test(clickEvent.srcElement.id)){ let textArea = document.createElement('div'), horizontaLine = document.createElement('hr'), - titlepopup = document.createElement('div'), + titlePopup = document.createElement('div'), closePopup = document.createElement('div'), - descriptionpopup = document.createElement('div'); - descriptionpopup.textContent = content; - titlepopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; - titlepopup.appendChild(horizontaLine); - closePopup.textContent = '\u2A2f'; - textArea.appendChild(titlepopup); + descriptionPopup = document.createElement('div'), + content=(document.getElementById(clickEvent.srcElement.id)).data; + + titlePopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; + popup.style.display = 'block'; + popup.innerHTML = ''; + descriptionPopup.textContent = content; + titlePopup.appendChild(horizontaLine); + closePopup.textContent = closePopupText; + textArea.appendChild(titlePopup); textArea.appendChild(closePopup); textArea.setAttribute('id','titleandcross'); - titlepopup.setAttribute('id','titlepopup'); - descriptionpopup.setAttribute('id','descriptionpopup'); + titlePopup.setAttribute('id','titlepopup'); + descriptionPopup.setAttribute('id','descriptionpopup'); closePopup.setAttribute('id','closePopup'); popup.appendChild(textArea); - popup.appendChild(descriptionpopup); + popup.appendChild(descriptionPopup); fullContainer.style.opacity = '0.3'; - } else if(clickEvent.srcElement.id === 'closePopup'){ popup.style.display = 'none'; @@ -32,13 +31,12 @@ function clicked(){ } } function emailSave(){ - let regexEmail = /\S+@\S+\.\S+/; let emailid= document.getElementById('email').value; if(regexEmail.test(emailid)){ - localStorage.setItem(emailid, JSON.stringify(emailid)); - alert("Subscribed successfully"); + window.localStorage.setItem(emailid, JSON.stringify(emailid)); + alert(emailSubscribedMessage); } else{ - alert("Invalid Emailid"); + alert(emailInvalidMessage); } } diff --git a/Week-3/scripts/constants.js b/Week-3/scripts/constants.js new file mode 100644 index 0000000..f6cbea6 --- /dev/null +++ b/Week-3/scripts/constants.js @@ -0,0 +1,17 @@ +const defaultContent='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; +const defaultDescription='created at 21 July 2019""created at 21 July 2019'; +const defaultTitle='SAMPLE NEWS HEADING'; +const buttonText='Continue Reading'; +const checkButtonClickRegex=/^\d+$/; +const regexEmail = /\S+@\S+\.\S+/; +const emailSubscribedMessage='Subscribed Successfully'; +const emailInvalidMessage='Invalid Email id'; +const closePopupText='X'; +const imageSource='resource/download.png'; +const selectCategoryText='Select Category'; +const subscribeText='Subscribe'; +const headerTagText='NEWSFEED'; +const headerTagSubText='yet Another Newsfeed'; +const footerText = ' \u00A9 NewsFeed 2019 '; +const defaultSelectChannelText='Select a NEWS Channel'; +const subscribeTxt="Subscribe"; diff --git a/Week-3/scripts/source.js b/Week-3/scripts/source.js index 34ea246..322d6de 100644 --- a/Week-3/scripts/source.js +++ b/Week-3/scripts/source.js @@ -1,4 +1,45 @@ -let fullContainer=document.createElement('div'); -let container = document.createElement('div'); -let popup = document.createElement('div'); window.onload = init; +function init(){ + let fullContainer=document.createElement('div'), + container = document.createElement('div'), + popup = document.createElement('div'), + app = document.querySelector('main'), + appBody= document.createElement('div'), + headerBox=document.createElement('div'), + toptag=document.createElement('h2'), + toptagItalic=document.createElement('i'), + checkEmail=document.createElement('div'), + email = document.createElement("input"), + subscribebtn = document.createElement('button'), + header = document.querySelector('header'), + footerTag=document.createElement('p'), + foot = document.querySelector('footer'); + + popup.setAttribute('class','popup'); + app.appendChild(popup); + fullContainer.setAttribute('class', 'fullcont'); + container.setAttribute('class', 'left-container'); + appBody.setAttribute('class','main-container'); + headerBox.setAttribute('class','headerbox') + toptag.textContent=headerTagText; + toptagItalic.textContent=headerTagSubText; + checkEmail.setAttribute('class','check'); + email.setAttribute('id','email'); + email.type = 'text'; + subscribebtn.innerHTML=subscribeTxt; + subscribebtn.setAttribute('id','btn-email'); + subscribebtn.addEventListener("click", emailSave); + checkEmail.appendChild(email); + checkEmail.appendChild(subscribebtn); + headerBox.appendChild(toptag); + headerBox.appendChild(toptagItalic); + headerBox.appendChild(checkEmail); + header.appendChild(headerBox); + footerTag.setAttribute('id','footertag'); + footerTag.textContent=footerText; + foot.appendChild(footerTag); + app.prepend(appBody); + appBody.append(fullContainer); + setLeftContent(fullContainer,container); + document.addEventListener('click', clicked(this,fullContainer,popup)); +} diff --git a/Week-3/style/style.css b/Week-3/style/style.css index 9d80e2a..d404cfa 100644 --- a/Week-3/style/style.css +++ b/Week-3/style/style.css @@ -6,17 +6,17 @@ font-size: 20px; font-weight: bold;} #closePopup{ - line-height: 20px; + line-height: 10px; font-weight: bold; - color: white; - font-size: 0.8em; + color: red; + font-size: 1.5em; font-family: Arial; text-align: center; margin-left: auto; width: 20px; cursor: pointer; border-radius: 100%; - background-color: #bf0000; + background-color: white; } .popup{ display: none; From fb515db19c2b50ba4f6df53131af4e82d802b69e Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Mon, 29 Jul 2019 19:27:27 +0530 Subject: [PATCH 3/6] did the changes and optimised dom creation --- Week-3/scripts/Render.js | 49 ++------- Week-3/scripts/Update_View.js | 187 ++++++++++++++++------------------ Week-3/scripts/Utility.js | 70 +++++++------ Week-3/scripts/constants.js | 35 +++---- 4 files changed, 151 insertions(+), 190 deletions(-) diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js index 0c0c4c0..3a694ed 100644 --- a/Week-3/scripts/Render.js +++ b/Week-3/scripts/Render.js @@ -1,41 +1,12 @@ -function setRightContent(article_data,fullContainer,container){ - let rightContainer = document.createElement('div'), - categoryTitle = document.createElement('h4'), - select = document.createElement('select'), - datas=[]; - - rightContainer.setAttribute('class', 'right-container'); - categoryTitle.textContent =selectCategoryText; - select.setAttribute('id','ddlnewschannel'); - select.options.add( new Option(defaultSelectChannelText,null) ); - for(item in article_data.articles){ - if(datas.indexOf(article_data.articles[item].source.name)!==-1){ - continue; - } - else{ - select.options.add( new Option(article_data.articles[item].source.name,article_data.articles[item].source.name) ); - datas.push(article_data.articles[item].source.name); - } - } - rightContainer.appendChild(categoryTitle); - rightContainer.appendChild(select); - fullContainer.appendChild(rightContainer); - select.options[0].disabled = true; - select.onchange = () => { - let val=select.value; - changeContent(val,fullContainer,container); - } -} function setLeftContent(fullContainer,container){ - let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=ac1fd7a9fc1342abb913e554a9525d85&pageSize=20`; - fetch(url) - .then((resp) => resp.json()) - .then(function(data) { - fullContainer.data=data; - fullContent(data,container); - setRightContent(data,fullContainer,container); - }) - .catch(function(error) { - }); +fetch(url) +.then((resp) => resp.json()) +.then(function(data) { + fullContainer.data=data; + fullContent(data,container); fullContainer.appendChild(container); - } + setRightContent(data,fullContainer,container); +}) +.catch(function(error) { +}); +} diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js index db662bb..650f12b 100644 --- a/Week-3/scripts/Update_View.js +++ b/Week-3/scripts/Update_View.js @@ -1,104 +1,95 @@ function changeContent(val,fullContainer,container){ - let data=fullContainer.data; - let similar=0; - container.innerHTML = ''; - let size=data.articles.length; - let card; - for(index in data.articles){ - let btn = document.createElement('button'), - image = document.createElement('img'), - rightSide = document.createElement('div'), - title = document.createElement('h4'), - metaDisc = document.createElement('h6'), - description = document.createElement('p'), - horizontalLine = document.createElement('hr'); - - if(data.articles[index].source.name===val){ - card= document.createElement('div'); - card.setAttribute('class', 'box'); - image.setAttribute('class','image'); - image.src=data.articles[index].urlToImage; - rightSide.setAttribute('class','vertical'); - title.textContent = data.articles[index].title; - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = data.articles[index].publishedAt; - description.setAttribute('class','description') - description.textContent = data.articles[index].description; - let content = data.articles[index].content; - let contentHead=data.articles[index].title; - if(content){ - btn.data=content; - btn.heading=contentHead; - } - else{ - btn.data=data.articles[index].description; - btn.heading=contentHead; - } - btn.setAttribute('id',index); - btn.innerHTML=buttonText; - btn.setAttribute('class','btncontinue'); - rightSide.appendChild(title); - rightSide.appendChild(metaDisc); - rightSide.appendChild(description); - rightSide.appendChild(btn); - card.appendChild(image) - card.appendChild(rightSide) - container.appendChild(card); - if(Number(index)===Number(size-1)){ - card.style.paddingBottom='40px'; - } - container.appendChild(horizontalLine); - } - } - card.style.paddingBottom='40px'; +let data=fullContainer.data, +similar=0, +size=data.articles.length, +card; +container.innerHTML = ''; +for(index in data.articles){ + if(data.articles[index].source.name===val){ + card= document.createElement('div'); + createLeftCard(card,data.articles[index]); + container.appendChild(card); + container.appendChild(horizontalLine); + } +} +card.style.paddingBottom='40px'; } function fullContent(data,container){ - container.innerHTML = ''; - let size=data.articles.length; - for(index in data.articles ){ - let card = document.createElement('div'), - image = document.createElement('img'), - rightSide = document.createElement('div'), - title = document.createElement('h4'), - metaDisc = document.createElement('h6'), - description = document.createElement('p'), - btn = document.createElement('button'); +container.innerHTML = ''; +let size=data.articles.length, +card; +for(index in data.articles ){ + card= document.createElement('div'); + createLeftCard(card,data.articles[index]); + container.appendChild(card); + container.appendChild(horizontalLine); + } + card.style.paddingBottom='40px'; +} +function setRightContent(article_data,fullContainer,container){ +let rightContainer = document.createElement('div'), +categoryTitle = document.createElement('h4'), +select = document.createElement('select'); - card.setAttribute('class', 'box'); - image.setAttribute('class','image'); - image.src=data.articles[index].urlToImage; - rightSide.setAttribute('class','vertical'); - title.textContent = data.articles[index].title; - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = data.articles[index].publishedAt; - description.setAttribute('class','description') - description.textContent = data.articles[index].description; - btn.setAttribute('id',index); - btn.innerHTML=buttonText; - let content = data.articles[index].content; - let contentHead=data.articles[index].title; - if(content){ - btn.data=content; - btn.heading=contentHead; - } - else{ - btn.data=data.articles[index].description; - btn.heading=contentHead; - } - btn.setAttribute('class','btncontinue'); - let horizontalLine = document.createElement('hr'); - rightSide.appendChild(title); - rightSide.appendChild(metaDisc); - rightSide.appendChild(description); - rightSide.appendChild(btn); - card.appendChild(image) - card.appendChild(rightSide) - container.appendChild(card); - if(Number(index)===Number(size-1)){ - card.style.paddingBottom='40px'; - } - container.appendChild(horizontalLine); +rightContainer.setAttribute('class', 'right-container'); +categoryTitle.textContent =selectCategoryText; +select.setAttribute('id','ddlnewschannel'); +fillDropDownNewsChannelList(select,article_data); +rightContainer.appendChild(categoryTitle); +rightContainer.appendChild(select); +fullContainer.appendChild(rightContainer); +select.onchange = () => { + let val=select.value; + select.options.add( new Option(defaultSelectChannelText,null) ); + changeContent(val,fullContainer,container); +} +} +function createLeftCard(card,info){ + let image = document.createElement('img'), + rightSide = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + btn = document.createElement('button') + content = info.content, + contentHead=info.title, + horizontalLine = document.createElement('hr'); + + card.setAttribute('class', 'box'); + image.setAttribute('class','image'); + image.src=info.urlToImage; + rightSide.setAttribute('class','vertical'); + title.textContent = info.title; + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = info.publishedAt; + description.setAttribute('class','description') + description.textContent = info.description; + btn.setAttribute('id',index); + btn.innerHTML=buttonText; + if(content){ + btn.data=content; + btn.heading=contentHead; + } else{ + btn.data=info.description; + btn.heading=contentHead; + } + btn.setAttribute('class','btncontinue'); + rightSide.appendChild(title); + rightSide.appendChild(metaDisc); + rightSide.appendChild(description); + rightSide.appendChild(btn); + card.appendChild(image) + card.appendChild(rightSide); +} +function fillDropDownNewsChannelList(select,article_data){ + let datas=[]; + for(item in article_data.articles){ + if(datas.indexOf(article_data.articles[item].source.name)!==-1){ + continue; + } else{ + select.options.add( new Option(article_data.articles[item].source.name,article_data.articles[item].source.name) ); + datas.push(article_data.articles[item].source.name); } + } } diff --git a/Week-3/scripts/Utility.js b/Week-3/scripts/Utility.js index 8a8d49b..ed13724 100644 --- a/Week-3/scripts/Utility.js +++ b/Week-3/scripts/Utility.js @@ -1,42 +1,40 @@ function clicked(clickEvent,fullContainer,popup){ - return clickEvent => { - if(checkButtonClickRegex.test(clickEvent.srcElement.id)){ - let textArea = document.createElement('div'), - horizontaLine = document.createElement('hr'), - titlePopup = document.createElement('div'), - closePopup = document.createElement('div'), - descriptionPopup = document.createElement('div'), - content=(document.getElementById(clickEvent.srcElement.id)).data; +return clickEvent => { + if(checkButtonClickRegex.test(clickEvent.srcElement.id)){ + let textArea = document.createElement('div'), + horizontaLine = document.createElement('hr'), + titlePopup = document.createElement('div'), + closePopup = document.createElement('div'), + descriptionPopup = document.createElement('div'), + content=(document.getElementById(clickEvent.srcElement.id)).data; - titlePopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; - popup.style.display = 'block'; - popup.innerHTML = ''; - descriptionPopup.textContent = content; - titlePopup.appendChild(horizontaLine); - closePopup.textContent = closePopupText; - textArea.appendChild(titlePopup); - textArea.appendChild(closePopup); - textArea.setAttribute('id','titleandcross'); - titlePopup.setAttribute('id','titlepopup'); - descriptionPopup.setAttribute('id','descriptionpopup'); - closePopup.setAttribute('id','closePopup'); - popup.appendChild(textArea); - popup.appendChild(descriptionPopup); - fullContainer.style.opacity = '0.3'; - } - else if(clickEvent.srcElement.id === 'closePopup'){ - popup.style.display = 'none'; - fullContainer.style.opacity = '1'; - } + titlePopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; + popup.style.display = 'block'; + popup.innerHTML = ''; + descriptionPopup.textContent = content; + titlePopup.appendChild(horizontaLine); + closePopup.textContent = closePopupText; + textArea.appendChild(titlePopup); + textArea.appendChild(closePopup); + textArea.setAttribute('id','titleandcross'); + titlePopup.setAttribute('id','titlepopup'); + descriptionPopup.setAttribute('id','descriptionpopup'); + closePopup.setAttribute('id','closePopup'); + popup.appendChild(textArea); + popup.appendChild(descriptionPopup); + fullContainer.style.opacity = '0.3'; + } else if(clickEvent.srcElement.id === 'closePopup'){ + popup.style.display = 'none'; + fullContainer.style.opacity = '1'; } } +} function emailSave(){ - let emailid= document.getElementById('email').value; - if(regexEmail.test(emailid)){ - window.localStorage.setItem(emailid, JSON.stringify(emailid)); - alert(emailSubscribedMessage); - } - else{ - alert(emailInvalidMessage); - } +let emailid= document.getElementById('email').value; +if(regexEmail.test(emailid)){ + window.localStorage.setItem(emailid, JSON.stringify(emailid)); + alert(emailSubscribedMessage); +} else { + alert(emailInvalidMessage); +} } diff --git a/Week-3/scripts/constants.js b/Week-3/scripts/constants.js index f6cbea6..3b27284 100644 --- a/Week-3/scripts/constants.js +++ b/Week-3/scripts/constants.js @@ -1,17 +1,18 @@ -const defaultContent='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'; -const defaultDescription='created at 21 July 2019""created at 21 July 2019'; -const defaultTitle='SAMPLE NEWS HEADING'; -const buttonText='Continue Reading'; -const checkButtonClickRegex=/^\d+$/; -const regexEmail = /\S+@\S+\.\S+/; -const emailSubscribedMessage='Subscribed Successfully'; -const emailInvalidMessage='Invalid Email id'; -const closePopupText='X'; -const imageSource='resource/download.png'; -const selectCategoryText='Select Category'; -const subscribeText='Subscribe'; -const headerTagText='NEWSFEED'; -const headerTagSubText='yet Another Newsfeed'; -const footerText = ' \u00A9 NewsFeed 2019 '; -const defaultSelectChannelText='Select a NEWS Channel'; -const subscribeTxt="Subscribe"; +const defaultContent='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', +defaultDescription='created at 21 July 2019""created at 21 July 2019', +defaultTitle='SAMPLE NEWS HEADING', +buttonText='Continue Reading', +checkButtonClickRegex=/^\d+$/, +regexEmail = /\S+@\S+\.\S+/, +emailSubscribedMessage='Subscribed Successfully', +emailInvalidMessage='Invalid Email id', +closePopupText='X', +imageSource='resource/download.png', +selectCategoryText='Select Category', +subscribeText='Subscribe', +headerTagText='NEWSFEED', +headerTagSubText='yet Another Newsfeed', +footerText = ' \u00A9 NewsFeed 2019 ', +defaultSelectChannelText='Select a NEWS Channel', +subscribeTxt="Subscribe", +url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=ac1fd7a9fc1342abb913e554a9525d85&pageSize=15`; From 4a8346b433a8725d8533a8b51fa9edb3b877c8ed Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Mon, 29 Jul 2019 19:33:18 +0530 Subject: [PATCH 4/6] bug fix --- Week-3/scripts/Update_View.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js index 650f12b..2e15453 100644 --- a/Week-3/scripts/Update_View.js +++ b/Week-3/scripts/Update_View.js @@ -40,7 +40,7 @@ rightContainer.appendChild(select); fullContainer.appendChild(rightContainer); select.onchange = () => { let val=select.value; - select.options.add( new Option(defaultSelectChannelText,null) ); + select.options[0].disabled = true; changeContent(val,fullContainer,container); } } From 81c85670b321dbedce9b85bd8b9d160da9ada1de Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Tue, 30 Jul 2019 16:54:32 +0530 Subject: [PATCH 5/6] USED SOURCES API TO DISPLAY NEWS FOR PARTICULAR NEWS CHANNEL --- Week-3/scripts/Render.js | 8 +-- Week-3/scripts/Update_View.js | 109 ++++++++++++++-------------------- Week-3/scripts/constants.js | 5 +- Week-3/scripts/source.js | 3 +- 4 files changed, 54 insertions(+), 71 deletions(-) diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js index 3a694ed..00399c9 100644 --- a/Week-3/scripts/Render.js +++ b/Week-3/scripts/Render.js @@ -1,11 +1,9 @@ -function setLeftContent(fullContainer,container){ -fetch(url) +function setLeftContent(fullContainer,container,newsUrl){ +fetch(newsUrl) .then((resp) => resp.json()) .then(function(data) { fullContainer.data=data; - fullContent(data,container); - fullContainer.appendChild(container); - setRightContent(data,fullContainer,container); + changeContent(container,fullContainer); }) .catch(function(error) { }); diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js index 2e15453..2ada0aa 100644 --- a/Week-3/scripts/Update_View.js +++ b/Week-3/scripts/Update_View.js @@ -1,32 +1,16 @@ -function changeContent(val,fullContainer,container){ +function changeContent(container,fullContainer){ let data=fullContainer.data, -similar=0, -size=data.articles.length, card; container.innerHTML = ''; for(index in data.articles){ - if(data.articles[index].source.name===val){ - card= document.createElement('div'); - createLeftCard(card,data.articles[index]); - container.appendChild(card); - container.appendChild(horizontalLine); - } -} -card.style.paddingBottom='40px'; -} -function fullContent(data,container){ -container.innerHTML = ''; -let size=data.articles.length, -card; -for(index in data.articles ){ card= document.createElement('div'); createLeftCard(card,data.articles[index]); container.appendChild(card); container.appendChild(horizontalLine); - } - card.style.paddingBottom='40px'; } -function setRightContent(article_data,fullContainer,container){ +card.style.paddingBottom='40px'; +} +function setRightContent(fullContainer,container){ let rightContainer = document.createElement('div'), categoryTitle = document.createElement('h4'), select = document.createElement('select'); @@ -34,62 +18,61 @@ select = document.createElement('select'); rightContainer.setAttribute('class', 'right-container'); categoryTitle.textContent =selectCategoryText; select.setAttribute('id','ddlnewschannel'); -fillDropDownNewsChannelList(select,article_data); +fillDropDownNewsChannelList(select); rightContainer.appendChild(categoryTitle); rightContainer.appendChild(select); fullContainer.appendChild(rightContainer); select.onchange = () => { let val=select.value; select.options[0].disabled = true; - changeContent(val,fullContainer,container); + getNewsData(val,fullContainer,container); } } function createLeftCard(card,info){ - let image = document.createElement('img'), - rightSide = document.createElement('div'), - title = document.createElement('h4'), - metaDisc = document.createElement('h6'), - description = document.createElement('p'), - btn = document.createElement('button') - content = info.content, - contentHead=info.title, - horizontalLine = document.createElement('hr'); +let image = document.createElement('img'), +rightSide = document.createElement('div'), +title = document.createElement('h4'), +metaDisc = document.createElement('h6'), +description = document.createElement('p'), +btn = document.createElement('button') +content = info.content, +contentHead=info.title, +horizontalLine = document.createElement('hr'); - card.setAttribute('class', 'box'); - image.setAttribute('class','image'); - image.src=info.urlToImage; - rightSide.setAttribute('class','vertical'); - title.textContent = info.title; - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = info.publishedAt; - description.setAttribute('class','description') - description.textContent = info.description; - btn.setAttribute('id',index); - btn.innerHTML=buttonText; - if(content){ +card.setAttribute('class', 'box'); +image.setAttribute('class','image'); +image.src=info.urlToImage; +rightSide.setAttribute('class','vertical'); +title.textContent = info.title; +metaDisc.setAttribute('class','metadisc'); +metaDisc.setAttribute('id','meta'); +metaDisc.textContent = info.publishedAt; +description.setAttribute('class','description') +description.textContent = info.description; +btn.setAttribute('id',index); +btn.innerHTML=buttonText; +if(content){ btn.data=content; btn.heading=contentHead; - } else{ +} else{ btn.data=info.description; btn.heading=contentHead; - } - btn.setAttribute('class','btncontinue'); - rightSide.appendChild(title); - rightSide.appendChild(metaDisc); - rightSide.appendChild(description); - rightSide.appendChild(btn); - card.appendChild(image) - card.appendChild(rightSide); } -function fillDropDownNewsChannelList(select,article_data){ - let datas=[]; - for(item in article_data.articles){ - if(datas.indexOf(article_data.articles[item].source.name)!==-1){ - continue; - } else{ - select.options.add( new Option(article_data.articles[item].source.name,article_data.articles[item].source.name) ); - datas.push(article_data.articles[item].source.name); - } - } +btn.setAttribute('class','btncontinue'); +rightSide.appendChild(title); +rightSide.appendChild(metaDisc); +rightSide.appendChild(description); +rightSide.appendChild(btn); +card.appendChild(image) +card.appendChild(rightSide); +} +function getNewsData(val,fullContainer,container){ +let newsUrl=`${url}source=${val}`; +setLeftContent(fullContainer,container,newsUrl); +} +function fillDropDownNewsChannelList(select){ +select.options.add( new Option(defaultSelectChannelText,"") ); +for(item of newsChannel){ + select.options.add( new Option(item,item) ); +} } diff --git a/Week-3/scripts/constants.js b/Week-3/scripts/constants.js index 3b27284..9db6536 100644 --- a/Week-3/scripts/constants.js +++ b/Week-3/scripts/constants.js @@ -14,5 +14,6 @@ headerTagText='NEWSFEED', headerTagSubText='yet Another Newsfeed', footerText = ' \u00A9 NewsFeed 2019 ', defaultSelectChannelText='Select a NEWS Channel', -subscribeTxt="Subscribe", -url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=ac1fd7a9fc1342abb913e554a9525d85&pageSize=15`; +subscribeTxt='Subscribe', +url = `https://newsapi.org/v1/articles?apiKey=ac1fd7a9fc1342abb913e554a9525d85&`, +newsChannel=['ign','fortune','the-times-of-india','al-jazeera-english','the-hindu','bbc-news','the-verge','business-insider','cnn','reuters']; diff --git a/Week-3/scripts/source.js b/Week-3/scripts/source.js index 322d6de..f322b9b 100644 --- a/Week-3/scripts/source.js +++ b/Week-3/scripts/source.js @@ -40,6 +40,7 @@ function init(){ foot.appendChild(footerTag); app.prepend(appBody); appBody.append(fullContainer); - setLeftContent(fullContainer,container); + fullContainer.appendChild(container); + setRightContent(fullContainer,container); document.addEventListener('click', clicked(this,fullContainer,popup)); } From 5bd34e1c3a0037eec442cc4da8aee5bd0e48204e Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Mon, 5 Aug 2019 11:32:12 +0530 Subject: [PATCH 6/6] Indentation fixed --- Week-3/scripts/Render.js | 16 ++--- Week-3/scripts/Update_View.js | 132 +++++++++++++++++----------------- Week-3/scripts/Utility.js | 68 +++++++++--------- 3 files changed, 108 insertions(+), 108 deletions(-) diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js index 00399c9..a2b196a 100644 --- a/Week-3/scripts/Render.js +++ b/Week-3/scripts/Render.js @@ -1,10 +1,10 @@ function setLeftContent(fullContainer,container,newsUrl){ -fetch(newsUrl) -.then((resp) => resp.json()) -.then(function(data) { - fullContainer.data=data; - changeContent(container,fullContainer); -}) -.catch(function(error) { -}); + fetch(newsUrl) + .then((resp) => resp.json()) + .then(function(data) { + fullContainer.data=data; + changeContent(container,fullContainer); + }) + .catch(function(error) { + }); } diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js index 2ada0aa..b2ae54f 100644 --- a/Week-3/scripts/Update_View.js +++ b/Week-3/scripts/Update_View.js @@ -1,78 +1,78 @@ function changeContent(container,fullContainer){ -let data=fullContainer.data, -card; -container.innerHTML = ''; -for(index in data.articles){ - card= document.createElement('div'); - createLeftCard(card,data.articles[index]); - container.appendChild(card); - container.appendChild(horizontalLine); -} -card.style.paddingBottom='40px'; + let data=fullContainer.data, + card; + container.innerHTML = ''; + for(index in data.articles){ + card= document.createElement('div'); + createLeftCard(card,data.articles[index]); + container.appendChild(card); + container.appendChild(horizontalLine); + } + card.style.paddingBottom='40px'; } function setRightContent(fullContainer,container){ -let rightContainer = document.createElement('div'), -categoryTitle = document.createElement('h4'), -select = document.createElement('select'); + let rightContainer = document.createElement('div'), + categoryTitle = document.createElement('h4'), + select = document.createElement('select'); -rightContainer.setAttribute('class', 'right-container'); -categoryTitle.textContent =selectCategoryText; -select.setAttribute('id','ddlnewschannel'); -fillDropDownNewsChannelList(select); -rightContainer.appendChild(categoryTitle); -rightContainer.appendChild(select); -fullContainer.appendChild(rightContainer); -select.onchange = () => { - let val=select.value; - select.options[0].disabled = true; - getNewsData(val,fullContainer,container); -} + rightContainer.setAttribute('class', 'right-container'); + categoryTitle.textContent =selectCategoryText; + select.setAttribute('id','ddlnewschannel'); + fillDropDownNewsChannelList(select); + rightContainer.appendChild(categoryTitle); + rightContainer.appendChild(select); + fullContainer.appendChild(rightContainer); + select.onchange = () => { + let val=select.value; + select.options[0].disabled = true; + getNewsData(val,fullContainer,container); + } } function createLeftCard(card,info){ -let image = document.createElement('img'), -rightSide = document.createElement('div'), -title = document.createElement('h4'), -metaDisc = document.createElement('h6'), -description = document.createElement('p'), -btn = document.createElement('button') -content = info.content, -contentHead=info.title, -horizontalLine = document.createElement('hr'); + let image = document.createElement('img'), + rightSide = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + btn = document.createElement('button') + content = info.content, + contentHead=info.title, + horizontalLine = document.createElement('hr'); -card.setAttribute('class', 'box'); -image.setAttribute('class','image'); -image.src=info.urlToImage; -rightSide.setAttribute('class','vertical'); -title.textContent = info.title; -metaDisc.setAttribute('class','metadisc'); -metaDisc.setAttribute('id','meta'); -metaDisc.textContent = info.publishedAt; -description.setAttribute('class','description') -description.textContent = info.description; -btn.setAttribute('id',index); -btn.innerHTML=buttonText; -if(content){ - btn.data=content; - btn.heading=contentHead; -} else{ - btn.data=info.description; - btn.heading=contentHead; -} -btn.setAttribute('class','btncontinue'); -rightSide.appendChild(title); -rightSide.appendChild(metaDisc); -rightSide.appendChild(description); -rightSide.appendChild(btn); -card.appendChild(image) -card.appendChild(rightSide); + card.setAttribute('class', 'box'); + image.setAttribute('class','image'); + image.src=info.urlToImage; + rightSide.setAttribute('class','vertical'); + title.textContent = info.title; + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = info.publishedAt; + description.setAttribute('class','description') + description.textContent = info.description; + btn.setAttribute('id',index); + btn.innerHTML=buttonText; + if(content){ + btn.data=content; + btn.heading=contentHead; + } else{ + btn.data=info.description; + btn.heading=contentHead; + } + btn.setAttribute('class','btncontinue'); + rightSide.appendChild(title); + rightSide.appendChild(metaDisc); + rightSide.appendChild(description); + rightSide.appendChild(btn); + card.appendChild(image) + card.appendChild(rightSide); } function getNewsData(val,fullContainer,container){ -let newsUrl=`${url}source=${val}`; -setLeftContent(fullContainer,container,newsUrl); + let newsUrl=`${url}source=${val}`; + setLeftContent(fullContainer,container,newsUrl); } function fillDropDownNewsChannelList(select){ -select.options.add( new Option(defaultSelectChannelText,"") ); -for(item of newsChannel){ - select.options.add( new Option(item,item) ); -} + select.options.add( new Option(defaultSelectChannelText,"") ); + for(item of newsChannel){ + select.options.add( new Option(item,item) ); + } } diff --git a/Week-3/scripts/Utility.js b/Week-3/scripts/Utility.js index ed13724..5305883 100644 --- a/Week-3/scripts/Utility.js +++ b/Week-3/scripts/Utility.js @@ -1,40 +1,40 @@ function clicked(clickEvent,fullContainer,popup){ -return clickEvent => { - if(checkButtonClickRegex.test(clickEvent.srcElement.id)){ - let textArea = document.createElement('div'), - horizontaLine = document.createElement('hr'), - titlePopup = document.createElement('div'), - closePopup = document.createElement('div'), - descriptionPopup = document.createElement('div'), - content=(document.getElementById(clickEvent.srcElement.id)).data; + return clickEvent => { + if(checkButtonClickRegex.test(clickEvent.srcElement.id)){ + let textArea = document.createElement('div'), + horizontaLine = document.createElement('hr'), + titlePopup = document.createElement('div'), + closePopup = document.createElement('div'), + descriptionPopup = document.createElement('div'), + content=(document.getElementById(clickEvent.srcElement.id)).data; - titlePopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; - popup.style.display = 'block'; - popup.innerHTML = ''; - descriptionPopup.textContent = content; - titlePopup.appendChild(horizontaLine); - closePopup.textContent = closePopupText; - textArea.appendChild(titlePopup); - textArea.appendChild(closePopup); - textArea.setAttribute('id','titleandcross'); - titlePopup.setAttribute('id','titlepopup'); - descriptionPopup.setAttribute('id','descriptionpopup'); - closePopup.setAttribute('id','closePopup'); - popup.appendChild(textArea); - popup.appendChild(descriptionPopup); - fullContainer.style.opacity = '0.3'; - } else if(clickEvent.srcElement.id === 'closePopup'){ - popup.style.display = 'none'; - fullContainer.style.opacity = '1'; + titlePopup.textContent = (document.getElementById(clickEvent.srcElement.id)).heading; + popup.style.display = 'block'; + popup.innerHTML = ''; + descriptionPopup.textContent = content; + titlePopup.appendChild(horizontaLine); + closePopup.textContent = closePopupText; + textArea.appendChild(titlePopup); + textArea.appendChild(closePopup); + textArea.setAttribute('id','titleandcross'); + titlePopup.setAttribute('id','titlepopup'); + descriptionPopup.setAttribute('id','descriptionpopup'); + closePopup.setAttribute('id','closePopup'); + popup.appendChild(textArea); + popup.appendChild(descriptionPopup); + fullContainer.style.opacity = '0.3'; + } else if(clickEvent.srcElement.id === 'closePopup'){ + popup.style.display = 'none'; + fullContainer.style.opacity = '1'; + } } } -} function emailSave(){ -let emailid= document.getElementById('email').value; -if(regexEmail.test(emailid)){ - window.localStorage.setItem(emailid, JSON.stringify(emailid)); - alert(emailSubscribedMessage); -} else { - alert(emailInvalidMessage); -} + let emailid= document.getElementById('email').value; + if(regexEmail.test(emailid)){ + window.localStorage.setItem(emailid, JSON.stringify(emailid)); + alert(emailSubscribedMessage); + } else { + alert(emailInvalidMessage); + } }