Hello World! (Copy 7328) (Branch 7343) (Copy 7350)..
✨ นายชัยรวิชญ์ เอี่ยมขจรชัย
<!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> // Firebase Setup const firebaseConfig = { apiKey: "AIzaSyCQcgx7TlYFYjN3xEO748BKdz9jptpB-dM", authDomain: "kmitl-1ebdd.firebaseapp.com", projectId: "kmitl-1ebdd", storageBucket: "kmitl-1ebdd.appspot.com", messagingSenderId: "320305488330", appId: "1:320305488330:web:c28750e5468a92f4c8ef33", measurementId: "G-0QHP29QTDP" } firebase.initializeApp(firebaseConfig) const firestore = firebase.firestore() </script> <style> body{ background: url(https://webcomicms.net/sites/default/files/clipart/128526/animated-paper-128526-697302.gif); background-repeat: no-repeat; background-size: cover; background-position: center; font-family:sans-serif; margin: 0; } h1{ color: #000; text-shadow: 2px 3px #DD2C00; } .box{ position: relative; margin: auto; top: 20px; padding: 10px; border-radius: 20px; height: 150px; width: 400px; background: grey; text-align: center; margin-bottom: 20px; } button{ margin: 10px; background: #FFD600; width: 50px; height: 30px; } #btn_edit_del, #btn_edit_pay, #btn_edit_not_pay{ margin-left: 5px; margin-right: 5px; } #btn_edit_del{ background: red; color: white; } </style> </head> <body> <div class="box"> <h1>ผู้ยืมเงิน</h1> <input id="name_input" placeholder="Name"> <br> <button onclick="add()" id="add_name">Add</button> </div> <div class="box"> <h1 id="text_show">รายชื่อผู้ยืมเงิน</h1> <div id="show"></div> </div> </body> <script> document.body.onkeyup = function(e){ if(e.key == "Enter"){ add() add_start_to_end() } } var html = ""; function add(){ console.log(name_input.value) firestore.collection("collection") .doc(name.value) .set({ id: name_input.value, status: "not pay" }) name_input.value = ""; } function delete_id(q){ let check = q.getAttribute("check") firestore.collection("collection") .doc(check) .delete() } function check_id(q){ let check = q.getAttribute("check") firestore.collection("collection") .doc(check) .update({ status: "pay" }) } function check_id_not_pay(q){ let check = q.getAttribute("check") firestore.collection("collection") .doc(check) .update({ status: "not pay" }) } function delete_all(){ firestore.collection("collection") .get() .then(function(snapshot){ snapshot.forEach(function(docs){ firestore.collection("collection") .doc(docs.data().id) .delete() }) }) } firestore.collection("collection") .orderBy("id") .onSnapshot(function(snapshot) { snapshot.forEach(function(docs) { html += docs.data().id + " " + docs.data().status; html += `<button onclick="delete_id(this)" check="${docs.id}" id="btn_edit_del">del</button>`; html += `<button onclick="check_id(this)" check="${docs.id}" id="btn_edit_pay">pay</button>`; html += `<button onclick="check_id_not_pay(this)" check="${docs.id}" id="btn_edit_not_pay">not pay</button>`; html += "<br></br>"; }) show.innerHTML = html; html = ""; }) </script> </html>