From fe0649e0febb4463f64a49e067917e72357b14ae Mon Sep 17 00:00:00 2001 From: Arcturus22 <99889376+Arcturus22@users.noreply.github.com> Date: Mon, 31 Oct 2022 23:22:50 +0530 Subject: [PATCH 1/2] Create del.html --- Random-Color-Generator/del.html | 1 + 1 file changed, 1 insertion(+) create mode 100644 Random-Color-Generator/del.html diff --git a/Random-Color-Generator/del.html b/Random-Color-Generator/del.html new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Random-Color-Generator/del.html @@ -0,0 +1 @@ + From 6642a4aeb468fe27ea9904d9fe93622dafb39e8f Mon Sep 17 00:00:00 2001 From: Arcturus22 <99889376+Arcturus22@users.noreply.github.com> Date: Mon, 31 Oct 2022 23:25:30 +0530 Subject: [PATCH 2/2] Add files via upload --- Random-Color-Generator/index.html | 33 +++++++++++++ Random-Color-Generator/index.js | 25 ++++++++++ Random-Color-Generator/style.css | 79 +++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 Random-Color-Generator/index.html create mode 100644 Random-Color-Generator/index.js create mode 100644 Random-Color-Generator/style.css diff --git a/Random-Color-Generator/index.html b/Random-Color-Generator/index.html new file mode 100644 index 0000000..9b56535 --- /dev/null +++ b/Random-Color-Generator/index.html @@ -0,0 +1,33 @@ + + + + + + + + Random Color Generator + + + + + +
+

Random color generator

+
+
+
+

White

+
+ +
+ +
+ +
+ +
+
+ + + + diff --git a/Random-Color-Generator/index.js b/Random-Color-Generator/index.js new file mode 100644 index 0000000..0a2e774 --- /dev/null +++ b/Random-Color-Generator/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/Random-Color-Generator/style.css b/Random-Color-Generator/style.css new file mode 100644 index 0000000..bca5891 --- /dev/null +++ b/Random-Color-Generator/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