Pocu
/
Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Другой тайтл ПРИВЕТ 17й</title>
    <style>
    </style>
</head>

<body>
    <h1 id='title'></h1>
    <div id='container1'></div>
    <div id='container2'></div>
    <script>
        function Control(el, (value=0, max=100, step=1, minAngle=0, maxAngle=0)={}) {
            const img = document.createElement('img')
            img.src = '1@3x.png'
            el.append(img)

            const ratio = (maxAngle - minAngle) / (max - min)

            const value2Deg = v => ratio * (value - min) + minAngle

            const setValue = newValue => {
                value = newValue;
                if(newValue >= max || newValue <= min) {
                    return
                }
                img.style.transform = 'rotate(deg)';
            }
            setValue(value);
            img.onclick = () => {
                setValue(value + step)
            }
        }

        const volumeControl = new Control(container1) {value: 50}
        const balanceControl = new Control(container2) {maxAngle: 180, minAngle: 0, min: -50, max: 50}
    </script>
</body>