Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

🍿Pop Up Chat Window🗨️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • All HTML DOM (like querySelector, querySelectorAll etc)
  • Postion property & z-index CSS
  • this property and parentElement relation in JS

Click the chat button at the bottom right of the page to open the chat window.

Chat Box

Feel free to ask any questions.

HTML


  <div class="popup">
    <button class="chatBtn" onclick= "showed()">Chat</button>
</div>
<div class="popupwindow">
    <h2>Chat Box</h2>
    <p>Feel free to ask any questions.</p>
    <textarea name="chat" id="chat" rows="8" cols="19"></textarea>
    <div class="popupbtn">
        <button>Send</button>
        <button class="close" onclick="this.parentElement.parentElement.style.display='none'">Close</button>

    </div>
</div>

JavaScript


function showed(){
    let popupwindow=document.querySelector(".popupwindow");
    let x=getComputedStyle(popupwindow);
    console.log(x);
    if(x.display=='none'){
        popupwindow.style.display="block";
    }
}

CSS


.popup{
    position: fixed;
    top:92vh;
    right:10px;
    z-index: 10;
}
.chatBtn,.popupbtn button{
    border: none;
    background-color: dodgerblue;
    padding: 14px 16px;
    color: white;
    font-size: 17px;
    cursor: pointer;
}
.popupwindow{
    max-width: 180px;
    position: fixed;
    top: 45vh;
    z-index: 11;
    right: 10px;
    background-color: #333;
    color: white;
    padding: 5px;
    display: none;
    
    
}
textarea{
    padding: 3px;
}
.popupbtn button{
    
    width: 100%;
}
.popupbtn .close{
    background-color: red;
}
.chatBtn:hover,.popupbtn button:hover{
    opacity: 0.8;
}

Math.floor() Method

  • The Math.floor() method in JS is used to round a number down to the nearest integer.

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC