Design a page that has a custom text in the middle of the page(White background color and black text color)
Then design a button to change the page to the night mode when the user clicks it.(In the night mode, the background color of the black and the color of the text is white)
By clicking on the button must return to the day (Lightweight) mode
Front-End
<!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{
padding: 0;
margin: 0;
display: flex;
text-align: center;
flex-direction: column;
}
button{
width: 200px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body id="bod">
<h1>
switch between light mode and night mode
</h1>
<div>
<button onclick="change()">change</button>
</div>
<script>
let change = () => {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
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>Light/Dark Mode Toggle</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white;
color: black;
font-family: Arial, sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
text-align: center;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1 id="text">This is a sample text</h1>
<button id="toggleButton">Switch to Dark Mode</button>
</div>
<script>
const body = document.body;
const toggleButton = document.getElementById("toggleButton");
toggleButton.addEventListener("click", () => {
const isDarkMode = body.style.backgroundColor === "black";
if (isDarkMode) {
body.style.backgroundColor = "white";
body.style.color = "black";
toggleButton.textContent = "Switch to Dark Mode";
} else {
body.style.backgroundColor = "black";
body.style.color = "white";
toggleButton.textContent = "Switch to Light Mode";
}
});
</script>
</body>
</html>
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Toggle</title>
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: background-color 0.8s ease, color 0.8s ease;
}
#h1 {
font-size: 30px;
transition: color 0.8s ease;
}
#button {
background: #2563eb;
border: none;
width: 80px;
height: 40px;
box-sizing: border-box;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 20px;
transition: all 0.8s ease;
}
.icon {
font-size: 40px;
margin: 0;
padding: 0;
transition: color 0.8s ease, text-shadow 0.8s ease;
}
# Dark state
.dark #h1 {
color: white;
}
.dark {
background: black;
}
.dark #moon {
color: white;
text-shadow: 1px 1px 5px white;
}
.dark #sun {
color: #4074e3;
}
# Bright mode
.light #h1 {
color: black;
}
.light {
background: white;
}
.light #moon {
color: #4074e3;
}
.light #sun {
color: rgb(255, 255, 255);
text-shadow: 1px 1px 5px white;
}
</style>
</head>
<body class="light">
<h1 id="h1">hello world</h1>
<button id="button">
<span id="sun" class="icon">☀</span> <!-- نماد خورشید -->
<span id="moon" class="icon">☽</span> <!-- نماد ماه -->
</button>
<script>
document.getElementById('button').addEventListener('click', function() {
const body = document.body;
const isLight = body.classList.contains('light');
if (isLight) {
body.classList.remove('light');
body.classList.add('dark');
} else {
body.classList.remove('dark');
body.classList.add('light');
}
});
</script>
</body>
</html>
<!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 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: white; # The color of the day
color: black; # The color of the text of the day
transition: background-color 0.3s, color 0.3s; # Animation of color change
}
.dark-mode {
background-color: black; # The color of the night
color: white; # The color of the night text
}
.container {
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>متن دلخواه شما در اینجا قرار دارد</h1>
<button id="toggleButton">تغییر به حالت شب</button>
</div>
<script>
const toggleButton = document.getElementById('toggleButton');
let isDarkMode = false;
toggleButton.addEventListener('click', () => {
isDarkMode = !isDarkMode; # Change mode
document.body.classList.toggle('dark-mode', isDarkMode); # Change the body class
toggleButton.textContent = isDarkMode ? 'تغییر به حالت روز' : 'تغییر به حالت شب'; # Change button text
});
</script>
</body>
</html>
Submitting answers is currently unavailable.
Write a program that receives the user's name, age and city and print on output
Python
Write a program that receives an email address and separates the various sections as follows and prints on the output example: email: [email protected] info amirhn.ir Example: email: [email protected] username gmail.com
Python
Write a program that receives the user's username and password and checks whether the username and password entered are correct? Username - Passwordamirhossein - 12345hooshang - 009922 ...
Kotlin
Python
Write a program that receives 2 numbers from the input and prints the larger number
Python
Write a program that prints the number of number multiplying numbers 1 to 10
Java
Python
Write a program that receives a text and a word from the user, search the word in the text, and as the example below and then put the word * and print the text in the output. Example: Input1: Hello. My name is hooshang. I ...
Python
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام If you don’t understand the exercise or can’t solve it for any reason, that’s completely
normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers
submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer
might be correct even if it’s different from others.