#js_challenge
#no31
#easy_to_medium

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

این هم از password strength checker 🔥

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

ضمنا اگر گیت هاب بلد نیستید، حتما یاد بگیرید که فوق العاده مهمه! از کجا؟ از این ویدیوی بنده که در 30 دقیقه هر آنچه که در گیت هاب نیاز دارید رو بهتون آموزش دادم ❤️:
https://t.iss.one/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.iss.one/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