Created
April 7, 2018 11:24
-
-
Save 2jiwon/ddcd6bca5b078b70a990dcaa5cc01287 to your computer and use it in GitHub Desktop.
Background Generator
This file contains hidden or 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 id="gradient"> | |
| <h1>Background Generator</h1> | |
| <h2>Pick Colors</h2> | |
| <input class="button color1" type="color" name="color1" value="#ffffff"> | |
| <input class="button color2" type="color" name="color2" value="#0086a0"> | |
| <h2>Current CSS Background</h2> | |
| <div class="group1"> | |
| <div class="colorValue" type="text" id="colorValue"></div> | |
| </div> | |
| <div class="group1"> | |
| <button class="btn-copy" type="button">Copy</button> | |
| </div> | |
| <h2>Random CSS Background</h2> | |
| <button class="button" type="button" id="button1">Color1</button> | |
| <button class="button" type="button" id="button2">Color2</button> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> |
This file contains hidden or 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
| var css = document.querySelector (".colorValue"); | |
| var color1 = document.querySelector (".color1"); | |
| var color2 = document.querySelector (".color2"); | |
| var body = document.getElementById ("gradient"); | |
| setGradient (); | |
| function setGradient () { | |
| body.style.background = "linear-gradient(to right, " | |
| + color1.value + ", " | |
| + color2.value + ")"; | |
| css.textContent = body.style.background + ";"; | |
| } | |
| color1.addEventListener ("input", setGradient); | |
| color2.addEventListener ("input", setGradient); | |
| function randomColor () { | |
| var x = Math.round (0xffffff * Math.random()).toString(16); | |
| var y = (6 - x.length); | |
| var z = "000000"; | |
| z = z.substring (0, y); | |
| var rColor = "#" + z + x; | |
| return rColor; | |
| } | |
| function setRandomGradient (element1, element2) { | |
| element1.value = randomColor(); | |
| element2.style.background = element1.value; | |
| setGradient (); | |
| } | |
| var button1 = document.getElementById ("button1"); | |
| var button2 = document.getElementById ("button2"); | |
| button1.addEventListener ("click", function () { | |
| setRandomGradient (color1, button1); | |
| }) | |
| button2.addEventListener ("click", function () { | |
| setRandomGradient (color2, button2); | |
| }) | |
| function selectElementText (element) { | |
| var range = document.createRange (); | |
| range.selectNodeContents (element); | |
| var selection = window.getSelection (); | |
| selection.removeAllRanges (); | |
| selection.addRange (range); | |
| } | |
| var btnCopy = document.querySelector (".btn-copy"); | |
| btnCopy.addEventListener ("click", function () { | |
| selectElementText (css); | |
| document.execCommand ("copy"); | |
| }); |
This file contains hidden or 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 { | |
| font: 'Raleway', sans-serif; | |
| color: rgba(0,0,0,.5); | |
| text-align: center; | |
| text-transform: uppercase; | |
| letter-spacing: .5em; | |
| top: 15%; | |
| } | |
| h1 { | |
| font: 600 3.5em 'Raleway', sans-serif; | |
| color: rgba(0,0,0,.5); | |
| text-align: center; | |
| text-transform: .5em; | |
| width: 100%; | |
| } | |
| h3 { | |
| font: 900 1em 'Raleway', sans-serif; | |
| color: rgba(0,0,0,.5); | |
| text-align: center; | |
| text-transform: none; | |
| letter-spacing: 0.01em; | |
| } | |
| .button { | |
| width: 100px; | |
| height: 40px; | |
| border: 2px solid light-grey; | |
| color: black; | |
| } | |
| .colorValue { | |
| font: 0.8em 'Arial', sans-serif; | |
| color: rgba(0,0,0,.5); | |
| text-align: center; | |
| letter-spacing: 0.01em; | |
| border-radius: 10px; | |
| border: 1px solid grey; | |
| padding: 5px; | |
| background-color: white; | |
| } | |
| .btn-copy { | |
| border-radius: 10px; | |
| border: none; | |
| } | |
| .color1, .color2 { | |
| width: 80px; | |
| height: 30px; | |
| } | |
| .group1 { | |
| height: 30px; | |
| padding: 5px; | |
| vertical-align: middle; | |
| display: inline-flex; | |
| justify-content: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment