تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

سوالات کاربران تمرین ها کوئیزها

تغییر رنگ بک گراند

تمرین آسان 2628 بازدید 918/ دانلود

با استفاده از جاوااسکریپت برنامه ای بنویسید که کاربر بتواند از بین رنگ های سبز، قرمز، آبی، سفید و مشکی یک رنگ را انتخاب کرده و با انتخاب هر رنگ، پس زمینه به آن رنگ تغییر پیدا کند

👨‍💻 3 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد
🔥 10 ساعت قبل Shayan.fm جواب جدیدی برای این تمرین ارسال کرد
👨‍💻 5 ساعت قبل Shayan.fm این تمرین رو مشاهده کرد
تمرین جدید

14 جواب

مرتب سازی
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Sumy.amiri Python
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Mma123 JavaScript HTML & CSS
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg)
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
Kristis JavaScript 
<!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>
Maryam.n HTML & CSS 
<!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>
User 271 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>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>
Programmer 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>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>
User 4497 JavaScript HTML & CSS 
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"); 
		}
	}
}
Makcode Java 
<!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>
User 112 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>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>
Unun..ali..nunu JavaScript HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن