diff --git a/app.css b/app.css new file mode 100644 index 0000000..f53260c --- /dev/null +++ b/app.css @@ -0,0 +1,112 @@ +body { + margin: 0; + padding: 0; + background-color: #232323; + font-family: "Raleway"; +} + +h1 { + margin: 0; + width: 100%; + background-color: steelblue; + text-align: center; + height: 140px; + color: white; + text-transform: uppercase; + font-size: 2em; + line-height: 1.4em; + font-weight: 400; + transition: all 0.8s; +} +h1 span{ + font-size: 1.4em; + font-weight: 500; +} +#colorDisplay { + display: block; +} +#container { + max-width: 600px; + margin: 20px auto; +} +.squares { + padding-bottom: 30%; + background-color: purple; + float: left; + width: 30%; + margin: 1.66%; + border-radius: 15%; + transition: all 0.8s; +} +#stripe { + width: 100%; + background-color: white; + margin-top: 0; + text-align: center; +} +.visible { + display: none; +} +#div-1 { + display: flex; + width: 59%; + margin: 0 auto; + justify-content: space-between; +} +#reset { + color: steelblue; + outline: none; + border: none; + box-shadow: none; + font-family: "Raleway"; + transition-property: all; + background-color: white; + +} +#reset:hover{ + background-color: steelblue; + color: white; +} + +button { + border: none; + outline: none; + height: 100%; + color: steelblue; + font-weight: 600; + font-size: 1em; + background-color: white; + transition-property: all; + transition-duration: 0.8s; +} +button:hover{ + background-color: steelblue; + color: white; +} + +.selected { + background-color: steelblue; + color: white; +} + +@media screen and (max-width: 414px){ + h1{ + font-size: 1.8em + } + h1 span{ +font-size: 1.2em; + } + #div-1{ + width: 80%; + } + #container{ + margin: 40px auto; + } + +} +@media screen and (max-width: 375px){ + #div-1{ + width: 95%; + } + +} diff --git a/app.js b/app.js new file mode 100644 index 0000000..6378dad --- /dev/null +++ b/app.js @@ -0,0 +1,108 @@ +var squares = document.querySelectorAll(".squares"); +var colorDisplay = document.getElementById("colorDisplay"); +var message = document.getElementById("message"); +var easyBtn = document.getElementById("easyBtn"); +var hardBtn = document.getElementById("hardBtn"); +var resetBtn = document.getElementById("reset"); +var h1 = document.querySelector("h1"); +var colors = []; +var pickedColor; + +function randomNumber() { + var num1 = Math.floor(Math.random() * 256); + var num2 = Math.floor(Math.random() * 256); + var num3 = Math.floor(Math.random() * 256); + return `rgb(${num1}, ${num2}, ${num3})`; +} + +function randomColor(num) { + for (var i = 0; i < num; i++) { + colors.push(randomNumber()); + randomNumber(); + } +} + +function pickColor(num) { + pickedColor = colors[Math.floor(Math.random() * num)]; + colorDisplay.textContent = pickedColor; +} + +function changeColor() { + for (var i = 0; i < squares.length; i++) { + squares[i].style.backgroundColor = pickedColor; + } + h1.style.backgroundColor = pickedColor; +} + +function assignColors() { + for (var i = 0; i < squares.length; i++) { + squares[i].style.backgroundColor = colors[i]; + } + for (var i = 0; i < squares.length; i++) { + squares[i].addEventListener("click", function () { + if (this.style.backgroundColor === pickedColor) { + changeColor(); + message.textContent = "Bingo!"; + resetBtn.textContent = "Play Again?"; + } else { + this.style.backgroundColor = "rgb(35, 35, 35)"; + message.textContent = "Try again"; + } + }); + } +} + +randomColor(6); +pickColor(6); +assignColors(); + +easyBtn.addEventListener("click", function () { + colors = []; + randomColor(3); + pickColor(3); + assignColors(); + for (var i = 0; i < squares.length; i++) { + if (!colors.includes(squares[i].style.backgroundColor)) { + squares[i].style.backgroundColor = "rgb(35, 35, 35)"; + squares[i].style.display = "none"; + } + } + h1.style.backgroundColor = "steelblue"; + this.classList.add("selected"); + hardBtn.classList.remove("selected"); + resetBtn.textContent = "New Colors"; + message.textContent = "" +}); + +hardBtn.addEventListener("click", function () { + colors = []; + randomColor(6); + pickColor(6); + assignColors(); + for (var i = 0; i < squares.length; i++) { + squares[i].style.backgroundColor = colors[i]; + squares[i].style.display = "block"; + } + h1.style.backgroundColor = "steelblue"; + this.classList.add("selected"); + easyBtn.classList.remove("selected"); + resetBtn.textContent = "New Colors"; + message.textContent = "" +}); + +resetBtn.addEventListener("click", function () { + if (colors.length === 3) { + colors = []; + randomColor(3); + pickColor(3); + assignColors(); + } else { + colors = []; + randomColor(6); + pickColor(6); + assignColors(); + } + h1.style.backgroundColor = "steelblue"; + this.textContent = "New Colors"; + message.textContent = "" +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..7804f23 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Document + + + + +

The great rgbcolor game

+
+
+ + +
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + +