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

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

2
+1
+1

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

Sobhan آسان 222/ 524 بازدید

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

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

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

1 جواب

نمیتونم این تمرین رو حل کنم!
2
+1
+1
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
   body {
    width: 100vw;
    height: 100vh;
    background: #f2f4f6;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul {
    list-style: none;
  }
  p {
    color: black;
    font-size: 4rem;
    font-weight: 500;
  }
  i {
    position: absolute;
    top: 5px;
    right: 15px;
  }
    </style>
  </head>
  <body>
    <p>Welcome</p>
    <i class="fa fa-exchange fa-3x"></i>
    <script>
      let i = document.querySelector('i')
      let body = document.querySelector('body')
      let p = document.querySelector('p')
      let flg = false

      i.addEventListener('click' , function () {
        if (!flg) {
          p.style.color = 'white'
          body.style.backgroundColor = 'black'
          i.style.color = 'white'
          flg = true
        } else {
          p.style.color = 'black'
          body.style.backgroundColor = 'white'
          i.style.color = 'black'
          flg = false
        }
      })
    </script>
  </body>
</html>

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن


  • تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
  • لطفا جواب های تکراری ارسال نکنید
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن

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

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