ChatApp with Filter Item/Search Filter using HTML CSS & JavaScript

ChatApp with Filter Item using JavaScript

Hello friends, I hope everything is going well, today you are going to learn how to create this ChatApp Design with Filterable Item and Search Filter, but before we dive into the source code and video of this I will be explaining what this project does and how you can apply this same idea in so many projects you will be creating, without further interruptions we will begin.

What is a ChatApp? A ChatApp is an application that allows users to chat with their friends and family worldwide. Some ChatApp are made through different UI and different functions but the things all ChatApp have in common are the following:

1: They all can filter by search or by read and unread or active and inactive.

2: They all work in different hosting/fetching and work in different codes but they all have the ability to communicate.

Now that we have discussed the things Chat-Applications have in common now let me further explain this Chat-Application that I have created.

Note: This ChatApp doesn't have a real-time chatting system but I hope to create that in the future.

ChatApp with Filter Item/Search Filter using HTML CSS & JavaScript [Video Tutorial]

With this video, I hope you understood the concept behind creating this project for those of you finding it difficult to create this project I will be explaining it detail by detail.

In line 17 of our javascript code, we added the keyup function to our input field

Explaining the keyup function: the keyup function is a function that detects key press, which means if I should enter key "A" and log the event (e) then it will detect that key "A" that is being pressed on the keyboard

Code Should Look Like This

eInput.addEventListener("keyup", (e) => {
console.log(e);
});

Now after I have done this you should look at your console by hitting the command Ctrl+Shift+I on chrome will bring out your console and the keypress will be detected automatically.

In line 25 of our javascript code, we have another function that I have used, so many of you might have come across this function but so many might have not it is the onload function now this function is used in some cases where you cleared an active class while clicking the item but you need to bring it back you can just add the onload function to bring back that active class when the browser loads up again. Note: you don't need to close your browser to bring back that active class you can just refresh the page simply by hitting "F5".

Code Should Look Like This

window.onload= () =>{
message.classList.add("active");

};

Now your code should look exactly like this hope all these helped.

if you still have difficulty understanding this project, seek the source code below.

ChatApp with Filter Item/Search Filter using HTML CSS & JavaScript [Source Code]

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatApp using HTML CSS & JavaScript</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="flex-top">
                <div class="flex-3">
                    <div class="text">ChatApp</div>
                </div>
                <!-- icons goes here -->
                <div class="icons">
                    <i class='bx bx-search' id="open_search"></i>
                    <i class='bx bx-dots-vertical-rounded'></i>
                </div>
                <div class="search-box">
                    <div class="eInput">
                        <input type="text" name="search" placeholder="Search Names" autocomplete="off">
                    </div>
                    <div class="icon2">
                        <i class="bx bx-x"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-chat">
            <div class="mail-banner">
                <div class="mail-slot">
                    <div class="slot all active" data-name="all">All <span>252</span></div>
                    <div class="slot read" data-name="read">Read</div>
                    <div class="slot unread" data-name="unread">Unread</div>
                </div>
            </div>
            <div class="mail-body">
                <div class="mails">
                    <div class="mail" data-name="unread">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d2.png" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Thravt Rascot</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">01:02</div>
                            <div class="numb">50</div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="unread">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d.png" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">John Doe</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">11:28</div>
                            <div class="numb">12</div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="read">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d5.jpg" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Among Us</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">06:30</div>
                            <div class="numb"><i class='bx bx-check' ></i></div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="read">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d4.png" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Rob Dike</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">12:00</div>
                            <div class="numb"><i class='bx bx-check' ></i></div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="unread">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d1.jpg" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Dan Ratch</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">14:30</div>
                            <div class="numb">80</div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="unread">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d3.jpg" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Alexa Cath</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">12:28</div>
                            <div class="numb">80</div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="unread">
                        <div class="c2">
                            <div class="img">
                                <img src="images/3d6.png" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Zous Zakapar</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">14:50</div>
                            <div class="numb">30</div>
                        </div>
                    </div>
                    <!--  -->
                    <div class="mail" data-name="read">
                        <div class="c2">
                            <div class="img">
                                <img src="images/RealCoder.jpg" alt="">
                            </div>
                        </div>
                        <div class="mail-info">
                            <div class="name">Real Coder</div>
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                        <div class="time_n_numb">
                            <div class="time">18:30</div>
                            <div class="numb"><i class='bx bx-check' ></i></div>
                        </div>
                    </div>
                    <!--  -->
                </div>
            </div>
        </div>
        <div class="button">
            <button><i class='bx bx-plus'></i> New Chat</button>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS CODE:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  /* scroll-behavior: smooth; */
}
::selection {
  background: #dce4fc;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #dce4fc;
}
.wrapper {
  width: 100%;
  max-width: 500px;
  padding: 30px 30px;
  background: #4c82f6;
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  position: relative;
}
.wrapper .header .flex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.wrapper .header .flex-top .flex-3 .text {
  font-size: 1.3em;
  font-weight: 500;
}
.wrapper .header .flex-top .icons i {
  font-size: 1.3em;
  margin-left: 10px;
  cursor: pointer;
}
.wrapper .header .flex-top .search-box {
  position: absolute;
  top: 0;
  left: 0;
  background: #4c82f6;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 5px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  transition: all 0.3s ease;
}
/*  */
.wrapper .header .flex-top .search-box.active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.wrapper .header .flex-top .search-box .eInput {
  padding: 10px 10px;
}
.wrapper .header .flex-top .search-box .eInput input {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  outline: none;
  border: 1px solid #bfbfbf;
  border-radius: 3px;
  font-size: 1em;
}
.wrapper .header .flex-top .search-box .icon2 i {
  font-size: 3em;
  margin-left: 8px;
  cursor: pointer;
}
.wrapper .body-chat {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  margin: 10px 0;
}
.wrapper .body-chat .mail-banner .mail-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wrapper .body-chat .mail-banner .mail-slot {
  background: #dce4fc;
  border-radius: 50px;
}
.wrapper .body-chat .mail-banner .mail-slot .slot {
  padding: 10px 10px;
  width: 100%;
  border-radius: 50px;
  background: #dce4fc;
  color: #999;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .body-chat .mail-banner .mail-slot .slot:hover,
.wrapper .body-chat .mail-banner .mail-slot .slot.active {
  background: #4c82f6;
  color: #fff;
}
.wrapper .body-chat .mail-banner .mail-slot .slot.all span {
  padding: 2px 14px;
  background: #fff;
  border-radius: 20px;
  color: #4c82f6;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 500;
  margin-left: 8px;
}
.wrapper .body-chat .mail-body .mails .mail .c2 .img img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}
/* adding the show and hide class for the selected data  */
.wrapper .body-chat .mail-body .mails .mail.hide{
  display: none;
}
.wrapper .body-chat .mail-body .mails .mail.show{
  display: flex;
}
.wrapper .body-chat .mail-body .mails .mail {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  border-bottom: 2px solid #dce4fc;
  cursor: default;
}
.wrapper .body-chat .mail-body .mails .mail .mail-info .name {
  font-weight: 500;
}
.wrapper .body-chat .mail-body .mails .mail .mail-info p {
  color: #999;
}
.wrapper .body-chat .mail-body .mails .mail .time_n_numb .time {
  font-size: 15px;
  color: #999;
}
.wrapper .body-chat .mail-body .mails .mail .time_n_numb .numb {
  padding: 2px 14px;
  background: #4c82f6;
  border-radius: 20px;
  color: #fff;
  margin-top: 5px;
  font-size: 15px;
}
.wrapper .body-chat .mail-body .mails {
  overflow: auto;
  max-height: 300px;
}
.wrapper .body-chat .mail-body .mails::-webkit-scrollbar {
  width: 8px;
  background: #dce4fc;
  border-radius: 20px;
}
.wrapper .body-chat .mail-body .mails::-webkit-scrollbar-thumb {
  width: 8px;
  background: rgba(76, 130, 246, 0.349);
  border-radius: 20px;
}
.wrapper .button{
  float: right;
}
.wrapper .button button{
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 50px;
  outline: none;
  border: none;
  background: #fff;
  color: #4c82f6;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  font-size: 1em;
}
.wrapper .button button i{
  margin-right: 4px;
}

JAVASCRIPT CODE:

const open = document.querySelector("#open_search"),
  close = document.querySelector(".icon2 i"),
  searchbox = document.querySelector(".search-box"),
  eInput = document.querySelector(".eInput input"),
  mails = document.querySelectorAll(".mails .mail"),
  messages = document.querySelectorAll(".mail"),
  slots = document.querySelector(".mail-slot"),
  chat = document.querySelector(".button button");

open.addEventListener("click", (e) => {
  searchbox.classList.add("active"); //adding the class active once search icon is clicked
});
close.addEventListener("click", (e) =>{
  searchbox.classList.remove("active"); //removing the class active once close icon is clicked
  eInput.value = ""; //returning the input value to it's default value once searchBox is closed
});
eInput.addEventListener("keyup", (e) => {
  const q = e.target.value.toLowerCase();
  mails.forEach((names) => { //selecting all mails div inside another div
    names.querySelector(".name").textContent.toLowerCase().startsWith(q) //if textContent contains the shown name in the div filter it and only the typed name will be shown
    ? (names.style.display = "")
    : (names.style.display = "none")
  });
});
window.onload = () =>{
  // once window load
  slots.onclick = (selectedItem) => {
    // when user clicks the slots div
    if(selectedItem.target.classList.contains("slot")) {
      // if user selectedItem which is also slot element has a classList of .slot
      slots.querySelector(".active").classList.remove("active"); //remove the active class of the first item
      selectedItem.target.classList.add("active"); //add active class on user selected item
      let dataName = selectedItem.target.getAttribute("data-name"); //getting image data-name value
      messages.forEach((message) =>{
        let dataImages = message.getAttribute("data-name"); //getting image data-name value
        // if user selected item data-name value is equal to the images data-name value
        //or user selected item data-name value is equal to "all"
        if(dataImages == dataName || dataName == "all") {
          message.classList.remove("hide"); //first remove the hide class from the image
          message.classList.add("show"); //add show class in image
        } else { //else if dataImage match dataName show the selected dataName and hide others
          message.classList.add("hide");
          message.classList.remove("show");
        }
      });
    }
  }
}
chat.addEventListener("click", (e) => {
  window.location.href = "/chat/chat.html";
});

That's all now you've successfully created this ChatApp with Filter Item/Search Filter using HTML CSS & JavaScript, If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

ChatApp with Filter Item/Search Filter using HTML CSS & JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form