updated: just working on the design

diff --git a/public/css/index.css b/public/css/index.css
index 826e097ee2471ffe0856d04a545f1d2fd15f226e..b68a18bd15ecb40e69bec69f9e06f991bafa11b5 100644 (file)
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -4,5 +4,30 @@
 
 
 .songElement {
+       display: flex;
+       margin: 10px;
 
+       * {
+               margin: auto 10px auto 10px;
+       }
+
+       p {
+               font-size: 16px;
+       }
+
+       img {
+               height: 60px;
+               width: 60px;
+       }
+
+       .songElementBy, .songElementId {
+               font-size: 12px;
+       }
+
+       .songElementCheck {
+               padding: 0;
+               font-size: 2.25rem;
+               line-height: 2.25rem;
+
+       }
 }

diff --git a/public/js/index.js b/public/js/index.js
index 62e78153e640f83fec8d76cdb9023437807c3089..6c18802fd181a2c55dd73c14c3acf91b1f56ccd3 100644 (file)
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -21,12 +21,13 @@ let innerSongList = document.getElementById("innerSongList")
  **/
 /*
 <div songId="[ID OF SONG (just number)]" id="SONG:XX" class="songElement">
-       <p>✅</p> // or false
-       <p>SONG NAME</p> BY
-       <p>ARTIST NAME</p>
+       <p class="songElementCheck">✅</p> // or false
        <img></img> // HERE WOULD GO THE IMAGE
        <button>EDIT</button>
-       <p>ID: []</p>
+       <p class="songElementName">SONG NAME</p>
+       <p class="songElementBy">by</p>
+       <p class="songElementArtist">ARTIST NAME</p>
+       <p class="songElementId">ID: []</p>
 </div>
 */
 function NewSongElement(exists, songName, artistName, imageUrl, id) {
@@ -40,12 +41,19 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
        if (exists) {
                check.innerText = "✅"
        }
+       check.classList = "songElementCheck"
 
        let songNameP = document.createElement("p")
        songNameP.innerText = songName
+       songNameP.classList = "songElementName"
+
+       let byP = document.createElement("p")
+       byP.innerText = "by"
+       byP.classList = "songElementBy"
 
        let artistNameP = document.createElement("p")
        artistNameP.innerText = artistName
+       artistNameP.classList = "songElementArtist"
 
        let image = document.createElement("img")
        image.src = imageUrl
@@ -55,12 +63,14 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
        
        let idP = document.createElement("p")
        idP.innerText = id
+       idP.classList = "songElementId"
 
        wrapper.appendChild(check)
-       wrapper.appendChild(songNameP)
-       wrapper.appendChild(artistNameP)
        wrapper.appendChild(image)
        wrapper.appendChild(editButton)
+       wrapper.appendChild(songNameP)
+       wrapper.appendChild(byP)
+       wrapper.appendChild(artistNameP)
        wrapper.appendChild(idP)
 
        return wrapper
@@ -107,7 +117,7 @@ let songFilterInput = document.getElementById("songFilterInput")
 
 
 
-
+getSongList()
 
 // ==============================================================
 /*

diff --git a/songmanager b/songmanager
index cee7e082ff8f04c9565035bd41a5aaeeacef3af8..635b639d702224facb2020d8d86a73a08b6d97ea 100755 (executable)
Binary files a/songmanager and b/songmanager differ