Js-Front-End - DOM and Events - Lab

// DOM and Events - Lab
// https://judge.softuni.org/Contests/Practice/Index/3794#0

// -----------------------------------------------------------------------------------------------------

// 01. Sum Numbers

function calc() {
    let num1Element = document.getElementById("num1").value;
    let num2Element = document.getElementById("num2").value;
    let resultElement = document.getElementById("sum");

    console.log(num1Element);
    console.log(num2Element);
    console.log(resultElement);

    let sumResult = Number(num1Element) + Number(num2Element);
    console.log(sumResult);
    resultElement.value = sumResult;
}

// -----------------------------------------------------------------------------------------------------
// 02. Show More

function showText() {
    let textElement = document.getElementById('text')
    let moreElement = document.getElementById('more')
    console.log(textElement.textContent)
    console.log(moreElement.textContent)

    moreElement.style.display = 'none'
    textElement.style.display = 'inline'
}

// -----------------------------------------------------------------------------------------------------
// 03. Collect List Items

function extractText() {
    resultElement = document.getElementById('result')
    itemsElement = Array.from(document.querySelectorAll('#items li'))
    console.log(itemsElement)

    let result = [];
    for (let item of itemsElement) {
        result.push(item.textContent)
    }
    resultElement.textContent = result.join('\n')
}

// -----------------------------------------------------------------------------------------------------
// 04. List of Items

function addItem() {
    ulListElement = document.getElementById('items')
    inputTextElement = document.getElementById('newItemText')

    console.log(ulListElement);
    console.log(inputTextElement);

    if (inputTextElement.value !== "") {
        let newLi = document.createElement('li');
        newLi.textContent = inputTextElement.value;
        ulListElement.appendChild(newLi);
    }
    inputTextElement.value = ""
}

// -----------------------------------------------------------------------------------------------------
// 05. Delete from Table

function deleteByEmail() {
    let result = document.getElementById('result');

    let input = document.querySelector('input[name="email"]');
    let mails = Array.from(document.querySelectorAll("td:nth-child(even)"));

    targetEmelent = mails.find(x => x.textContent == input.value);

    if (targetEmelent) {
        targetEmelent.parentNode.remove();
        result.textContent = 'Deleted.';
    } else {
        result.textContent = 'Not found.';
    }

    input.value = ''
}

// -----------------------------------------------------------------------------------------------------
// 06. Add / Delete

function addItem() {
    let ulItemsElement = document.getElementById('items')
    let inputElement = document.getElementById('newItemText') // value ?
    console.log(inputElement.value);
    console.log(ulItemsElement);

    let newLi = document.createElement('li');
    let newA = document.createElement('a');
    let link = document.createTextNode("[Delete]");
    newA.href = "#";
    newA.appendChild(link);

    newLi.textContent = inputElement.value;
    newLi.appendChild(newA);

    ulItemsElement.appendChild(newLi);

    inputElement.value = '';

    let aItemsElement = Array.from(document.querySelectorAll('#items li a'));

    newA.addEventListener('click', (e) => {
        e.currentTarget.parentNode.remove();
    })

}

// -----------------------------------------------------------------------------------------------------
// 07. Colorize Table

function colorize() {
    items = document.querySelectorAll("tbody  tr:nth-child(2),tr:nth-child(4)")
    for (item of items) {
        console.log(item)
        item.style.backgroundColor = 'teal'
    }

}

// -----------------------------------------------------------------------------------------------------
// 08. Sum Table

function sumTable() {
    pricesElement = document.querySelectorAll('table  tbody  tr td:nth-child(2)')
    let sum = 0;
    for (let price of pricesElement) {
        console.log(price)
        sum += Number(price.textContent);
    }
    console.log(sum)

    let resultInputElement = document.getElementById('sum');
    resultInputElement.textContent = sum

}

// -----------------------------------------------------------------------------------------------------
// 09. Highlight Active

function focused() {
    inputElement = document.querySelectorAll('div div input')

    for (inputEl of inputElement) {
        inputEl.addEventListener('focus', (e) => {
            e.currentTarget.parentNode.classList.add('focused')
        })

        inputEl.addEventListener('blur', (e) => {
            e.currentTarget.parentNode.classList.remove('focused')
        })
    }

}