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

با مشاهده این کورس آموزشی از طریق انجام پروژه های واقعی و به زبانی بسیار ساده مطالب فراوانی را در رابطه با JavaScript یاد می گیرید.

عنوان اصلی : 20 Web Projects with Vanilla JavaScript

سرفصل ها :

معرفی:
به دوره خوش آمدید
در حال راه اندازی
اعتبار سنجی فرم | پروژه معرفی:
معرفی پروژه
HTML پروژه
پروژه CSS
افزودن اعتبار سنجی ساده
Required & Refactor را بررسی کنید
مطابقت طول، ایمیل و رمز عبور را بررسی کنید
رزرو صندلی فیلم | DOM و فضای ذخیره‌سازی محلی:
معرفی پروژه
HTML پروژه
پروژه CSS
انتخاب فیلم و صندلی از رابط کاربری
ذخیره داده ها در فضای ذخیره سازی محلی
پر کردن UI با داده های ذخیره شده
پخش کننده ویدیوی سفارشی | HTML5 Video API:
معرفی پروژه
HTML پروژه
پروژه CSS
پخش، مکث و توقف
نوار پیشرفت ویدیو و مهر زمان
ماشین حساب نرخ ارز | معرفی واکشی و JSON:
معرفی پروژه
HTML پروژه
پروژه CSS
نگاهی به JSON & Fetch
واکشی نرخ‌ها و به‌روزرسانی DOM
روش های آرایه DOM | برای هر، نقشه، فیلتر، مرتب سازی، کاهش:
معرفی پروژه
رابط کاربری پروژه
ایجاد کاربران تصادفی - واکشی با همگام سازی/انتظار
کاربران خروجی - روش‌های forEach() و DOM
Double Money - map()
مرتب سازی بر اساس ثروتمندترین - sort()
نمایش میلیونرها - filter()
محاسبه ثروت - کاهش ()
منو اسلایدر و مدال | DOM و CSS:
معرفی پروژه
HTML پروژه
استایل ناوبار
سربرگ و استایل مدال
تغییر منو و مدال
بازی جلاد | DOM، SVG، رویدادها:
معرفی پروژه
جلاد را با SVG بکشید
یک ظاهر طراحی شده اصلی
استایل بازشو و اعلان
نمایش تابع کلمات
Letter Press Event Handler
نامه های اشتباه و بازی دوباره
غذا یاب | Fetch & MealDB API:
معرفی پروژه
HTML و CSS پایه پروژه
جستجو و نمایش وعده‌های غذایی از API
نمایش صفحه یک وعده غذایی
نمایش CSS غذای تصادفی و یک وعده غذایی
ردیاب هزینه | روش‌های آرایه و ذخیره‌سازی محلی:
معرفی پروژه
HTML پروژه
پروژه CSS
نمایش موارد معامله
نمایش مانده، درآمد و هزینه
افزودن و حذف تراکنش ها
ادامه به ذخیره سازی محلی
پخش کننده موسیقی | HTML5 Audio API:
معرفی پروژه
HTML پروژه
ظرف موسیقی و چرخش انیمیشن
استایل و انیمیشن اطلاعات موسیقی
بارگیری، پخش و توقف آهنگ
بعد، آهنگ قبلی و پیشرفت
پست های اسکرول بی نهایت | Fetch، Async/Await، CSS Loader:
معرفی پروژه
HTML پروژه
پروژه CSS و انیمیشن لودر
دریافت پست های اولیه از API
اسکرول بی نهایت را اضافه کنید
پست های واکشی شده را فیلتر کنید
بازی تایپ | DOM، فواصل زمانی، رویدادها:
معرفی پروژه
HTML پروژه
پروژه CSS
تطبیق کلمه و امتیاز
اضافه کردن تایمر
تنظیم دشواری
متن خوان سخنرانی | سنتز گفتار:
معرفی پروژه
HTML و جعبه های گفتار خروجی
پروژه CSS
دریافت صداهای گفتار
دکمه های گفتار
صدا و جعبه متن سفارشی را تغییر دهید
کارت حافظه | جلوه‌های CSS، ذخیره‌سازی محلی:
معرفی پروژه
HTML پروژه
یک ظاهر طراحی اولیه کارت
چرخش کارت و جلوه اسلاید
ظرف کارت و استایل فرم را اضافه کنید
ایجاد کارت و جلوه تلنگر با JS
عملکرد دکمه قبلی و بعدی
تنظیم و دریافت اطلاعات کارت از Local Storage
برنامه جستجوی متن ترانه | Fetch, Pagination, Lyrics.ovh API:
معرفی پروژه
HTML و سربرگ پروژه
فرم استایل
واکشی آهنگ‌ها و هنرمندان
DOM را به روز کنید و صفحه بندی را اضافه کنید
دریافت و نمایش متن آهنگ
اپلیکیشن آرامش بخش | انیمیشن های CSS، setTimeout:
معرفی پروژه
ایجاد دایره بزرگ
ایجاد و متحرک سازی اشاره گر
انیمیشن Breath با JS Trigger
بازی Breakout | HTML5 Canvas API:
معرفی پروژه
ایجاد و استایل دادن به صفحه
طرح کلی بوم
قرعه کشی توپ، دست و پا زدن و امتیاز
ایجاد آجر
حرکت دست و پا زدن
حرکت توپ و شکستن آجر
از دست دادن و بازنشانی بازی
شمارش معکوس سال نو | DOM، تاریخ و زمان:
معرفی پروژه
صفحه فرود HTML و استایل
شمارش معکوس را ایجاد کنید
سال پویا و اسپینر
فهرست قابل مرتب سازی | کشیدن و رها کردن API:
معرفی پروژه
درج موارد لیست در DOM
موارد فهرست را به هم بزنید
هسته CSS
قابلیت کشیدن و رها کردن
سفارش را بررسی کنید
بازی حدس اعداد Speak | تشخیص گفتار:
معرفی پروژه
رابط کاربری پروژه
ورودی میکروفون را ضبط کنید
شماره حدس زده را بررسی کنید