Most_Useless_App/index.html at main · GodsScion/Most_Useless_App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<!--
Author: Sai Vignesh Golla
LinkedIn: https://www.linkedin.com/in/saivigneshgolla
Version: 1.1.2
-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="google-site-verification" content="0_XY_ICLWoL6ApH8r19UImRPNMvekcvK9n96Z7dPjs8" />
    <title>Useless App</title>
    <link rel="icon" type="image/svg+xml"
        href="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%239A4E1C' d='M32 8h-6V4c0-2.209-1.791-4-4-4h-8c-2.209 0-4 1.791-4 4v4H4c-2.209 0-4 1.791-4 4v20c0 2.209 1.791 4 4 4h28c2.209 0 4-1.791 4-4V12c0-2.209-1.791-4-4-4zM12 6c0-1.104.896-2 2-2h8c1.104 0 2 .896 2 2v2H12V6z'/%3E%3Cpath fill='%23662113' d='M36 20c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4v-8c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v8z'/%3E%3Cpath fill='%239A4E1C' d='M36 18c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4v-6c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v6z'/%3E%3Cpath fill='%23CCD6DD' d='M22 18c0 1.104-.896 2-2 2h-4c-1.104 0-2-.896-2-2s.896-2 2-2h4c1.104 0 2 .896 2 2'/%3E%3C/svg%3E">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="nav-bar bg-color mb-4 p-2">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="col-sm-6">Welcome to Most Useless App 😐</h1>
                <h1 class="m-2" id="time"></h1>
                <button id="theme" class="btn btn-dark" onclick="themeChanger()">🌙 Dark Theme</button>
            </div>
        </div>
        <script>
            let theme = localStorage.getItem("theme");
            if (theme != null) { document.documentElement.setAttribute("data-bs-theme", theme) }
            else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
                document.documentElement.setAttribute("data-bs-theme", "light")
                theme = "light"
                localStorage.setItem("theme", theme)
            }
            if (theme === "light") {
                const themeBtn = document.getElementById("theme")
                themeBtn.innerHTML = "☀️ Light Theme"
                themeBtn.classList.replace("btn-dark", "btn-light")
            }
        </script>
    </header>
    <div class="container">
        <main>
            <header>
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item list-vertical me-2 mb-1" role="presentation">
                        <button class="nav-link col-12 tab-border active" id="changeText" data-bs-toggle="pill"
                            data-bs-target="#changeText-tab" type="button" role="tab" aria-controls="changeText-tab"
                            aria-selected="true" onclick="localStorage.setItem('app', 'changeText')">
                            Change Text Cases 🔠🔡
                        </button>
                    </li>
                    <li class="nav-item list-vertical me-2 mb-1" role="presentation">
                        <button class="nav-link col-12 tab-border" id="tossCoin" data-bs-toggle="pill"
                            data-bs-target="#tossCoin-tab" type="button" role="tab" aria-controls="tossCoin"
                            aria-selected="false" onclick="localStorage.setItem('app', 'tossCoin')">
                            Toss a Coin 🪙💫
                        </button>
                    </li>
                    <li class="nav-item list-vertical me-3 mb-1" role="presentation">
                        <button class="nav-link col-12 tab-border" id="calculateTime" data-bs-toggle="pill"
                            data-bs-target="#calculateTime-tab" type="button" role="tab"
                            aria-controls="calculateTime-tab" aria-selected="false"
                            onclick="localStorage.setItem('app', 'calculateTime')">
                            Balance Work & Life 🧘🏼‍♂️🏢
                        </button>
                    </li>
                    <li id="tooltip-all" class="nav-item list-vertical me-2 mb-1" hidden>
                        <div class="tooltip-text p-2 pe-4 d-flex bg-color">
                            <h1>👈🏼</h1>
                            <div class="d-flex flex-column">
                                <span style="text-align: left;">Since you are here anyways</span>
                                <span style="text-align: left;">Why not try them all?</span>
                            </div>
                        </div>
                    </li>
                </ul>

                <hr>
            </header>
            <div class="tab-content" id="pills-tabContent">
                <!-- CHANGE TEXT CASES -->
                <div class="tab-pane fade show active" id="changeText-tab" role="tabpanel" aria-labelledby="changeText"
                    tabindex="0">
                    <h2>Caps Lock Chaos?</h2>
                    <p>Did your text take a wild ride on the Caps Lock rollercoaster? No problem. We've all been there
                        🫠, just drop your jumbled mess into the box below, hit the magic button for your desired case,
                        and watch as we work our text-wrangling wonders.</p>
                    <br>
                    <label class="form-label" for="text">Pop your text in the box below 👇</label>
                    <textarea class="form-control mb-3 p-1" id="text" name="text"
                        oninput="dynamicHeight('text')"></textarea>
                    <div class="d-flex">
                        <button onclick="upper()" class="btn btn-primary me-3" aria-label="upper case button">ALL
                            UPPERCASE</button>
                        <button onclick="lower()" class="btn btn-primary me-3" aria-label="lower case button">all
                            lowercase</button>
                        <button onclick="startUpper()" class="btn btn-primary me-3"
                            aria-label="first letters of words upper case button">First Letters Of Words Upper</button>
                        <button onclick="random()" class="btn btn-primary me-3" aria-label="random case button">R@nD#m
                            💀</button>
                        <button onclick="reset()" class="btn btn-danger" aria-label="reset text button">Reset Text
                            🗑️</button>
                    </div>
                    <br>
                    <br>
                    <div class="d-flex justify-content-between align-items-end">
                        <label for="result" class="form-label">Behold, your magnificently modified text! This time, it's
                            what you actually meant to type, hopefully 😝. </label>
                        <button onclick="copyClipboard()" type="button" class="btn btn-success mb-2">Copy to Clipboard
                            📋</button>
                    </div>
                    <textarea class="form-control mb-3 p-1" name="result" id="result" readonly></textarea>

                </div>

                <!-- TOSS A COIN -->
                <div id="tossCoin-tab" class="tab-pane fade" role="tabpanel" aria-labelledby="tossCoin" tabindex="0">
                    <h2>Toss a Coin 🪙</h2>
                    <div
                        class="d-flex flex-wrap flex-md-nowrap flex-lg-nowrap justify-content-end align-items-center mb-3">
                        <div class="flex-fill p-1">
                            <p class="mb-0 me-3">Can't make up your mind? Click the coin or the "Toss" button to flip
                                the coin! Just don't blame me for consequences or if it lands on it's sides</p>
                        </div>
                        <div class="p-1">
                            <button id="tossButton" class="btn btn-primary">
                                Toss 💫
                                <span id="tossButtonSpinner" class="spinner-border spinner-border-sm" hidden></span>
                            </button>
                        </div>
                    </div>

                    <button id="tossMuteButton" class="btn">Loading...</button>

                    <div class="d-flex justify-content-center align-items-center mb-4">
                        <div id="coin-container" class="me-3">
                            <div id="coin">
                                <div class="coin-side heads">
                                </div>
                                <div class="coin-side tails">
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3 class="mb-5" id="outcomeText"></h3>

                    <div class="d-flex justify-content-between mb-3">
                        <h3 class="mb-0 me-2">Previous Outcomes</h3>
                        <button id="resetOutcomes" class="btn btn-danger">Reset Outcomes 🔄️</button>
                    </div>

                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Outcome</th>
                            </tr>
                        </thead>
                        <tbody id="outcomesList">
                        </tbody>
                    </table>
                </div>

                <!-- PREPLAN LEAVING TIME TAB -->
                <div class="tab-pane fade" id="calculateTime-tab" role="tabpanel" aria-labelledby="calculateTime"
                    tabindex="0">
                    <div class="d-flex justify-content-between">
                        <h2 class="flex-lg-fill me-2">Plan your Work-Life balance 🕰️</h2>
                        <button id="toggleAlarmBtn" class="btn btn-secondary mb-1 me-2 flex-lg-fill" type="button"
                            onclick="toggleAlarm()" style="max-width: fit-content;">Turn On Alarm ⏰🔔</button>
                        <button class="btn btn-danger mb-1 flex-lg-fill" type="button" onclick="resetAll()"
                            style="max-width: fit-content;">Reset to Default 📆</button>
                        <!-- <div class="flex-lg-fill"></div> -->
                    </div>
                    <p>Do you want to maintain a good work life balance? You can make your life easy by planning your
                        hustle, and personal time. Just answer the required questions.</p>
                    <br>

                    <label for="startTime" class="form-label">When did you enter office?</label>
                    <div class="d-flex">
                        <input id="startTime" type="time" class="form-control w-25 p-1" value="08:00"
                            onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value"
                            oninput="calLeaveTime(); time24('startTime', this)">
                        <p id="startTime-24" class="m-2">08:00 Military time</p>
                    </div>
                    <br>

                    <label for="targetTime" class="form-label">How many hours are you planning to work for (Work hrs)
                        ⏳?</label>
                    <fieldset id="targetTime" class="d-flex">
                        <input id="targetHrs" type="number" class="form-control w-10 p-1" value="8" min="0" max="12"
                            step="1" onfocus="this.previousValue = this.value"
                            onkeydown="this.previousValue = this.value"
                            oninput="validity.valid || (value = this.previousValue); if(value === null || value === undefined || value === '') {value = '0'}; calLeaveTime();">
                        <label for="targetHrs" class="m-2 me-3">hrs</label>
                        <input id="targetMin" type="number" class="form-control w-10 p-1" value="00" min="0" max="59"
                            step="1" onfocus="this.previousValue = this.value"
                            onkeydown="this.previousValue = this.value"
                            oninput="validity.valid || (value = this.previousValue); if(value === null || value === undefined || value === '') {value = '0'}; calLeaveTime();">
                        <label for="targetMin" class="m-2">min</label>
                    </fieldset>


                    <br>
                    <p class="form-label">How much time are you planning to take lunch for ⏱️?</p>
                    <p id="suggestLunch"></p>
                    <div class="d-flex">
                        <div class="me-2">
                            <label for="lunchStart"><strong>From :</strong></label>
                            <input id="lunchStart" type="time" class="form-control" value="12:00"
                                onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value"
                                oninput="changeTo(); time24('lunchStart', this)">
                            <p id="lunchStart-24" class="mx-2 mt-1">12:00 Military time</p>
                        </div>
                        <div class="me-2">
                            <label for="lunchEnd"><strong>To :</strong></label>
                            <input id="lunchEnd" type="time" class="form-control" value="12:30"
                                onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value"
                                oninput="changeTotal(); time24('lunchEnd', this)">
                            <p id="lunchEnd-24" class="mx-2 mt-1">12:30 Military time</p>
                        </div>
                        <div class="me-2"><br>
                            <p class="py-1">=</p>
                        </div>
                        <div>
                            <label for="lunchTotal"><strong>Total :</strong></label>
                            <div class="d-flex">
                                <input id="lunchTotal" type="number" class="form-control" value="30" min="0" max="180"
                                    step="1" onfocus="this.previousValue = this.value"
                                    onkeydown="this.previousValue = this.value"
                                    oninput="validity.valid || (value = this.previousValue); if(value === null || value === undefined || value === '') {value = '0'}; changeTo(); calLeaveTime()">
                                <p class="m-2">min</p>
                            </div>
                        </div>
                    </div>
                    <br>
                    <label for="leavingTime">From your inputs, your leaving time could be 🚗💨🏢 </label>
                    <div class="d-flex mb-3">
                        <input id="leavingTime" type="time" class="form-control w-25 p-1 border-primary" value="16:30"
                            readonly>
                        <p id="leavingTime-24" class="m-2">16:30 Military time</p>
                    </div>
                    <h3 id="timeLeft" class="mb-3"></h3>
                    <div id="result-warning" hidden>
                        <h3>⚠️ Well, That doesn't seem right 🤔!</h3>
                        <h3 id="result-error"></h3>
                    </div>
                </div>
            </div>
        </main>

        <!-- toast notification -->
        <div class="toast-container top-0 start-50 translate-middle-x p-3">
            <div id="toastMain" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong id="toastTitle" class="me-auto">ℹ️ Info</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="d-flex flex-row justify-content-between align-items-baseline toast-body">
                    <p id="toastBody">Invalid Input! Please use arrows ⬆️⬇️ and inbuilt buttons.</p>
                    <button id="toastButton" type="button" class="btn btn-danger" data-bs-dismiss="toast"
                        aria-label="Close" onclick="toggleAlarm()">OkOk! Calm Down!</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let app = localStorage.getItem("app")
        if (app && app !== "changeText") {
            document.getElementById(app).classList.add("active")
            document.getElementById(app + "-tab").classList.add("show", "active")
            document.getElementById("changeText").classList.remove("active")
            document.getElementById("changeText-tab").classList.remove("show", "active")
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
    <script src="main.js"></script>

</body>

</html>