امروز یه چالش متفاوت داریم که از این به بعد بیشتر خواهیم داشت 🔥

#js_challenge
#no12
#easy

هشتگ های مرتبط:
#DOM

دوستان عکس html css js خودتون رو زیر همین پیام کامنت کنید ❤️

از قصد html css رو کدش رو براتون نمیزارم که یه مقدار سر ظهری css خام بنویسید کیف کنید 😁


اگر از این نوع چالش ها خوشتون میاد با ریکشن 🔥 نشون بدید که بدونم بیشتر براتون بزارم از اینا یا نه
@js_challenges

#js_challenge
#no17
#medium

هشتگ های مرتبط:
#DOM

لینک های مورد نظر این ها هستن:
لینک خودش که بتونید عملکردش رو ببینید:
https://mckh03.github.io/CSS-JS-Clock-1/

این هم لینک خود ریپازیتوری گیت هاب برای دسترسی به فایل های html css:
https://github.com/MCKH03/CSS-JS-Clock-1

دوستان همونطور که داخل ویدیو هم اشاره کردم، من فقط به همون فانکشنالیتی ساعت نیاز دارم که شما زحمتش رو بکشید و اون انتخاب شهر و حتی خود UI کار رو اگر نزدید مهم نیست، اگر هم زدید که دمتون گرم 🔥

اگر فایل های html css من رو استفاده کردید که هیچی اما اگر استفاده نکردید و یه UI ساده تر زدید، فایل های html css و javascript خودتون رو بفرستید ✌️

@js_challenges
@js_masters_gp

#GitHub
#DOM

از همین امروز، چالش های داخل گیت هاب استارت میخوره ✌️

در این ویدیو ساختار کلی قرارگیری پروژه های DOM و چالش های جاوااسکریپت رو براتون توضیح دادم

اگرم باز هم سوالی داشتید از خودم بپرسید اما به طور کلی ساختار این ریپازیتوری به این صورته:

یک ریپازیتوری داریم به نام JS_Challenges و لینکش هم اینه:
https://github.com/MCKH03/JS_Challenges

داخل این ریپازیتوری دوتا پوشه هست به نام های DOM و JS Challenges

داخل DOM هر هفته یک پروژه قرار میگیره که خودتون باید html css js رو بزنید و اونجا داخل فولدر همون پروژه، یک پوشه به اسم خودتون درست کنید و اونجا آپلودش کنید و همین موضوع برای چالش های جاوااسکریپت داخل پوشه JS Challenges هم صدق میکنه

من یک هفته بعد از قرار گرفتن این پروژه داخل گیت هاب، جوابش رو همراه ویدیو داخل خود گیت هاب قرار میدم

توضیحات تکمیلی تر داخل ویدیو هست

این هفته قراره روی یک Image Carousel کار بکنیم 🔥

@js_masters_gp

#no21
#DOM

بعد از دو چالش خفن، یه چالش ساده تر داریم از DOM

این عملکردی که برای این textarea میبینید عملکرد بسیار معمولی هست که قطعا داخل سایت های مختلف دیدید

امروزم تعطیله دیگه بشینید حلش بکنید 🔥

راستی پیامی که ریپلای زدم رو بخونید و چالش داخل گیت هاب رو هم حتما بررسی بکنید چالش DOM خوبی داخل گیت هابم قرار دادم براتون که این هفته جوابش رو میزارم

اگر هم عملکرد معمول یا غیر معمول دیگه ای مد نظر شما هست که داخل سایت های دیگه دیدید و دوست دارید اون ها رو با هم پیاده سازی بکنیم، حتما به من بگید که داخل چنل قرار بدم ✌️

@js_challenges
@js_masters_gp

این عملکرد رو به احتمال زیاد داخل سایت های دیگه دیدید و امروز میخوایم پیاده سازیش بکنیم 🔥

من کدهای HTML و CSS رو در پیام بعدی برای عزیزانی که میخواین فقط روی جاوااسکریپتش کار بکنید میزارم هر چند توصیه میکنم خودتون روی UI اش کار کنید✌️

#js_challenge
#DOM
#no26

@js_challenges
@js_masters_gp

#هشتگ

هشتگ های چنل که باهاشون میتونید راحت مطالب مورد نظرتون رو پیدا کنید:

چالش های چنل:
#js_challenge
#your_challenge
#quick_challenge

حتما توی یوتیوب هم مارو دنبال کنید:
YouTube

لینک شبکه هایی که داخلشون اپیزودهای پادکست #برنامه_نویس_آگاه منتشر میشه:
CastBox
Google Podcasts
Spotify

هشتگ های مربوط به دوره های دوبله شده:
#Course
#JavaScript
#Jonas_Schmedtmann
#S01 #S02 ....
#E01 #E02 ....

اگر هم میخواید که به فایل زیپ دوبله فصل های مختلف دسترسی داشته باشید میتونید از ربات استفاده کنید:
@jschallenges_chat

جواب چالش ها:
#answer

آموزش های کوتاه (عموما کمتر از ده دقیقه):
#js_nuggets

سطوح چالش های چنل:
#easy
#easy_to_medium
#medium
#medium_to_hard
#hard


تیپ و تیریک ها:
#Tips_N_Tricks
#VSCode_Extension
#Around_JS
#VsCode

موضوع های مختلف جاوااسکریپت (به این هشتگ ها به مرور اضافه میشه):
#arrays
#objects
#function
#async_await
#loops
#parsing_data
#short_circuiting
#object_destructuring
#promises
#error_handling
#fetch
#api
#NPM
#dates
#Clean_Code
#GitHub
#Git
#Design_Patterns
#DOM
#oop
#Package_Managers
#Timing

مطالب خارج از محیط IDE:
#Out_Of_IDE
#Music
#Fun

آیدی چنل:
@js_challenges
آیدی گروه چنل:
@js_masters_gp

#js_challenge
#no31
#easy_to_medium

هشتگ های مرتبط:
#DOM

این هم از password strength checker 🔥

فایل های html css چالش های DOM از این به بعد داخل گیت هاب قرار میگیره و میتونید از اونجا برش دارید، لینک ریپازیتوری مربوط به این چالش:
https://github.com/MCKH03/Pass_Strength_Checker_1

ضمنا اگر گیت هاب بلد نیستید، حتما یاد بگیرید که فوق العاده مهمه! از کجا؟ از این ویدیوی بنده که در 30 دقیقه هر آنچه که در گیت هاب نیاز دارید رو بهتون آموزش دادم ❤️:
https://t.me/js_challenges/161

@js_challenges
@js_masters_gp

#js_challenge
#DOM
#no35

طبق نظرسنجی که هفته قبل گذاشته شد، زوم شدن عکس با هاور کردن مثل چیزی که در سایت دیجی کالا دیدید رتبه دوم رو کسب کرد و ما هفته قبل چک کردن قدرت پسورد رو بررسی کردیم 🔥

و امروز میخوایم به زوم شدن عکس با هاور شدن بپردازیم 👌

و از اونجایی که برای حل این چالش باید به مواردی مثل offsetX pageX screenX clientX مسلط باشید، امروز یا فردا یک js_nugget در رابطه با این ها ضبط میکنم براتون ❤️

راستی کد های html css این چالش رو براتون داخل ریپازیتوری اصلی قرار دادم:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Image%20Zoom%201

البته اگر کد html css این رو خودتون نزنید دیگه واقعا نشون میده بسیار آدم ...
پیش فعالی هستید 😂

@js_challenges
@js_masters_gp

#js_challenge
#your_challenge
#no36
#DOM
Tabbed Component || Tabbed Content

آدرس فایل های html css و فایل جاوااسکریپت اولیه:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Tabbed%20Content%201

این کومپوننت بسیار پیاده سازیش ساده هست اما در عین حال بسیار میتونه برای مخاطب جذاب باشه 👌

داخل ویدیوی جوابش که امشب قرار میگیره مواردی رو یاد میگیرید و یا تثبیت میکنید که همه جا کاربرد داره مثل Event Propagation و اینکه چطور ما دیتاهارو از آرایه ای از آبجکت ها بخونیم 🔥

پاسخ این چالش فردا قرار خواهد گرفت ✌️

@js_challenges
@js_masters_gp

#js_challenge
#no37
#medium_to_hard
#DOM
#fetch
#api
#error_handling

لینک api مربوطه(نحوه استفاده ازش رو داخل ویدیو توضیح دادم):
https://api-ninjas.com/api/quotes

لینک فایل های html css و starter.js داخل ریپازیتوری اصلی:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Random%20Quote%20Generator%201

یه چالش ساده اما بسیار بسیار کاربردی

مطالبی که قراره توی ویدیوی جواب این چالش یاد بگیرید میتونم بگم تا زمانی که برنامه نویسی وب رو انجام بدید به دردتون خواهد خورد 🔥

اما ... فقط در صورتی که خودتون برای حلش زحمت بکشید و به درهای بسته زیادی بخورید 👌

اگر هر جای این چالش هم به مشکل خوردید حتما داخل گروه بپرسید ولی حتما حتما برای حل کردنش تلاش کنید وگرنه از 100 درصد مطالبی که توی جواب گفته میشه، فقط 20 درصدش نهایت توی ذهنتون میشینه چون ذهن سختی ها رو خیلی بیشتر از خوشی ها به خاطر میسپره ... 🍷

پ.ن: چیزی که توی ویدیو فکر میکنم فراموش کردم بهتون نشون بدم اینه که فکر اینکه اینترنت کاربر وسط fetch قطع بشه یا به هر دلیلی مشکل بوجود بیاد رو هم بکنید!

@js_challenges
@js_masters_gp

هشتگ های چنل که باهاشون میتونید راحت مطالب مورد نظرتون رو پیدا کنید:

چالش های چنل:
#js_challenge
#your_challenge
#quick_challenge

جواب چالش ها:
#answer

لینک ریپازیتوری ای که تمام چالش های اصلی اونجا جمع شده میتونید یه جا دسترسی داشته باشید:
https://github.com/MCKH03/JS_Challenges

آموزش های کوتاه (عموما کمتر از ده دقیقه):
#js_nuggets
مواردی که تاکنون داخل js_nuggets آموزش داده شده:
Intersection Observer API
Short Circuting
Object Destructuring
Array Destructuring
map filter reduce methods
clientX screenX pageX offsetX
clientY screenY pageY offsetY
Fetch
Try catch block
Map data structure

آموزش های طولانی (عموما بیشتر از ۱۵ دقیقه):
#js_amozsh

سطوح چالش های اصلی چنل:
#easy
#easy_to_medium
#medium
#medium_to_hard
#hard


تیپ و تیریک ها:
#Tips_N_Tricks
#VSCode_Extension
#Around_JS

موضوع های مختلف جاوااسکریپت (به این هشتگ ها به مرور اضافه میشه):
#arrays
#objects
#async_await
#loops
#parsing_data
#short_circuiting
#object_destructuring
#promises
#error_handling
#fetch
#api
#dates
#GitHub
#DOM

مطالب خارج از محیط IDE:
#Out_Of_IDE
#Music
#Fun
#Tech_Trends

مطالب خارج از محیط سیستم:
#Out_Of_Laptop

آیدی چنل:
@js_challenges
آیدی گروه چنل:
@js_masters_gp

#js_challenge
#DOM
#no40
#hard


آقا یه چالش خفن و پر و پیمون آوردم براتون عشق کنید 🔥
عملکرد یک سبد خرید 👌
ولی چالش سختیه و نیاز داره به آزمون و خطای بسیار!

اگر کسی این رو با جاوااسکریپت خام بزنه، کارش واقعا درسته چون یه کد زدن همچین چیزی با ریکت بسیار ساده تر و شیرین تره 👌
ولی زدنش با جاوااسکریپت خام بسیار بسیار میتونه به حل مسئله و یادگیری جاوااسکریپتتون کمک کنه

اما نکته اینجاست که اگر تلاشی برای حل کردنش نکنید، هیچی یاد نمیگیرید!
پس هر چقدر هم که شده سعی بکنید کدش رو بزنید که بسیار بسیار وقتی ویدیوی جواب رو ببینید در یادگیری بهتون کمک میکنه ❤️

آدرس api ای که اطلاعات از اونجا گرفته شده:
https://fakestoreapi.com/products

آدرس بخشی از ریپازیتوری اصلی که فایل های HTML و CSS این چالش اونجا قرار گرفته:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Cart%201


@js_challenges
@js_masters_gp

💎 خلاصه ای از آفست ها در جاوا اسکریپت در قاب تصویر

تصویر بالا offset ها رو تو جاوا اسکریپت به طور کامل نشان داده

#Tips_N_Tricks
#DOM

یه js_nugget هم در این رابطه داخل چنل هست، اگر خواستید به اون هم یه سر بزنید 👌

https://t.me/js_challenges/363?single

@js_challenges
@js_masters_gp

💎 مدیا کوئری ها در جاوا اسکریپت

از مدیا کوئری ها برای بررسی سایز و اندازه طول و عرض صفحه نمایش مورد استفاده قرار میگیره و از اصلی ترین مواردیست که ریسپانسیویتی سایت بر آن استوار است و قطعاً اسمش رو در CSS شنیدید.
در جاوا اسکریپت هم میتونید از مدیا کوئری ها استفاده کنید.

⁉️ به چه صورت؟
تو کلاس window یه متدی داریم به نام matchMedia که میتونید سایز مد نظر صفحه رو به اون بدید و پاسخ رو به صورت آبجکت دریافت کنید.

💬 نکته مهم اینکه حتماً حداقل عرض رو باید درون پرانتز بنویسید.

#Tips_N_Tricks
#DOM

@js_challenges
@js_masters_gp

متد getBoundingClientRect ابعداد یک عنصر و موقعیت آن را نسبت به viewport برمی گرداند. یک شی DOMRect را با ویژگی هایی مانند x ، y ، width ، height ، top ، right ، bottom و left برمی گرداند. از این اطلاعات می توان برای تعیین اندازه و موقعیت یک عنصر برای اهداف مختلف مانند تعیین موقعیت استفاده کرد.

#Tips_N_Tricks
#DOM

@js_challenges
@js_masters_gp

#js_challenge
#no44
#DOM
#medium

لینک فایل های html css و starter.js داخل ریپازیتوری اصلی چنل:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Text%20Collapse%201

خب میریم سراغ چالش DOM بعدی در رابطه با این کومپوننت هایی که قطعا دیدید که وقتی روشون کلیک میشه متنشون بیشتر و یا کمتر نشون داده میشه 👌

کسی که چالش های DOM این چنل رو حل بکنه، بعد وقتی بخواد از ریکت استفاده بکنه قدرش رو خیلی بیشتر میدونه 😁
البته اینم بگما، عزیزانی که ریکت کار میکنید میتونید این چالش های DOM رو شما با ریکت بزنید چون کاملا برای ریکت هم کاربردی هستن ...

ببینید و حلش بکنید و وقتی حلش کردید از کومپوننتی که خودتون طراحی کردید یه ویدیو بگیرید بفرستید ❤️

@js_challenges
@js_masters_gp