با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و با انتخاب هر رنگ، پس زمینه به آن رنگ تغییر پیدا کند
let msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراک
Front-End
تمرین جدید
Python
تحلیل جواب با AI
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
HTML & CSS - اچ تی ام ال و سی اس اس
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!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{
text-align: center;
padding: 50px;
}
select{
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<select onchange="changBackgraund(this.value)">
<option value="#ffcccc">red</option>
<option value="#ccffcc">green</option>
<option value="#ccccff">blue</option>
<option value="#ffffff">waite</option>
<option value="#000000">black</option>
</select>
<script>
let changBackgraund=(color)=>{
document.body.style.backgroundColor=color
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Change-Color</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.note{
font-family: sans-serif , Arial;
font-size: 2rem;
font-weight: bold;
border: 4px solid black;
border-radius: 10px;
text-shadow: 5px 5px 8px #66e666;
margin: 100px;
padding: 20px;
}
.color{
text-align: center;
width: 150px;
height: 50px;
padding: 5px;
font-family: sans-serif , Arial;
font-weight: bolder;
text-shadow: 5px 5px 8px #66e666;
border: 5px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="note">
<h1>please pick color</h1>
</div>
<div>
<select class="color">
<option value="white">White</option>
<option value="crimson">Crimson</option>
<option value="forestgreen">Forestgreen</option>
<option value="dodgerblue">Dodgerblue</option>
<option value="aqua">Aqua</option>
<option value="gray">Gray</option>
<option value="chocolate">Chocolate</option>
<option value="goldenrod">Goldenrod</option>
</select>
</div>
<script>
const grabColor = document.querySelector(".color");
grabColor.addEventListener('change' , function (){
const selectedColor = grabColor.value;
grabColor.style.backgroundColor = selectedColor;
if (selectedColor){
document.body.style.backgroundColor = selectedColor;
}
});
</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>Practice</title>
<style>
.color {
width: 100px;
height: 100px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
#white {
background-color: white;
}
#black {
background-color: black;
}
</style>
</head>
<body id="bg">
<h1>Practices</h1>
<p>Select a color :</p>
<div id="red" class="color"> red </div>
<div id="green" class="color"> green </div>
<div id="blue" class="color"> blue </div>
<div id="white" class="color"> white </div>
<div id="black" class="color"> black </div>
<script>
document.getElementById("red").addEventListener("click",() => {
document.getElementById("bg").style.backgroundColor = "red"
})
document.getElementById("green").addEventListener("click",() => {
document.getElementById("bg").style.backgroundColor = "green"
})
document.getElementById("blue").addEventListener("click",() => {
document.getElementById("bg").style.backgroundColor = "blue"
})
document.getElementById("white").addEventListener("click",() => {
document.getElementById("bg").style.backgroundColor = "white"
})
document.getElementById("black").addEventListener("click",() => {
document.getElementById("bg").style.backgroundColor = "black"
})
</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>BOM</title>
</head>
<body>
<select id="changeColor">
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value=""></option>
</select>
<button id="submitBtn">ثبت انتخاب</button>
<script>
const bgcolorchange = document.getElementById("changeColor");
const submitBtn = document.getElementById("submitBtn");
const body = document.body;
bgcolorchange.addEventListener("change", function () {
const selectedColor = this.value;
if (selectedColor === "blue") {
body.style.backgroundColor = "blue";
}
});
submitBtn.addEventListener("click", function () {
const selectedValue = bgcolorchange.value;
if (selectedValue === "blue") {
body.style.backgroundColor = "blue";
} else if (selectedValue === "green") {
body.style.backgroundColor = "green";
} else if (selectedValue === "black") {
body.style.backgroundColor = "black";
}
});
</script>
</body>
</html>
package opp;
import java.util.Scanner;
public class changecolor {
public static void print(Object message) {
System.out.println(message);
}
public static final String RESET = "\u001B[0m";
public static final String BG_BLACK = "\u001B[40m";
public static final String BG_RED = "\u001B[41m";
public static final String BG_GREEN = "\u001B[42m";
public static final String BG_YELLOW = "\u001B[43m";
public static final String BG_BLUE = "\u001B[44m";
public static final String BG_PURPLE = "\u001B[45m";
public static final String BG_CYAN = "\u001B[46m";
public static final String BG_WHITE = "\u001B[47m";
public static void main(String[] args) {
Scanner sc = new Scanner(System.in);
System.out.println("For change color :"
+ "\n1-blue" + "\n2-red" + "\n3-yellow\nPlease Enter the number:");
int x = sc.nextInt();
if(x==1) {
print(BG_BLUE + "Changed background color to blue");
}else if(x==2) {
print(BG_RED + "Changed background color to red");
}else if(x==3) {
print(BG_YELLOW + "Changed background color to yellow");
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Color Changer</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
transition: background-color 0.5s ease;
background-color: #f0f0f0;
}
.container {
background-color: rgba(255, 255, 255, 0.8);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
select {
padding: 12px;
font-size: 18px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
cursor: pointer;
margin-bottom: 20px;
width: 200px;
transition: all 0.3s ease;
}
select:hover {
border-color: #888;
}
select:focus {
border-color: #555;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.color-preview {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 20px auto;
border: 3px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.color-name {
font-size: 1.2em;
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Interactive Color Changer</h1>
<select id="colorChange">
<option value="">Choose a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="purple">Purple</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
<div class="color-preview"></div>
<div class="color-name"></div>
</div>
<script>
const color = document.getElementById("colorChange");
const header = document.querySelector("h1");
const container = document.querySelector(".container");
const colorPreview = document.querySelector(".color-preview");
const colorName = document.querySelector(".color-name");
color.addEventListener("change", () => {
const selectColor = color.value;
if (selectColor) {
document.body.style.backgroundColor = selectColor;
colorPreview.style.backgroundColor = selectColor;
colorName.textContent =
selectColor.charAt(0).toUpperCase() + selectColor.slice(1);
const isDark = ["blue", "purple"].includes(selectColor);
header.style.color = isDark ? "white" : "black";
container.style.backgroundColor = isDark
? "rgba(255, 255, 255, 0.9)"
: "rgba(255, 255, 255, 0.8)";
colorName.style.color = isDark ? "white" : "black";
} else {
document.body.style.backgroundColor = "#f0f0f0";
colorPreview.style.backgroundColor = "transparent";
colorName.textContent = "";
header.style.color = "#333";
container.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
}
});
</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>Color Changer</title>
<style>
section{
display: flex;
flex-direction: column-reverse;
width: 380px;
margin: auto;
background: #a09c85;
border-radius: 40px;
border-bottom-left-radius: 5px;
border: 3px dashed #5c5c5c;
box-shadow: inset 2px 2px 0px #e5d267,inset -2px -2px 0px #e5d267;
}
h1{
width: 260px;
color: #5c5c5c;
margin: 5px 5px;
background-color: beige;
border-radius: 20px 20px 20px 5px;
}
#cards {
display: flex;
width: 350px;
height: 120px;
margin: 10px auto;
border-radius: 15px;
overflow: hidden;
}
.child {
flex-basis: 20%;
transition: flex-basis .1s;
}
.child:hover{
flex-basis: 30%;
}
</style>
</head>
<body>
<section>
<h1>Change your background</h1>
<div id="cards">
<div class="child" onclick="changeColor('#344e41')" style="background:#344e41 ;"></div>
<div class="child" onclick="changeColor('#c1121f')" style="background:#c1121f ;"></div>
<div class="child" onclick="changeColor('#1d3557')" style="background:#1d3557 ;"></div>
<div class="child" onclick="changeColor('#f2f4f3')" style="background:#f2f4f3 ;"></div>
<div class="child" onclick="changeColor('#0a0908')" style="background:#0a0908 ;"></div>
</div>
</section>
<script>
function changeColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام