agetimer

ossamamehmood · Oct 15, 2023 · 8c3909b · 8c3909b
1 parent 7d06d07
commit 8c3909b
Show file tree

Hide file tree

Showing 6 changed files with 285 additions and 0 deletions.
diff --git a/Images/background/background.png b/Images/background/background.png
diff --git a/Images/favicon/circle.gif b/Images/favicon/circle.gif
diff --git a/Images/favicon/circle.png b/Images/favicon/circle.png
diff --git a/app.js b/app.js
@@ -0,0 +1,65 @@
+$(document).ready(function(){
+    $("#submit").click(function(e){
+        e.preventDefault();
+
+        var input = $("#dob-input").val();
+        var dob = new Date(input);
+        save(dob);
+        renderAgeLoop();
+    });
+
+    function save(dob)
+    {
+        localStorage.dob = dob.getTime();
+    };
+
+    function load()
+    {
+        var dob;
+        if (dob = localStorage.getItem("dob"))
+        {
+            return new Date(parseInt(dob));
+        }
+        return -1;
+    };
+
+    function renderAgeLoop()
+    {
+        var dob = load();
+        $("#choose").css("display", "none");
+        $("#timer").css("display", "block");
+
+        setInterval(function(){
+            var age = getAge(dob);
+            $("#age").html(age.year + "<sup>." + age.ms + "</sup>");
+        }, 100);
+    };
+
+    function renderChoose()
+    {
+        $("#choose").css("display", "block");
+    };
+
+    function getAge(dob){
+        var now       = new Date;
+        var duration  = now - dob;
+        var years     = duration / 31556900000;
+
+        var majorMinor = years.toFixed(9).toString().split('.');
+
+        return {
+            "year": majorMinor[0],
+            "ms": majorMinor[1]
+        };
+    };
+
+    function main() {
+        if (load() != -1)
+        {
+            renderAgeLoop();
+        } else {
+            renderChoose();
+        }
+    };
+    main();
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <!-- favicon  -->
+    <link rel="icon" type="image/png" href="images/favicon/circle.png">
+
+    <!-- Scroll Bar  -->
+
+    <style>
+
+    body {
+        /* overlay scrollbar to transparent */
+        overflow: overlay;
+    }
+
+      ::-webkit-scrollbar {
+        /* rounded thumb size : set as 20px */
+        width: 15px;
+        background-color: transparent;
+      }
+
+      ::-webkit-scrollbar-track {
+      /* scroll bar traparent : initalizing colorless & border radius as zero */
+      border-radius: 0px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+      /* rounded thumb : Border Radius */
+      border-radius: 20px;
+
+      /* height of thumb */
+      height: 40px;
+
+      /* thumb color */
+      background-color:rgb(179,0,255); background: linear-gradient(90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+      }
+
+      /* thumb hover color */
+      ::-webkit-scrollbar-thumb:hover {
+      background-color:rgb(179,0,255); background: linear-gradient(-90deg, rgba(179,0,255,1) 0%, rgba(231,0,255,1) 51%, rgba(255,0,254,1) 100%); 
+      }
+      </style>
+
+     <!-- Scroll Bar Ended  -->
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123605982-1"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-123605982-1');
+    </script>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Ossama Mehmood | Age Timer</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width">
+  <script
+  src="https://code.jquery.com/jquery-2.2.4.min.js"
+  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+  crossorigin="anonymous"></script>
+  <script src="app.js"></script>  
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<form id="choose" style="display: none;">
+    <h1 id="dob" class="age-label">When were you born?</h1>
+
+    <footer>
+    <input type="date" name="dob" id="dob-input">
+    <button type="submit" id="submit">Motivate</button>
+    </footer>
+</form>
+
+<div id="timer" style="display: none;">
+    <h1 class="age-label">AGE</h1>
+    <h2 class="count" id="age"></h2>
+</div>
+
+<div id="cite">
+    <h6>Adapted Motivation by
+        <a href="https://ossamamehmood.github.io">
+        ossamamehmood
+        </a>
+    </h6>
+</div>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,125 @@
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-align-items: center;
+  -webkit-flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -webkit-justify-content: center;
+}
+
+body, input {
+  display: -webkit-flex;
+  font-family: 'Avenir', 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+.age-label {
+  background: linear-gradient(90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 1.2rem;
+  line-height: 1;
+  margin: 0 0 0 2px;
+}
+
+#cite {
+  color: #B0B5B9;
+  font-size: 1.2rem;
+  line-height: 1;
+  margin: 0 0 0 2px;
+  position: fixed;
+  bottom: 0;
+}
+
+#cite a {
+  background: linear-gradient(90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-decoration: none;
+}
+#cite a:visited {
+  background: linear-gradient(-90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+#cite a:hover {
+  background: linear-gradient(-90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+#cite a:active {
+  background: linear-gradient(-90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+.count {
+  color: #494949;
+  margin: 0;
+  font-size: 6rem;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.count sup {
+  font-size: 2.4rem;
+  margin-left: 7px;
+}
+
+label {
+  display: block;
+}
+
+input, button {
+  padding: 0.375rem 0.75rem;
+  font-size: 1.5rem;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+input {
+  margin-right: 0.5rem;
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-color: #CCC;
+  background-color: #FFF;
+}
+
+button {
+  background-color: rgb(179,0,255);
+  background: linear-gradient(90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%); 
+  padding: 0.9rem 2.1rem;
+  border: 0cm;
+}
+
+button:hover {
+  background-color: rgb(179,0,255);
+  background: linear-gradient(-90deg, rgba(179,0,255,1) 5%, rgba(231,0,255,1) 50%, rgba(255,0,254,1) 95%); 
+  padding: 0.9rem 2.1rem;
+  border: 0cm;
+}
+
+footer {
+  padding-top: 0.5rem;
+  display: -webkit-flex;
+  -webkit-flex-direction: row;
+  -webkit-justify-content: center;
+}