Last active
October 3, 2015 00:40
-
-
Save mwiegant/38b60c3a434fa81f4d1d to your computer and use it in GitHub Desktop.
A simple html Color Panel, built for teaching a friend about web development
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <title>Color Panel Display</title> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| <script src="panel.js"></script> | |
| </head> | |
| <body> | |
| <div class="con"> | |
| <span class="panel" id="panel"></span> | |
| <br> | |
| <div class="hex-value"> | |
| <label>Your Hex Value Is: </label> | |
| <label class="hex-value" id="hash"><label> | |
| </div> | |
| <br> | |
| <div class="panel"> | |
| <button onclick="subtract(50, 'red')"> -50 </button> | |
| <button onclick="subtract(10, 'red')"> -10 </button> | |
| <button onclick="subtract(1, 'red')"> -1 </button> | |
| <input class="number red" id="red"> | |
| <button onclick="add(1, 'red')"> +1 </button> | |
| <button onclick="add(10, 'red')"> +10 </button> | |
| <button onclick="add(50, 'red')"> +50 </button> | |
| </div> | |
| <br><br> | |
| <div class="panel"> | |
| <button onclick="subtract(50, 'green')"> -50 </button> | |
| <button onclick="subtract(10, 'green')"> -10 </button> | |
| <button onclick="subtract(1, 'green')"> -1 </button> | |
| <input class="number green" id="green"> | |
| <button onclick="add(1, 'green')"> +1 </button> | |
| <button onclick="add(10, 'green')"> +10 </button> | |
| <button onclick="add(50, 'green')"> +50 </button> | |
| </div> | |
| <br><br> | |
| <div class="panel"> | |
| <button onclick="subtract(50, 'blue')"> -50 </button> | |
| <button onclick="subtract(10, 'blue')"> -10 </button> | |
| <button onclick="subtract(1, 'blue')"> -1 </button> | |
| <input class="number blue" id="blue"> | |
| <button onclick="add(1, 'blue')"> +1 </button> | |
| <button onclick="add(10, 'blue')"> +10 </button> | |
| <button onclick="add(50, 'blue')"> +50 </button> | |
| </div> | |
| </div> | |
| </body> | |
| <!-- This project built by Demencio LaFluer and Max Wiegant --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Call init function when document finishes loading | |
| var readyStateCheckInterval = setInterval(function() { | |
| if (document.readyState === "complete") { | |
| init(); | |
| clearInterval(readyStateCheckInterval); | |
| } | |
| }, 10); | |
| function toHexValue(red, green, blue) { | |
| var hexr = red.toString(16); // this is the conversion from decimal(base 10) to hexadecimal(base 16) | |
| var hexg = green.toString(16); | |
| var hexb = blue.toString(16); | |
| // check the length of the hex values | |
| if( red < 16) { | |
| hexr = '0' + hexr; | |
| } | |
| if( green < 16) { | |
| hexg = '0' + hexg; | |
| } | |
| if( blue < 16) { | |
| hexb = '0' + hexb; | |
| } | |
| return ("#" + hexr + hexg + hexb); | |
| } | |
| function refreshPanel() { | |
| var red = parseInt( document.getElementById("red").value ); | |
| var green = parseInt( document.getElementById("green").value ); | |
| var blue = parseInt( document.getElementById("blue").value ); | |
| var panel = document.getElementById("panel"); | |
| panel.style.backgroundColor = toHexValue(red, green, blue); | |
| } | |
| function add(amount, id) { | |
| // get the value from the element | |
| var value = document.getElementById(id).value; | |
| value = parseInt(value); | |
| // increment the value | |
| value += amount; | |
| // check if the value is too high or too low | |
| if(value > 255) { | |
| value = 255; | |
| } | |
| else if(value < 0) { | |
| value = 0; | |
| } | |
| // put the value back into the element | |
| document.getElementById(id).value = value.toString(); | |
| // refresh the panel | |
| refreshPanel(); | |
| } | |
| function subtract(amount, id) { | |
| // get the value from the element | |
| var value = document.getElementById(id).value; | |
| value = parseInt(value); | |
| // decrement the value | |
| value -= amount; | |
| // check if the value is too high or too low | |
| if(value > 255) { | |
| value = 255; | |
| } | |
| else if(value < 0) { | |
| value = 0; | |
| } | |
| // put the value back into the element | |
| document.getElementById(id).value = value.toString(); | |
| // refresh the panel | |
| refreshPanel(); | |
| } | |
| function init() { | |
| // set default RGB values between 0 and 255 | |
| var red, green, blue; | |
| red = 240; | |
| green = 24; | |
| blue = 49; | |
| // assign values to the input fields | |
| document.getElementById("red").value = red; | |
| document.getElementById("green").value = green; | |
| document.getElementById("blue").value = blue; | |
| // set the color on the panel so it matches our RGB (Hex) value | |
| refreshPanel(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin-top: 7%; | |
| margin-left: 10%; | |
| } | |
| /* Div & Span Styles */ | |
| div.con { | |
| width: 300px; | |
| margin-left: 30px; | |
| padding: 60px 10px 10px 10px; | |
| border: 1px solid grey; | |
| } | |
| div.hex-value { | |
| margin: 0 0 15px 45px; | |
| } | |
| label.hex-value { | |
| font-size: 18px; | |
| } | |
| span.panel { | |
| width: 200px; | |
| height: 150px; | |
| margin: 0 auto 0 auto; | |
| display: block; | |
| background-color: grey; | |
| } | |
| /* Input Styles */ | |
| input.number { | |
| width: 50px; | |
| height: 25px; | |
| display: inline-block; | |
| font-size: 16px; | |
| text-align: center; | |
| } | |
| input.red { | |
| color: red; | |
| } | |
| input.green { | |
| color: green; | |
| } | |
| input.blue { | |
| color: blue; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment