codepediair/index.html

## index.html
<head>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="container" dir="rtl">
        برنامه نویسی خوب کسی است که <span class="spoiler">بیشتر یاد میگیرد </span>

    </div>
    <script src="./script.js"></script>
</body>

## main.css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@900&display=swap');
body{
    background-color: #1D1D2C;
    font-family: 'Noto Sans Arabic', sans-serif;
    font-size: 24px;
}
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#F7F4E9;
    margin: auto;
    width: 100%;
    padding: 10px;
}
.spoiler {
    color: #EBA63F;
    background-color: #EBA63F;
    border-radius: 2px;
    user-select: none;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .spoiler:hover {
    cursor: default;
  }

  .spoiler-hover:hover, .spoiler-shown {
    color: #1D1D2C;
    background-color: #3CBCC3;
  }

## script.js
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".spoiler")
      .forEach(item => {
        item.onclick = () => {
          if (item.classList.contains("spoiler-shown"))
            item.classList.remove("spoiler-shown");
          else
            item.classList.add("spoiler-shown");
        };
      });
  }, false);
	<head>
	<link rel="stylesheet" href="./main.css">
	</head>
	<body>
	<div class="container" dir="rtl">
	برنامه نویسی خوب کسی است که <span class="spoiler">بیشتر یاد میگیرد </span>

	</div>
	<script src="./script.js"></script>
	</body>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@900&display=swap');
	body{
	background-color: #1D1D2C;
	font-family: 'Noto Sans Arabic', sans-serif;
	font-size: 24px;
	}
	.container{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#F7F4E9;
	margin: auto;
	width: 100%;
	padding: 10px;
	}
	.spoiler {
	color: #EBA63F;
	background-color: #EBA63F;
	border-radius: 2px;
	user-select: none;
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	}

	.spoiler:hover {
	cursor: default;
	}

	.spoiler-hover:hover, .spoiler-shown {
	color: #1D1D2C;
	background-color: #3CBCC3;
	}
	document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".spoiler")
	.forEach(item => {
	item.onclick = () => {
	if (item.classList.contains("spoiler-shown"))
	item.classList.remove("spoiler-shown");
	else
	item.classList.add("spoiler-shown");
	};
	});
	}, false);