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

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

معرفی Introduction

• به دوره خوش آمدید Welcome to the Course

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

اعتبار سنجی فرم | پروژه معرفی 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

رزرو صندلی فیلم | DOM و محل ذخیره سازی 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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• پروژه CSS Project CSS

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• پروژه CSS Project CSS

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

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

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

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

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

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

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

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

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

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

• ایجاد کاربران تصادفی - واکشی با/Async/Await Generate Random Users - Fetch w/ Async/Await

• ایجاد کاربران تصادفی - واکشی با/Async/Await Generate Random Users - Fetch w/ Async/Await

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

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

• دو پول - نقشه () Double Money - map()

• دو پول - نقشه () Double Money - map()

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

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

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

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

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

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

منوی لغزنده و مدال | DOM و CSS Menu Slider & Modal | DOM & CSS

منوی لغزنده و مدال | DOM و CSS Menu Slider & Modal | DOM & CSS

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Letter Press Event Handler Letter Press Event Handler

• Letter Press Event Handler Letter Press Event Handler

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• پروژه CSS Project CSS

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

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

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

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

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

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

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

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

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

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

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

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

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

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

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

• پروژه CSS Project CSS

• پروژه CSS Project CSS

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

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

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

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

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

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

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

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

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

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

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

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

• پروژه CSS Project CSS

• پروژه CSS Project CSS

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

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

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

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

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

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

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

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

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

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

• HTML پروژه Project HTML

• HTML پروژه Project HTML

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

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

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

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

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

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

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

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

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

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

• تنظیم و دریافت اطلاعات کارت از Local Storage Set & Get Card Data from Local Storage

• تنظیم و دریافت اطلاعات کارت از Local Storage Set & Get Card Data from Local Storage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• انیمیشن نفس با JS Trigger Breath Animation with JS Trigger

• انیمیشن نفس با JS Trigger Breath Animation with JS Trigger

بازی Breakout | HTML5 Canvas API Breakout Game | HTML5 Canvas API

بازی Breakout | HTML5 Canvas API Breakout Game | HTML5 Canvas API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• هسته CSS Core CSS

• هسته CSS Core CSS

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

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

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

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

بازی حدس اعداد Speak | تشخیص گفتار Speak Number Guessing Game | Speech Recognition

بازی حدس اعداد Speak | تشخیص گفتار Speak Number Guessing Game | Speech Recognition

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

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

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

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

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

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

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

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