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

منتشر شده در تاریخ : 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:wght@200;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.2/5 - (5 امتیاز)

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنیدورود یا ثبت نام

mahdidehghani میگوید:
سلام چیزی که ساختید قشنگ هست ولی هیچ سر چی انجام نمیدهد
من میخوام مثلا سرچک که میکنی اولش webkima.com قرار بده بعد متن من قرار بده و تو ادرس بار مرور گر جستجو بشه آموزش براش دارید میشه یه توضیحی بدین در موردش به صورت ساده

در
- پشتیبانی میگوید:
  سلام، در این رابطه سعی خواهیم کرد آموزشی داشته باشیم.
  
  در
پرویز میگوید:
سلام ببخشید چه جوری می تونم کاری کنم محتوای توی سایت خودم رو نشون بده

در
- پشتیبانی میگوید:
  درود، اگر بخواهید از این کد داخل سایت خود استفاده کنید، باید آن را تبدیل به یک پلاگین وردپرس کنید. البته اگر سایت‌تان وردپرسی است.
  
  در
حورا میگوید:
سلام وقت بخیر این سرچ اینجین فقط جهت نمایش قشنگه
ولی اینکه مثله یه سایت واقعی دنبال کلمات بگرده نیست ومن هنوز جواب سوالمو نگرفتم لطفا
بخشی از سرچ که explor داشته باشه بذارید تشکر

در
- پشتیبانی میگوید:
  درود، برای اینکه بتوانید از این سرچ بار در یک سایت واقعی استفاده کنید باید به آن کدهای بک اند هم اضافه کنید!‌ اینجا فقط بخش فرانت اند آموزش داده شده است.
  
  در
Coder boy میگوید:
سلام. بسیار عالی بود ممنون
اگر میشه یک آموزش کوتاه بگذارید برای بالا و ثابت مانند هدر

در
- پشتیبانی میگوید:
  درود، بله حتما، ممنون از همراهی شما.
  
  در

آموزش طراحی فرم لاگین با HTML و CSS

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت