بیایید یک مولد رنگ تصادفی بسازیم!

5. به برنامه بگویید که چه زمانی عملکرد را اجرا کند

اگر هرگز آن را اجرا نکنیم، ساختن یک تابع فایده ای ندارد، بنابراین بیایید به برنامه خود بگوییم که تابع getNewColor () ما چه زمانی باید فراخوانی شود. در این مثال، اجازه دهید getNewColor() را هر زمان که صفحه بارگیری می‌شود و زمانی که "دریافت رنگ جدید!" دکمه کلیک می شود. در اینجا نحوه انجام این کار آمده است:

// Run getNewColor() upon loading of page:


// Run getNewColor() when clicking "Get New Color!" button:
Get New Color!

6. یک ظاهر طراحی را اضافه کنید

شما ممکن است این قسمت را هر طور که می خواهید انجام دهید یا اصلاً انجام ندهید، اما در اینجا استایلی که من در این پروژه استفاده کردم آمده است:

/* styling.css */
body {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

#heading {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
    padding: 16px;
}

.color {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 48px 32px;
    margin: 136px 384px;
}

#hex, #rgb {
    display: block;
    color: white;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 24px
}

#rgb {
    font-size: 32px;
}

.color button {
    background: none;
    outline: none;
    color: white;
    border: 3px solid white;
    cursor: pointer;
    font-size: 24px;
    padding: 8px;
    font-family: 'Courier New', Courier, monospace;
}

/* responsive.css */
@media screen and (max-width: 768px) {
    .color {
        margin: 118px 213px;
    }   

    #hex {
        font-size: 32px;
    }

    .color button {
        font-size: 20px;
        padding: 3px;
    }
}

@media screen and (max-width: 425px) {
    #heading {
        font-size: small;
    }

    .color {
        margin: 89px 66px;
    }


}

@media screen and (max-width: 325px) {
    .color {
        margin: 101px 66px;
    }

    #hex {
        font-size: 25px;
    }

    .color button {
        font-size: 14px;
        padding: 8px;
    }
}

7. بیایید آن را آزمایش کنیم!

اگر مراحل بالا را به درستی دنبال کرده باشید، هنگام بارگیری صفحه و همچنین با کلیک روی دکمه، یک رنگ تصادفی ایجاد می شود. پس زمینه صفحه روی رنگ تصادفی تنظیم می شود و کاربران می توانند کد HEX را کپی کنند.

ممنون که تا اینجا خواندید! امیدوارم برای شما مفید بوده باشد. به یاد داشته باشید، گاهی اوقات خواندن مقالات و دنبال کردن آموزش‌ها اشکالی ندارد، اما باید این کار را فقط برای یادگیری مفاهیم انجام دهید. وقتی فکر کردید که مفاهیم را به درستی درک کرده اید، سعی کنید خودتان برنامه بسازید. نه، احتمالاً بار اول همه چیز را درست نخواهید گرفت، اما مواجه شدن با یک مشکل و فهمیدن اینکه چگونه خودتان آن را حل کنید، با استفاده از مفاهیمی که آموخته‌اید، راهی برای تبدیل شدن به یک کدنویس بهتر است.

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

مثل همیشه، کدنویسی مبارک!

این پروژه را در عمل ببینید

پیوند به مخزن GitHub این پروژه

پیوند به مقاله در مورد تفاوت بین .innerHTML و .textContent

در ابتدا در Medium برای جاوا اسکریپت به زبان انگلیسی ساده در 15 اوت 2022 منتشر شد