Advertisement
GeorgiLukanov87

Js-Front-End - DOM and Events - Lab

Feb 26th, 2023 (edited)
464
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // DOM and Events - Lab
  2. // https://judge.softuni.org/Contests/Practice/Index/3794#0
  3.  
  4. // -----------------------------------------------------------------------------------------------------
  5.  
  6. // 01. Sum Numbers
  7.  
  8. function calc() {
  9.     let num1Element = document.getElementById("num1").value;
  10.     let num2Element = document.getElementById("num2").value;
  11.     let resultElement = document.getElementById("sum");
  12.  
  13.     console.log(num1Element);
  14.     console.log(num2Element);
  15.     console.log(resultElement);
  16.  
  17.     let sumResult = Number(num1Element) + Number(num2Element);
  18.     console.log(sumResult);
  19.     resultElement.value = sumResult;
  20. }
  21.  
  22. // -----------------------------------------------------------------------------------------------------
  23. // 02. Show More
  24.  
  25. function showText() {
  26.     let textElement = document.getElementById('text')
  27.     let moreElement = document.getElementById('more')
  28.     console.log(textElement.textContent)
  29.     console.log(moreElement.textContent)
  30.  
  31.     moreElement.style.display = 'none'
  32.     textElement.style.display = 'inline'
  33. }
  34.  
  35. // -----------------------------------------------------------------------------------------------------
  36. // 03. Collect List Items
  37.  
  38. function extractText() {
  39.     resultElement = document.getElementById('result')
  40.     itemsElement = Array.from(document.querySelectorAll('#items li'))
  41.     console.log(itemsElement)
  42.  
  43.     let result = [];
  44.     for (let item of itemsElement) {
  45.         result.push(item.textContent)
  46.     }
  47.     resultElement.textContent = result.join('\n')
  48. }
  49.  
  50. // -----------------------------------------------------------------------------------------------------
  51. // 04. List of Items
  52.  
  53. function addItem() {
  54.     ulListElement = document.getElementById('items')
  55.     inputTextElement = document.getElementById('newItemText')
  56.  
  57.     console.log(ulListElement);
  58.     console.log(inputTextElement);
  59.  
  60.     if (inputTextElement.value !== "") {
  61.         let newLi = document.createElement('li');
  62.         newLi.textContent = inputTextElement.value;
  63.         ulListElement.appendChild(newLi);
  64.     }
  65.     inputTextElement.value = ""
  66. }
  67.  
  68. // -----------------------------------------------------------------------------------------------------
  69. // 05. Delete from Table
  70.  
  71. function deleteByEmail() {
  72.     let result = document.getElementById('result');
  73.  
  74.     let input = document.querySelector('input[name="email"]');
  75.     let mails = Array.from(document.querySelectorAll("td:nth-child(even)"));
  76.  
  77.     targetEmelent = mails.find(x => x.textContent == input.value);
  78.  
  79.     if (targetEmelent) {
  80.         targetEmelent.parentNode.remove();
  81.         result.textContent = 'Deleted.';
  82.     } else {
  83.         result.textContent = 'Not found.';
  84.     }
  85.  
  86.     input.value = ''
  87. }
  88.  
  89. // -----------------------------------------------------------------------------------------------------
  90. // 06. Add / Delete
  91.  
  92. function addItem() {
  93.     let ulItemsElement = document.getElementById('items')
  94.     let inputElement = document.getElementById('newItemText') // value ?
  95.     console.log(inputElement.value);
  96.     console.log(ulItemsElement);
  97.  
  98.     let newLi = document.createElement('li');
  99.     let newA = document.createElement('a');
  100.     let link = document.createTextNode("[Delete]");
  101.     newA.href = "#";
  102.     newA.appendChild(link);
  103.  
  104.     newLi.textContent = inputElement.value;
  105.     newLi.appendChild(newA);
  106.  
  107.     ulItemsElement.appendChild(newLi);
  108.  
  109.     inputElement.value = '';
  110.  
  111.     let aItemsElement = Array.from(document.querySelectorAll('#items li a'));
  112.  
  113.     newA.addEventListener('click', (e) => {
  114.         e.currentTarget.parentNode.remove();
  115.     })
  116.  
  117. }
  118.  
  119. // -----------------------------------------------------------------------------------------------------
  120. // 07. Colorize Table
  121.  
  122. function colorize() {
  123.     items = document.querySelectorAll("tbody  tr:nth-child(2),tr:nth-child(4)")
  124.     for (item of items) {
  125.         console.log(item)
  126.         item.style.backgroundColor = 'teal'
  127.     }
  128.  
  129. }
  130.  
  131. // -----------------------------------------------------------------------------------------------------
  132. // 08. Sum Table
  133.  
  134. function sumTable() {
  135.     pricesElement = document.querySelectorAll('table  tbody  tr td:nth-child(2)')
  136.     let sum = 0;
  137.     for (let price of pricesElement) {
  138.         console.log(price)
  139.         sum += Number(price.textContent);
  140.     }
  141.     console.log(sum)
  142.  
  143.     let resultInputElement = document.getElementById('sum');
  144.     resultInputElement.textContent = sum
  145.  
  146. }
  147.  
  148. // -----------------------------------------------------------------------------------------------------
  149. // 09. Highlight Active
  150.  
  151. function focused() {
  152.     inputElement = document.querySelectorAll('div div input')
  153.  
  154.     for (inputEl of inputElement) {
  155.         inputEl.addEventListener('focus', (e) => {
  156.             e.currentTarget.parentNode.classList.add('focused')
  157.         })
  158.  
  159.         inputEl.addEventListener('blur', (e) => {
  160.             e.currentTarget.parentNode.classList.remove('focused')
  161.         })
  162.     }
  163.  
  164. }
  165.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement