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

1402/08/17

پروژه اول - سطح مقدماتی - 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 href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel="stylesheet">
</head>
<body dir="rtl">
    <button class="darkMode">تاریک<i class='bx bxs-moon'></i></button>
    <button class="lightMode">روشن<i class='bx bx-sun'></i></button>

    <button class="toggleBtn">
        <i class='bx bxs-moon'>تاریک</i>
        <i class='bx bx-sun'>روشن</i>
    </button>
    
    <p class="paragraph">سلام دنیا !</p>
</body>
<script src="script.js"></script>
</html>

* {
    font-size: 16px;
}
button {
    margin: 10px auto;
    display: block;
    cursor: pointer;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
}
.darkMode {
    background-color: rgb(39, 39, 39);
    color: gainsboro;
    display: flex;
    gap: 0.2rem;
    align-items: center;
}
.lightMode,.toggleBtn{
    display: flex;
    gap: 0.2rem;
    align-items: center;
}
.toggleBtn {
    background-color: rgb(39, 39, 39);
    color: gainsboro;
    font-size: 15px;
}
.toggleBtn.changeIcon {
    background-color: gainsboro;
    color: rgb(39, 39, 39);
}
p {
    text-align: center;
    font-size: 18px;
}
.darkBg {
    background-color: rgb(27, 27, 27);
}
.pColor {
    color: whitesmoke;
}
.toggleBtn i:nth-of-type(2) {
    display: none;
}
.toggleBtn i {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-direction: row-reverse;
   
}
.toggleBtn.changeIcon i:nth-of-type(2) {
    display: block;
    display: flex;
    flex-direction: row-reverse;
}
.changeIcon i:nth-of-type(1) {
    display: none;
}
.changeIcon i:nth-of-type(2) {
    display: block;
}

سلام استاد

من پروژه ی اول رو انجام دادم. میدونم کدای جاوا اسکریپت رو میتونستم منظم تر بنویسم ولی میخواستم برای خودم مدلای مختلف کد نویسی رو امتحان و تمرین کنم به همین خاطر میتونست بهتر کد زده بشه ولی به هر حال نتیجه درست در اومد.

const darkModeBtn = document.querySelector(".darkMode");
const paragraph = document.querySelector(".paragraph");

darkModeBtn.addEventListener("click",()=> {
    document.body.classList.add("darkBg");
    paragraph.style.color = "whitesmoke";
});

const lightMode = document.querySelector(".lightMode");

lightMode.onclick = function(){
    document.body.classList.remove("darkBg");
    paragraph.style.color = "black";
}

const body = document.body;
const toggleBtn = document.querySelector(".toggleBtn");

toggleBtn.addEventListener("click",function(){
    body.classList.toggle("darkBg");
    paragraph.classList.toggle("pColor");
    toggleBtn.classList.toggle("changeIcon");
});