Hello World! (Copy 7332)

✨ NOPPANUT KHAMMUEANG

<!DOCTYPE html>
<html lang=en>

/**
         * * 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: "AIzaSyA4IXgz-ar5tINgkjCUqD0HLiybNkrurLw",
  authDomain: "toenteen-e7d8a.firebaseapp.com",
  projectId: "toenteen-e7d8a",
  storageBucket: "toenteen-e7d8a.appspot.com",
  messagingSenderId: "1048507904189",
  appId: "1:1048507904189:web:5181433087904c2f8407d4",
  measurementId: "G-B29DZ19W02"
        }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()

/**
         * * Main Runtime
         * 
         * ? Anything which related to DOM should be run here.
         */
        main(() => {
            /**
             * ? When element with id "read" is clicked.
             * ? The function will run.
             * */
            id("read").on("click", () => {
                    id("title").textContent = "Clicked"
                    firestore
                        .collection('user')
                        .doc('Toen')
                        .get()
                        .then(doc => {

const data = doc.data()
                                id('title').textContent = data.Age
                                id('title1').textContent = data.Faculty
                                id('title2').textContent = data.colleage
                                id('title3').textContent = doc.id
                            
                        })
            })
        })
      document.body.onkeyup = function(e){
            if(e.key == "Enter"){
                add()
                add_start_to_end()
            }
        }
    </script>
  <style>
    h1{
		display:inline-block;
    }
  </style>
</head>

<body>

</html>