I am trying to make a color picker.
function changeCurrentColor() { let mousey = event.clientY; document.getElementById("current-color").style.top = mousey; }
div.main-colors { width: 10px; height: 200px; background-image: linear-gradient(red, orange, yellow, green, blue, purple); } div.current-color { height: 20px; width: 20px; border: black 1px solid; margin-left: -5px; border-radius: 50%; position: absolute; top: 95px; background-color: black; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>color picker</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="main-colors"> <div class="current-color" id="current-color" draggable="true" ondrag="changeCurrentColor()"></div> </div> </div> <script src="app.js"></script> </body> </html>
1.4m articles
1.4m replys
5 comments
57.0k users
