01. Music Site - JS Advanced Final Exam - 23 October 2021

// 01. Music Site
// JS Advanced Final Exam - 23 October 2021
// https://judge.softuni.org/Contests/Practice/Index/3235#0

function solve() {
    // Get the form
    const form = document.querySelector('form');
    // Get input fields
    const genreInput = document.querySelector('#genre');
    const nameInput = document.querySelector('#name');
    const authorInput = document.querySelector('#author');
    const dateInput = document.querySelector('#date');
    // Get likes paragraph
    const likes = document.querySelector('#total-likes .likes p')
    var totalLikes = 0;

    // Listen for the form submit event
    form.addEventListener('submit', function (event) {
        if (!(genreInput.value === '' ||
            nameInput.value === '' ||
            authorInput.value === '' ||
            dateInput.value === '')) {

            event.preventDefault();
            const allHitsContainer = document.getElementsByClassName('all-hits-container')[0];
            const savedContainer = document.getElementsByClassName('saved-container')[0];

            // Create main div to wrap all the info -> img and h2s
            let newDiv = document.createElement('div');
            newDiv.classList.add('hits-info');
            // Create img tag and add img info
            let img = document.createElement('img');
            img.src = './static/img/img.png';

            // Create 4 h2 and add info -> genre , name , author , date
            let genreH2 = document.createElement('h2');
            genreH2.textContent = "Genre:" + " " + genreInput.value;

            let nameH2 = document.createElement('h2');
            nameH2.textContent = "Name:" + " " + nameInput.value;

            let authorH2 = document.createElement('h2');
            authorH2.textContent = "Author:" + " " + authorInput.value;

            let dateH3 = document.createElement('h3');
            dateH3.textContent = "Date:" + " " + dateInput.value;

            // Create 3 buttons with class names
            let saveBtn = document.createElement('button');
            saveBtn.classList.add('save-btn');
            saveBtn.textContent = 'Save song';

            let likeBtn = document.createElement('button');
            likeBtn.classList.add('like-btn');
            likeBtn.textContent = 'Like song';

            let delBtn = document.createElement('button');
            delBtn.classList.add('delete-btn');
            delBtn.textContent = 'Delete';

            // ADD all info to the div and then div to the main container
            newDiv.appendChild(img);
            newDiv.appendChild(genreH2);
            newDiv.appendChild(nameH2);
            newDiv.appendChild(authorH2);
            newDiv.appendChild(dateH3);
            // ADD buttons
            newDiv.appendChild(saveBtn);
            newDiv.appendChild(likeBtn);
            newDiv.appendChild(delBtn);

            allHitsContainer.appendChild(newDiv);
            // Clear input fields
            genreInput.value = '';
            nameInput.value = '';
            authorInput.value = '';
            dateInput.value = '';

            likeBtn.addEventListener('click', function (event) {
                event.preventDefault();
                totalLikes++;
                likes.textContent = `Total Likes: ${totalLikes}`
                likeBtn.disabled = true;

            })

            saveBtn.addEventListener('click', function (event) {
                event.preventDefault();
                savedContainer.appendChild(newDiv);
                newDiv.removeChild(saveBtn);
                newDiv.removeChild(likeBtn);
            })

            delBtn.addEventListener('click', function (event) {
                event.preventDefault();
                // event.currentTarget.parentNode.remove();
                delBtn.parentElement.remove();
            })
        } else {
            // console.log('pass');
            event.preventDefault();
        }
    }
    );
}