chatap.github.io/index.html at main · MJ497/chatap.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="import" href="data.js">
<!-- boxicons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <title>ChatAP</title>
</head>
<body>
    <div class="chatbox">
        <div class ="logo">
           <p>ChatAP<i class='bx bxs-chat'></i> </p>

           <div class="toggle"> <div class="moon-sun">
            <i class="bx bx-moon moon"></i>
            <i class="bx bx-sun sun"></i>

        </div>
            <span class="switch"></span>
           </div>
        </div>
<ul id ="messages" class="wes">

</ul>
        <div class="bar">
        <div id="sendMsg" class="form">

            <textarea id="msgTxt" rows="4" cols="50" placeholder="Enter messages  here" class="msg" autocomplete="off"></textarea>

 <button type="submit" class="btn" id="msgBtn" onclick="module.sendMsg()"><i class='bx bxs-send bx-flip-vertical' ></i></button>
 </form>
</div>
    </div>

</body>
<script>
    module ={};
</script>
<script type = "module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js";
  import {getDatabase, ref, set ,onChildAdded, onChildRemoved} from "https://www.gstatic.com/firebasejs/10.4.0/firebase-database.js";


  // Your web app's Firebase configuration
  const firebaseConfig = {
  apiKey: "AIzaSyCYc2Phs48fwQtmwnlL8QN8HofQ1mD5fTU",
  authDomain: "chatcode-1a581.firebaseapp.com",
  databaseURL: "https://chatcode-1a581-default-rtdb.firebaseio.com",
  projectId: "chatcode-1a581",
  storageBucket: "chatcode-1a581.appspot.com",
  messagingSenderId: "1097191500277",
  appId: "1:1097191500277:web:b6095d3a651210e43718bc"
};

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);

  //viarables
  var msgTxt = document.getElementById('msgTxt');
  var sender;

  if(sessionStorage.getItem('sender')){
    sender = sessionStorage.getItem('sender');
  }else{
    sender = prompt('Enter UserName');
    sessionStorage.setItem('sender',sender);

     // Display an alert when a new user enters the chat
  alert(' ' + sender + '! has joind the chat');
  }

  //to send message

  module.sendMsg = function sendMsg(){
    var msg = msgTxt.value;
    var timestamp = new Date().getTime();
    set(ref(db,"messages/"+timestamp),{
        msg :msg,
        sender : sender

    })
    .then(() => {
      // Clear the input field after successfully sending the message
      msgTxt.value = "";
    })
  };
    // recieve message
    onChildAdded(ref(db,"messages"),(Data) =>{
      if (Data.val().sender == sender){
     messages.innerHTML += "<li class=inner id='"+Data.key+"'>you:<br>"+Data.val().msg+"<br><button style=background:none  id=dltMsg onclick=module.dltMsg("+Data.key+")><i class='bx bxs-x-circle'></i></button></li>"
      }else{
         messages.innerHTML += "<li style=float:left class=other id="+Data.key+">"+Data.val().sender+":<br>"+Data.val().msg+"</li>"

      }
  })

  //delete
  module.dltMsg = function dltMSg(key){
    set(ref(db,"messages/"+key),null);
  }

  //when messages are deleted
  onChildRemoved(ref(db,'messages'),(Data)=>{
var msgBox = document.getElementById(Data.key);
if (msgBox) {
    messages.removeChild(msgBox); // Remove the message element from the UI
  }  })

</script>


<!-- light mode -->
<script>
const body = document.querySelector("body"),
 toggle = body.querySelector(".toggle"),
 mswitch = body.querySelector(".switch") ;

 mswitch.addEventListener("click", () => {
 body.classList.toggle("light");
 });
</script>
</html>