CodeSolved

Solved Programming Questions & Exercises

Backdrop discolor

Practice Easy 918/ Download 1900 Views

Write a program using JavaScript so that the user can choose between green, red, blue, white and black and change the background to that color by selecting each color.

10 Answers

from tkinter import *

win = Tk()
win.title("bkagtround")
win.geometry("400x400")
win.resizable(False,False)
win.config(background='white')

def click(color):
    win.config(background=color)

win_btn1 = Button(win,font=('arial',19),bg="green",fg = 'red',width=5,command=lambda: click('green'))
win_btn2 = Button(win,font=('arial',19),bg="red",fg = 'red',width=5,command=lambda: click('red'))
win_btn3 = Button(win,font=('arial',19),bg="blue",fg = 'red',width=5,command=lambda:click('blue'))
win_btn4 = Button(win,font=('arial',19),bg="white",fg = 'red',width=5,command=lambda:click('white'))
win_btn5 = Button(win,font=('arial',19),bg="black",fg = 'red',width=5,command=lambda:click('black'))

win_btn1.grid(row=0,column=0)
win_btn2.grid(row=0,column=1)
win_btn3.grid(row=0,column=2)
win_btn4.grid(row=0,column=3)
win_btn5.grid(row=0,column=4)

win.mainloop()
Sumy.amiri Download Python

Hi, don't be tired of course I wrote this with Python because I worked with JavaScript. Sumy.amiri 

<!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 {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        select {
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>

    <h1>انتخاب رنگ پس زمینه</h1>
    <select id="colorSelector">
        <option value="">یک رنگ انتخاب کنید</option>
        <option value="green">سبز</option>
        <option value="red">قرمز</option>
        <option value="blue">آبی</option>
        <option value="white">سفید</option>
        <option value="black">مشکی</option>
    </select>

    <script>
        const colorSelector = document.getElementById('colorSelector');

        colorSelector.addEventListener('change', function() {
            const selectedColor = colorSelector.value;
            if (selectedColor) {
                document.body.style.backgroundColor = selectedColor;
            }
        });
    </script>

</body>
</html>
Mma123 Download JavaScript HTML & CSS 
const btnColor = [
    {
        text: "قرمز",
        color: "red",
    },
    {
        text: "آبی",
        color: "blue",
    },
    {
        text: "مشکی",
        color: "black",
    },
    {
        text: "سفید",
        color: "white",
    },
];

function App() {
    const background = (color) => {
        document.body.style.backgroundColor = color;
    };
    return (
        <>
            {btnColor.map((item, index) => (
                <button key={index + 1} onClick={() => background(item.color)}>
                    {item.text}
                </button>
            ))}
        </>
    );
}
export default App;
Kristis Download 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 Download 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 Download 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 Download 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 Download 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 Download 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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            border: 0;
            outline: 0;
        }

        .wrapper-btn {
            width: 60%;
            margin: 20px auto;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            height: 200px;
            background-color: #efefef;
        }

        .wrapper-btn button {
            padding: 1rem 2rem;
            font-weight: 700;
            font-size: 20px;
            border-radius: 5px;
            color: #fff;
        }

        #blue {
            background-color: #2b2bf3;
        }

        #red {
            background-color: #f74c4c;
        }

        #green {
            background-color: #3af046;
        }

        #white {
            color: #000;
            background-color: #fff;
        }

        #black {
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="wrapper-btn">
        <button id="blue" data-color="#2b2bf3">blue</button>
        <button id="red" data-color="#f74c4c">red</button>
        <button id="green" data-color="#3af046">green</button>
        <button id="white" data-color="#fff">white</button>
        <button id="black" data-color="#000">black</button>
    </div>
    <script>
        const wrapperBtn=document.querySelector('.wrapper-btn')
        wrapperBtn.addEventListener('click',e=>{
            if(e.target.tagName==='BUTTON'){
                const color=e.target.dataset.color
                document.body.style.background=color
            }
        })
    </script>
</body>

</html>
Mohadese.m Download HTML & CSS 
package Tax.App;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Star extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        Pane root = new Pane();

        Button buttonB = createButton("Blue", "#0034ff", 20,root);
        Button buttonG = createButton("Green", "#0ee847", 150,root);
        Button buttonP = createButton("Pink", "#e80ee4", 250,root);
        root.getChildren().addAll(buttonB, buttonG, buttonP);

        Scene scene = new Scene(root, 500, 500);
        stage.setScene(scene);
        stage.setTitle("Star");
        stage.show();

        root.requestFocus();
        scene.setOnMouseClicked(mouseEvent -> root.requestFocus());
    }

    private Button createButton(String text, String color, double layoutY,Pane pane) {
        Button button = new Button(text);
        button.setStyle("-fx-background-color: " + color);
        button.setPrefHeight(50);
        button.setPrefWidth(100);
        button.setLayoutX(200);
        button.setLayoutY(layoutY);
        button.setOnAction(event -> pane.setStyle("-fx-background-color: " + color));

        return button;
    }
}
Tahabx3 Download Java

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

Account

You must be logged in to access this section.

Login/Sign up
×

I can't solve this exercise 😞

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.

Close