From 14a4bff78acdea38187b4570acd91ee1c8c441c9 Mon Sep 17 00:00:00 2001 From: AryanMittal11 Date: Sun, 21 Jul 2024 18:43:22 +0530 Subject: [PATCH] first js project --- ColorChanger/index.html | 24 ++++++++++++++++++++++++ ColorChanger/script.js | 9 +++++++++ ColorChanger/style.css | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+) create mode 100644 ColorChanger/index.html create mode 100644 ColorChanger/script.js create mode 100644 ColorChanger/style.css diff --git a/ColorChanger/index.html b/ColorChanger/index.html new file mode 100644 index 0000000..c4c3e01 --- /dev/null +++ b/ColorChanger/index.html @@ -0,0 +1,24 @@ + + + + + + + + JavaScript Background Color Switcher + + +
+

Color Scheme Switcher

+ + + + +

+ Try clicking on one of the colors above + to change the background color of this page! +

+
+ + + diff --git a/ColorChanger/script.js b/ColorChanger/script.js new file mode 100644 index 0000000..4bd0618 --- /dev/null +++ b/ColorChanger/script.js @@ -0,0 +1,9 @@ +const body = document.querySelector("body") +const button = document.querySelectorAll(".button") + +button.forEach(function(button){ + button.addEventListener('click', function(e){ + console.log(e.target.id); + body.style.backgroundColor = e.target.id + }) +}) \ No newline at end of file diff --git a/ColorChanger/style.css b/ColorChanger/style.css new file mode 100644 index 0000000..94f6536 --- /dev/null +++ b/ColorChanger/style.css @@ -0,0 +1,34 @@ +html { + margin: 0; + } + + span { + display: block; + } + .canvas { + margin: 100px auto 100px; + width: 80%; + text-align: center; + } + + .button { + width: 100px; + height: 100px; + border: solid black 2px; + display: inline-block; + } + + #grey { + background: grey; + } + + #white { + background: white; + } + #blue { + background: blue; + } + #yellow { + background: yellow; + } + \ No newline at end of file