amanrajs · amanrajs · Jul 25, 2019 · Jul 26, 2019 · Jul 29, 2019 · Jul 29, 2019
diff --git a/Week-3/index.html b/Week-3/index.html
@@ -0,0 +1,15 @@
+<html >
+      <header>
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link href="style/style.css" rel="stylesheet"/>
+        <script src="scripts/Constants.js" type="text/javascript"></script>
+        <script src="scripts/Render.js" type="text/javascript"></script>
+        <script src="scripts/source.js" type="text/javascript"></script>
+        <script src="scripts/Update_View.js" type="text/javascript"></script>
+        <script src="scripts/Utility.js" type="text/javascript"></script>
+      </header>
+      <main>
+      </main>
+      <footer>
+      </footer>
+</html>
diff --git a/Week-3/scripts/Render.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+}