Hello World! (Copy 7312)

✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์

<!DOCTYPE html>
<html lang=en>
    <head>
      <style>
        body{
				background: #e66465;
            background: linear-gradient(#e66465, #9198e5);
          	width: 100vw;
  				height: 100vh;
            overflow:hidden;
        }
      </style>
        <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: "AIzaSyBhMrItDOWyWCNQVtJBSpzIu5O8InXK8Ds",
    authDomain: "fir-47d2d.firebaseapp.com",
    projectId: "fir-47d2d",
    storageBucket: "fir-47d2d.appspot.com",
    messagingSenderId: "1067212977769",
    appId: "1:1067212977769:web:18df0e4e3950ade1d414f8",
    measurementId: "G-HNM3VM57WR"
                /**
                 * ! Place connection script here
                 * ...
                 */
            }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()

/**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run here.
             */
             main(() => {
                
                id("read").on("click", () => {
                    id("title").textContent = " "

firestore
                    .collection('A')
                    .doc('B')
                    .get()
                    .then(doc =>{
                        const data = doc.data()

id('title').textContent = data.Member1
                        id('title2').textContent = data.Member2
                        id('title3').textContent = data.Member3
                        id('title4').textContent = data.Member4
                      	id('title5').textContent = data.Member5
                      	id('title6').textContent = data.Member6
                      	id('title7').textContent = data.Member7
                    })
                })
            })
        </script>
    </head>
    <body>
      <h1>
        Group C Team P'Thx
      </h1>
        <h1 id=title>Member 1</h1>
        <h1 id=title2>Member 2</h1>
        <h1 id=title3>Member 3</h1>
      	<h1 id=title4>Member 4</h1>
      <h1 id=title5>Member 5</h1>
      <h1 id=title6>Member 6</h1>
      <h1 id=title7>Member 7</h1>
        <button id=read>Read</button>
    </body>
</html>