ساخت سایتی مشابه UI Gradients بهترین پروژه سطح مبتدی برای جاوا اسکریپت کاران

سلام دوستان تو این مقاله قصد داریم که یه سایتی مشابه سایت UI Gradients البته به صورت خیلی ساده تر و با کد های قابل فهم تر برای اون دسته از دوستانی که مبتدی هستن و تازه شروع به یادگیری زبان برنامه نویسی جاوا اسکریپت کردن یا میخوان پروژه هایی کوچیکی که سطح مبتدی دارن و برای بالا بردن مهارت کد نویسی جاوا اسکریپتشون هست رو ارتقا بدن.

ی چیز مهم : خط به خط کد های جاوا اسکریپتی که مینویسیم توضیحشون هم میدیم پس خیالتون از این بابت راحت باشه :)

خب بریم ک شروع کنیم...

اول از همه طبق معمول فایل های index.html style.css app.js رو میسازیم البته این اسما اختیاری هست شما هر اسمی که عشقتون کشید میتونین بزارین برای فایلاتون.

گام بعد اینه که ما بیایم به قول خوبا اسکلت سایتمون رو با html پیاده سازی کنیم

به صورت زیر هست...

<div id=&quotbg&quot></div>

بکگراند گردینتمون که هر رنگی تولید میشه به این المنتمون هم اعمال میشه خلاصه کاربر باید یه دید رنگی که تولید شده داشته باشه دیگه تا بخواد کد رنگش رو کپی و استفاده کنه.

    <div id=&quotglass&quot>

        <p>Click the button to Change Random bg color</p>

        <input type=&quottext&quot spellcheck=&quotfalse&quot id=&quotcolor-code&quot>

    </div>

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

    <div class=&quotcopy-animation&quot>

        <p>Copied</p>

    </div>

این تیکه کدم که وقتی کاربر روی اینپوت کلیک میکنه و کد به صورت خودکار کپی میشه براش به نمایش در میاد حالا در ادامه با اضافه کردن css و js بهتر درک میکنید کاراییشو...

<button id=&quotbtn&quot>
<img src=&quothttps://s4.uupload.ir/files/change-icon-color-9_ayb5.jpg&quot alt=&quot&quot>
</button>

اخرین کاری که برای تکمیل اسکلت وبسایتمون باید انجام بدیم اضافه کردن تیکه کد بالاست که تمامی رویداد ها با کلیک بر روی این دکمه اتفاق میوفته یعنی بگراند و... اینا عوض میشن یه عکسی هم انداختیم توش حالا شما خواستین میتونین از ایکون های font awesome یا google استفاده کنین به جای عکس

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

خب دوستان من تصمیم گرفتم کدای css رو داخل یه کد ادیتور آنلاین برای شما بزارم تا بتونین از اونجا یه ویویی داشته باشین از کدای css چون خیلی زیاد بودن میتونین روی لینک کلیک کنین تا ببینین codesandbox

بر فرض اینکه شما css بلدین توضیح دادن این بخش هم میدونستم خیلی کسل کننده میشه براتون برای همین قبل از استایل دادن هر بخش از المنت های HTML مون یه کامنته کوتاهی گذاشتم برای عزیزانی که css بلد نبودن که برن بخونن.

شما الان باید یه همچین ویویی از برنامه ای که نوشتین داشته باشین حالا میریم که این برناممون رو با جاوا اسکریپت تعاملی کنیم و بهش مغز بدیم.

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

کدای اینم متاسفانه زیاد شده من همرو با عکس توضیح میدم کداشو، و خروجی کار رو میزارم داخل کدپن که شماهم بتونین ببینین.

اگر رنگ های گردنیت بیشتری به آرایه مون اضافه کنیم خب مثلما وب اپلیکیشنمون کارایی و تنوع رنگی بالاتری خواهد داشت.

میتونین خودتون اینکار رو انجام بدین

بعد از اینکه آرایه رنگارو ساختیم میریم سراغ پیدا کردن المنت هامون که میخوایم با جاوا اسکریپت تعاملیشون کنیم و کاربر با اون ارتباط داشته باشه.

const btn = document.getElementById(&quotbtn&quot);

const bg = document.getElementById(&quotbg&quot);

const ColorCode = document.getElementById(&quotcolor-code&quot);

const CopyAnimation = document.querySelector(&quot.copy-animation&quot);

const CopyAnimationLength = document.querySelector(&quot.copy-animation&quot);

بعدش میایم به دکمه ای که داخل سند HTML مون ساخته بودیم ایونت کلیک رو اعمال میکنیم

btn.addEvenetListener(&quotclick&quot, ChangeColor);

فانکشنی که به ایونت دکممون پاس دادیم رو مینویسیم

داخل فانکشن استارت کار اصلیمون رو میزنیم
باید اول بیایم تعداد عناصر آرایه مون رو به دست بیاریم و اون رو با متد Math.floor و Math.random ضرب در تعداد عناصر آرایه مون میکنیم
الان اگر از این کد Color[RandomColor] کنسول بگیرین میبینین که داره یه کد رنگی گردینت برمیگردونه و همونطور که میبینین با هر دفعه کلیک روی دکمه بک گراند المنتمون که ایدی bg رو داشت تغییر میکنه

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

حالا میایم انیمیشن هامون رو اضافه میکنیم وقتی که روی دکمه کلیک میشه ایدی bg یه انیمیشن چند ثانیه ای محو شدگی میگیره و اینپوتمون هم انیمیشن به اصطلاح پیپر رو میگیره باز و بسته میشه و این عملیات هر 200 ثانیه اضافه میشه با کلیک بر روی دکمه
و ورداشته میشه .

و در آخر هم میایم وقتی رو اینپوت کلیک شد کد رنگ به صورت اتوماتیک کپی کلیپ بورد کاربر میکنیم کدش
رو مینویسیم.

رویداد کلیک رو به اینپوت داخل صفحه مون میدیم و با استفاده از شی navigator.clipboard.writeText می آییم و مقدار داخل اینپوت را میگیریم و داخل کلیپ بورد کاربر کپی میکنیم شی navigator اطلاعاتی از مرورگر کاربر را بر روی خودش ذخیره میکند و شی clipboard محتویات نوشته شده را بر میگرداند wirteText مشخص میکند که چه نوع داده ای داخل کلیپ بورد ذخیره شود

و در اخر هم وقتی روی اینپوت کلیک شده المنت copied نمایان میشه و هر 2000 ثانیه استایلش حذف میشه

لینک کامل پروژه در کدپن Ui Gradients

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

و اینکه من رو به بزرگی خوتون ببخشید اگر ایراداتایی داشتم چون اولین تجربه نوشتنم بود عذر خواهی میکنم ازتون

و در پایان

حتما این نوشته رو با دوستاتون که در مسیر یادگیری جاوا اسکریپت هستند به اشتراک بزارین تا کمکی کرده باشین بهشون و اموزش داده شده رو تمرین و تکرار کنید تا به مباحث مسلط شوید.

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

اینستاگرام : Madi.jigsaw

ایمیل : MahdiDev.Front@gmail.com