JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<form>
    <input type=text id=songTextInput placeholder="mp3 url">
    <input type=button id=addButton value="add Song">
    
    <ul id=audioPlaylist>


    </ul>        
    
    <input type=file multiple>
    <input type=file accept="video/*">
    <input type=file accept="image/*">

CSS

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}
ul{
    clear:both;
    width:100%;
    background:red;
    height:200px;
}
input[id*=addButton]{
border:none;
 background:skyBlue;
padding:4px 10px;  
color:white;    
cursor:pointer;
}

JavaScript

$("#addButton").click(function() { 
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if(songName ==''){
     alert("no songs");   
    }else{
    var li = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("audioPlaylist");
    ul.appendChild(li);    
    }        
}); 

var offLineNotes = document.querySelector('#audioPlaylist');  
                // place content from previous edit
                if (!offLineNotes.value) {
                offLineNotes.value = window.localStorage.getItem('value');
                }

                // your content will be saved locally
                offLineNotes.addEventListener('keyup', function () {
                window.localStorage.setItem('value', offLineNotes.value);
                }, false);