Live Editor

HTML CSS Javascript

body {
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    height: 100vh;
}

.main {
    height: 400px;
    width: 250px;
    background: #333;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: verdana;
}

#box {
    height: 40px;
    width: 80%;
    border: none;
    outline: none;
    outline: none;
    border-radius: 50px;
    text-align: center;
}

/* CSS property for slider */
input[type="range"] {
    -webkit-appearance: none;
    height: 10px;
    width: 80%;
    border-radius: 50px;
    outline: none;
}

/* CSS property for slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

.main #red {
    background: linear-gradient(90deg, #000, red);
}

.main #green {
    background: linear-gradient(90deg, #000, green);
}

.main #blue {
    background: linear-gradient(90deg, #000, blue);
}

function myColour() {

// Get the value of red color
    var red = document.getElementById('red').value;

// Get the value of green color
    var green = document.getElementById('green').value;

// Get the value of blue color
    var blue = document.getElementById('blue').value;

// rgb() function is used to create the color
    // from red, green and blue values
    var colour = 'rgb(' + red + ',' + green + ',' + blue + ')';

// Change background colour with the 
    // color obtained by rgb function
    document.body.style.backgroundColor = colour;

// Set the obtained rgb() colour code in the
    // input text field having id=box  
    document.getElementById('box').value = colour;

}

// On changing red range slider myColour()
// function is called  
document.getElementById('red')
    .addEventListener('input', myColour);

// On changing green range slider myColour()
// function is called
document.getElementById('green')
    .addEventListener('input', myColour);

// On changing blue range slider myColour()
// function is called
document.getElementById('blue')
    .addEventListener('input', myColour);

.disJs{display:flex;justify-content:flex-end;align-items:flex-end;position:fixed;top:20px;left:0;right:0;z-index:99;max-width:640px;border-radius:5px;margin:auto;padding:15px 10px;background:#ffdfdf;font-size:14px;font-weight:bold;color:#000;box-shadow:0 10px 20px -10px rgba(0,0,0,.1);} .disJs::before{content:attr(data-text);padding:5px 10px;flex-grow:1} .disJs label{flex-shrink:0;padding:5px 10px} .disJs label::after{content:'\2715';line-height:18px} .disJsI:checked ~ .disJs{display:none} @media screen and (max-width:640px){.disJs{top:0;border-radius:0}}

Yorum Gönder

Serkan Gündoğdu

HTML, CSS ve JavaScript ile Renk Kodlama Aracı

Live Editor

Yorumlar

Yorum Gönder