Hello World! (Copy 7372) – CODEBOX

Hello World! (Copy 7372)

✨ นายธีรภพ โพธิ์เกิด

<!DOCTYPE html>
<html lang=en>
    <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>

<script>
            // Helper 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: "AIzaSyA9VYrttxTvR9ljTvAUkH9F_eUPgvmlpGo",
                authDomain: "database-d9bc2.firebaseapp.com",
                projectId: "database-d9bc2",
                storageBucket: "database-d9bc2.appspot.com",
                messagingSenderId: "1077819836241",
                appId: "1:1077819836241:web:1313c791271bdc9ede7570",
                measurementId: "G-J5Y3WJ392Y"
            }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()
            function add(){
                firestore.collection('user').doc(std_id.value).set({
                        Id: std_id.value,
                        Name: std_name.value,
                        Ad: std_ad.value,
                    })
            }
            function find(){
                firestore
                    .collection('user')
                    .where('Id', '==', find_id.value)
                    .get()
                    .then(function(snapshot) {
                        snapshot.forEach(function(docs) {
                            console.log(docs.data())
                            firestore
                                .collection('user')
                                .doc(find_id.value)
                                .get()
                                .then(doc =>{
                                    const data = doc.data()
                                    id('id').textContent = data.Id
                                    id('name').textContent = data.Name
                                    id('adress').textContent = data.Ad
                                    
                                })
                        })
                    })
            }
        </script>
    </head>
    <body>
        <div class="input">
            <label for="">Student ID</label>
            <input type="text" id=std_id>
            <label for="">Student Name</label>
            <input type="text" id=std_name>
            <label for="">Addresses</label>
            <input type="text" id=std_ad>
            <button type="submit" onclick="add()">submit</button>
        </div>
        
        <div class="show">
            <h1 id="id">Find ID</h1><br>
            <h1 id="name">Find Name</h1><br>
            <h1 id="adress">Find Adress</h1>
        </div>
        
        <div class="find">
            <label for="">Student ID</label>
        <input type="text" id=find_id>
        <button type="submit" onclick="find()">find</button>
        </div>
        
    </body>
    <style>
        
        body{
            background: #eae3c8;
        }
        .input{
            margin: 12px;
            padding: 12px;
            background: #1e010d;
            border: 3px black solid;
            border-radius: 12px;
            color: white;
            font-size: 24px;
        }
        .show{
            margin: 12px;
            padding: 12px;
            text-align: center;
        }
        .find{
            margin: 12px;;
            padding: 12px;
            text-align: center;
            background: gray;
            font-size: 24px;
            border-radius: 12px;
        }
    </style>
</html>