Guest User

Untitled

a guest
May 26th, 2019
79
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