Songs

window.addEventListener('load', solve);

function solve() {
        const input = {
            genre : document.getElementById('genre'),
            name : document.getElementById('name'),
            author : document.getElementById('author'),
            date : document.getElementById('date'),
            addSongBtn : document.getElementById('add-btn')
        }

        const wraper = {
            allHits : document.querySelector('.all-hits-container'),
            savedHits : document.querySelector('.saved-container')
        }

       input.addSongBtn.addEventListener('click', addSong);

       let likeElement = document.querySelector('.likes').children[0];
       let totalLikes = 0;

        function addSong(event){
                event.preventDefault();

                const genre = input.genre.value;
                const name = input.name.value;
                const author = input.author.value;
                const date = input.date.value;

                if( genre == '' || name == '' || author == '' || date == ''){
                    return;
                }

                const div = document.createElement('div');
                div.className = 'hits-info';
                div.innerHTML = `<img src="./static/img/img.png">
                                <h2>Genre: ${genre}</h2>
                                <h2>Name: ${name}</h2>
                                <h2>Author: ${author}</h2>
                                <h3>Date: ${date}</h3>
                                <button class="save-btn">Save song</button>
                                <button class="like-btn">Like song</button>
                                <button class="delete-btn">Delete</button>`

                let saveBtn = div.querySelector('.save-btn');
                let likeBtn = div.querySelector('.like-btn');
                let deleteBtn = div.querySelector('.delete-btn');

                saveBtn.addEventListener('click', saveSong);
                likeBtn.addEventListener('click', likeSong);
                deleteBtn.addEventListener('click', deleteSong);

                wraper.allHits.appendChild(div);

                input.genre.value = '';
                input.name.value = '';
                input.author.value = '';
                input.date.value = '';

                function saveSong(){
                    wraper.savedHits.appendChild(div);
                    likeBtn.remove();
                    saveBtn.remove();
                }

                function likeSong(){
                    totalLikes++;
                    likeElement.textContent = `Total Likes: ${totalLikes}`
                    likeBtn.disabled = true;
                }

                function deleteSong(){
                    div.remove()
                }
        }
}