Initial commit

muzalee · May 25, 2023 · bf1e15d · bf1e15d
commit bf1e15d
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Bad UI Design Projects
+
+[Click here to view](https://muzalee.github.io/bad-ui/)
diff --git a/birthdate_selector.html b/birthdate_selector.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Birthdate Selector</title>
+        <link rel="stylesheet" href="style.css">
+
+        <style>
+            #date-wrapper {
+                height: 55px;
+                transform-origin: center center;
+            }
+
+            #date {
+                display: flex;
+                justify-content: space-around;
+                font-size: 50px;
+            }
+
+            #explainer {
+                margin-bottom: 10px;
+            }
+
+            .arrow {
+                opacity: 30%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrapper">
+            <div id="date-wrapper">
+                <div id="explainer">
+                    Select your birthday
+                </div>
+                <div id="date">
+                    <div class="arrow" onclick="earlier()"><</div>
+                    <div id="actual-date">XXXX-XX-XX</div>
+                    <div class="arrow" onclick="later()">></div>
+                </div>
+                <div id="count"></div>
+            </div>
+        </div>
+
+        <script>
+            // set initial date
+            const LOWER = new Date("1900-01-01");
+            const UPPER = new Date();
+            let lower = LOWER;
+            let upper = UPPER;
+
+            let midpoint = new Date((lower.getTime() + upper.getTime()) / 2);
+            let midText = midpoint.toISOString().split("T")[0];
+            document.getElementById("actual-date").innerText = midText;
+            let stepCount = 0;
+
+            document.onkeydown = checkKey;
+            function checkKey(e) {
+                e = e || window.event;
+                if (e.keyCode == "37") {
+                    // left arrow (back)
+                    earlier();
+                } else if (e.keyCode == "39") {
+                    // right arrow (forward)
+                    later();
+                }
+            }
+
+            function earlier() {
+                if (midpoint.toDateString() == UPPER.toDateString()) {
+                    lower = LOWER;
+                    upper = UPPER;
+                }
+                setNewMidpoint(lower, midpoint);
+                stepCount += 1;
+                document.getElementById("count").innerText = stepCount;
+            }
+
+            function later() {
+                if (midpoint.toDateString() == LOWER.toDateString()) {
+                    lower = LOWER;
+                    upper = UPPER;
+                }
+                setNewMidpoint(midpoint, upper);
+                stepCount += 1;
+                document.getElementById("count").innerText = stepCount;
+            }
+
+            function setNewMidpoint(l, u) {
+                lower = l;
+                upper = u;
+                midpoint = new Date((lower.getTime() + upper.getTime()) / 2);
+                var midText = midpoint.toISOString().split("T")[0];
+                document.getElementById("actual-date").innerText = midText;
+            }
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Bad UI</title>
+        <link rel="stylesheet" href="style.css">
+
+        <style>
+            ul {
+                list-style-type: none;
+                margin: 0;
+                padding: 0;
+            }
+
+            li {
+                display: block;
+                margin: 0 0 10px 0;
+                padding: 20px 30px;
+                background-color: #444;
+                color: #fff;
+                text-decoration: none;
+                border-radius: 5px;
+                border: none;
+                box-shadow: none;
+            }
+
+            li:hover {
+                background-color: #aaa;
+            }
+
+            a {
+                text-decoration: none;
+                color: white;
+            }
+
+            @media (max-width: 768px) {
+                ul {
+                    font-size: 12px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrapper">
+            <ul>
+                <li><a href="birthdate_selector.html">Birthdate Selector</a></li>
+            </ul>
+        </div>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,16 @@
+body {
+    overflow: hidden;
+    color: #fff;
+    font-family: courier;
+    text-align: center;
+    font-size: 20px;
+    background-color: #333;
+}
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 99vw;
+    height: 90vh;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Bad UI Design Projects

		[Click here to view](https://muzalee.github.io/bad-ui/)