telegram

توضیحات

در این جلسه به افزودن آیتم به لیست در پروژه از دوره آموزش رایگان javascript (جاوا اسکریپت) پروژه محور میپردازیم.

HTML CSS طراحی وب javascript ecmascript جاوا اسکریپت اکما اسکریپت جاوااسکریپت

برای دانلود ابتدا وارد سایت شوید

مدرس دوره علی شیخ
مدت دوره 10:20:49
تعداد ویدیو 76
وضعیت دوره : کامل شده
قیمت دوره : رایگان
برای دانلود ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پشنهادی

دوره های آموزشی
آموزش بوت استرپ 5 (Bootstrap) پروژه محور
کامل شده

آموزش بوت استرپ 5 (Bootstrap) پروژه محور

Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع ج...

رایگان
12:08:39
آموزش الگوی طراحی MVC (Model View Controller) در php (پی اچ پی) پروژه محور
کامل شده
% 15 تخفیف

آموزش الگوی طراحی MVC (Model View Controller) در php (پی اچ پی) پروژه محور

ساختار یا الگوی طراحی (Model View Controller) MVC یک الگو یا ساختار معماری برنامه نویسی است که نرم افزار را به سه بخش مج...

449,000 381,000 تومان
07:09:57
آموزش oop (شی گرایی) در javascript (جاوااسکریپت) پروژه محور
کامل شده
% 15 تخفیف

آموزش oop (شی گرایی) در javascript (جاوااسکریپت) پروژه محور

برنامه نویسی شی گرایی (oop) که برگرفته از Object-Oriented Programming هست یک الگو یا روش برنامه نویسی می باشد که اساس ای...

299,000 254,000 تومان
06:13:20
آموزش نکست جی اس (next.js)
کامل شده
% 10 تخفیف

آموزش نکست جی اس (next.js)

نکست جی اس، فریمورک Next.js یکی از فریمورک های کتابخانه React برای production است به این معنی که، برای تمام آنچه که به ع...

599,000 539,000 تومان
24:41:33
مشاهده تمام دوره های آموزشی

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • mohammadiabdulghafar 

    <!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>To Do List</title>

    

        <link

        rel="stylesheet"

        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"

        />

    

        <link

        rel="stylesheet"

        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"

        />

    

        <link rel="stylesheet" href="css/style.css" />

      </head>

    

      <body>

        <div class="container">

          <div class="row justify-content-center mt-4">

            <div class="col-10 col-md-6">

    

              <header class="d-flex align-items-center">

                <i class="bi bi-calendar-check fs-3"></i>

                <h3 class="text-secondary ms-2 mb-0">To Do List</h3>

              </header>

    

              <form id="item-form" class="my-4">

    

                <div class="mb-3">

                  <label for="item-input" class="form-label">Enter Item</label>

                  <input type="text" class="form-control" id="item-input" />

                  <div id="input-invalid" class="form-text text-danger"></div>

                </div>

    

                <button type="submit" class="btn btn-sm btn-dark">

                  <i class="bi bi-plus"></i>

                  Add Item

                </button>

    

              </form>

    

              <div>

                <input

                  id="filter"

                  class="form-control form-control-sm"

                  type="text"

                  placeholder="Filter Items"

                />

              </div>

    

                  <ul id="item-list" class="list-group my-4 p-0">

    

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                      An item

                      <i class="bi bi-x fs-5 text-danger"></i>

                    </li>

    

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                      A second item

                      <i class="bi bi-x fs-5 text-danger"></i>

                    </li>

    

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                      A third item

                      <i class="bi bi-x fs-5 text-danger"></i>

                    </li>

    

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                      A fourth item

                      <i class="bi bi-x fs-5 text-danger"></i>

                    </li>

    

                    <li class="list-group-item d-flex justify-content-between align-items-center">

                      A fifth item

                      <i class="bi bi-x fs-5 text-danger"></i>

                    </li>

    

                  </ul>

    

              <div class="d-grid">

                <button id="items-clear" class="btn btn-outline-dark" type="button">

                  Clear All

                </button>

              </div>

    

            </div>

          </div>

        </div>

    

        <script src="./script.js"></script>

      </body>

    </html>

    سلام استاد من از ورژن جدید بوت استرپ استفاده کردم و قسمت لیست ها را باید جوری دیگه مینوشتم و css دقیقا عین کد شما است. چرا قسمت بالایی بردر ها overlap میشه راه حل چیه؟ مرسی پیشاپیش

    • علی شیخ

      2 هفته پیش

      سلام وقت بخیر.
      ورژن بوت استرپ شما با دوره فرقی نداره میتونید اصلا cdn استفاده شده در دوره را قرار بدید و تست کنید. موضوع بعدی اینکه من متوجه سوالتون نشدن اصلا، بصورت کلی توی css باید inspect بگیرید و بررسی کنید کلاس ها و استایل های که روی بخش مورد نظر شما هست و در صورت نیاز تغیرات بدید.

  • Mohy9797

    سلام و عرض ادب استاد باتشکر از آموزش عالی تون سوالی داشتم می خواستم بدونم ما می توانیم به فرزند داخل formمثل button به صورت مجزا دسترسی داشته باشیم وبه جای event(submit)از event(click) استفاده کنیم و ایتم ها را به ulاضافه کنیم چون برای من مقادر button(به صورت idجداگانه تعریف کردم) را داخل consoleبه صورتnull نمایش می دهد.

    • علی شیخ

      1 سال پیش

      سلام وقت بخیر.
      طبق جلسه رویدادهای موس روی دکمه موردنظر تست کنید و از طرفی دکمه ویژگی type=submit نداشته باشه