ABC (Copy 7316)

✨ Napat Phobutdee

<!DOCTYPE html>
<html lang=en>
  <style>
    h1{
		display:inline-block;
    }
  </style>
    <head>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js></script>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js></script>

/**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run in this callback.
             */
            const main = (callback) => {
                document.addEventListener("DOMContentLoaded", callback, {
                    once: true
                })
            },
                /**
                 * ? Shorten syntax for querying for element id
                 */
                id = (id) => {
                    const reference = document.getElementById(id)

return Object.assign(reference, {
                        on: (event, callback) => {
                            reference.addEventListener(event, callback)

return () => reference.removeEventListener(event, callback)
                        }
                    })
                }
        </script>
        <script defer>
            // Firebase Setup
            const firebaseConfig = {
                apiKey: "AIzaSyDt6jIKO9TRHU4b9Jn5TEcuvAVUGeS8wyo",
                authDomain: "tutorial-multi.firebaseapp.com",
                projectId: "tutorial-multi",
                storageBucket: "tutorial-multi.appspot.com",
                messagingSenderId: "614793422757",
                appId: "1:614793422757:web:4d148d828aa89addf92a4c",
                measurementId: "G-37RP5F6CV0"
            }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()

main(() => {
                /*
                 * ? When element with id "read" is clicked.
                 * ? The function will run.
                 * */
                id("update").on("click", () => {
                    id("title").textContent = "Updated. Please read again"

firestore.collection("test").doc("test")
                      .update({
                        value: id("input1").value,
                        value2: id("input2").value
                    })
                    /*
                     * * Do something with Firestore here
                     */
                })
              id("read").on("click", () => {
                id("title").textContent = "Read"
                firestore.collection("test")
                  .doc("test")
                  .get()
                .then(doc => {
                            const data = doc.data()
                            id("title1").textContent = data.value
                            id("title2").textContent = data.value2
                        })
                })
            })
        </script>
    </head>
    <body>
        <h1 id=title>---</h1><br>
        <h1 id=title1>---</h1>
      <h1 id=title2>---</h1><br>
      <button id=read>Read</button><br><br>
        <input id=input1>
        <input id=input2>
        <button id=update>Update</button>
    </body>
</html>