From da088d4adfd745c5ce50e7b87b45179475a4a7bc Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Thu, 25 Jul 2019 15:07:57 +0530 Subject: [PATCH 1/4] Week-2 Updated code - To be reviewed --- Week-2/index.html | 12 +++ Week-2/resource/download.png | Bin 0 -> 17255 bytes Week-2/scripts/constants.js | 75 ++++++++++++++++ Week-2/scripts/source.js | 142 +++++++++++++++++++++++++++++ Week-2/scripts/utility.js | 41 +++++++++ Week-2/style/style.css | 170 +++++++++++++++++++++++++++++++++++ 6 files changed, 440 insertions(+) create mode 100644 Week-2/index.html create mode 100644 Week-2/resource/download.png create mode 100644 Week-2/scripts/constants.js create mode 100644 Week-2/scripts/source.js create mode 100644 Week-2/scripts/utility.js create mode 100644 Week-2/style/style.css diff --git a/Week-2/index.html b/Week-2/index.html new file mode 100644 index 0000000..b2e31e0 --- /dev/null +++ b/Week-2/index.html @@ -0,0 +1,12 @@ + +
+ + + + +
+
+
+
+
+ diff --git a/Week-2/resource/download.png b/Week-2/resource/download.png new file mode 100644 index 0000000000000000000000000000000000000000..81431bb3b19dbb37b2f00faaceef217e385f68d8 GIT binary patch literal 17255 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 literal 0 HcmV?d00001 diff --git a/Week-2/scripts/constants.js b/Week-2/scripts/constants.js new file mode 100644 index 0000000..30b3b9c --- /dev/null +++ b/Week-2/scripts/constants.js @@ -0,0 +1,75 @@ +const obj=[ + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Delhi CEO writes to EC over Modi web series", + postDate: "29th June , 2019", + postCategory: "BBC", + postDesc: "Delhi Chief Electoral Officer Ranbir Singh has written to the poll panel saying that a web series on Modi available on the Eros Now website was streaming without certification from the Media Certification and Monitoring Committee (MCMC).A senior official at the Delhi CEO's office reportedly said that they have brought to the notice of the ECI that a series on PM Narendra Modi is being screened on the Eros Now platform without MCMC certification. Since it not a Delhi specific matter, the CEO office has asked the ECI to take cognizance of the matter." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "New guidelines to tackle mental health of inmates", + postDate: "22th June , 2019", + postCategory: "BBC", + postDesc: "At present, only Pennsylvania has constituted a detailed manual on mental health for prisoners. Dr Nand Kumar, professor of psychiatry at AIIMS has framed these guidelines on mental health condition for prisoners.Doctors of AII India Institute of Medical Sciences (AIIMS) in collaboration with Delhi Prison Administration have drafted first guidelines on mental health issues for inmates in jail. The manual known as 'Psychological First Aid' will be released on Tuesday." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "City ring vowing jobs in Territorial Army busted", + postDate: "20th June , 2019", + postCategory: "IndiaToday", + postDesc: "The fraudsters, police said, have interstate links and they confidently organised physical and medical tests in park adjacent to cantonment area of Bhubaneswar.The entire nexus was unearthed after Delhi crime branch received a complaint from one of the job seeker on April 13. The complainant also given a lead that the accused are coming here in Mahipalpur area of Delhi to distribute admit cards." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Traders' ire to impact election results in Delhi", + postDate: "20th June , 2019", + postCategory: "FoxNews", + postDesc: "The Delhi High Court asked Delhi Pollution Control Committee (DPCC) not to take coercive steps against traders until the next day of hearing on April 26.The violence that rocked the area a month before Delhi votes in the Lok Sabha elections left many wounded on both sides and renewed the old political slugfest over the hot button issue.Since December 2017, about 10,000 commercial establishments have been sealed across the National Capital for land misuse (converting residential units into commercial ones), non-payment of conversion charges and increased pollution emissions." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Ahead of polls, MLA hostel searched in Chennai", + postDate: "29th June , 2019", + postCategory: "TV9", + postDesc: "With just a few days left for the Lok Sabha elections in Tamil Nadu, a team of officials from the flying squad of the Election Commission along with Income Tax officials carried out raids in Tamil Nadu MLA’s Hostel in Omandurar Government Estate.Sources in the IT department said rooms of Tamil Nadu revenue minister RB Udhayakumar and two others were searched. However, it is not clear whether the team seized any cash or incriminating documents from the minister’s room." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Canada drops reference to Sikh extremism from terror threat report", + postDate: "22th June , 2019", + postCategory: "Republic", + postDesc: "Pro-Khalistan group Sikhs for Justice (SFJ) has called upon Canadian Prime Minister Justin Trudeau to step down for practising the politics of expediency in having his government drop Sikh extremism from a report on terror the day before he participated in Baisakhi parade.The damage has been done Mr Prime Minister and you should resign over this, said Gurpatwant Singh Pannun, SFJ legal adviser." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Jet puts off date to resume foreign flights", + postDate: "20th June , 2019", + postCategory: "TV5", + postDesc: "Jet Airways has stopped accepting bookings for its Mumbai-Paris flight until June 10 and closed reservations for its Mumbai-London, Mumbai-Amsterdam-Mumbai and Bangalore-Amsterdam flights, up to April 18.Meanwhile, the airline's pilots who are on the warpath have also decided to defer their strike which was scheduled from Monday as they want to give the airline a chance to survive, keeping in mind the meeting with banks tomorrow." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "SP, BJP battle over national security", + postDate: "20th June , 2019", + postCategory: "AajTak", + postDesc: "Prime Minster Narendra Modi also targeted SP-BSP alliance while addressing a rally in Uttar Pradesh's Moradabad district. PM Modi said, The irony is that 'elephant is riding on bicycle for personal gains. They have done nothing for the poor in the state during their regimes, and now they are trying to lure public on fake promises." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Summer assault! Delhi again in big water crisis", + postDate: "20th June , 2019", + postCategory: "CNBC", + postDesc: "The crisis turns so grave that violent fights over water among neighbours in summers are common. Delhi Police said they are gearing up to tackle water clashes that left three dead and many injured last summer.All experts are unanimous that Delhi must revive its water bodies, ensure groundwater recharge through storm drains, store rainwater, and recycle and reuse its waste water." + }, + { + imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", + postTitle: "Melbourne nightclub shooting leaves 1 dead, 3 injured", + postDate: "20th June , 2019", + postCategory: "NewsToday", + postDesc: "Sunday's shooting took place around 3.20 a.m. in the lively entertainment district of Melbourne's southeastern suburb of Prahran, police said.Three security guards and a man queuing to enter were taken to hospital with gunshot injuries, police said in a televised news conference in Melbourne." + }, +]; +let fullContainer = document.createElement('div'); +let container = document.createElement('div'); +let popup = document.createElement('div'); diff --git a/Week-2/scripts/source.js b/Week-2/scripts/source.js new file mode 100644 index 0000000..77d05a9 --- /dev/null +++ b/Week-2/scripts/source.js @@ -0,0 +1,142 @@ +function changeContent(val){ + container.innerHTML = ''; + for(i in obj){ + if(obj[i].postCategory===val){ + let card = document.createElement('div'); + card.setAttribute('class', 'box'); + let image = document.createElement('img'); + image.setAttribute('class','image'); + image.src="resource/download.png"; + let rightSide = document.createElement('div'); + rightSide.setAttribute('class','vertical'); + let title = document.createElement('h4') + title.textContent = obj[i].postTitle; + let metaDisc = document.createElement('h6'); + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = obj[i].postDate; + let description = document.createElement('p'); + description.setAttribute('class','description') + description.textContent = obj[i].postDesc; + let btn = document.createElement('button') + btn.setAttribute('id',i); + 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); + container.appendChild(horizontalLine); + } + } +} +function setRightContent(){ + let right_container = document.createElement('div'); + right_container.setAttribute('class', 'right-container'); + let title1 = document.createElement('h4'); + title1.textContent = "Select Category" + let select = document.createElement("select"); + select.options.add( new Option("Select a NEWS Channel",null) ); + select.options.add( new Option("BBC","BBC") ); + select.options.add( new Option("CNBC","CNBC") ); + select.options.add( new Option("IndiaToday","IndiaToday") ); + select.options.add( new Option("TV9","TV9") ); + select.options.add( new Option("TV5","TV5") ); + select.options.add( new Option("FoxNews","FoxNews") ); + select.options.add( new Option("Republic","Republic") ); + select.options.add( new Option("AajTak","AajTak") ); + select.style.width="50%" + let title2 = document.createElement('h4'); + title2.textContent = "Subscribe" + let check=document.createElement('div'); + check.setAttribute('class','check'); + let input = document.createElement("input"); + input.setAttribute('id','email'); + input.type = "text"; + let btn = document.createElement('button') + btn.innerHTML="Subscribe"; + btn.setAttribute('id','btn-email'); + btn.addEventListener("click", emailSave); + check.appendChild(input); + check.appendChild(btn); + right_container.appendChild(title1); + right_container.appendChild(select); + right_container.appendChild(title2); + right_container.appendChild(check); + fullContainer.appendChild(right_container); + select.options[0].disabled = true; + select.onchange = () => { + let val=select.value; + changeContent(val); + } +} + function setLeftContent(){ + for (var i=0;i<1;i++){ + let card = document.createElement('div'); + card.setAttribute('class', 'box'); + let image = document.createElement('img'); + image.src="resource/download.png"; + image.setAttribute('class','image'); + let right = document.createElement('div'); + right.setAttribute('class','vertical'); + let title = document.createElement('h4') + title.textContent = "SAMPLE NEWS HEADING" + let metaDisc = document.createElement('h6') + metaDisc.setAttribute('class','metadisc') + metaDisc.setAttribute('id','meta') + metaDisc.style.fontStyle = "italic"; + metaDisc.textContent = "created at 21 July 2019" + let description = document.createElement('p'); + description.setAttribute('class','description'); + description.textContent = "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."; + let btn = document.createElement('button') + btn.setAttribute('id',i); + btn.innerHTML="Continue Reading"; + btn.setAttribute('class','btncontinue') + let horizontalline = document.createElement("HR"); + right.appendChild(title); + right.appendChild(metaDisc); + right.appendChild(description); + right.appendChild(btn); + card.appendChild(image) + card.appendChild(right) + container.appendChild(card); + container.appendChild(horizontalline); + 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"; + headerBox.appendChild(toptag); + headerBox.appendChild(topTagItalic); + let header = document.querySelector('header'); + header.appendChild(headerBox); + let footerTag=document.createElement('p'); + footerTag.setAttribute('id','footertag'); + var 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)); +} +window.onload = init; diff --git a/Week-2/scripts/utility.js b/Week-2/scripts/utility.js new file mode 100644 index 0000000..6172e7d --- /dev/null +++ b/Week-2/scripts/utility.js @@ -0,0 +1,41 @@ +function emailSave(){ + let regexEmail = /\S+@\S+\.\S+/; + let emailid= document.getElementById('email').value; + if(regexEmail.test(emailid)){ + window.localStorage.setItem(emailid, JSON.stringify(emailid)); + alert("Subscribed successfully"); + } + else{ + alert("Invalid Emailid"); + } +} +function clicked(){ + return clickEvent => { + if(/^\d+$/.test(clickEvent.srcElement.id)){ + popup.style.display = 'block'; + popup.innerHTML = ''; + let textArea = document.createElement('div'), + horizontaLine = document.createElement('hr'), + titlepopup = document.createElement('div'), + closePopup = document.createElement('div'), + descriptionpopup = document.createElement('div'); + descriptionpopup.textContent = obj[Number(clickEvent.srcElement.id)].postDesc; + titlepopup.textContent = obj[Number(clickEvent.srcElement.id)].postTitle; + 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'; + } + } +} diff --git a/Week-2/style/style.css b/Week-2/style/style.css new file mode 100644 index 0000000..1c852e2 --- /dev/null +++ b/Week-2/style/style.css @@ -0,0 +1,170 @@ +#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{ + padding-left: 50px; + 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; + padding:10px; +} +.closeButton{ +} +img{ + width: 20%; +} +body{ + margin:0px; +} +header{ + 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{ + width: 100%; +} +.left-container{ + display: flex; + width: 75%; + height: 100%; + flex-direction: column; +} +.right-container{ + margin: 10px; + display: flex; + flex-direction: column; + width: 25%; +} +.cols{ + display: flex; + width: 100%; + overflow: hidden; + height: 30%; +} +#btnsubscribe{ + background-color: #242424; + color: #FFFFFD; +} +.image{ + width:15%; + height:15%; +} +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: 50%; +} +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:50%; +} +.btncontinue{ + margin-top: auto; + width:20%; + background-color: #C75D48; +} +p{ + overflow: hidden; +text-overflow: ellipsis; +} From e005a4d8189aba2cb956636e0e5b35439152b579 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Fri, 26 Jul 2019 16:13:13 +0530 Subject: [PATCH 2/4] WEEK 2 TASKS CHANGES DONE , used constants and followed coding practise --- Week-2/index.html | 1 + Week-2/scripts/RenderContent.js | 76 +++++++++++++ Week-2/scripts/constants.js | 122 +++++++++++---------- Week-2/scripts/source.js | 185 ++++++++++---------------------- Week-2/scripts/utility.js | 34 +++--- Week-2/style/style.css | 24 ++--- 6 files changed, 231 insertions(+), 211 deletions(-) create mode 100644 Week-2/scripts/RenderContent.js diff --git a/Week-2/index.html b/Week-2/index.html index b2e31e0..c84f89d 100644 --- a/Week-2/index.html +++ b/Week-2/index.html @@ -2,6 +2,7 @@
+
diff --git a/Week-2/scripts/RenderContent.js b/Week-2/scripts/RenderContent.js new file mode 100644 index 0000000..0524800 --- /dev/null +++ b/Week-2/scripts/RenderContent.js @@ -0,0 +1,76 @@ +function setRightContent(fullContainer,container){ + let right_container = document.createElement('div'), + titleSelectCategory = document.createElement('h4'), + select = document.createElement('select'), + subscribeTitle = document.createElement('h4'), + check=document.createElement('div'), + input = document.createElement('input'), + btn = document.createElement('button'); + + right_container.setAttribute('class', 'right-container'); + titleSelectCategory.textContent = selectCategoryText; + select.setAttribute('id','ddlSelect'); + select.options.add( new Option(defaultSelectChannelText,null)); + let data=[]; + for(item in article_data){ + if(data.indexOf(article_data[item].postCategory)!==-1){ + continue; + } + else{ + select.options.add( new Option(article_data[item].postCategory,article_data[item].postCategory) ); + data.push(article_data[item].postCategory); + } +} + subscribeTitle.textContent = subscribeText; + check.setAttribute('class','check'); + input.setAttribute('id','email'); + input.type = 'text'; + btn.innerHTML=subscribeText; + btn.setAttribute('id','btn-email'); + btn.addEventListener('click', emailSave); + check.appendChild(input); + check.appendChild(btn); + right_container.appendChild(titleSelectCategory); + right_container.appendChild(select); + right_container.appendChild(subscribeTitle); + right_container.appendChild(check); + fullContainer.appendChild(right_container); + select.options[0].disabled = true; + select.onchange = () => { + let val=select.value; + changeContent(val,container); + } +} +function setLeftContent(fullContainer,container){ + let card = document.createElement('div'), + image = document.createElement('img'), + right = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + btn = document.createElement('button'), + horizontalline = document.createElement('HR'); + + card.setAttribute('class', 'box'); + image.src=imageSource; + image.setAttribute('class','image'); + right.setAttribute('class','vertical'); + title.textContent = defaultTitle; + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + metaDisc.textContent = defaultDescription; + description.setAttribute('class','description'); + description.textContent = defaultContent; + btn.setAttribute('id',0); + btn.innerHTML=buttonText; + btn.setAttribute('class','btncontinue'); + right.appendChild(title); + right.appendChild(metaDisc); + right.appendChild(description); + right.appendChild(btn); + card.appendChild(image); + card.appendChild(right); + container.appendChild(card); + container.appendChild(horizontalline); + fullContainer.appendChild(container); +} diff --git a/Week-2/scripts/constants.js b/Week-2/scripts/constants.js index 30b3b9c..9953b5c 100644 --- a/Week-2/scripts/constants.js +++ b/Week-2/scripts/constants.js @@ -1,75 +1,89 @@ -const obj=[ +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 article_data = [ { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Delhi CEO writes to EC over Modi web series", - postDate: "29th June , 2019", - postCategory: "BBC", - postDesc: "Delhi Chief Electoral Officer Ranbir Singh has written to the poll panel saying that a web series on Modi available on the Eros Now website was streaming without certification from the Media Certification and Monitoring Committee (MCMC).A senior official at the Delhi CEO's office reportedly said that they have brought to the notice of the ECI that a series on PM Narendra Modi is being screened on the Eros Now platform without MCMC certification. Since it not a Delhi specific matter, the CEO office has asked the ECI to take cognizance of the matter." + imageSrc: 'images/bbc.jpg', + postTitle: 'Delhi CEO writes to EC over Modi web series', + postDate: '29th June , 2019', + postCategory: 'BBC', + postDesc: 'Delhi Chief Electoral Officer Ranbir Singh has written to the poll panel saying that a web series on Modi available on the Eros Now website was streaming without certification from the Media Certification and Monitoring Committee (MCMC).A senior official at the Delhi CEO`s office reportedly said that they have brought to the notice of the ECI that a series on PM Narendra Modi is being screened on the Eros Now platform without MCMC certification. Since it not a Delhi specific matter, the CEO office has asked the ECI to take cognizance of the matter.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "New guidelines to tackle mental health of inmates", - postDate: "22th June , 2019", - postCategory: "BBC", - postDesc: "At present, only Pennsylvania has constituted a detailed manual on mental health for prisoners. Dr Nand Kumar, professor of psychiatry at AIIMS has framed these guidelines on mental health condition for prisoners.Doctors of AII India Institute of Medical Sciences (AIIMS) in collaboration with Delhi Prison Administration have drafted first guidelines on mental health issues for inmates in jail. The manual known as 'Psychological First Aid' will be released on Tuesday." + imageSrc: 'images/timesNow.jpg', + postTitle: 'New guidelines to tackle mental health of inmates', + postDate: '22th June , 2019', + postCategory: 'Times Now', + postDesc: 'At present, only Pennsylvania has constituted a detailed manual on mental health for prisoners. Dr Nand Kumar, professor of psychiatry at AIIMS has framed these guidelines on mental health condition for prisoners.Doctors of AII India Institute of Medical Sciences (AIIMS) in collaboration with Delhi Prison Administration have drafted first guidelines on mental health issues for inmates in jail. The manual known as "Psychological First Aid" will be released on Tuesday.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "City ring vowing jobs in Territorial Army busted", - postDate: "20th June , 2019", - postCategory: "IndiaToday", - postDesc: "The fraudsters, police said, have interstate links and they confidently organised physical and medical tests in park adjacent to cantonment area of Bhubaneswar.The entire nexus was unearthed after Delhi crime branch received a complaint from one of the job seeker on April 13. The complainant also given a lead that the accused are coming here in Mahipalpur area of Delhi to distribute admit cards." + imageSrc: 'images/woin.jpg', + postTitle: 'City ring vowing jobs in Territorial Army busted', + postDate: '20th June , 2019', + postCategory: 'WION', + postDesc: 'The fraudsters, police said, have interstate links and they confidently organised physical and medical tests in park adjacent to cantonment area of Bhubaneswar.The entire nexus was unearthed after Delhi crime branch received a complaint from one of the job seeker on April 13. The complainant also given a lead that the accused are coming here in Mahipalpur area of Delhi to distribute admit cards.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Traders' ire to impact election results in Delhi", - postDate: "20th June , 2019", - postCategory: "FoxNews", - postDesc: "The Delhi High Court asked Delhi Pollution Control Committee (DPCC) not to take coercive steps against traders until the next day of hearing on April 26.The violence that rocked the area a month before Delhi votes in the Lok Sabha elections left many wounded on both sides and renewed the old political slugfest over the hot button issue.Since December 2017, about 10,000 commercial establishments have been sealed across the National Capital for land misuse (converting residential units into commercial ones), non-payment of conversion charges and increased pollution emissions." + imageSrc: 'images/abnAJ.jpg', + postTitle: '"Traders" ire to impact election results in Delhi', + postDate: '20th June , 2019', + postCategory: 'ABN Andhrajyothi', + postDesc: 'The Delhi High Court asked Delhi Pollution Control Committee (DPCC) not to take coercive steps against traders until the next day of hearing on April 26.The violence that rocked the area a month before Delhi votes in the Lok Sabha elections left many wounded on both sides and renewed the old political slugfest over the hot button issue.Since December 2017, about 10,000 commercial establishments have been sealed across the National Capital for land misuse (converting residential units into commercial ones), non-payment of conversion charges and increased pollution emissions.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Ahead of polls, MLA hostel searched in Chennai", - postDate: "29th June , 2019", - postCategory: "TV9", - postDesc: "With just a few days left for the Lok Sabha elections in Tamil Nadu, a team of officials from the flying squad of the Election Commission along with Income Tax officials carried out raids in Tamil Nadu MLA’s Hostel in Omandurar Government Estate.Sources in the IT department said rooms of Tamil Nadu revenue minister RB Udhayakumar and two others were searched. However, it is not clear whether the team seized any cash or incriminating documents from the minister’s room." + imageSrc: 'images/tv9.jpg', + postTitle: 'Ahead of polls, MLA hostel searched in Chennai', + postDate: '29th June , 2019', + postCategory: 'TV9', + postDesc: 'With just a few days left for the Lok Sabha elections in Tamil Nadu, a team of officials from the flying squad of the Election Commission along with Income Tax officials carried out raids in Tamil Nadu MLA’s Hostel in Omandurar Government Estate.Sources in the IT department said rooms of Tamil Nadu revenue minister RB Udhayakumar and two others were searched. However, it is not clear whether the team seized any cash or incriminating documents from the minister’s room.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Canada drops reference to Sikh extremism from terror threat report", - postDate: "22th June , 2019", - postCategory: "Republic", - postDesc: "Pro-Khalistan group Sikhs for Justice (SFJ) has called upon Canadian Prime Minister Justin Trudeau to step down for practising the politics of expediency in having his government drop Sikh extremism from a report on terror the day before he participated in Baisakhi parade.The damage has been done Mr Prime Minister and you should resign over this, said Gurpatwant Singh Pannun, SFJ legal adviser." + imageSrc: 'images/republictv.jpg', + postTitle: 'Canada drops reference to Sikh extremism from terror threat report', + postDate: '22th June , 2019', + postCategory: 'REPUBLIC', + postDesc: 'Pro-Khalistan group Sikhs for Justice (SFJ) has called upon Canadian Prime Minister Justin Trudeau to step down for practising the politics of expediency in having his government drop Sikh extremism from a report on terror the day before he participated in Baisakhi parade.The damage has been done Mr Prime Minister and you should resign over this, said Gurpatwant Singh Pannun, SFJ legal adviser.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Jet puts off date to resume foreign flights", - postDate: "20th June , 2019", - postCategory: "TV5", - postDesc: "Jet Airways has stopped accepting bookings for its Mumbai-Paris flight until June 10 and closed reservations for its Mumbai-London, Mumbai-Amsterdam-Mumbai and Bangalore-Amsterdam flights, up to April 18.Meanwhile, the airline's pilots who are on the warpath have also decided to defer their strike which was scheduled from Monday as they want to give the airline a chance to survive, keeping in mind the meeting with banks tomorrow." + imageSrc: 'images/tv5.jpg', + postTitle: 'Jet puts off date to resume foreign flights', + postDate: '20th June , 2019', + postCategory: 'TV5', + postDesc: 'Jet Airways has stopped accepting bookings for its Mumbai-Paris flight until June 10 and closed reservations for its Mumbai-London, Mumbai-Amsterdam-Mumbai and Bangalore-Amsterdam flights, up to April 18.Meanwhile, the airline`s pilots who are on the warpath have also decided to defer their strike which was scheduled from Monday as they want to give the airline a chance to survive, keeping in mind the meeting with banks tomorrow.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "SP, BJP battle over national security", - postDate: "20th June , 2019", - postCategory: "AajTak", - postDesc: "Prime Minster Narendra Modi also targeted SP-BSP alliance while addressing a rally in Uttar Pradesh's Moradabad district. PM Modi said, The irony is that 'elephant is riding on bicycle for personal gains. They have done nothing for the poor in the state during their regimes, and now they are trying to lure public on fake promises." + imageSrc: 'images/sakshi.jpg', + postTitle: 'SP, BJP battle over national security', + postDate: '20th June , 2019', + postCategory: 'Sakshi', + postDesc: 'Prime Minster Narendra Modi also targeted SP-BSP alliance while addressing a rally in Uttar Pradesh`s Moradabad district. PM Modi said, The irony is that elephant is riding on bicycle for personal gains. They have done nothing for the poor in the state during their regimes, and now they are trying to lure public on fake promises.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Summer assault! Delhi again in big water crisis", - postDate: "20th June , 2019", - postCategory: "CNBC", - postDesc: "The crisis turns so grave that violent fights over water among neighbours in summers are common. Delhi Police said they are gearing up to tackle water clashes that left three dead and many injured last summer.All experts are unanimous that Delhi must revive its water bodies, ensure groundwater recharge through storm drains, store rainwater, and recycle and reuse its waste water." + imageSrc: 'images/ntv.jpg', + postTitle: 'Summer assault! Delhi again in big water crisis', + postDate: '20th June , 2019', + postCategory: 'NTV', + postDesc: 'The crisis turns so grave that violent fights over water among neighbours in summers are common. Delhi Police said they are gearing up to tackle water clashes that left three dead and many injured last summer.All experts are unanimous that Delhi must revive its water bodies, ensure groundwater recharge through storm drains, store rainwater, and recycle and reuse its waste water.' }, { - imageSrc: "https://cdn.pixabay.com/photo/2015/02/15/09/33/news-636978_960_720.jpg", - postTitle: "Melbourne nightclub shooting leaves 1 dead, 3 injured", - postDate: "20th June , 2019", - postCategory: "NewsToday", - postDesc: "Sunday's shooting took place around 3.20 a.m. in the lively entertainment district of Melbourne's southeastern suburb of Prahran, police said.Three security guards and a man queuing to enter were taken to hospital with gunshot injuries, police said in a televised news conference in Melbourne." + imageSrc: 'images/CBN.jpg', + postTitle: 'Melbourne nightclub shooting leaves 1 dead, 3 injured', + postDate: '20th June , 2019', + postCategory: 'CBN', + postDesc: 'Sunday`s shooting took place around 3.20 a.m. in the lively entertainment district of Melbourne`s southeastern suburb of Prahran, police said.Three security guards and a man queuing to enter were taken to hospital with gunshot injuries, police said in a televised news conference in Melbourne.' }, ]; -let fullContainer = document.createElement('div'); -let container = document.createElement('div'); -let popup = document.createElement('div'); diff --git a/Week-2/scripts/source.js b/Week-2/scripts/source.js index 77d05a9..e6f2c87 100644 --- a/Week-2/scripts/source.js +++ b/Week-2/scripts/source.js @@ -1,142 +1,71 @@ -function changeContent(val){ +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'), + 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; + headerBox.appendChild(toptag); + headerBox.appendChild(topTagItalic); + header.appendChild(headerBox); + footerTag.setAttribute('id','footertag'); + footerTag.textContent=footerText; + foot.appendChild(footerTag); + app.prepend(appBody); + appBody.append(fullContainer); + setLeftContent(fullContainer,container); + setRightContent(fullContainer,container); + document.addEventListener('click', clicked(this,fullContainer,popup)); +} +function changeContent(val,container){ container.innerHTML = ''; - for(i in obj){ - if(obj[i].postCategory===val){ - let card = document.createElement('div'); + for(item in article_data){ + if(article_data[item].postCategory===val){ + 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'), + horizontalLine = document.createElement('HR'); + + rightSide.setAttribute('class','vertical'); card.setAttribute('class', 'box'); - let image = document.createElement('img'); image.setAttribute('class','image'); - image.src="resource/download.png"; - let rightSide = document.createElement('div'); - rightSide.setAttribute('class','vertical'); - let title = document.createElement('h4') - title.textContent = obj[i].postTitle; - let metaDisc = document.createElement('h6'); + image.src=imageSource; + title.textContent = article_data[item].postTitle; metaDisc.setAttribute('class','metadisc'); metaDisc.setAttribute('id','meta'); - metaDisc.textContent = obj[i].postDate; - let description = document.createElement('p'); - description.setAttribute('class','description') - description.textContent = obj[i].postDesc; - let btn = document.createElement('button') - btn.setAttribute('id',i); - btn.innerHTML="Continue Reading"; - btn.setAttribute('class','btncontinue') - let horizontalLine = document.createElement("HR"); + metaDisc.textContent = article_data[item].postDate; + description.setAttribute('class','description'); + description.textContent = article_data[item].postDesc; + btn.setAttribute('id',item); + 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) + card.appendChild(image); + card.appendChild(rightSide); container.appendChild(card); container.appendChild(horizontalLine); } } } -function setRightContent(){ - let right_container = document.createElement('div'); - right_container.setAttribute('class', 'right-container'); - let title1 = document.createElement('h4'); - title1.textContent = "Select Category" - let select = document.createElement("select"); - select.options.add( new Option("Select a NEWS Channel",null) ); - select.options.add( new Option("BBC","BBC") ); - select.options.add( new Option("CNBC","CNBC") ); - select.options.add( new Option("IndiaToday","IndiaToday") ); - select.options.add( new Option("TV9","TV9") ); - select.options.add( new Option("TV5","TV5") ); - select.options.add( new Option("FoxNews","FoxNews") ); - select.options.add( new Option("Republic","Republic") ); - select.options.add( new Option("AajTak","AajTak") ); - select.style.width="50%" - let title2 = document.createElement('h4'); - title2.textContent = "Subscribe" - let check=document.createElement('div'); - check.setAttribute('class','check'); - let input = document.createElement("input"); - input.setAttribute('id','email'); - input.type = "text"; - let btn = document.createElement('button') - btn.innerHTML="Subscribe"; - btn.setAttribute('id','btn-email'); - btn.addEventListener("click", emailSave); - check.appendChild(input); - check.appendChild(btn); - right_container.appendChild(title1); - right_container.appendChild(select); - right_container.appendChild(title2); - right_container.appendChild(check); - fullContainer.appendChild(right_container); - select.options[0].disabled = true; - select.onchange = () => { - let val=select.value; - changeContent(val); - } -} - function setLeftContent(){ - for (var i=0;i<1;i++){ - let card = document.createElement('div'); - card.setAttribute('class', 'box'); - let image = document.createElement('img'); - image.src="resource/download.png"; - image.setAttribute('class','image'); - let right = document.createElement('div'); - right.setAttribute('class','vertical'); - let title = document.createElement('h4') - title.textContent = "SAMPLE NEWS HEADING" - let metaDisc = document.createElement('h6') - metaDisc.setAttribute('class','metadisc') - metaDisc.setAttribute('id','meta') - metaDisc.style.fontStyle = "italic"; - metaDisc.textContent = "created at 21 July 2019" - let description = document.createElement('p'); - description.setAttribute('class','description'); - description.textContent = "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."; - let btn = document.createElement('button') - btn.setAttribute('id',i); - btn.innerHTML="Continue Reading"; - btn.setAttribute('class','btncontinue') - let horizontalline = document.createElement("HR"); - right.appendChild(title); - right.appendChild(metaDisc); - right.appendChild(description); - right.appendChild(btn); - card.appendChild(image) - card.appendChild(right) - container.appendChild(card); - container.appendChild(horizontalline); - 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"; - headerBox.appendChild(toptag); - headerBox.appendChild(topTagItalic); - let header = document.querySelector('header'); - header.appendChild(headerBox); - let footerTag=document.createElement('p'); - footerTag.setAttribute('id','footertag'); - var 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)); -} -window.onload = init; diff --git a/Week-2/scripts/utility.js b/Week-2/scripts/utility.js index 6172e7d..0a47eda 100644 --- a/Week-2/scripts/utility.js +++ b/Week-2/scripts/utility.js @@ -1,36 +1,36 @@ function emailSave(){ - let regexEmail = /\S+@\S+\.\S+/; let emailid= document.getElementById('email').value; if(regexEmail.test(emailid)){ window.localStorage.setItem(emailid, JSON.stringify(emailid)); - alert("Subscribed successfully"); + alert(emailSubscribedMessage); } else{ - alert("Invalid Emailid"); + alert(emailInvalidMessage); } } -function clicked(){ +function clicked(clickEvent,fullContainer,popup){ return clickEvent => { - if(/^\d+$/.test(clickEvent.srcElement.id)){ - popup.style.display = 'block'; - popup.innerHTML = ''; + 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 = obj[Number(clickEvent.srcElement.id)].postDesc; - titlepopup.textContent = obj[Number(clickEvent.srcElement.id)].postTitle; - titlepopup.appendChild(horizontaLine); - closePopup.textContent = '\u2A2f'; - textArea.appendChild(titlepopup); + descriptionPopup = document.createElement('div'); + + popup.style.display = 'block'; + popup.innerHTML = ''; + descriptionPopup.textContent = article_data[Number(clickEvent.srcElement.id)].postDesc; + titlePopup.textContent = article_data[Number(clickEvent.srcElement.id)].postTitle; + 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'){ diff --git a/Week-2/style/style.css b/Week-2/style/style.css index 1c852e2..2b0ae03 100644 --- a/Week-2/style/style.css +++ b/Week-2/style/style.css @@ -18,11 +18,10 @@ border-radius: 100%; background-color: #bf0000; } - .popup{ - padding-left: 50px; display: none; - position: fixed;top: 50%; + position: fixed; + top: 50%; left: 50%; margin-top: -250px; margin-left: -450px; @@ -50,6 +49,9 @@ header{ .headerbox{ display: flex; } +#ddlSelect{ + width:50%; +} HR{ margin: 0px; } @@ -68,8 +70,8 @@ footer{ bottom: 0; width: 100%; border-width: 0.1px; - background-color:#273854; - color:#FFFFFD; + background-color:#273854; + color:#FFFFFD; } main{ height: 80%; @@ -84,10 +86,10 @@ main{ width: 100%; } .left-container{ - display: flex; - width: 75%; - height: 100%; - flex-direction: column; + display: flex; + width: 75%; + height: 100%; + flex-direction: column; } .right-container{ margin: 10px; @@ -111,7 +113,6 @@ main{ } card{ display: inline-block; - } .col-picture{ margin-top: 16px; @@ -147,7 +148,6 @@ h4,h6,p{ display: flex; flex-direction: column; padding-left: 15px; - } .metadisc{ font-style: italic; @@ -166,5 +166,5 @@ padding :15px } p{ overflow: hidden; -text-overflow: ellipsis; + text-overflow: ellipsis; } From 17846b3e3c6fe3137720f7715196047187114e64 Mon Sep 17 00:00:00 2001 From: Aman Singh Date: Mon, 29 Jul 2019 17:26:45 +0530 Subject: [PATCH 3/4] did the changes reviewed -> using a common createCard function for both static and news data,to reduce dom code in a single function ->other minor changes --- Week-2/scripts/RenderContent.js | 129 ++++++++++++++++++++------------ Week-2/scripts/constants.js | 37 +++++---- Week-2/scripts/source.js | 37 --------- Week-2/scripts/utility.js | 8 +- Week-2/style/style.css | 2 - 5 files changed, 101 insertions(+), 112 deletions(-) diff --git a/Week-2/scripts/RenderContent.js b/Week-2/scripts/RenderContent.js index 0524800..bcc64a4 100644 --- a/Week-2/scripts/RenderContent.js +++ b/Week-2/scripts/RenderContent.js @@ -1,26 +1,76 @@ +function setLeftContent(fullContainer,container){ + let card = document.createElement('div'); + createLeftCard(card); + addDivToContainer(card,container,fullContainer); +} + function setRightContent(fullContainer,container){ - let right_container = document.createElement('div'), - titleSelectCategory = document.createElement('h4'), + let right_container = document.createElement('div'); + createRightCard(right_container,container); + fullContainer.appendChild(right_container); + +} +function changeContent(val,container){ + container.innerHTML = ''; + for(item in article_data){ + if(article_data[item].postCategory===val){ + let card = document.createElement('div'); + createLeftCard(card,article_data[item]); + container.appendChild(card); + addDivToContainer(card,container); + } + } +} +function createLeftCard(card,channelSpecificata){ + let image = document.createElement('img'), + right = document.createElement('div'), + title = document.createElement('h4'), + metaDisc = document.createElement('h6'), + description = document.createElement('p'), + btn = document.createElement('button'); + card.setAttribute('class', 'box'); + image.setAttribute('class','image'); + right.setAttribute('class','vertical'); + metaDisc.setAttribute('class','metadisc'); + metaDisc.setAttribute('id','meta'); + description.setAttribute('class','description'); + btn.setAttribute('id',0); + if(channelSpecificata){ + title.textContent = channelSpecificata.postTitle; + metaDisc.textContent = channelSpecificata.postDate; + description.textContent = channelSpecificata.postDesc; + } else{ + title.textContent = defaultTitle; + metaDisc.textContent = defaultDescription; + description.textContent = defaultContent; + } + image.src=imageSource; + btn.innerHTML=buttonText; + btn.setAttribute('class','btncontinue'); + right.appendChild(title); + right.appendChild(metaDisc); + right.appendChild(description); + right.appendChild(btn); + card.appendChild(image); + card.appendChild(right); +} +function createRightCard(right_container,container){ + let titleSelectCategory = document.createElement('h4'), select = document.createElement('select'), subscribeTitle = document.createElement('h4'), check=document.createElement('div'), input = document.createElement('input'), btn = document.createElement('button'); - right_container.setAttribute('class', 'right-container'); titleSelectCategory.textContent = selectCategoryText; select.setAttribute('id','ddlSelect'); select.options.add( new Option(defaultSelectChannelText,null)); - let data=[]; - for(item in article_data){ - if(data.indexOf(article_data[item].postCategory)!==-1){ - continue; - } - else{ - select.options.add( new Option(article_data[item].postCategory,article_data[item].postCategory) ); - data.push(article_data[item].postCategory); - } -} + fillDropDownNewsChannelList(select); + select.onchange = () => { + select.options[0].disabled = true; + let val=select.value; + changeContent(val,container); + } subscribeTitle.textContent = subscribeText; check.setAttribute('class','check'); input.setAttribute('id','email'); @@ -34,43 +84,24 @@ function setRightContent(fullContainer,container){ right_container.appendChild(select); right_container.appendChild(subscribeTitle); right_container.appendChild(check); - fullContainer.appendChild(right_container); - select.options[0].disabled = true; - select.onchange = () => { - let val=select.value; - changeContent(val,container); +} +function fillDropDownNewsChannelList(select){ + let data=[]; + for(item in article_data){ + if(data.indexOf(article_data[item].postCategory)!==-1){ + continue; + } else{ + select.options.add( new Option(article_data[item].postCategory,article_data[item].postCategory) ); + data.push(article_data[item].postCategory); + } } } -function setLeftContent(fullContainer,container){ - let card = document.createElement('div'), - image = document.createElement('img'), - right = document.createElement('div'), - title = document.createElement('h4'), - metaDisc = document.createElement('h6'), - description = document.createElement('p'), - btn = document.createElement('button'), - horizontalline = document.createElement('HR'); - - card.setAttribute('class', 'box'); - image.src=imageSource; - image.setAttribute('class','image'); - right.setAttribute('class','vertical'); - title.textContent = defaultTitle; - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = defaultDescription; - description.setAttribute('class','description'); - description.textContent = defaultContent; - btn.setAttribute('id',0); - btn.innerHTML=buttonText; - btn.setAttribute('class','btncontinue'); - right.appendChild(title); - right.appendChild(metaDisc); - right.appendChild(description); - right.appendChild(btn); - card.appendChild(image); - card.appendChild(right); - container.appendChild(card); - container.appendChild(horizontalline); +function addDivToContainer(card,container,fullContainer){ + let horizontalline = document.createElement('HR'); + container.appendChild(card); + container.appendChild(horizontalline); + console.log(fullContainer); + if(fullContainer){ fullContainer.appendChild(container); + } } diff --git a/Week-2/scripts/constants.js b/Week-2/scripts/constants.js index 9953b5c..d3b9b37 100644 --- a/Week-2/scripts/constants.js +++ b/Week-2/scripts/constants.js @@ -1,21 +1,20 @@ -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 article_data = [ +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', +article_data = [ { imageSrc: 'images/bbc.jpg', postTitle: 'Delhi CEO writes to EC over Modi web series', @@ -27,7 +26,7 @@ const article_data = [ imageSrc: 'images/timesNow.jpg', postTitle: 'New guidelines to tackle mental health of inmates', postDate: '22th June , 2019', - postCategory: 'Times Now', + postCategory: 'BBC', postDesc: 'At present, only Pennsylvania has constituted a detailed manual on mental health for prisoners. Dr Nand Kumar, professor of psychiatry at AIIMS has framed these guidelines on mental health condition for prisoners.Doctors of AII India Institute of Medical Sciences (AIIMS) in collaboration with Delhi Prison Administration have drafted first guidelines on mental health issues for inmates in jail. The manual known as "Psychological First Aid" will be released on Tuesday.' }, { diff --git a/Week-2/scripts/source.js b/Week-2/scripts/source.js index e6f2c87..398d8c6 100644 --- a/Week-2/scripts/source.js +++ b/Week-2/scripts/source.js @@ -32,40 +32,3 @@ function init(){ setRightContent(fullContainer,container); document.addEventListener('click', clicked(this,fullContainer,popup)); } -function changeContent(val,container){ - container.innerHTML = ''; - for(item in article_data){ - if(article_data[item].postCategory===val){ - 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'), - horizontalLine = document.createElement('HR'); - - rightSide.setAttribute('class','vertical'); - card.setAttribute('class', 'box'); - image.setAttribute('class','image'); - image.src=imageSource; - title.textContent = article_data[item].postTitle; - metaDisc.setAttribute('class','metadisc'); - metaDisc.setAttribute('id','meta'); - metaDisc.textContent = article_data[item].postDate; - description.setAttribute('class','description'); - description.textContent = article_data[item].postDesc; - btn.setAttribute('id',item); - 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); - container.appendChild(horizontalLine); - } - } -} diff --git a/Week-2/scripts/utility.js b/Week-2/scripts/utility.js index 0a47eda..c347765 100644 --- a/Week-2/scripts/utility.js +++ b/Week-2/scripts/utility.js @@ -3,8 +3,7 @@ function emailSave(){ if(regexEmail.test(emailid)){ window.localStorage.setItem(emailid, JSON.stringify(emailid)); alert(emailSubscribedMessage); - } - else{ + } else{ alert(emailInvalidMessage); } } @@ -16,7 +15,7 @@ function clicked(clickEvent,fullContainer,popup){ titlePopup = document.createElement('div'), closePopup = document.createElement('div'), descriptionPopup = document.createElement('div'); - + popup.style.display = 'block'; popup.innerHTML = ''; descriptionPopup.textContent = article_data[Number(clickEvent.srcElement.id)].postDesc; @@ -32,8 +31,7 @@ function clicked(clickEvent,fullContainer,popup){ popup.appendChild(textArea); popup.appendChild(descriptionPopup); fullContainer.style.opacity = '0.3'; - } - else if(clickEvent.srcElement.id === 'closePopup'){ + } else if(clickEvent.srcElement.id === 'closePopup'){ popup.style.display = 'none'; fullContainer.style.opacity = '1'; } diff --git a/Week-2/style/style.css b/Week-2/style/style.css index 2b0ae03..bb08e1b 100644 --- a/Week-2/style/style.css +++ b/Week-2/style/style.css @@ -33,8 +33,6 @@ border-width: 1px; padding:10px; } -.closeButton{ -} img{ width: 20%; } From 31e26ec649216a382dfd5acf071f9d82e20fcd20 Mon Sep 17 00:00:00 2001 From: aman raj singh Date: Mon, 29 Jul 2019 19:25:21 +0530 Subject: [PATCH 4/4] Update RenderContent.js --- Week-2/scripts/RenderContent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Week-2/scripts/RenderContent.js b/Week-2/scripts/RenderContent.js index bcc64a4..15a33ec 100644 --- a/Week-2/scripts/RenderContent.js +++ b/Week-2/scripts/RenderContent.js @@ -100,7 +100,6 @@ function addDivToContainer(card,container,fullContainer){ let horizontalline = document.createElement('HR'); container.appendChild(card); container.appendChild(horizontalline); - console.log(fullContainer); if(fullContainer){ fullContainer.appendChild(container); }