پروژه اول- سطح مقدماتی

1402/10/01

پروژه اول- سطح مقدماتی - dark / light mode :

<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="bootstrap-5.3.2-dist/css/bootstrap.rtl.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body dir="rtl">
    <p id="p1">سلام</p>
    <hr>
   
    <button class="btn btn-info" id="btn">
        <span class="" id="Dspan">Dark</span>
        <span class="d-none" id="Lspan">Light</span>
        <i id="moonicon" class="fa fa-moon-o"></i>
        <i id="sunicon" class="fa fa-sun-o d-none"></i>
    </button>
    <script>
     const Btn = document.querySelector("Button");
     Btn.addEventListener("click", function () {
     document.getElementById("moonicon").classList.toggle("d-none");
     document.getElementById("sunicon").classList.toggle("d-none");
     document.getElementById("Lspan").classList.toggle("d-none");
     document.getElementById("Dspan").classList.toggle("d-none");
     document.body.classList.toggle("text-bg-dark");

        });
    </script>
</body>

</html>

srzahmadi

serene.user2017

1402/10/05
ساعت 11:52

من راه حل تک دکمه ای را ارائه میدهم، بصورتی که هم متن دکمه عوض شود و هم آیکون ماه و خورشید. یعنی موقعی که صفحه تیره شد، جمله ی" روشن کن" روی دکمه ظاهر شود و وقتی که صفحه ما روشن شد، جمله "تاریک کن" روی دکمه ظاهر شود.

<body dir="rtl">

    <div class="container">
        <h1>سلام و درود</h1>
        <button class="btn btn-primary" id="modebtn">
            Dark <i id="mode-icon" class="fa fa-moon"></i>
        </button>
    </div>
    
    <script src="script.js"></script>
</body>

const modebtn = document.getElementById("modebtn");
const modeIcon = document.getElementById("mode-icon");

modebtn.addEventListener("click", () => {
  document.body.classList.toggle("text-bg-dark");
  if (document.body.classList.contains("text-bg-dark")) {
    modeIcon.classList.remove("fa-moon");
    modeIcon.classList.add("fa-sun");
    modebtn.textContent = "روشن کن! ";
  } else {
    modeIcon.classList.remove("fa-sun");
    modeIcon.classList.add("fa-moon");
    modebtn.textContent = "تاریک کن! ";
  }
  modebtn.appendChild(modeIcon);
});

------------------------------------------------------