diff --git a/RandomColorGenerator/Arcturus22/Image1.png b/RandomColorGenerator/Arcturus22/Image1.png new file mode 100644 index 000000000..3dd337d95 Binary files /dev/null and b/RandomColorGenerator/Arcturus22/Image1.png differ diff --git a/RandomColorGenerator/Arcturus22/Image2.png b/RandomColorGenerator/Arcturus22/Image2.png new file mode 100644 index 000000000..6340472db Binary files /dev/null and b/RandomColorGenerator/Arcturus22/Image2.png differ diff --git a/RandomColorGenerator/Arcturus22/index.html b/RandomColorGenerator/Arcturus22/index.html new file mode 100644 index 000000000..9b5653590 --- /dev/null +++ b/RandomColorGenerator/Arcturus22/index.html @@ -0,0 +1,33 @@ + + + + + + + + Random Color Generator + + + + + +
+

Random color generator

+
+
+
+

White

+
+ +
+ +
+ +
+ +
+
+ + + + diff --git a/RandomColorGenerator/Arcturus22/index.js b/RandomColorGenerator/Arcturus22/index.js new file mode 100644 index 000000000..0a2e77490 --- /dev/null +++ b/RandomColorGenerator/Arcturus22/index.js @@ -0,0 +1,25 @@ + + +document.getElementById("b1").onclick = function () { + let r, g, b, appleColor; + r = Math.round(Math.random() * 256); + g = Math.round(Math.random() * 256); + b = Math.round(Math.random() * 256); + appleColor = 'RGB(' + r + ',' + g + ',' + b + ')'; + document.getElementById("Color").style.backgroundColor + = appleColor; + document.getElementById("color-text").innerHTML= + appleColor; + + +} +document.getElementById("b2").onclick = +function(){ + + let color="white"; + document.getElementById("Color").style.backgroundColor + =color; + document.getElementById("color-text").innerHTML= + "White"; +} + diff --git a/RandomColorGenerator/Arcturus22/readme.md b/RandomColorGenerator/Arcturus22/readme.md new file mode 100644 index 000000000..541a02916 --- /dev/null +++ b/RandomColorGenerator/Arcturus22/readme.md @@ -0,0 +1,7 @@ +# Random-Color-Generator +This is a JS project that generates random colour with its RGB value shown on the screen. +A reset feature has also been added to reset the colour to original color. + + ## Tutorial Links to follow:- + ### Git and Github + https://youtu.be/apGV9Kg7ics diff --git a/RandomColorGenerator/Arcturus22/style.css b/RandomColorGenerator/Arcturus22/style.css new file mode 100644 index 000000000..bca5891cc --- /dev/null +++ b/RandomColorGenerator/Arcturus22/style.css @@ -0,0 +1,79 @@ +body{ + background: rgb(131,58,180); + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); +} +#Heading{ + text-align: center; + font-size: 60px; + color: white; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +.container{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top: 0px; +} +#Color{ + background-color: white; + height: 300px; + width: 300px; + margin: 10px auto; + padding-top: 20px; + border-radius: 1em; + box-shadow: 10px 10px 8px #181717; +} +#color-text{ + border-radius: 1em; + text-align: center; + font-size: 23px; + width: 190px; + background-color: white; + padding: 15px; + border: 1px solid black; + display: block; + margin: 30px auto; +} +.btn{ + margin-top: 20px ; + padding: 10px; + font-size: 22px; + background-color: rgb(230, 170, 215); + border-radius: 9px; + cursor: pointer; + transition: 0.3s; + box-shadow: 10px 10px 8px #181717; + +} +#b2{ + background-color: bisque; +} +.button{ + text-align: center; + +} + +.btn:hover{ + background-color: yellow; + font-size: 25px; +} + +@media (max-height:638px ) { + + #Heading{ + font-size: 30px; + } + #Color{ + height: 150px; + width: 150px; + margin: 5px auto; + padding-top: 10px; + border-radius: 1em; + } + #color-text{ + width: 95px; + padding: 7.5px; + margin: 15px auto; + } +} \ No newline at end of file