DJ QUE

[strawbs89]

hi in short i'm trying to design a DJQUE
where's DJ's can delete Songs ect

so i have tested it out and all i'm getting is

failed to get data please refresh

all this when submitted from the form goes into a spreadsheet
so the code

Link: DJQUE

HTML:

<html>
<head>
    <title> DJ Queue </title>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-auth.js"></script>
    <script src="https://coolvibes-reloaded.com/ReqForm/scripts/loginForm.js"> </script>
</head>
  <body>
    <div id="hero">
        <h1>Welcome to the Queue</h1>
        <h4> This is how the queue currently looks. Delete any songs you need to. View the live queue <a href="https://coolvibes-reloaded.com/ReqForm/ReqQue/display.html" style="text-decoration: none; color:navy" target="_blank">here. </a> </h4>
        <button onclick="signOut()" id="signOut"> Sign Out </button> <br/><br/>
       
    </div>  

    <div id="display">
        <div id="loader">
            <h4> Loading</h4>
        </div>
        <div id="allSongs">
        </div>
        <div id="errorMessage">
            <h2> Failed to get data. Please refresh </h2>
        </div>
    </div>
    </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    body{
        /*text-align: center;*/
        background-color: lightblue;
        height: 100%;
        /*background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);*/
        font-family: 'Roboto', sans-serif;
    }
    .song-row{
       
        background-color: white;
        border-radius: 10px;

        padding: 10px;
        margin: auto;
        width: 50%;
        margin-bottom: 20px;
        text-align: center;
        /*width: 50%;*/
    }

#allSongs{
    display: none;
}


#errorMessage{
    display: none;
    color: red;
}

#loader {  
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: auto;
  margin-top: 40px;
}
.Song{

text-align: center;
display: inline-block;
padding-right: 10px;
 }

 .Artist{

display: inline-block;
padding-right: 10px;
 }

 .Link{

/*display: inline-block;*/
text-align: center;

 }

#hero{
    text-align: center;
}
.deleteButton{
    display: inline-block;
    background-color: red;
    color: white;
    border:none;
    padding:10px;
    margin-left:20px;
    text-align: center;

}
#signOut{
    background-color: #606c88;
    color:white;
    border:none;
    padding: 10px;
    border-radius: 10px;
    width:100px;
    text-align: center;
    height: auto;
}

.rowNotesSaveBtn{
    background-color: green;
    color: white;
    border:none;
    padding:10px;
    margin-left:20px;
    text-align: center;
     display: inline-block;
}

.rowNotesField{
         width: 100%;
        border-top: 10px;
        border-left: none;
        border-right:none;
        padding-top:10px;
        margin-bottom: 10px;
        display: inline-block;

}

JS:

let allSongsElm = document.getElementById("allSongs")
        let loaderElm = document.getElementById("loader")
        let errorMessageElm = document.getElementById("errorMessage")
       
        function setErrorDisplay(){
            loaderElm.style.display = "none"
            allSongsElm.style.display = "none"
            errorMessageElm.style.display = "block"
        }
                   

        function updateSongNotes(rowID){
            const currValueOfNotes = document.getElementById("rowNotesField" + rowID.toString()).value

            fetch("https://api.apispreadsheets.com/data/qOnLkupOU7WkHLCD/", {
                method: "POST",
                body: JSON.stringify({"data": {"Notes": currValueOfNotes}, "query": "select*fromqOnLkupOU7WkHLCDwhereID=" + rowID.toString()}),
            }).then(res =>{
                if (res.status === 201){
                    // SUCCESS
                    alert("Notes Updated")
                }
                else{
                    // ERROR
                    alert("Notes Not Updated")
                }
            })
        }
           
        fetch("https://api.apispreadsheets.com/data/qOnLkupOU7WkHLCD/").then(res=>{
            if (res.status === 200){
                res.json().then(data=>{
                    const yourData = data["data"]
                    for(let i = 0; i < yourData.length; i++){
                        let rowInfo = yourData[i]

                        let rowInfoDiv = document.createElement("div")
                        rowInfoDiv.classList.add("song-row")

                        let rowName = document.createElement("h2")
                        let rowNameNode = document.createTextNode(rowInfo["Name"])
                        rowName.appendChild(rowNameNode)
                        rowName.classList.add("Name")
                       
                        let rowSong = document.createElement("h2")
                        let rowSongNode = document.createTextNode(rowInfo["Song"])
                        rowSong.appendChild(rowSongNode)
                        rowSong.classList.add("Song")

                        let rowArtist = document.createElement("h4")
                        let rowArtistNode = document.createTextNode(rowInfo["Artist"])
                        rowArtist.appendChild(rowArtistNode)
                        rowArtist.classList.add("Artist")

                        let rowLink = document.createElement("a")
                        rowLink.setAttribute("href", rowInfo["Link"])
                        rowLink.setAttribute("target","_blank")
                        let rowLinkNode = document.createTextNode(rowInfo["Link"])
                        rowLink.appendChild(rowLinkNode)
                        rowLink.classList.add("Link")
                       
                        let rowShoutout = document.createElement("h4")
                        let rowShoutoutNode = document.createTextNode(rowInfo["Shoutout"])
                        rowShoutout.appendChild(rowShoutoutNode)
                        rowShoutout.classList.add("Shoutout")

                        let rowDeleteButton = document.createElement("button")
                        rowDeleteButton.setAttribute("onclick", "deleteRow(" + (rowInfo['ID']).toString() + ")")
                        let rowDeleteButtonNode = document.createTextNode("Delete Song")
                        rowDeleteButton.appendChild(rowDeleteButtonNode)
                        rowDeleteButton.classList.add("deleteButton")

                        let rowNotesField = document.createElement("input")
                        rowNotesField.setAttribute("type", "text")
                        rowNotesField.setAttribute("id", "rowNotesField" + rowInfo['ID'].toString())
                        rowNotesField.setAttribute("value", rowInfo['Notes'])
                        rowNotesField.classList.add("rowNotesField")
                       
                        let rowNotesSaveBtn = document.createElement("button")
                        rowNotesSaveBtn.setAttribute("onclick", "updateSongNotes(" + rowInfo['ID'].toString() + ')')

                        let rowNotesSaveBtnNode = document.createTextNode("Save Notes")
                        rowNotesSaveBtn.appendChild(rowNotesSaveBtnNode)
                        rowNotesSaveBtn.setAttribute("id", "rowNotesSaveBtn" + rowInfo['ID'].toString())
                        rowNotesSaveBtn.classList.add("rowNotesSaveBtn")

                       
                        rowInfoDiv.appendChild(rowName)
                        rowInfoDiv.appendChild(rowSong)
                        rowInfoDiv.appendChild(rowArtist)
                        rowInfoDiv.appendChild(rowLink)
                        rowInfoDiv.appendChild(rowShoutout)

               
                        rowInfoDiv.appendChild(rowNotesField)
                        rowInfoDiv.appendChild(rowNotesSaveBtn)
                        rowInfoDiv.appendChild(rowDeleteButton)

                       
                        allSongsElm.appendChild(rowInfoDiv)

                    }
                   
                    loaderElm.style.display = "none"
                    allSongsElm.style.display = "block"
                    errorMessageElm.style.display = "none"

                }).catch(err => {
                    setErrorDisplay()
                })
            }
            else{
                setErrorDisplay()
            }
        }).catch(err =>{
            setErrorDisplay()
        })
        .catch(err => {
   console.error("Error fetching or parsing data: ", err);
   setErrorDisplay();
})

 

[EkBass]

URL: https://coolvibes-reloaded.com/ReqForm/ReqForm/ReqQue/display.html

404​

File not found

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL as well as any file permissions.
For root URLs (like Example Domain) you must provide an index.html file.

Read the full documentation for more information about using GitHub Pages.

You need first to find out, is it up to your code or that service.