diff --git a/Week-3/index.html b/Week-3/index.html
new file mode 100644
index 0000000..1a191d2
--- /dev/null
+++ b/Week-3/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
diff --git a/Week-3/scripts/Render.js b/Week-3/scripts/Render.js
new file mode 100644
index 0000000..a2b196a
--- /dev/null
+++ b/Week-3/scripts/Render.js
@@ -0,0 +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) {
+ });
+}
diff --git a/Week-3/scripts/Update_View.js b/Week-3/scripts/Update_View.js
new file mode 100644
index 0000000..b2ae54f
--- /dev/null
+++ b/Week-3/scripts/Update_View.js
@@ -0,0 +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';
+}
+function setRightContent(fullContainer,container){
+ 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);
+ }
+}
+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 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/Utility.js b/Week-3/scripts/Utility.js
new file mode 100644
index 0000000..5305883
--- /dev/null
+++ b/Week-3/scripts/Utility.js
@@ -0,0 +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;
+
+ 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);
+ }
+}
diff --git a/Week-3/scripts/constants.js b/Week-3/scripts/constants.js
new file mode 100644
index 0000000..9db6536
--- /dev/null
+++ b/Week-3/scripts/constants.js
@@ -0,0 +1,19 @@
+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/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
new file mode 100644
index 0000000..f322b9b
--- /dev/null
+++ b/Week-3/scripts/source.js
@@ -0,0 +1,46 @@
+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);
+ fullContainer.appendChild(container);
+ setRightContent(fullContainer,container);
+ document.addEventListener('click', clicked(this,fullContainer,popup));
+}
diff --git a/Week-3/style/style.css b/Week-3/style/style.css
new file mode 100644
index 0000000..d404cfa
--- /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: 10px;
+ font-weight: bold;
+ color: red;
+ font-size: 1.5em;
+ font-family: Arial;
+ text-align: center;
+ margin-left: auto;
+ width: 20px;
+ cursor: pointer;
+ border-radius: 100%;
+ background-color: white;
+}
+.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;
+}