سلام بچه ها ساعت سه شما بخیر

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

من معمولا همون روزی که چالش رو میزارم شب جوابش رو میزارم حالا با توجه به اینکه الان دانشگاهم میرم، معمولا بعد از ظهرا چالش رو میزارم

حالا میخواستم بپرسم از شما که آیا به نظر شما هم تایم پاسخگویی کمه؟ بزارم بعد از ۲۴ ساعت جواب چالش رو بزارم؟

منظورم #js_challenge ها هست

آره بعد از ۲۴ ساعت 👍
نه شب همون روز 🔥

#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
#no38
#easy_to_medium

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

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

@js_challenges
@js_masters_gp

حتما به ویس توضیحات گوش کنید
#js_challenge
#no39
#easy

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

لینک برنچ مربوطه داخل ریپازیتوری اصلی:
https://github.com/MCKH03/JS_Challenges/tree/js_challenge_36

کار کردن با تاریخ ها داخل جاوااسکریپت جزو یکی از پرتکرارترین کارهاییه که انجام میدیم ...

پس خوب یادش بگیرید!

@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

حتما به ویس توضیحات گوش کنید

#js_challenge
#no41
#easy_to_medium

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

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

وقتی چالش رو حل کردید، پول ریکوئست فراموش نشه ✌️

@js_challenges
@js_masters_gp

به ویس توضیحات گوش فرا بدید 👌

#js_challenge
#no42
#easy_to_medium

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

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

این چالش مخصوصا اگر کسی اینستاگرام کار میکنه خیلی به دردش میخوره 🤝

@js_challenges
@js_masters_gp

حتما به ویس توضیحات گوش کنید

#js_challenge
#no43
#easy_to_medium

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

لینک برنچ مربوطه داخل ریپازیتوری:
https://github.com/MCKH03/JS_Challenges/tree/js_challenge_39

@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

#js_nuggets
GitHub Pages

یه جی اس ناگت بسیار بسیار کاربردی آوردم براتون

اینقدر این گیت هاب پیجز کاربردیه که نگم براتون
با چندتا کلیک پروژتون بدون هیچ هزینه ای آنلاین میشه که بتونید به بقیه نشون بدید 👌

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

@js_challenges
@js_masters_gp

#js_challenge
حتما توضیحات سوال رو گوش بکنید

#no46
#easy_to_medium

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

لینک سوال:(برای تست جواب‌هاتون)
https://www.codewars.com/kata/514b92a657cdc65150000006

پ.ن.پ: دوستان جواب چالش رو تا شب تو یوتوب قرار میدیم❤️
پ.ن.پ ۲: منتظر اسنپ شات های شما دوستان هستیم😎

@js_challenges
@js_masters_gp

🔰بهترین کتابخانه‌های رایگان جاوااسکریپت برای نمایش PDF در وب اپلیکیشن‌ها:

1️⃣کتابخانه PDF.js (Mozilla)

سبک، سریع و مستقیم توی مرورگر اجرا می‌شه. با Vanilla JS، React، Vue و Angular سازگاره.

🔗 [GitHub]

2️⃣کتابخانه PDF-LIB

قابلیت ایجاد، تغییر و نمایش PDF داره. سمت کاربر (Client-side) اجرا می‌شه و برای ویرایش داینامیک عالیه.

🔗 [GitHub]

3️⃣کتابخانه React-PDF

مخصوص پروژه‌های React. مبتنی بر PDF.js هست و به‌عنوان یک کامپوننت React استفاده می‌شه. از زوم، جابه‌جایی بین صفحات و کلی ویژگی دیگه پشتیبانی می‌کنه.

🔗 [GitHub]

4️⃣کتابخانه ng2-pdf-viewer

بهترین گزینه برای Angular. قابلیت زوم، چرخش و ویژگی‌های دیگه داره و مبتنی بر PDF.js هست.

🔗 [GitHub]


✅گزینه عمومی و قدرتمند می‌خوای❓خب PDF.js عالیه!👌

#frontend #js #pdf

Channel | Group | YouTube