layout

4 years ago · 5e8a37ca16
parent 165772f103
commit 5e8a37ca16
3 changed files with 120 additions and 89 deletions
--- a/app.js
+++ b/app.js
@ -10,6 +10,16 @@ var current = []
 var colors = ["var(--red)", "var(--brown)", "var(--green)", "var(--blue)", "var(--yellow)", "var(--orange)", "var(--white)"]

 function go() {
+
+    let divs = document.getElementsByClassName("row")
+
+    for (let div = 0; div < divs.length; div++) {
+        if (div != turn) {
+            document.getElementsByClassName("row")[div].classList.add("disabledButtons");
+        }
+    }
+
+
    document.getElementsByClassName("choiceEl1")[turn].addEventListener("click", function() {
        this.style.background = colors[n0]
        current[0] = colors[n0]
@ -45,6 +55,8 @@ function go() {
            n3 = 0
        }
    })
+
+
 }

 go()
@ -100,15 +112,20 @@ function check() {
    if (areEqual(current, riddle)) {
        alert("win")
    }
-
    if (turn == 6) {
        alert("stop")
    }
+
    turn++
-    console.log(turn)
-    if (turn == 6) {
-        alert("stop")
-    }
+    current = []
    go()

 }
+
+function checkpre() {
+    if (current.length == 4) {
+        check()
+    } else {
+        console.log("sdv")
+    }
+}
--- a/index.html
+++ b/index.html
@ -11,7 +11,7 @@
 </head>

 <body>
-
+    <div class="mother">
        <div class="row">
            <div class="choice">
                <button class="choiceEl1"></button>
@ -97,11 +97,11 @@
            </div>
        </div>

-    <div>
+

    </div>

-    <button id="check" onclick="check()">CHECK!</button>
+    <button id="check" onclick="checkpre()">CHECK!</button>
    <script src="app.js" async defer></script>
 </body>

--- a/style.css
+++ b/style.css
@ -15,11 +15,20 @@ html {
    padding: 0;
    width: 100%;
    height: 100%;
+    /* background-color: #000; */
+}
+
+.mother {
+    /* border: solid; */
+    height: 90%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
 }

 button {
-    width: 20px;
-    height: 20px;
+    width: 35px;
+    height: 35px;
    border-radius: 40%;
 }

@ -27,7 +36,7 @@ button {
    border: solid;
    display: flex;
    flex-direction: row;
-    height: 60px;
+    height: 15%;
    width: 90%;
    justify-content: space-evenly;
    margin-left: 5%;
@ -99,3 +108,8 @@ button {
    left: 2%;
    border-radius: 30px;
 }
+
+.disabledbutton {
+    pointer-events: none;
+    opacity: 0.4;
+}