می‌خواهیم یک app با HTML/CSS/JS بنویسیم که کد hex یک رنگ را دریافت کند و آن رنگ را به ما نشان دهد. برای این کار کد HTML زیر را نوشته‌ایم که یک input و یک div در آن قرار دارد:
```html
<!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>
```
می‌خواهیم به کمک JS کاری کنیم که وقتی کد hex یک رنگ در input نوشته شد، رنگ پس‌زمینه div به آن رنگ تغییر کند تا بتوانیم آن رنگ را مشاهده کنیم :
باید به محض تغییر مقدار داخل input، رنگ div بر اساس آن مقدار به روز شود. همچنین می‌خواهیم در صورتی که کاربر مقدار نامعتبری وارد کرد، رنگ div سیاه شود. مثال‌هایی از مقادیر نامعتبر: `aa`، `4a4b4z`، `aaaaaaa`. مثال‌هایی از مقادیر معتبر: `777`، `4f568e`، `a8c`
تغییرات موردنظر را اعمال کنید و فایل(ها) را در یک فایل zip ارسال کنید. نام فایل HTML اصلی را `index.html` قرار دهید. همچنین می‌توانید در کنار آن تعدادی فایل `.js` قرار دهید.
نکات:
- دقت کنید که فایل `index.html` داخل ریشه فایل zip باشد (داخل هیچ پوشه‌ای نباشد.)
- مقدار id را برای input و div تغییر ندهید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.
بوت‌کمپ