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