SHARE
TWEET

Untitled

a guest May 26th, 2019 76 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let allMails = [
  2.     {
  3.         date: '23 Jan',
  4.         from: 'Susanne',
  5.         subject: 'About holiday at July',
  6.         mail: 'Dear Leyda,as you probably know...',
  7.         isFavorited: false,
  8.     },
  9.     {
  10.         date: '22 Jan',
  11.         from: 'Zeit Now',
  12.         subject: 'Email confirmation',
  13.         mail: 'Please confrim your email for 20th time..',
  14.         isFavorited: false,
  15.     },
  16.     {
  17.         date: '19 Jan',
  18.         from: 'Facebook',
  19.         subject: 'New message',
  20.         mail: 'You got a message from a random per..',
  21.         isFavorited: false,
  22.     },
  23.     {
  24.         date: '18 Jan',
  25.         from: 'Github',
  26.         subject: 'Forgot your password',
  27.         mail: 'Click on this link to reset your passwor..',
  28.         isFavorited: false,
  29.     },
  30.     {
  31.         date: '15 Jan',
  32.         from: 'Roboard',
  33.         subject: 'Bender sent you a DM',
  34.         mail: 'KILL ALL HUMANS',
  35.         isFavorited: false,
  36.     },
  37.     {
  38.         date: '11 Jan',
  39.         from: 'SuperOffer',
  40.         subject: 'Earn $1000 from home',
  41.         mail: 'CLICK HERE TO GET YOUR REWARD',
  42.         isFavorited: false,
  43.     },
  44.     {
  45.         date: '10 Jan',
  46.         from: 'YSK',
  47.         subject: 'Your e-mazbata is here',
  48.         mail: 'Dear Leyda,to get your mazbata...',
  49.         isFavorited: false,
  50.     }
  51. ]
  52.  
  53. const yesButton = document.querySelector('.deleteMail')
  54. const overlay = document.querySelector('.overlay')
  55.  
  56. function showConfirmationDialog(yesAction) {
  57.     document.body.classList.add('dialog-visible')
  58.     //added visible class to body
  59.     overlay.addEventListener('click', function (event) {
  60.         document.body.classList.remove('dialog-visible')
  61.     }) //added click event to overlay
  62.  
  63.  
  64.     yesButton.addEventListener('click', yesAction)
  65.  
  66.     function newAction() {
  67.         yesAction()
  68.         yesButton.removeEventListener('click', newAction)
  69.  
  70.         document.body.classList.remove('dialog-visible')
  71.  
  72.     }
  73.  
  74.     yesButton.addEventListener('click',newAction)
  75. }
  76.  
  77. yesButton.addEventListener('click', function () {
  78.     showConfirmationDialog(function () {
  79.         console.log('zzzzz')
  80.        
  81.     })
  82. })
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89. const container = document.querySelector('.inboxContainer')
  90. //console.log(container)
  91.  
  92. container.addEventListener('click', function (event) {
  93.     //console.log(event)
  94.     const parent = event.target.parentElement
  95.     //console.log(parent)
  96.     const index = parent.dataset.index
  97.  
  98.     const deleteButton = document.querySelector('.deleteImg')
  99.     //console.log(deleteButton)
  100.     const overlay = document.querySelector('.overlay')
  101.     //console.log(overlay)
  102.     const dialog = document.querySelector('.dialog')
  103.     if (event.target.classList.contains('star')) {
  104.         console.log(`you've clicked on ${index}`)
  105.         if (allMails[index].isFavorited) {
  106.             allMails[index].isFavorited = false
  107.         } else {
  108.             allMails[index].isFavorited = true
  109.         }
  110.  
  111.         showMails(allMails)
  112.     }
  113.  
  114.  
  115.  
  116.     if (event.target.classList.contains('deleteImg')) {
  117.         showConfirmationDialog(function () {
  118.             allMails.splice(index, 1)
  119.             showMails(allMails)
  120.  
  121.         })
  122.  
  123.  
  124.     }
  125.  
  126. })
  127.  
  128.  
  129.  
  130. function showMails(allMails) {
  131.  
  132.     let html = ''
  133.  
  134.     allMails.forEach(function ({ date, from, subject, mail, isFavorited }, index) {
  135.         //console.log(index)
  136.         let starClass = 'star favImg'
  137.         if (isFavorited) {
  138.             starClass = 'star favedImg'
  139.         }
  140.         html += `<div class="eMail" data-index="${index}">
  141.         <span class="date">${date}</span>
  142.         <span class="username">${from}</span>
  143.         <span class="subject">${subject}</span>
  144.         <p class="contentMail">${mail}</p>
  145.         <button class="${starClass}"  ></button>
  146.         <button class="deleteImg"></button>`
  147.  
  148.     })
  149.  
  150.     //container.innerHTML = html
  151.     if (html === '') {
  152.         container.innerHTML = ''
  153.     } else {
  154.         container.innerHTML = html
  155.     }
  156. }
  157.  
  158. showMails(allMails)
  159.  
  160. const input = document.querySelector('input')
  161. //console.log(input)
  162.  
  163. input.addEventListener('input', function (event) {
  164.     const searchKeyWord = event.target.value.toLowerCase()
  165.     //console.log(searchKeyWord)
  166.  
  167.     const filteredMails = allMails.filter(function ({ date, from, subject, mail }) {
  168.  
  169.         if (date.toLowerCase().includes(searchKeyWord)) {
  170.             return true
  171.         }
  172.         if (from.toLowerCase().includes(searchKeyWord)) {
  173.             return true
  174.         }
  175.         if (subject.toLowerCase().includes(searchKeyWord)) {
  176.             return true
  177.         }
  178.         if (mail.toLowerCase().includes(searchKeyWord)) {
  179.             return true
  180.         }
  181.         return false
  182.  
  183.  
  184.     })
  185.  
  186.  
  187.  
  188.     console.log(filteredMails)
  189.  
  190.  
  191.     showMails(filteredMails)
  192. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top