homework/Крутилка/main.js

function Control(
    el,
    {
        value = 10,
        min = 0,
        max = 100,
        minAngle = -90,
        maxAngle = 90,
        wheelSpeed = 0.1,
        step = 1,
    } = {}
) {
    const img = document.createElement("img");
    img.src = "1@3x.png";
    el.append(img);


    const ratio = (maxAngle - minAngle) / (max - min); //цена единицы value в градусах
    const getAngle = () => (value - min) * ratio + minAngle; //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу

    this.setValue = (newValue) => {
        if (newValue < min) {
            newValue = min;
        }

        if (newValue > max) {
            newValue = max;
        }

        value = newValue;

        if (typeof this.onchange === "function") {
            this.onchange(value);
        }

        img.style.transform = `rotate(${getAngle()}deg)`;
    };

    this.getValue = () => value;

    img.onmousewheel = (e) => {
        const { deltaY } = e;
        e.preventDefault();
        this.setValue(value + deltaY * wheelSpeed);
    };

    img.onclick = (e) => {
        const { layerX } = e;
        console.log(e, layerX);
        if (layerX > img.width / 2) this.setValue(value + step);
        else this.setValue(value - step);
    };

    this.setValue(value);
};

let a, b, c;

function setRGB() {
    a = red.getValue();
    b = green.getValue();
    c = blue.getValue();

    let rgbDone = (div.style.background = `rgb(${a}, ${b}, ${c})`);
    return console.log(rgbDone);
};

const red = new Control(colorbox, { min: 0, max: 255 });
red.onchange = setRGB;

const green = new Control(colorbox, { min: 0, max: 255 });
green.onchange = setRGB;

const blue = new Control(colorbox, { min: 0, max: 255 });
blue.onchange = setRGB;

const volumeControl = new Control(colorbox, { value: 50 });
volumeControl.onchange = (value) => {
    audio.volume = value / 100;
    console.log("ON CHANGE", value);
};

const audio = document.createElement("audio");
audio.setAttribute("controls", "");
audio.src = "Рингтон Доброго Вечора Ми З України - Probass X Hardi - mp36ka_net.mp3"; // путь к файлу могу не правильно указать, путаюсь
audio.style.marginLeft = "200px";
document.body.append(audio);

const div = document.createElement("div");
div.style.width = "725px";
div.style.height = "800px";
div.style.position = "relative";
div.style.bottom = "800px"
div.style.zIndex = "-1"

document.body.append(div);