Untitled

html 

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zadanie event input</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>
<body>
    <div class="box"></div>
    <hr>
    <input type="range" name="r" id="r" min="0" max="255" value="0">
    <input type="range" name="g" id="g" min="0" max="255" value="0">
    <input type="range" name="b" id="b" min="0" max="255" value="0">
    <hr>
    <input type="range" name="x" id="x" min="-30" max="30" value="0">
    <input type="range" name="y" id="y" min="-30" max="30" value="0">
    <input type="range" name="b" id="b2" min="0" max="30" value="0">
    <input type="range" name="s" id="s" min="-10" max="10" value="0">
</body>
</html>

js

const box = document.querySelector(".box")

const rInput = document.querySelector("#r")
const gInput = document.querySelector("#g")
const bInput = document.querySelector("#b")

const xInput = document.querySelector("#x")
const yInput = document.querySelector("#y")
const blurInput = document.querySelector("#b2")
const sInput = document.querySelector("#s")

rInput.addEventListener("input", e => {

    box.style.background = `rgb(${rInput.value},${gInput.value},${bInput.value})`

})

gInput.addEventListener("input", e => {

    box.style.background = `rgb(${rInput.value},${gInput.value},${bInput.value})`

})

bInput.addEventListener("input", e => {

    box.style.background = `rgb(${rInput.value},${gInput.value},${bInput.value})`

})

xInput.addEventListener("input", e => {

    box.style.boxShadow = `${xInput.value}px ${yInput.value}px ${blurInput.value}px black`

})

yInput.addEventListener("input", e => {

    box.style.boxShadow = `${xInput.value}px ${yInput.value}px ${blurInput.value}px black`

})

blurInput.addEventListener("input", e => {

    box.style.boxShadow = `${xInput.value}px ${yInput.value}px ${blurInput.value}px black`

})

sInput.addEventListener("input", e => {

    box.style.transform = `scale(${1 + sInput.value / 10})`

})

css

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 30px;
    background: #f2f2f2;
}

.box {
    width: 200px;
    height: 200px;
    background: #000;
    margin-bottom: 30px;
    transition: .1s;
}

input[type="range"] {
    width: 300px;
    display: block;
    margin: 10px 0;
}

#r {
    accent-color: red;
}

#g {
    accent-color: green;
}

#b {
    accent-color: blue;
}

#x {
    accent-color: orange;
}

#y {
    accent-color: purple;
}

#b2 {
    accent-color: gray;
}

#s {
    accent-color: hotpink;
}
Editor is loading...