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

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

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

آسان 918/ دانلود 108 بازدید

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

3 جواب

نمیتونم این تمرین رو حل کنم! 
<!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 دانلود JavaScript 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>
کاربر 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>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 دانلود HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

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

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

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن