کلاس‌هاکالجبانک سؤالاتمسابقاتکاریابیجونیورابوت‌کمپ
کلاس‌ها کالج بانک سؤالات مسابقات کاریابی جونیورا بوت‌کمپ
ورود
ورود به بخش شرکت‌هاورودعضویت

نمایش رنگ‌ها (Frontend)


می‌خواهیم یک app با HTML/CSS/JS بنویسیم که کد hex یک رنگ را دریافت کند و آن رنگ را به ما نشان دهد. برای این کار کد HTML زیر را نوشته‌ایم که یک input و یک div در آن قرار دارد:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML Color Test</title>
    <style type="text/css">
        #color_preview {
            width: 200px;
            height: 200px;
            border: 1px solid grey;
            background-color: white;
        }
    </style>
</head>

<body>
    <h1>HTML Color Test</h1>
    <input id="color_input" type="text"/>
    <br/><br/>
    <div id="color_preview"></div>
</body>
</html>
HTML

توضیح تصویر

می‌خواهیم به کمک JS کاری کنیم که وقتی کد hex یک رنگ در input نوشته شد، رنگ پس‌زمینه div به آن رنگ تغییر کند تا بتوانیم آن رنگ را مشاهده کنیم :

توضیح تصویر

باید به محض تغییر مقدار داخل input، رنگ div بر اساس آن مقدار به روز شود. همچنین می‌خواهیم در صورتی که کاربر مقدار نامعتبری وارد کرد، رنگ div سیاه شود. مثال‌هایی از مقادیر نامعتبر: aa، 4a4b4z، aaaaaaa. مثال‌هایی از مقادیر معتبر: 777، 4f568e، a8c

تغییرات موردنظر را اعمال کنید و فایل(ها) را در یک فایل zip ارسال کنید. نام فایل HTML اصلی را index.html قرار دهید. همچنین می‌توانید در کنار آن تعدادی فایل .js قرار دهید.

نکات:

  • دقت کنید که فایل index.html داخل ریشه فایل zip باشد (داخل هیچ پوشه‌ای نباشد.)
  • مقدار id را برای input و div تغییر ندهید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.