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

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

سوالات کاربران تمرین ها کوئیزها

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

تمرین آسان 3446 بازدید پربازدید 222/ دانلود

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

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

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

👨‍💻 5 ساعت قبل Shayan.fm این تمرین رو مشاهده کرد
👨‍💻 2 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
🔥 5 ساعت قبل Shayan.fm جواب جدیدی برای این تمرین ارسال کرد
👨‍💻 10 ساعت قبل User 6545 این تمرین رو مشاهده کرد
👨‍💻 9 ساعت قبل User 6360 این تمرین رو مشاهده کرد
👨‍💻 2 ساعت قبل User 6553 این تمرین رو مشاهده کرد
🔥 14 ساعت قبل User 6184 جواب جدیدی برای این تمرین ارسال کرد
تمرین جدید

12 جواب

مرتب سازی
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Afra.alr JavaScript HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Amir.code HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Amirrz JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .container{
            width: 500px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            border-radius: 20px;
            transition: all 0.3s ease-in-out;
        }
        #title{
            text-align: justify;
        }
        .light_mode{
            color: black;
            background-color: white;
        }
        .night_mode{
            color: white;
            background-color: black;
        }
        #display {
            margin: auto;
            width: 150px;
            height: 70px;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, #4e54c8 0%, #8f94fb 100%);
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            transition: background 0.4s, box-shadow 0.4s, border 0.4s;
            box-shadow: 0 4px 24px rgba(78,84,200,0.18), 0 1.5px 4px rgba(143,148,251,0.10);
            border: 2px solid #4e54c8;
        }
        #display.night {
            background: linear-gradient(90deg, #3a3f51 0%, #6a7b9a 100%);
            box-shadow: 0 4px 24px rgba(106,123,154,0.25);
            border: 2px solid #6a7b9a;
        }
        #btn {
            position: absolute;
            left: 0;
            background: linear-gradient(135deg, #fff 60%, #e0e0e0 100%);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            margin: 0 5px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.18);
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: left 0.3s;
        }
        #btn.night {
            left: 80px;
            background: linear-gradient(135deg, #222 60%, #555 100%);
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="light_mode container">
        <h1 id="title">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
         Velit itaque autem porro excepturi eius rem animi volupta
         tibus iure officiis distinctio.
    </h1>
        <div id="display">
            <div id="btn"></div>
        </div>
    </div>


    <script>
        let is_light = true;
        let display = document.getElementById("display");
        let btn = document.getElementById("btn");

        display.addEventListener("click", (e)=>{
            if(e.target.id == "display"){
                if (is_light) {
                    document.querySelector(".container").classList.replace("light_mode", "night_mode");
                    btn.style = "left: 80px;";
                    btn.classList.add("night");
                    display.classList.add("night");
                    is_light = false;
                } else {
                    document.querySelector(".container").classList.replace("night_mode", "light_mode");
                    btn.style = "left: 0;";
                    btn.classList.remove("night");
                    display.classList.remove("night");
                    is_light = true;
                }
            }
        })
  </script>

</body>
</html>
Mostafa JavaScript HTML & CSS 
from tkinter import *

tkinter = Tk()
tkinter.geometry("900x500")
tkinter.title("dark & light")
tkinter.config(background="white")

def click(mode):
    if mode == 'dark':
        tkinter.config(background="black")
        label.config(bg="black", fg="white")

    else:
        tkinter.config(background="white")
        label.config(bg="white", fg="black")

label = Label(tkinter, text='Click' , font=("impact", 60) , fg='black' , width=6 , border=19 , bg='white')
label.pack()

btn = Button(tkinter, text="Dark mode" , border=20 , font=('Courier New' , 18), bg='black' , fg='white' , command=lambda:click('dark'))
btn.pack()

btn2 = Button(tkinter, text="Ligth mode" , border=20 , font=('Courier New' , 16) , bg='white' , fg='black' , command=lambda:click('light'))
btn2.pack()


tkinter.mainloop()
Shayan.fm Python 
from tkinter import *

win = Tk()
win.title('dark')
win.geometry('500x500')
win.resizable(False,False)
win.config(background="white")

def click(color):
    win.config(background=color)

win_lable = Label(win,text='hello',font=('arial',60),fg='black',width=6,border=19,bg='white')
win_lable.pack()

win_btn = Button(win,text="off",border=20,font=('arial',16),bg='white',fg='blue',command=lambda:click('black'))
win_btn.pack()

win_btn2 = Button(win,text="on",border=20,font=('arial',16),bg='white',fg='blue',command=lambda:click('white'))
win_btn2.pack()

win.mainloop()
Sumy.amiri Python 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        transition: background-color 0.5s, color 0.5s;
      }

      .container {
        text-align: center;
      }

      #change {
        background-color: #2eb5eb;
        outline: none;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        color: rgb(250, 250, 250);
        cursor: pointer;
        font-weight: 700;
        transition: background-color 0.3s;
      }

      #change:hover {
        background-color: #95d6f0;
      }

      @keyframes buttonPluse {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

      .pluse {
        animation: buttonPluse 0.3s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 id="textChange">change dark mode</h1>
      <button id="change">OFF Dark</button>
    </div>
    <script>
      const btn = document.getElementById("change");
      const body = document.body;

      btn.addEventListener("click", () => {
        const isDark = body.style.backgroundColor === "black";

        if (isDark) {
          body.style.backgroundColor = "white";
          body.style.color = "black";
          btn.textContent = "ON Dark";
        } else {
          body.style.backgroundColor = "black";
          body.style.color = "white";
          btn.textContent = "OFF Dark";
        }

        btn.classList.add("pluse");
        setTimeout(() => {
          btn.classList.remove("pluse");
        }, 3000);
      });
    </script>
  </body>
</html>
User 112 JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>
</head>
<body id="bg">
  <h1 id="text1">Practices</h1>

  <button id="buttonChangeMode" onclick="changeMode()">Dark Mode</button>
  <script>

    let BG = document.getElementById("bg")
    let text = document.getElementById("text1")
    let button = document.getElementById("buttonChangeMode")
    let lightMode = false

    let changeMode = () => {

      if (lightMode == false) {
        BG.style.backgroundColor = "rgb(0, 0, 0)"
        text.style.color = "white"
        button.innerText = "Light Mode"
        lightMode = true
      }else{
        BG.style.backgroundColor = "white"
        text.style.color = "black"
        button.innerText = "Dark Mode"
        lightMode = false
      }
    }
  </script>
</body>
</html>
Programmer JavaScript HTML & CSS 
<!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 {
            background-color: white;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            transition: background-color 0.5s, color 0.5s;
        }
        .dark-mode {
            background-color: black;
            color: white;
        }
        button {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>متن دلخواه در وسط صفحه</p>
        <button id="toggleButton">تغییر به حالت شب</button>
    </div>
    <script>
        const button = document.getElementById('toggleButton');
        let isDarkMode = false;

        button.addEventListener('click', () => {
            isDarkMode = !isDarkMode;
            document.body.classList.toggle('dark-mode', isDarkMode);
            button.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب';
        });
    </script>
</body>
</html>
Ai JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Night Mode Switch</title>
  <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --light-bg: #f4f6f8;
      --light-text: #1b1f23;
      --light-accent: #10b981;
      --dark-bg: #0e141b;
      --dark-text: #e5e7eb;
      --dark-accent: #38bdf8;

      --transition-speed: 0.6s;
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      font-family: "Vazirmatn", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: var(--light-bg);
      color: var(--light-text);
      transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 40px;
      transition: color var(--transition-speed);
    }

    button {
      padding: 12px 30px;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      border-radius: 30px;
      background: linear-gradient(135deg, var(--light-accent), #3b82f6);
      color: white;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.6s ease;

    }

    button:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }

    /* Dark mode styles */
    .dark-mode {
      background-color: var(--dark-bg);
      color: var(--dark-text);
    }

    .dark-mode h1 {
      color: var(--dark-text);
    }

    .dark-mode button {
      background: linear-gradient(135deg, var(--dark-accent), #6366f1);
    }
  </style>
</head>
<body id="bod">
  <button onclick="change()">تغییر حالت</button>

  <script>
    const change = () => {
      document.body.classList.toggle("dark-mode");
    };
  </script>
</body>
</html>
User 4497 HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن