diff --git a/index.html b/index.html
index 8a79e88..53a0a86 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,18 @@
         id="name"
         placeholder="enter a character name"
       />
-      <button id="search">search</button>
-      <button id="check-align">Check character</button>
+
+      <select id="filter">
+        <option value="">Select Status</option>
+        <option value="good characters">Good</option>
+        <option value="bad characters">Bad</option>
+        <option value="neutral characters">Natural</option>
+      </select>
+      <button type="submit">search</button>
     </form>
+
+    <h3 style="display: none">total result : <span id="totalResult"></span></h3>
+    <div id="result"></div>
   </body>
   <script src="script/script.js"></script>
 </html>
diff --git a/script/script.js b/script/script.js
index c9750ea..3ac76e2 100644
--- a/script/script.js
+++ b/script/script.js
@@ -1,91 +1,128 @@
 // all the magic will happen now !
+document.addEventListener("DOMContentLoaded", (event) => {
+  //the event occurred
 
-class Character {
-  constructor(id, name, align, power, year) {
-    this.id = id;
-    this.name = name;
-    this.align = align;
-    this.power = power;
-    this.year = year;
-  }
-  checkCharacter() {
-    if (this.align.includes("good")) {
-      return "good";
-    } else if (this.align.includes("bad")) {
-      return "bad";
-    } else {
-      return "natural";
+  class Character {
+    constructor(id, name, align, power, year) {
+      this.id = id;
+      this.name = name;
+      this.align = align;
+      this.power = power;
+      this.year = year;
+    }
+    checkCharacter() {
+      if (this.align.includes("good")) {
+        return "good";
+      } else if (this.align.includes("bad")) {
+        return "bad";
+      } else {
+        return "natural";
+      }
     }
   }
-}
 
-class Characters {
-  constructor() {
-    this.arrayOfCharacters = [];
-  }
+  class Characters {
+    constructor() {
+      this.arrayOfCharacters = [];
+    }
 
-  loadData(id, name, align, power, year) {
-    const newCharacter = new Character(id, name, align, power, year);
-    this.arrayOfCharacters.push(newCharacter);
-  }
+    loadData(id, name, align, power, year) {
+      const newCharacter = new Character(id, name, align, power, year);
+      // console.log(newCharacter);
+      this.arrayOfCharacters.push(newCharacter);
+    }
 
-  getData() {
-    return this.arrayOfCharacters;
-  }
-  searchByName(name) {
-    return this.arrayOfCharacters.find((item) => {
-      if (item.name.includes(name)) return item;
-    });
+    getData() {
+      return this.arrayOfCharacters;
+    }
+
+    searchByName(name) {
+      return this.getData().filter((person) =>
+        person.name.toLowerCase().includes(name.toLowerCase())
+      );
+    }
+    searchByStatus(status) {
+      return this.getData().filter((person) => person.align == status);
+    }
+    searchByBoth(name, status) {
+      return this.getData().filter((person) => {
+        if (
+          person.align == status &&
+          person.name.toLowerCase().includes(name.toLowerCase())
+        ) {
+          return person;
+        }
+      });
+    }
   }
-}
-const characters = new Characters();
-fetch("../marvel.json")
-  .then((response) => response.json())
-  .then((json) => loadDataToCharacters(json))
-  .catch((err) => console.log(err));
 
-function loadDataToCharacters(json) {
-  json.forEach((element) => {
-    characters.loadData(
-      element.id,
-      element.name,
-      element.align,
-      element.power,
-      element.year
-    );
-  });
-}
+  const characters = new Characters();
 
-const btn1 = document.getElementById("search");
-const btn2 = document.getElementById("check-align");
-const nameInput = document.getElementById("name");
-const body = document.querySelector("body");
-const data = characters.getData();
+  function loadDataToCharacters(json) {
+    json.forEach((element) => {
+      characters.loadData(
+        element.id,
+        element.name,
+        element.align,
+        element.power,
+        element.year
+      );
+    });
+  }
 
-btn1.addEventListener("click", (e) => {
-  e.preventDefault();
-  const nameTxt = nameInput.value;
+  fetch("../marvel.json")
+    .then((response) => response.json())
+    .then((json) => loadDataToCharacters(json))
+    .catch((err) => console.log(err));
 
-  if (nameTxt === "") return;
-  const foundObject = searchByName(data, nameTxt);
-  console.log(foundObject);
-  body.innerHTML += `<p><strong>${foundObject.name}</strong></p>`;
-});
+  const form = document.getElementById("form");
+  let filter = document.querySelector("#filter");
+  let totalResult = document.querySelector("#totalResult");
+  let searchText = document.getElementById("name");
+  const resultDiv = document.querySelector("#result");
 
-btn2.addEventListener("click", (e) => {
-  e.preventDefault();
-  if (nameInput.value === "") {
-    alert("please enter a character name!");
-    return;
+  function renderHtml(data) {
+    resultDiv.innerHTML = "";
+    totalResult.parentElement.style.display = "block";
+    totalResult.innerHTML = data.length;
+    data.forEach((person, index) => {
+      resultDiv.innerHTML += `<div>
+      <p>${index + 1}</p>
+      <div><label for="">Name: </label><strong>${person.name}</strong> </div>
+      <div><label for="">Power: </label><strong> ${person.power}</strong></div>
+      <div><label for="">align: </label><strong> ${person.align}</strong></div>
+      <div><label for="">year: </label><strong> ${person.year}</strong></div>
+      <hr/>
+    </div>`;
+    });
   }
-  const foundObject = searchByName(data, nameInput.value);
-  body.innerHTML += `<p><strong>${
-    foundObject.name
-  }</strong> <em>${foundObject.checkCharacter()}</em></p>`;
-});
 
-function searchByName(data, name) {
-  return data.find((element) => {
-    if (element.name.toLowerCase().includes(name.toLowerCase())) return element;
+  //search event
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    //filter by status
+    if (searchText.value == "" && filter.value != "") {
+      let filterRes = characters.searchByStatus(filter.value);
+      renderHtml(filterRes);
+      filter.value = "";
+      return;
+    }
+    //filter by search text
+    else if (searchText.value !== "" && filter.value == "") {
+      let searchRes = characters.searchByName(searchText.value);
+      renderHtml(searchRes);
+      searchText.value = "";
+      return;
+    }
+    //search by both
+    else if (searchText.value !== "" && filter.value !== "") {
+      let searchRes = characters.searchByBoth(searchText.value, filter.value);
+      renderHtml(searchRes);
+      searchText.value = "";
+      filter.value = "";
+      return;
+    }
+    alert("try again!");
   });
-}
+});