مدرس دوره

نبی عبدی

زمان ویدیو

15:36 دقیقه

برو به دیگر جلسات

آموزش HTML و CSS

برای دانلود ویدیو

وارد شوید

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

منتشر شده در تاریخ : 22, مرداد, 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS می خواهیم یک سرچ بار یا همان باکس جستجو توسط زبان برنامه نویسی جاوا اسکریپت و البته HTML و CSS طراحی کنیم که از این طرح می‌توانید در پروژه های خود به سادگی استفاده کنید، پس با این آموزش جذاب همراه آکادمی وبکیما باشید.

باکس جستجو یا سرچ بار در جاوا اسکریپت

شاید از خودتان سوال بپرسید که این باکس جستجو که در این جلسه طراحی کردیم اصلا به چه دردی می خورد؟ یا اصلا چرا باید به خودتان زحمت بدهید و همچین مینی پروژه هایی را طراحی کنید؟

خب ببینید اول اینکه شما می‌توانید از این سرچ بار در پروژه های طراحی سایت خود به سادگی استفاده کنید، همانطور که میدانید این سرچ باری که در این جلسه طراحی کردیم بسیار برای نسخه موبایل کاربردی خواهد بود.

همچنین اگر می خواهید در Html و Css و البته جاوا اسکریپت خبره شوید، تنها راه آن این است که تمرین کنید و تمرین همین!

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به مینی پروژه باکس جستجو در جاوا اسکریپت را مشاهده کنید.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<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>Navid Dev - Responsive Search Box</title>
    <!-- Fontawesome CDN Link -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <div class="search-box">
        <input type="text" placeholder="Search somthing..." />
        <label for="search" class="icon">
          <i class="fas fa-search"></i>
        </label>
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به مینی پروژه باکس جستجو در جاوا اسکریپت را مشاهده کنید.

@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  background-color: #82beff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  max-width: 400px;
  width: 100%;
}
.box .search-box {
  position: relative;
  height: 50px;
  max-width: 50px;
  margin: auto;
  border-radius: 25px;
  transition: all 0.3s ease;
}
.search-box input {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 25px;
  background: #fff;
  outline: none;
  border: none;
  padding-left: 20px;
  font-size: 18px;
}
.search-box .icon {
  position: absolute;
  right: -2px;
  top: 0;
  width: 50px;
  background: #fff;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #5f15ff;
  font-size: 20px;
  border-radius: 25px;
  cursor: pointer;
}
.search-box.active {
  max-width: 380px;
}
.search-box.active .icon {
  background: #5f15ff;
  color: #fff;
  width: 60px;
  border-radius: 0 25px 25px 0;
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به مینی پروژه باکس جستجو در جاوا اسکریپت را مشاهده کنید.

const searchBtn = document.querySelector(".icon"),
  searchBox = document.querySelector(".search-box");

searchBtn.addEventListener("click", () => {
  searchBox.classList.toggle("active");
});

جمع بندی

در انتها امیدواریم که آموزش ساخت مینی پروژه باکس جستجو یا همان سرچ بار در HTML CSS و جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

4/5 - (4 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بیش از 60 درصد تخفیف روی تمامی دوره‌ها، مهلت محدود ...تخفیف‌تو بگیر!
+