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

سرفصل ها و درس ها

معرفی Introduction

• به دوره خوش آمدید Welcome To The Course

• در حال راه اندازی Getting Setup

• کد The Code

1: اعتبار سنجی فرم | پروژه معرفی 1: Form Validator | Intro Project

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• افزودن اعتبارسنجی ساده Adding Simple Validation

• Required & Refactor را بررسی کنید Check Required & Refactor

• مطابقت طول، ایمیل و رمز عبور را بررسی کنید Check Length, Email & Password Match

2: رزرو صندلی فیلم | DOM و محل ذخیره سازی 2: Movie Seat Booking | DOM & Local Storage

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• انتخاب فیلم و صندلی از رابط کاربری Selecting Movie & Seats From UI

• ذخیره داده ها در فضای ذخیره سازی محلی Save Data To Local Storage

• پر کردن UI با داده های ذخیره شده Populate UI With Saved Data

3: پخش کننده ویدیوی سفارشی | HTML5 Video API 3: Custom Video Player | HTML5 Video API

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• پخش، مکث و توقف Play, Pause & Stop

• نوار پیشرفت ویدیو و مهر زمانی Video Progress Bar & Timestamp

4: ماشین حساب نرخ ارز | Fetch & JSON Intro 4: Exchange Rate Calculator | Fetch & JSON Intro

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• نگاهی به JSON & Fetch A Look at JSON & Fetch

• واکشی نرخ‌ها و به‌روزرسانی DOM Fetch Rates & Update DOM

5: روش های آرایه DOM | برای هر، نقشه، فیلتر، مرتب سازی، کاهش 5: DOM Array Methods | forEach, map, filter, sort, reduce

• معرفی پروژه Project Intro

• رابط کاربری پروژه Project UI

• ایجاد کاربران تصادفی - واکشی با همگام سازی/انتظار Generate Random Users - Fetch w/ Async/Await

• کاربران خروجی - روش‌های forEach() و DOM Output Users - forEach() & DOM Methods

• Double Money - map() Double Money - map()

• مرتب سازی بر اساس ثروتمندترین - sort() Sort By Richest - sort()

• نمایش میلیونرها - filter() Show Millionaires - filter()

• محاسبه ثروت - کاهش () Calculate Wealth - reduce()

6: منو اسلایدر و مدال | DOM و CSS 6: Menu Slider & Modal | DOM & CSS

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• استایل ناوبر Navbar Styling

• سربرگ و استایل مدال Header & Modal Styling

• تغییر منو و حالت Menu & Modal Toggle

7: بازی جلاد | DOM، SVG، رویدادها 7: Hangman Game | DOM, SVG, Events

• معرفی پروژه Project Intro

• جلاد را با SVG بکشید Draw Hangman With SVG

• یک ظاهر طراحی شده اصلی Main Styling

• استایل بازشو و اعلان Popup & Notification Styling

• نمایش تابع کلمات Display Words Function

• Letter Press Event Handler Letter Press Event Handler

• نامه های اشتباه و بازی دوباره Wrong Letters & Play Again

8: غذا یاب | Fetch & MealDB API 8: Meal Finder | Fetch & MealDB API

• معرفی پروژه Project Intro

• HTML پروژه و CSS پایه Project HTML & Base CSS

• جستجو و نمایش وعده‌های غذایی از API Search & Display Meals From API

• نمایش صفحه یک وعده غذایی Show Single Meal Page

• نمایش CSS غذای تصادفی و یک وعده غذایی Display Random Meal & Single Meal CSS

9: ردیاب هزینه | روش‌های آرایه و ذخیره‌سازی محلی 9: Expense Tracker | Array Methods & Local Storage

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• نمایش موارد معامله Show Transaction Items

• نمایش مانده، درآمد و هزینه Display Balance, Income & Expense

• افزودن و حذف تراکنش ها Add & Delete Transactions

• ادامه به ذخیره سازی محلی Persist To Local Storage

10: پخش کننده موسیقی | HTML5 Audio API 10: Music Player | HTML5 Audio API

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• ظرف موسیقی و چرخش انیمیشن Music Container & Rotate Animation

• استایل و انیمیشن اطلاعات موسیقی Music Info Styling & Animation

• بارگیری، پخش و توقف آهنگ Load, Play & Pause Song

• بعد، آهنگ قبلی و پیشرفت Next, Prev Song & Progress

11: پست های اسکرول بی نهایت | Fetch، Async/Await، CSS Loader 11: Infinite Scroll Posts | Fetch, Async/Await, CSS Loader

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS و انیمیشن لودر Project CSS & Loader Animation

• دریافت پست های اولیه از API Get Initial Posts From API

• اسکرول بی نهایت را اضافه کنید Add Infinite Scrolling

• پست های واکشی شده را فیلتر کنید Filter Fetched Posts

12: بازی تایپ | DOM، فواصل زمانی، رویدادها 12: Typing Game | DOM, Intervals, Events

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• تطبیق کلمه و امتیاز Word Match & Score

• اضافه کردن تایمر Adding The Timer

• تنظیم دشواری Difficulty Setting

13: متن خوان سخنرانی | سنتز گفتار 13: Speech Text Reader | Speech Synthesis

• معرفی پروژه Project Intro

• HTML و جعبه های گفتار خروجی HTML & Output Speech Boxes

• پروژه CSS Project CSS

• دریافت صداهای گفتار Get Speech Voices

• دکمه های گفتار Speech Buttons

• صدا و جعبه متن سفارشی را تغییر دهید Change Voice & Custom Text Box

14: کارت حافظه | جلوه‌های CSS، ذخیره‌سازی محلی 14: Memory Cards | CSS Effects, Local Storage

• معرفی پروژه Project Intro

• HTML پروژه Project HTML

• یک ظاهر طراحی اولیه کارت Basic Card Styling

• چرخش کارت و جلوه اسلاید Card Rotation & Slide Effect

• ظرف کارت و استایل فرم را اضافه کنید Add Card Container & Form Styling

• ایجاد کارت و افکت تلنگر با JS Create Cards & Flip Effect With JS

• عملکرد دکمه قبلی و بعدی Prev & Next Button Functionality

• تنظیم و دریافت داده‌های کارت از محل ذخیره‌سازی محلی Set & Get Card Data From Local Storage

15: برنامه جستجوی متن ترانه | Fetch, Pagination, Lyrics.ovh API 15: Lyrics Search App | Fetch, Pagination, Lyrics.ovh API

• معرفی پروژه Project Intro

• HTML و سربرگ پروژه Project HTML & Header Stying

• استایل سازی فرم Form Styling

• واکشی آهنگ‌ها و هنرمندان Fetching Songs & Artists

• DOM را به روز کنید و صفحه بندی را اضافه کنید Update DOM & Add Pagination

• دریافت و نمایش متن آهنگ Get & Display Song Lyrics

16: اپلیکیشن آرامش بخش | انیمیشن های CSS، setTimeout 16: Relaxer App | CSS Animations, setTimeout

• معرفی پروژه Project Intro

• ایجاد دایره بزرگ Creating The Large Circle

• ایجاد و متحرک سازی اشاره گر Creating & Animating The Pointer

• انیمیشن Breath با JS Trigger Breath Animation With JS Trigger

17: بازی برک آوت | HTML5 Canvas API 17: Breakout Game | HTML5 Canvas API

• معرفی پروژه Project Intro

• ایجاد و استایل دادن به صفحه Creating & Styling The Page

• طرح کلی طرح بوم Canvas Plan Outline

• قرعه کشی توپ، دست و پا زدن و امتیاز Draw Ball, Paddle & Score

• ایجاد آجر Creating The Bricks

• حرکت دست و پا زدن Move Paddle

• حرکت توپ و شکستن آجر Move Ball & Break Bricks

• بازی از دست دادن و بازنشانی Lose & Reset Game

18: شمارش معکوس سال نو | DOM، تاریخ و زمان 18: New Year Countdown | DOM, Date & Time

• معرفی پروژه Project Intro

• صفحه فرود HTML و استایل Landing Page HTML & Styling

• شمارش معکوس را ایجاد کنید Create The Countdown

• سال پویا و اسپینر Dynamic Year & Spinner

19: فهرست قابل مرتب سازی | کشیدن و رها کردن API 19: Sortable List | Drag & Drop API

• معرفی پروژه Project Intro

• درج موارد لیست در DOM Insert List Items Into DOM

• موارد فهرست را به هم بزنید Scramble List Items

• هسته CSS Core CSS

• قابلیت کشیدن و رها کردن Drag & Drop Functionality

• سفارش را بررسی کنید Check Order

20: Speak Number Guessing Game | تشخیص گفتار 20: Speak Number Guessing Game | Speech Recognition

• معرفی پروژه Project Intro

• رابط کاربری پروژه Project UI

• ورودی میکروفون را ضبط کنید Capture Mic Input

• شماره حدس زده را بررسی کنید Check Guessed Number