Advertisement
pacho_the_python

scary_story_dom

Mar 19th, 2023
632
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.addEventListener("load", solve);
  2.  
  3. function solve() {
  4.     const firstnameElement = document.getElementById('first-name')
  5.     const lastnameElement = document.getElementById('last-name')
  6.     const ageElement = document.getElementById('age')
  7.     const titleElement = document.getElementById('story-title')
  8.     const storyElement = document.getElementById('story')
  9.     const genreElement = document.getElementById('genre')
  10.     const previewListElement = document.getElementById('preview-list')
  11.     const mainDiv = document.getElementById('main')
  12.  
  13.     const publishButton = document.getElementById('form-btn')
  14.     publishButton.addEventListener("click", publishStory)
  15.  
  16.     let first = ''
  17.     let last = ''
  18.     let age = ''
  19.     let title = ''
  20.     let story = ''
  21.     let genre = ''
  22.  
  23.     function createArticle(firstname, lastname, authorAge, bookTitle, bookStory, genre) {
  24.         let articleElement = document.createElement('article')
  25.         let fullName = document.createElement('h4')
  26.         let ageElementCreate = document.createElement('p')
  27.         let titleElementCreate = document.createElement('p')
  28.         let storyElementCreate = document.createElement('p')
  29.         let genreElementCreate = document.createElement('p')
  30.  
  31.         fullName.textContent = `Name: ${firstname} ${lastname}`
  32.         articleElement.appendChild(fullName)
  33.  
  34.         ageElementCreate.textContent = `Age: ${authorAge}`
  35.         articleElement.appendChild(ageElementCreate)
  36.  
  37.         titleElementCreate.textContent = `Title: ${bookTitle}`
  38.         articleElement.appendChild(titleElementCreate)
  39.  
  40.         genreElementCreate.textContent = `Genre: ${genre}`
  41.         articleElement.appendChild(genreElementCreate)
  42.  
  43.         storyElementCreate.textContent = `${bookStory}`
  44.         articleElement.appendChild(storyElementCreate)
  45.  
  46.         return articleElement
  47.     }
  48.  
  49.     function createButton(className, context, someFunction) {
  50.         let currentBtn = document.createElement('button')
  51.         currentBtn.classList.add(className)
  52.         currentBtn.textContent = context
  53.         currentBtn.addEventListener("click", someFunction)
  54.         return currentBtn
  55.     }
  56.  
  57.     function publishStory(e) {
  58.         e.preventDefault()
  59.         first = firstnameElement.value
  60.         last = lastnameElement.value
  61.         age = ageElement.value
  62.         title = titleElement.value
  63.         story = storyElement.value
  64.         genre = genreElement.value
  65.  
  66.         if (
  67.             first === '' ||
  68.             last === '' ||
  69.             age === '' ||
  70.             title === '' ||
  71.             story === '' ||
  72.             genre === '') {
  73.             return
  74.         }
  75.  
  76.         let articleElement = createArticle(first, last, age, title, story, genre)
  77.  
  78.         let liElement = document.createElement('li')
  79.         liElement.classList.add('story-info')
  80.  
  81.         let saveBtn = createButton('save-btn', 'Save Story', saveStory)
  82.         let editBtn = createButton('edit-btn', 'Edit Story', editStory)
  83.         let deleteBtn = createButton('delete-btn', 'Delete Story', deleteStory)
  84.  
  85.         liElement.appendChild(articleElement)
  86.         liElement.appendChild(saveBtn)
  87.         liElement.appendChild(editBtn)
  88.         liElement.appendChild(deleteBtn)
  89.         previewListElement.appendChild(liElement)
  90.  
  91.         publishButton.disabled = true
  92.         firstnameElement.value = ''
  93.         lastnameElement.value = ''
  94.         ageElement.value = ''
  95.         titleElement.value = ''
  96.         storyElement.value = ''
  97.         genreElement.value = ''
  98.     }
  99.  
  100.     function editStory() {
  101.         let elementToRemove = Array.from(document.getElementsByClassName('story-info'))[0]
  102.         elementToRemove.remove()
  103.         publishButton.disabled = false
  104.  
  105.         firstnameElement.value = first
  106.         lastnameElement.value = last
  107.         ageElement.value = age
  108.         titleElement.value = title
  109.         storyElement.value = story
  110.         genreElement.value = genre
  111.     }
  112.  
  113.     function deleteStory() {
  114.         let elementToRemove = Array.from(document.getElementsByClassName('story-info'))[0]
  115.         elementToRemove.remove()
  116.         publishButton.disabled = false
  117.     }
  118.  
  119.     function saveStory() {
  120.         let sideWrapperElement = document.getElementById('side-wrapper')
  121.         sideWrapperElement.remove()
  122.  
  123.         let formWrapperElement = Array.from(document.getElementsByClassName('form-wrapper'))[0]
  124.         formWrapperElement.remove()
  125.  
  126.         let headingElement = document.createElement('h1')
  127.         headingElement.textContent = "Your scary story is saved!"
  128.  
  129.         mainDiv.appendChild(headingElement)
  130.     }
  131. }
  132.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement