Js Front-End - DOM and Events - Exercises

// DOM and Events - Exercises
// https://judge.softuni.org/Contests/Compete/Index/3795#0


// -----------------------------------------------------------------------------------------------------
// 01. Subtraction

function subtract() {
    let firstNumElement = document.getElementById('firstNumber')
    let secondNumElement = document.getElementById('secondNumber')
    let resultElement = document.getElementById('result')
    let result = Number(firstNumElement.value) - Number(secondNumElement.value)
    resultElement.textContent = result
}

// -----------------------------------------------------------------------------------------------------
// 02. Sections

function create(words) {
   mainElement = document.getElementById('content')

   for (el of words) {
      newDiv = document.createElement('div');
      newP = document.createElement('p');
      newP.textContent = el
      newP.style.display = 'none'
      newDiv.appendChild(newP)
      mainElement.appendChild(newDiv)
   }

   divElements = document.querySelectorAll('#content div')

   for (div of divElements) {
      div.addEventListener('click', (e) => {
         if (e.currentTarget.firstChild.style.display === 'none') {
            console.log(e.currentTarget.firstChild.style.display = 'block')
         } else {
            e.currentTarget.firstChild.style.display = 'none'
         }

      })
   }

}

// -----------------------------------------------------------------------------------------------------
// 03. Accordion

function toggle() {
    btnElement = Array.from(document.getElementsByClassName('button'))[0]
    textElement = document.getElementById('extra')

    if (btnElement.textContent === 'More') {
        btnElement.textContent = 'Less'
        textElement.style.display = 'block'
    } else {
        btnElement.textContent = 'More'
        textElement.style.display = 'none'
    }

}

// -----------------------------------------------------------------------------------------------------
// 04. Locked Profile

function lockedProfile() {
    let buttonsElements = Array.from(document.querySelectorAll('.profile button'))
    buttonsElements.forEach(btn => btn.addEventListener('click', onClick))

    function onClick(event) {
        let currentProfile = event.target.parentElement
        let isLocked = currentProfile.querySelector('input[value="unlock"]').checked;
        let toShow = currentProfile.querySelector(".profile div")
        if (isLocked) {

            if (event.target.textContent === 'Show more') {
                toShow.style.display = 'block'
                event.target.textContent = 'Hide it'
            }
            else {
                toShow.style.display = 'none'
                event.target.textContent = 'Show more'
            }
        }

    }
}

// -----------------------------------------------------------------------------------------------------
// 05. Fill Dropdown

function addItem() {
    dropMenuElement = document.getElementById('menu')
    textElement = document.getElementById('newItemText')
    valueElement = document.getElementById('newItemValue')

    newOptionElement = document.createElement('option')
    newOptionElement.value = valueElement.value
    newOptionElement.textContent = textElement.value

    dropMenuElement.appendChild(newOptionElement)

    textElement.value = ""
    valueElement.value = ""
}

// -----------------------------------------------------------------------------------------------------
//06. Table – Search Engine

function solve() {
   document.querySelector('#searchBtn').addEventListener('click', onClick);
   let inputField = document.getElementById('searchField')
   let rows = Array.from(document.querySelectorAll('tbody tr'))

   function onClick() {
      console.log(inputField.value)
      console.log(rows)
      for (let row of rows) {
         row.classList.remove('select');
         if (inputField.value !== '' && row.innerHTML.includes(inputField.value)) {
            row.className = 'select';
         }
      }
      inputField.value = ''
   }
}

// -----------------------------------------------------------------------------------------------------
// 07. Format the Text

function solve() {
  let input = document.getElementById('input')
  let output = document.getElementById('output')
  let textArr = input.value.split('.').filter(s => s !== '');

  while (textArr.length > 0) {
    let text = textArr.splice(0, 3).join('. ');
    text += '.'
    let newParagraph = document.createElement('p');
    newParagraph.textContent = text;
    output.appendChild(newParagraph);
  }

}

// -----------------------------------------------------------------------------------------------------
// 08. Furniture

function solve() {
  let textarea = document.querySelectorAll('textarea');
  let tbody = document.querySelector('tbody');

  [...document.querySelectorAll('button')].forEach(btn => btn.addEventListener('click', execute));
  function execute(btn) {
    if (!textarea[0].value) return;
    if (btn.target.textContent === 'Generate') {
      let input = JSON.parse(textarea[0].value);
      input.forEach(furniture => {
        tbody.innerHTML += `<tr>
          <td><img src=${furniture.img}></td>
          <td><p>${furniture.name}</p></td>
          <td><p>${furniture.price}</p></td>
          <td><p>${furniture.decFactor}</p></td>
          <td><input type="checkbox"/></td>
          </tr>`
      })
    } else {
      let furnitureName = [];
      let totalPrice = 0;
      let averageDecFactor = 0;
      [...document.querySelectorAll('input:checked')]
        .forEach(furniture => {
          let parentRow = furniture.parentNode.parentNode;
          averageDecFactor += Number(parentRow.children[3].textContent);
          totalPrice += Number(parentRow.children[2].textContent);
          furnitureName.push(parentRow.children[1].textContent);
        });
      textarea[1].textContent += `Bought furniture: ${furnitureName.join(', ')}\n`;
      textarea[1].textContent += `Total price: ${totalPrice.toFixed(2)}\n`;
      textarea[1].textContent += `Average decoration factor: ${averageDecFactor / furnitureName.length}`;
    }
  }
}