RGB رنگ مورد علاقت رو پیدا کن

10 تیر 1402
برنامه نویسی، کدنویسی
پیدا کردن rgb رنگ

 پیدا کردن RGB رنگ

پیدا کردن RGB رنگ مورد نظر، یک تمرین برای کدنویسی جاوا اسکریپت است. در این آموزش شما با ترکیب رنگ های قرمز، سبز و آبی، RGB رنگ مورد علاقه خود را برای طراحی سایت پیدا می کنید. برای کدنویسی شما نیاز دارید که با html, css, javascript آشنایی داشته باشید. اما اگر آشنایی ندارید ما در این مینی دوره یک توضیح کلی درمورد html, css, javascript می دهیم. در ادامه با لایت کالج همراه باشید:

مراحل ساخت RGB رنگ

برای ساخت RGB رنگ ابتدا یک پوشه با نام دلخواه ایجاد کنید. سپس در پوشه راست کلیک کرده در بخش NEW گزینه Text Document را کلیک کنید. نام Text Document را به index.html تغییر دهید. دو فایل دیگر با نام style.css و script.js با همین روش بسازید. فایل ها را در محیط کدنویسی آپلود کنید.

HTML چیست؟

HTML مخفف Hyper Text Markup Language بوده و در ایران به آن زبان نشانه گذاری می گویند. html یک زبان برنامه نویسی نیست و درواقع یک زبان نشانه گذاری است. شما زمانی که می خواهید ساخت وبسایت را شروع کنید ابتدا باید به سراغ html بروید. html ساختار سایت را برای ما می سازد.

rgb رنگ html

فایل index.html را در محیط کدنویسی انتخاب کنید.

کد های htmlزیر را وارد کنید:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <link rel=”stylesheet” href=”style.css”>
</head>
<body>
    <section id=”mysection”>
        <form action=”#”>
        red: <input type=”range” value=”0″ id=”r-range” min=”0″ max=”255″>
        green: <input type=”range” value=”0″ id=”g-range” min=”0″ max=”255″>
        blue: <inputtype=”range”value=”0″id=”b-range”min=”0″max=”255″>
        </form>
        <hr>
        <div class=”btn”>
            <button class=”mybtn”>RGB color</button>
        </div>
    </section>
    <div class=”mydiv”>
        <form action=”#” id=”myform”>
        <ul id=”myul”>
        </ul>
        </form>
    </div>
  <script src=”1.js”></script>
</body>
</html>
تا این قسمت شما توانستید کد های html را وارد کنید و درواقع ساختار سایت را بسازید.

CSS چیست و چه کاربردی دارد؟

CSS مخفف Cascading Style Sheet است. css برای فرم دهی به تگ های html است و در واقع باعث زیبایی سایت می شود. قطعا قدم بعد اhtm نوبت به css می رسد. درواقع css تکمیل کننده html است.

css در rgb رنگ

حال که درک کرده اید css چه کاربردی دارد فایل style.css را در محیط کدنویسی انتخاب و کد های زیر را در آن وارد کنید:

#mysection{
    background-color: rgba(59, 59, 59, 0.8);
    padding: 10px;
    margin: 250px auto 0 auto;
    width: 400px;
    border-radius: 5px;
}
#mysection input[type=’range’]{
    width: 100%;
}
#mysection .btn{
    width: 100px;
}
#mysection .btn .mybtn{
    padding: 10px;
    border-radius: 3px;
    border: 0;
    font-size: 18px;
    width: 400px;
}
#mysection .btn .mybtn:hover{
    cursor: pointer;
    background-color: #b1b1b1;
}
.mydiv #myul{
    list-style: none;
    padding: 0;
}
.mydiv #myul li{
    font-size: 20px;
    padding: 5px;
    background-color: rgba(59, 59, 59, 0.8);
    margin: 15px auto 0 auto;
    width: 410px;
    height: 25px;
    border-radius: 5px;
    color: #fff;
}
خب حالا که به سایت، css اضافه کردیم نوبت به قسمت اصلی یعنی جاوااسکریپت می رسد.

جاوا اسکریپت چیست؟

javascript یا به اختصار js یک زبان برنامه نویسی محبوب شناخته می شود. جاوا اسکریپت یک زبان داینامیک و شی گرا است. این زبان در حوزه های وب سایت، ساخت بازی، ساخت وب اپلیکیشن استفاده می شود. جاوا اسکریپت باعث می شود که تعامل بین کاربر و صفحات بهتر شکل بگیرد.

فایل script.js را در محیط کد نویسی انتخاب کنید و کدهای زیر را برای rgb رنگ  وارد کنید:

let rrange = document.querySelector(‘#r-range’);
let grange = document.querySelector(‘#g-range’);
let brange = document.querySelector(‘#b-range’);
let btn = document.querySelector(‘.mybtn’);
let body = document.querySelector(‘body’);
let myul = document.querySelector(‘#myul’);
rrange.addEventListener(‘input’ , function(){
    let red = rrange.value;
    let green = grange.value;
    let blue = brange.value;
    body.style.backgroundColor = ‘rgb(‘+red+’ , ‘+green+’ , ‘+blue+’)’
});
grange.addEventListener(‘input’ , function(){
    let red = rrange.value;
    let green = grange.value;
    let blue = brange.value;
    body.style.backgroundColor = ‘rgb(‘+red+’ , ‘+green+’ , ‘+blue+’)’
});
brange.addEventListener(‘input’ , function(){
    let red = rrange.value;
    let green = grange.value;
    let blue = brange.value;
    body.style.backgroundColor = ‘rgb(‘+red+’ , ‘+green+’ , ‘+blue+’)’
});
btn.addEventListener(‘click’ , function(){
    let mybtn = ‘RGB=’ + rrange.value +’,’+ grange.value +’,’+ brange.value ;
    let userTag = document.createElement(‘li’);
    userTag.innerHTML = mybtn;
    let list = document.querySelector(‘#myul’);
    list.appendChild(userTag)
});

بررسی کد جاوا اسکریپت RGB رنگ

شما در ابتدا کد کلاس ها و آیدی هایی که در html نام گذاری کردید را در متغیر جاوا اسکریپت ذخیره می کنید. در ادامه rgb هر رنگ را گرفته و با رنگ های دیگر ترکیب می کند و در نهایت زمانی که شما بر روی دکمه rgb  کلیک کنید، rgb رنگ مورد علاقه شما را نشان می دهد.
امیدوارم از این آموزش لذت برده باشید.

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