first commit

4 years ago · c3fca7fc67
commit c3fca7fc67
3 changed files with 234 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,85 @@
+var riddle = ["var(--yellow)", "var(--green)", "var(--green)", "var(--red)"]
+
+var n1 = 0
+var n2 = 0
+var n3 = 0
+var n0 = 0
+
+var current = []
+
+var colors = ["var(--red)", "var(--brown)", "var(--green)", "var(--blue)", "var(--yellow)", "var(--orange)", "var(--white)"]
+
+
+document.getElementById("choiceEl1").addEventListener("click", function() {
+    this.style.background = colors[n0]
+    current[0] = colors[n0]
+    n0++
+    if (n0 == 7) {
+        n0 = 0
+    }
+})
+
+document.getElementById("choiceEl2").addEventListener("click", function() {
+    this.style.background = colors[n1]
+    current[1] = colors[n1]
+    n1++
+    if (n1 == 7) {
+        n1 = 0
+    }
+})
+
+document.getElementById("choiceEl3").addEventListener("click", function() {
+    this.style.background = colors[n2]
+    current[2] = colors[n2]
+    n2++
+    if (n2 == 7) {
+        n2 = 0
+    }
+})
+
+document.getElementById("choiceEl4").addEventListener("click", function() {
+    this.style.background = colors[n3]
+    current[3] = colors[n3]
+    n3++
+    if (n3 == 7) {
+        n3 = 0
+    }
+})
+
+function shuffle() {
+    let array = [0, 1, 2, 3]
+    let currentIndex = 3,
+        randomIndex;
+
+    // While there remain elements to shuffle...
+    while (currentIndex != 0) {
+
+        // Pick a remaining element...
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex], array[currentIndex]
+        ];
+    }
+
+    return array;
+}
+
+var newShuffle = shuffle()
+
+
+
+function check() {
+
+    for (let solve = 0; solve < 4; solve++) {
+        r = newShuffle[solve]
+        if (riddle[solve] == current[solve]) {
+            document.getElementsByClassName("result")[r].style.background = "var(--black)"
+
+        } else if (riddle.includes(current[solve])) {
+            document.getElementsByClassName("result")[r].style.background = "var(--white)"
+        }
+    }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>MASTERMIND</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <!-- <div class="palette">
+        <div class="red" onclick="pick('red')"></div>
+        <div class="blue"></div>
+        <div class="green"></div>
+        <div class="yellow"></div>
+        <div class="orange"></div>
+        <div class="brown"></div>
+    </div> -->
+
+    <div class="row">
+        <div class="choice">
+            <button id="choiceEl1"></button>
+            <button id="choiceEl2"></button>
+            <button id="choiceEl3"></button>
+            <button id="choiceEl4"></button>
+        </div>
+        <div class="results">
+            <button class="result"></button>
+            <button class="result"></button>
+            <button class="result"></button>
+            <button class="result"></button>
+
+        </div>
+    </div>
+
+    <div>
+
+    </div>
+
+    <button id="check" onclick="check()">CHECK!</button>
+    <script src="app.js" async defer></script>
+</body>
+
+</html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,101 @@
+:root {
+    --red: #f00;
+    --green: rgb(39, 177, 39);
+    --blue: #00f;
+    --yellow: rgb(255, 238, 0);
+    --brown: rgb(66, 26, 20);
+    --orange: rgb(255, 102, 0);
+    --white: #fff;
+    --black: #000;
+}
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+button {
+    width: 20px;
+    height: 20px;
+    border-radius: 40%;
+}
+
+.row {
+    border: solid;
+    display: flex;
+    flex-direction: row;
+    height: 60px;
+    width: 90%;
+    justify-content: space-evenly;
+    margin-left: 5%;
+}
+
+.choice {
+    /* border: solid; */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    /* padding: 3px; */
+    width: 60%;
+    margin: auto 20px;
+}
+
+.results {
+    /* border: solid; */
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 10%;
+    margin: auto;
+}
+
+.results button {
+    /* padding: 25%; */
+}
+
+.palette {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.palette div {
+    width: 100%;
+    height: 20%;
+}
+
+.red {
+    background-color: var(--red);
+}
+
+.blue {
+    background-color: var(--blue);
+}
+
+.yellow {
+    background-color: var(--yellow);
+}
+
+.orange {
+    background-color: var(--orange);
+}
+
+.green {
+    background-color: var(--green);
+}
+
+.brown {
+    background-color: var(--brown);
+}
+
+#check {
+    width: 96%;
+    height: 5%;
+    position: absolute;
+    bottom: 5px;
+    left: 2%;
+    border-radius: 30px;
+}