Adding Date UI and updating folder link

GoulartNogueira · Sep 17, 2021 · 1fa8db6 · 1fa8db6
1 parent 8465d4a
commit 1fa8db6
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 3 deletions.
diff --git a/Date/BadUIDate.html b/Date/BadUIDate.html
@@ -0,0 +1,214 @@
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body>
+ <h1>Bad UI Battle</h1>
+ <form style="background-color: #eee; border-radius: 5px; padding: 10px; margin: 10px;">
+ <h3>Date of Birth Selector</h3>
+ <div>Date: <span id="dateDisplay"></span></div>
+ <div style="margin-top: 10px;">
+ <button id="start" type="button" onclick="setDate(1)"> << </button>
+ <button id="backward" type="button" onclick="addDate(-1)"> < </button>
+ <button id="submit" type="button"> Submit </button>
+ <button id="forward" type="button" onclick="addDate(1)"> > </button>
+ <button id="end" type="button" onclick="setDate(-1)"> >> </button>
+ </div>
+ <hr>
+ <input id="advancedMode" type="checkbox">
+ <label for="advancedMode">Advanced Mode</label>
+ <div id="advancedArea" style="display: none; margin-top: 10px; margin-bottom: 10px; border: 1px solid #ccc; padding: 10px; transition: all 0.5s;">
+ <div>
+ <input id="autoMode" type="checkbox">
+ <label for="autoMode">Auto Mode</label>
+ <!-- Faster Button -->
+ <button id="faster" type="button" onclick="autoSpeed(10)">Faster</button>
+ </div>
+ <!-- Toggle switch made with a binary slider -->
+ <div>
+ <label for="toggle">Decrease</label>
+ <input
+ id="toggleSlider"
+ type="range"
+ min="0"
+ max="1"
+ step="1"
+ value="0"
+ style="width: 30px;"
+ onchange="toggle()">
+ <label for="toggle">Increase</label>
+ </div>
+ <!-- <div>
+ <label for="toggle">Decrease</label>
+ <input
+ id="toggle"
+ type="radio"
+ name="toggle"
+ value="0"
+ onclick="toggle(0)"
+ >
+ <input
+ id="toggle"
+ type="radio"
+ name="toggle"
+ value="1"
+ onclick="toggle(1)"
+ >
+ <label for="toggle">Increase</label>
+ </div> -->
+ </div>
+ <!-- <div>
+ <input id="submit" type="submit" value="Submit">
+ </div> -->
+ </form>
+ <footer style="position: fixed; bottom: 0; width: 100%; text-align: center; font-size: 12px; color: #999;">
+ <p>Live demo at: <a href="https://goulartnogueira.github.io/BadUI/Date/BadUIDate.html">https://goulartnogueira.github.io/BadUI/Date/BadUIDate.html</a></p>
+ <p>Made with 💩 by André G. N.</p>
+ </footer>
+ <script>
+ var date = new Date(); 
+ var advancedModeCheckbox = document.getElementById("advancedMode");
+ var advancedArea = document.getElementById("advancedArea");
+ var autoModeCheckbox = document.getElementById("autoMode");
+ var submitButton = document.getElementById("submit");
+ var startButton = document.getElementById("start");
+ var backButton = document.getElementById("backward");
+ var selectButton = document.getElementById("select");
+ var forwardButton = document.getElementById("forward");
+ var endButton = document.getElementById("end");
+ var dateDisplay = document.getElementById("dateDisplay");
+
+ function setDate(value) {
+ if(value == 1) {
+ // Set date to 01/01/0001
+ date.setFullYear(1);
+ date.setMonth(0);
+ date.setDate(1);
+ } else if(value == -1) {
+ // Set date to today
+ date.setFullYear(9999);
+ date.setMonth(12);
+ date.setDate(0);
+ }
+ updateDateDisplay();
+ }
+ function addDate(value) {
+ date.setDate(date.getDate() + value);
+ updateDateDisplay();
+ }
+ function pad(num, size) {
+ // Pad number with 0
+ var s = "0000" + num;
+ return s.substr(s.length-size);
+ }
+ function updateDateDisplay() {
+ // Show week day
+ var weekDay = date.getDay();
+ var weekDayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+ var weekDayDisplay = weekDayNames[weekDay];
+ // show leading zero
+ var yearDisplay = date.getFullYear();
+ // If year is between 0 and 1000, add a leading zero
+ if(yearDisplay < 1000 && yearDisplay > -1) {
+ yearDisplay = pad(yearDisplay, 4);
+ }
+ var dateString = weekDayDisplay + ", " + pad(date.getDate(), 2) + "/" + pad(date.getMonth() + 1, 2) + "/" + yearDisplay;
+ dateDisplay.innerHTML = dateString;
+ }
+ // set initial date as today:
+ setDate(0)
+
+ // Advanced Mode
+ advancedModeCheckbox.addEventListener("change", function() {
+ console.log("advancedModeCheckbox.checked: " + advancedModeCheckbox.checked);
+ if (this.checked) {
+ // Show advanced controls
+ advancedArea.style.display = "block";
+ } else {
+ // Hide advanced controls
+ advancedArea.style.display = "none";
+ }
+ });
+
+ var interval = 1000;
+ var autoMode = false;
+ var speed = -1;
+ // Continuous update
+ var intervalID = setInterval(function() {
+ if(advancedModeCheckbox.checked) {
+ if(autoModeCheckbox.checked) {
+ addDate(speed);
+ }
+ }
+ }, interval); 
+
+ // Speed Faster
+ function autoSpeed(value) {
+ if (interval <= 1) {
+ speed *= value;
+ } else {
+ interval = interval / value;
+ // Update interval
+ clearInterval(intervalID);
+ intervalID = setInterval(function() {
+ if(advancedModeCheckbox.checked) {
+ if(autoModeCheckbox.checked) {
+ addDate(speed);
+ }
+ }
+ }, interval);
+ }
+ }
+
+ var fasterButton = document.getElementById("faster");
+ fasterButton.addEventListener("click", function() {
+ autoSpeed(10);
+ // Add "even faster" to beginning of button
+ this.innerHTML = "More " + this.innerHTML;
+ });
+ // toggle
+ var toggleSlider = document.getElementById("toggleSlider");
+ toggleSlider.addEventListener("change", function() {
+ if(this.value == 0) {
+ if(speed > 0) {
+ speed = -speed;
+ }
+ } else {
+ if(speed < 0) {
+ speed = -speed;
+ }
+ }
+ });
+
+ // On submit
+ document.getElementById("submit").addEventListener("click", function(event) {
+ event.preventDefault();
+ // Check if today is user's birthday
+ if(date.getDate() == new Date().getDate() && date.getMonth() == new Date().getMonth()) {
+ alert("Happy Birthday!");
+ }
+ // If selected date is larger than today
+ if(date > new Date()) {
+ // confirm with user if they were born in the future
+ var confirm = window.confirm("You are born in the future. Are you sure?");
+ if(confirm) {
+ alert("Have a nice time-travel!");
+ } else {
+ alert("You were born in" + date.toDateString() + ". But your system says today is " + new Date().toDateString() + ". If you are not a time traveler, please fix your system.");
+ }
+ } else {
+ // Confirm age
+ var diff = new Date() - date;
+ var age = Math.ceil(diff / (1000 * 3600 * 24 * 365.25))-1;
+ var confirmAge = window.confirm("You are " + age + " years old. Are you sure?");
+ if(confirmAge) {
+ alert("Thank you!");
+ } else {
+ alert("Please fix your birthday.");
+ }
+ }
+ });
+
+ </script>
+</body>
+</html>
diff --git a/... Slider Selector/BadUI Phone Selector.gif → ...-Slider-Selector/BadUI Phone Selector.gif b/... Slider Selector/BadUI Phone Selector.gif → ...-Slider-Selector/BadUI Phone Selector.gif
diff --git a/... Slider Selector/BadUI Phone Selector.mp4 → ...-Slider-Selector/BadUI Phone Selector.mp4 b/... Slider Selector/BadUI Phone Selector.mp4 → ...-Slider-Selector/BadUI Phone Selector.mp4
diff --git a/Phone Slider Selector/BadUIPhone.html → Phone-Slider-Selector/BadUIPhone.html b/Phone Slider Selector/BadUIPhone.html → Phone-Slider-Selector/BadUIPhone.html
diff --git a/README.md b/README.md
@@ -9,7 +9,24 @@ Please [contribute](https://github.com/GoulartNogueira/BadUI/pulls) with your ow
 ---
 
 ## 1. Bad Phone Selector
-### - [Live Interactive Example!!!](https://goulartnogueira.github.io/BadUI/Phone%20Slider%20Selector/BadUIPhone.html)
-- [Source Code](https://github.com/GoulartNogueira/BadUI/Phone%20Slider%20Selector/BadUIPhone.html)
+### - [Live Interactive Example!!!](https://goulartnogueira.github.io/BadUI/Phone-Slider-Selector/)
+- [Source Code](https://github.com/GoulartNogueira/BadUI/Phone-Slider-Selector/BadUIPhone.html)
 
-<a href="./Phone%20Slider%20Selector/BadUIPhone.html" target="_blank">![Bad UI Phone Gif](./Phone%20Slider%20Selector/BadUI%20Phone%20Selector.gif)</a>
+<a href="./Phone-Slider-Selector/BadUIPhone.html" target="_blank">![Bad UI Phone Gif](./Phone-Slider-Selector/BadUI%20Phone%20Selector.gif)</a>
+
+---
+
+## 2. Bad UI Birthday
+### - [Live Interactive Example!!!](https://goulartnogueira.github.io/BadUI/Date/)
+- [Source Code](https://github.com/GoulartNogueira/BadUI/Date/BadUIDate.html)
+
+---
+
+### Contact:
+
+- [LinkedIn](https://www.linkedin.com/in/andre-goulart/)
+- [GitHub](https://github.com/GoulartNogueira)
+- [StackOverflow AI](https://ai.stackexchange.com/users/49188/andre-goulart)
+
+## 2. Bad Date Picker
+### - [Live Interactive Example!!!](https://goulartnogueira.github.io/BadUI/Date%20Picker/)