diff --git a/Random-Color-Code-Generator/1.png b/Random-Color-Code-Generator/1.png new file mode 100644 index 000000000..e50594a1c Binary files /dev/null and b/Random-Color-Code-Generator/1.png differ diff --git a/Random-Color-Code-Generator/2.png b/Random-Color-Code-Generator/2.png new file mode 100644 index 000000000..c701bc0af Binary files /dev/null and b/Random-Color-Code-Generator/2.png differ diff --git a/Random-Color-Code-Generator/Readme.md b/Random-Color-Code-Generator/Readme.md new file mode 100644 index 000000000..f71ff8e2e --- /dev/null +++ b/Random-Color-Code-Generator/Readme.md @@ -0,0 +1,5 @@ +# The-Random-Color-Generator +This is a JS project that generates random colour. + + ## Tutorial Links to follow:- + ### Git and Github \ No newline at end of file diff --git a/Random-Color-Code-Generator/index.html b/Random-Color-Code-Generator/index.html new file mode 100644 index 000000000..e6e209c54 --- /dev/null +++ b/Random-Color-Code-Generator/index.html @@ -0,0 +1,27 @@ + + + + + + + + Random Color Generator + + + + + + +
+

The Color Generator

+
+ +
+ + +
+ +
+
+ + \ No newline at end of file diff --git a/Random-Color-Code-Generator/index.js b/Random-Color-Code-Generator/index.js new file mode 100644 index 000000000..8352f8620 --- /dev/null +++ b/Random-Color-Code-Generator/index.js @@ -0,0 +1,20 @@ +let outputColor = document.querySelector("#output-color span"); +let output = document.getElementById("output"); +let genBtn = document.getElementById("gen-btn"); + +let hexString = "0123456789abcdef"; + +let genHexCode = () => { + let hexCode = "#"; + for( i = 0; i < 6; i++){ + hexCode += hexString[Math.floor(Math.random() * hexString.length)]; + } + output.value = hexCode; + outputColor.classList.remove("show-color"); + setTimeout( () => { + outputColor.classList.add("show-color"); + },10); + outputColor.style.backgroundColor = hexCode; +} +window.onload = genHexCode; +genBtn.addEventListener("click", genHexCode); diff --git a/Random-Color-Code-Generator/style.css b/Random-Color-Code-Generator/style.css new file mode 100644 index 000000000..94ac8b83f --- /dev/null +++ b/Random-Color-Code-Generator/style.css @@ -0,0 +1,96 @@ + *{ + padding: 0; + margin: 0; + box-sizing: border-box; + border: none; + outline: none; + font-family: sans-serif; +} +body{ + background-color: #b3c1ad; +} +.container{ + background-color: white; + width: 310px; + padding: 2.5em 1.1em; + position: absolute; + transform: translate(-50%,-50%); + top: 50%; + left: 50%; + font-size: 16px; + border-radius: 10px; +} +.container h1{ + font-size: 27px; + text-align: center; + margin-top: -20px; + color: #09599a; + margin-bottom: 20px; +} +#output-color{ + position: relative; + height: 165px; + width: 100%; + box-shadow: 0 0 20px rgba(0,139,253,0.25); + border: 2px solid #ffffff; + margin: auto; + display: grid; + margin-bottom: 15px; + place-items: center; +} +#output-color span{ + display: block; + width: 100%; + height: 100%; + +} +.show-color{ + animation: pop 0.8s; +} +@keyframes pop{ + 0%{ + transform: scale(0); + } + 100%{ + transform: scale(1); + } +} + +input[type="text"]{ + width: 100%; + background-color: transparent; + + box-shadow: 0 0 20px rgba(0,139,253,0.65); + font-size: 1.3em; + padding: 0.3em 0; + + margin: 1em 0; + border-radius: 5px; + color: #000000; + text-align: center; +} +input[type="text"]::-moz-selection{ + background: transparent; +} +input[type="text"]::selection{ + background: transparent; +} + +.btns{ + display: flex; + margin-top: 15px; + justify-content: space-around; +} +.btns button{ + font-size: 1.03em; + padding: 0.8em 1.7em; + border-radius: 7px; + width: 120px; + font-weight: 600; + cursor: pointer; +} +#gen-btn{ + background-color: #205e94; + color: #ffffff; + border-radius: 30px; +}