Merge pull request #31 from DarkFalc0n/main

Completed timer extension
harshita214 · Feb 5, 2022 · 61d25e0 · 61d25e0
2 parents f9894f1 + 991d44e
commit 61d25e0
Show file tree

Hide file tree

Showing 14 changed files with 387 additions and 0 deletions.
diff --git a/Timer/Background/background.js b/Timer/Background/background.js
@@ -0,0 +1,20 @@
+var secondsLeft
+
+chrome.storage.local.set({'isTimerRunning': 0})
+chrome.storage.local.set({'isTimerIdle': 1})
+
+const options = {
+    type: "basic",
+    title: "AlarmClock",
+    message: `Now the time is:${new Date().getHours()}:${new Date().getMinutes()}`,
+    iconUrl: "logo.png"
+  };
+
+chrome.alarms.onAlarm.addListener(
+    function(alarm){
+        if (alarm.name == 'TimerAlarm'){
+            chrome.storage.local.set({'isTimerRunning': 0})
+            chrome.alarms.clear('TimerAlarm')
+        }
+    }
+);
diff --git a/Timer/Icons/logo128.png b/Timer/Icons/logo128.png
diff --git a/Timer/Icons/logo64.png b/Timer/Icons/logo64.png
diff --git a/Timer/Popup/popup.html b/Timer/Popup/popup.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+	<head>
+        <link rel="stylesheet" type="text/css" href="styles.css">
+	</head>
+	<body>
+		<div class="app-wrapper">
+			<div class="input-wrapper" id="inputwrapper">
+				<div class="flex-row">
+					<div class="time-input">
+						<input type="number" autocomplete="off" max="24" maxlength=2 placeholder="00" class="input-field thin-border small-text" id="hours">
+						<p class="field-type small-text">HH</p>
+					</div>
+					<p class="small-text">:</p>
+					<div class="time-input">
+						<input type="number" autocomplete="off" max="59" maxlength=2 placeholder="00" class="input-field thin-border small-text" id="minutes">
+						<p class="field-type small-text">MM</p>
+					</div>
+					<p class="small-text">:</p>
+					<div class="time-input">
+						<input type="number" autocomplete="off" max="59" maxlength=2 placeholder="00" class="input-field thin-border small-text" id="seconds">
+						<p class="field-type small-text">SS</p>
+					</div>
+				</div>
+				<button class="button thin-border small-text" id="startbutton">Start Timer</button>
+				<p class="error-msg small-text hide" id="error">Please insert valid time values</p>
+			</div>
+			<div id="timerwrapper" class="timer-wrapper hide">
+				<p class="small-text" id="timermessage">Timer is running</p>
+				<p class="time-left large-text" id="timestring">00h 00m 00s</p>
+				<div class="loading-bar">
+					<div class="loader" id="loader"></div>
+				</div>
+
+				<button class="button thin-border small-text" id="resetbutton">Reset</button>
+
+			</div>
+		</div>
+		<script src="popup.js"></script>
+	</body>
+</html>
diff --git a/Timer/Popup/popup.js b/Timer/Popup/popup.js
@@ -0,0 +1,125 @@
+var timeInSeconds
+var Hour, Minute, Second
+var timeLeft
+var loaderLength
+var totalTime
+var timeString = document.getElementById('timestring')
+var inputScreen = document.getElementById('inputwrapper')
+var timerScreen = document.getElementById('timerwrapper')
+var hourInput = document.getElementById('hours')
+var minuteInput = document.getElementById('minutes')
+var secondInput = document.getElementById('seconds')
+var inputError = document.getElementById('error')
+var startButton = document.getElementById('startbutton')
+var timerMessage = document.getElementById('timermessage')
+var resetButton = document.getElementById('resetbutton')
+var loadBar = document.getElementById('loader')
+
+
+startButton.addEventListener('click', clickStart);
+resetButton.addEventListener('click', clickReset);
+
+
+
+//State Update Code Starts Here ->
+setInterval(function (){
+    chrome.storage.local.get(['isTimerIdle', 'isTimerRunning'], (result) => {
+        if(result.isTimerIdle){
+            inputScreen.classList.remove('hide');
+            timerScreen.classList.add('hide');
+        }
+        else {
+            inputScreen.classList.add('hide');
+            timerScreen.classList.remove('hide');
+            if (result.isTimerRunning) {
+                timerMessage.innerHTML = "Timer is running";
+            }
+            else {
+                timerMessage.innerHTML = "Time is up"
+            }
+        }
+    }) //fetch storage data
+
+
+},1000)
+
+
+//TimeUpdate Code Starts Here ->
+setInterval(function (){
+    chrome.alarms.get('TimerAlarm', function(alarms) {
+        if (alarms != null) {
+            chrome.storage.local.get(['timeInSeconds'], (result) => {
+                totalTime = result.timeInSeconds;
+            })
+            var now = new Date().getTime();
+            var countDownTime = alarms.scheduledTime;
+            var distance = countDownTime - now;
+            if(distance > 0){
+                timeLeft = generateTimeString(Math.floor(distance / 1000));
+                loaderLength = (distance * 296)  / (totalTime*1000);
+            }
+        }
+        else {
+            timeLeft = '00h 00m 00s';
+            loaderLength = 0;
+        }
+    })
+
+    timeString.innerHTML = timeLeft;
+    loadBar.style["width"] = loaderLength + 'px';
+
+
+
+},50)
+
+
+
+function clickReset(){
+    chrome.storage.local.set({'isTimerRunning': 0})
+    chrome.storage.local.set({'isTimerIdle': 1});
+    chrome.alarms.clear('TimerAlarm');
+    inputScreen.classList.remove('hide');
+    timerScreen.classList.add('hide');    
+}
+
+
+function clickStart(){
+    if ((hourInput.value == 0 && minuteInput.value == 0 && secondInput.value == 0) || (hourInput.value < 0 || minuteInput.value < 0 || secondInput.value < 0)){
+        inputError.classList.remove('hide');
+    }
+    else{
+
+        inputError.classList.add('hide')
+
+        inputScreen.classList.add('hide');
+        timerScreen.classList.remove('hide');
+        timeInSeconds = hourInput.value * 3600 + minuteInput.value * 60 + secondInput.value * 1;
+        chrome.storage.local.set({'timeInSeconds': timeInSeconds})
+        console.log(timeInSeconds);
+
+        chrome.alarms.create(
+            'TimerAlarm',
+            {when: Date.now() + timeInSeconds * 1000}
+        )
+
+        chrome.storage.local.set({'isTimerRunning': 1})
+        chrome.storage.local.set({'isTimerIdle': 0});
+        console.log('clickstarted');
+    }
+}
+
+
+function generateTimeString(time){
+    Hour = Math.floor(time / 3600);
+    Minute = Math.floor((time % 3600) / 60);
+    Second = Math.floor((time % 3600) % 60);
+    var s = doubleDigitString(Hour) + 'h ' + doubleDigitString(Minute) + 'm ' + doubleDigitString(Second) + 's';
+    return s;
+}
+
+
+function doubleDigitString(num){
+    s = '0' + num;
+    return s.substr(s.length-2);
+}
+
diff --git a/Timer/Popup/styles.css b/Timer/Popup/styles.css
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;300;400&display=swap');
+body{
+    margin: 0;
+    padding: 0;
+}
+.app-wrapper{
+    width: 400px;
+    height: 200px;
+    background-color: #1a1a1a;
+    overflow: hidden;
+}
+.input-wrapper{
+
+    display: flex;
+    flex-direction: column;
+}
+.flex-row{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    padding-top: 10px;
+}
+
+.time-input{
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+}
+.input-field{
+    width: 70px;
+    height: 50px;
+    background-color: transparent;
+    box-sizing: border-box;
+}
+.field-type{
+    text-align: center;
+    margin-top: 5px;
+}
+.button{
+    width: 120px;
+    height: 40px;
+    margin: auto;
+    margin-top: 0px;
+    background-color: #1a1a1a;    
+    font-size: medium;
+}
+.thin-border{
+    border-color: white;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 8px;
+    color: white;
+}
+.button:hover{
+    color: #1a1a1a;
+    background-color: white;
+    transition: 0.5s;
+}
+.button:active{
+    transform: scale(0.9);
+}
+.small-text{
+    font-family: 'Overpass', sans-serif;
+    color: white;
+    font-size: 19px;
+    text-align: center;
+    font-weight: 100;
+}
+.large-text{
+    font-family: 'Overpass', sans-serif;
+    color: white;
+    font-size: 25px;
+    text-align: center;
+    font-weight: 100;
+}
+
+input::-webkit-outer-spin-button{
+    -webkit-appearance: none;
+
+}
+input::-webkit-inner-spin-button{
+    -webkit-appearance: none;
+
+}
+@keyframes pop-up {
+    0% {
+        transform: scale(0.9);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.timer-wrapper{
+    /* display: none; */
+    display: flex;
+    flex-direction: column;
+}
+.time-left{
+    margin-top: 0px;
+}
+.error-msg{
+    color: red;
+    animation: pop-up 0.1s linear;
+}
+.loading-bar{
+    width: 300px;
+    height: 10px;
+    position: relative;
+    top: -20px;
+    margin: auto;
+    margin-top: 0;
+    border-color: white;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+    color: white;
+}
+
+.loader{
+    height: 6px;
+    position: relative;
+    top: 2px;
+    left: 2px;
+    width: 200px;
+    background-color: white;
+    float: left;
+    border-radius: 2px;
+}
+
+.hide{
+    display:none;
+}
diff --git a/Timer/Preview/1_Idle.png b/Timer/Preview/1_Idle.png
diff --git a/Timer/Preview/1_Input.png b/Timer/Preview/1_Input.png
diff --git a/Timer/Preview/2_Error.png b/Timer/Preview/2_Error.png
diff --git a/Timer/Preview/3_Running.png b/Timer/Preview/3_Running.png
diff --git a/Timer/Preview/3_Running_2.png b/Timer/Preview/3_Running_2.png
diff --git a/Timer/Preview/4_End.png b/Timer/Preview/4_End.png
diff --git a/Timer/README.md b/Timer/README.md
@@ -0,0 +1,50 @@
+
+# Timer: A chrome extension
+
+A timer chrome extension for multipurpose use.
+
+## Features
+
+- `Start Timer` and `Reset` buttons to control the functionality.
+
+
+
+## Deployment
+
+To deploy this extension: 
+
+- Turn on developers option in chrome extension settings.
+- Select `Load Unpacked` and then navigate to the source code directory.
+
+## Issues to be resolved
+
+These are some known issues that could be resolved in the future:
+
+- [ ] UI glitch that can cause the `Set timer` screen to flash even when the timer is running.
+- [ ] Automatic popup of the extension once the timer has completed running. (To be implemented)
+- [ ] Sounds to be added to button press and timer completion for better UX.
+- [ ] Better UI could be implemented, although the focus should be on ultra-minimalism. 
+
+## Previews
+
+### Idle
+![Idle](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/1_Idle.png)
+
+### Input
+![Input](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/1_Input.png)
+
+
+
+### Running
+![Running1](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/3_Running.png)
+![Running2](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/3_Running_2.png)
+
+### End
+![End](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/4_End.png)
+
+### Error
+![Error](https://github.com/DarkFalc0n/Chrome-Extension/blob/main/Timer/Preview/2_Error.png)
+
+
+
+### Designed and Developed by [DarkFalc0n](https://github.com/DarkFalc0n)
diff --git a/Timer/manifest.json b/Timer/manifest.json
@@ -0,0 +1,19 @@
+{
+    "name": "Timer for Developers",
+    "description": " A timer extension for multipurpose use.",
+    "version": "1.0.0",
+    "manifest_version": 3,
+    "permissions": ["storage","activeTab","scripting","tabs","alarms","notifications"] ,
+    "action": {
+        "default_popup": "Popup/popup.html",
+        "default_icon": {              
+            "64": "Icons/logo64.png", 
+            "128": "Icons/logo128.png"   
+          }
+    },
+    "background": {
+        "service_worker": "Background/background.js"
+      } 
+
+
+}