تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

ایجاد حالت شب (دارک مود)

آسان 222/ دانلود 176 بازدید

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

سپس دکمه ای طراحی کنید که وقتی کاربر روی آن کلیک کرد صفحه به حالت شب (دارک مود) تغییر پیدا کند. (در حالت شب، رنگ پس زمینه مشکی و رنگ متن سفید باشد)

با کلیک مجدد روی دکمه باید سایت به حالت روز (لایت مود) برگردد

1 جواب

نمیتونم این تمرین رو حل کنم!
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تغییر حالت شب و روز</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: white; /* رنگ پس زمینه روز */
            color: black; /* رنگ متن روز */
            transition: background-color 0.3s, color 0.3s; /* انیمیشن تغییر رنگ */
        }

        .dark-mode {
            background-color: black; /* رنگ پس زمینه شب */
            color: white; /* رنگ متن شب */
        }

        .container {
            text-align: center;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>متن دلخواه شما در اینجا قرار دارد</h1>
        <button id="toggleButton">تغییر به حالت شب</button>
    </div>

    <script>
        const toggleButton = document.getElementById('toggleButton');
        let isDarkMode = false;

        toggleButton.addEventListener('click', () => {
            isDarkMode = !isDarkMode; // تغییر حالت
            document.body.classList.toggle('dark-mode', isDarkMode); // تغییر کلاس بدنه
            toggleButton.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب'; // تغییر متن دکمه
        });
    </script>
</body>
</html>
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن
                    
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن