Front-End
افزودن تمرین جدید
JavaScript
HTML & CSS
Python
Java
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تغییر رنگ پس زمینه</title>
</head>
<body>
<select id="colorSelect">
<option value="green">سبز</option>
<option value="red">قرمز</option>
<option value="blue">آبی</option>
<option value="white">سفید</option>
<option value="black">مشکی</option>
</select>
<script>
document.getElementById('colorSelect').addEventListener('change', function() {
document.body.style.backgroundColor = this.value;
});
</script>
</body>
</html>
let msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراکlet msg = 'error' alert(msg)این جواب فقط برای مشترکین ویژه قابل مشاهده است
برای مشاهده این جواب باید اشتراک داشته باشی
دریافت اشتراک<!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>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو
😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و
یواش یواش به سراغ تمرینات سخت تر بری.
همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری