JS: Making a Color Picker from Scratch, part 1: HTML/ CSS

This is what it will look like.
<div class="color-container">
<h3>Color Picker</h3>
<div id="interface"></div>
</div>
.color-container {
display: flex;
flex-flow: column nowrap;
visibility: hidden;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
color: white;
background: rgb(61, 61, 61);
text-align: center;
width: 570px;
height: 366px;
font-family: "04Font";
font-size: 16px;
padding: 0;
align-self: center;
transform: translate(-50%, -50%);
box-shadow:
2px 0px rgb(255, 255, 255),
-2px 0px rgb(255, 255, 255),
0px -2px rgb(255, 255, 255),
0px 2px rgb(255, 255, 255);
}
<div id="interface">
<div id="left">
<div id="picker">
<canvas id="color-picker"></canvas>
<input type="range" id="hue" name="hue" value="255" min="0" max="255">
</div>
<div id="buttons">
<btn>OK</btn>
<btn>Cancel</btn>
</div>
</div>
</div>
#interface {
display: flex;
flex-flow: row nowrap;
height: 300px;
}
#interface #left {
display: flex;
flex-flow: column nowrap;
height: 346px;
}
#interface #left #picker {
display: flex;
flex-flow: row nowrap;
height: 290px;
width: 330px;
}
#color-picker {
background-color: white;
width: 250px;
height: 250px;
margin: 20px;
box-shadow:
2px 0px rgb(131, 131, 131),
-2px 0px rgb(131, 131, 131),
0px -2px rgb(131, 131, 131),
0px 2px rgb(131, 131, 131);
}
#hue {
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
transform: rotate(90deg);
transform-origin: left;
width: 250px;
height: 20px;
margin: 10px;
background: white;
outline: none;
box-shadow:
2px 0px rgb(131, 131, 131),
-2px 0px rgb(131, 131, 131),
0px -2px rgb(131, 131, 131),
0px 2px rgb(131, 131, 131);
}
#hue::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 5px;
outline: 2px solid rgb(0, 0, 0);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Algorithms With JavaScript: Binary Search Tree

A month of React Native: part #2

Local Node.js & JavaScript Keyboard Logger Server & Data Visualization

JavaScript Algorithm: Two Strings

Understanding the JavaScript runtime environment

A diagram that helps visualise the JavaScript runtime environment

How to convert Json file to dart class

Angular CLI under the hood — builders demystified

From Callbacks to Promises to AsyncAwait

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

Pomodoro Technique

Creativity and Code

BASICS OF PROGRAMMING

Journey of DLithe Bootcamp .NET Full Stack Developer | Week 4(April22)