mirror of
https://github.com/LucasVbr/chronometer.git
synced 2026-05-13 17:12:08 +00:00
Initial commit
This commit is contained in:
LucasV-IUT
@@ -0,0 +1,2 @@
|
|||||||
|
# Auto detect text files and perform LF normalization
|
||||||
|
* text=auto
|
||||||
Generated
+5
@@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
Generated
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$/../chronometer">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/../chronometer/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/../chronometer/tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/../chronometer/.tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
Generated
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="JavaScriptSettings">
|
||||||
|
<option name="languageLevel" value="FLOW" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+8
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/chronometre.iml" filepath="$PROJECT_DIR$/.idea/chronometre.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
/*
|
||||||
|
* Chronometer.js, 23/02/2022
|
||||||
|
* no copyright, no rights
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simple chronometer
|
||||||
|
* @author Lucas Vbr
|
||||||
|
*/
|
||||||
|
class Chronometer {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new Chronometer
|
||||||
|
* @param element HTML element that will content the display of the chronometer
|
||||||
|
* @param time Initialize the timer (0 by default)
|
||||||
|
* @param separator Set the separator between digits (":" by default)
|
||||||
|
*/
|
||||||
|
constructor(element, time = 0, separator = ":") {
|
||||||
|
this.element = element;
|
||||||
|
this.time = time;
|
||||||
|
this.isCounting = false;
|
||||||
|
this.separator = separator;
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Diplay in the HTML element the current value of the timer as HH:mm:ss
|
||||||
|
*/
|
||||||
|
update() {
|
||||||
|
let seconds = this.convertTwoDigits(this.time % 60);
|
||||||
|
let minuts = this.convertTwoDigits(Math.floor(this.time / 60) % 60);
|
||||||
|
let hours = this.convertTwoDigits(Math.floor(this.time / 3600) % 24);
|
||||||
|
|
||||||
|
this.element.innerText = hours + this.separator + minuts + this.separator + seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a number with 2 digits string
|
||||||
|
* @param number Integer number
|
||||||
|
* @returns {string} Formated String with 2 digits number
|
||||||
|
*/
|
||||||
|
convertTwoDigits(number) {
|
||||||
|
return number.toLocaleString("fr", {
|
||||||
|
minimumIntegerDigits: 2,
|
||||||
|
useGrouping: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start the chronometer
|
||||||
|
*/
|
||||||
|
start() {
|
||||||
|
if (!this.isCounting) {
|
||||||
|
console.debug("Start");
|
||||||
|
this.isCounting = true;
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
this.time++;
|
||||||
|
this.update();
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stop the chronometer
|
||||||
|
*/
|
||||||
|
stop() {
|
||||||
|
if (this.isCounting) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.isCounting = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Stop the chonometer and set the time to 0
|
||||||
|
*/
|
||||||
|
clear() {
|
||||||
|
this.stop();
|
||||||
|
this.time = 0;
|
||||||
|
this.update(); /* Update the view */
|
||||||
|
}
|
||||||
|
}
|
||||||
+46
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<!-- Import Bulma and FontAwesome library-->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
|
<title>Chronometer</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div style="min-height: 80vh; justify-content: center; align-content: center; display: grid">
|
||||||
|
<div class="is-flex is-vcentered">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-content has-text-centered">
|
||||||
|
<div class="block">
|
||||||
|
<div id="time-value" class="title is-one"></div>
|
||||||
|
<button id="start-button" class="button is-primary">Start</button>
|
||||||
|
<button id="stop-button" class="button is-danger">Stop</button>
|
||||||
|
<button id="clear-button" class="button">Clear</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<strong>Chronometer</strong> by <a href="https://github.com/LucasVbr">Lucas Vbr</a>. The source code is available on
|
||||||
|
<a href="https://github.com/LucasVbr/chronometer"><span class="icon-text">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa-brands fa-github-alt"></i>
|
||||||
|
</span>
|
||||||
|
<span>GitHub</span>
|
||||||
|
</span></a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="Chronometer.js"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
/* Get all elements */
|
||||||
|
const element = document.getElementById('time-value');
|
||||||
|
const startButton = document.getElementById('start-button');
|
||||||
|
const stopButton = document.getElementById('stop-button');
|
||||||
|
const clearButton = document.getElementById('clear-button');
|
||||||
|
|
||||||
|
/* Create a new Chronometer */
|
||||||
|
const chrono = new Chronometer(element);
|
||||||
|
|
||||||
|
/* Define actions of buttons */
|
||||||
|
startButton.addEventListener("click", () => {
|
||||||
|
chrono.start()
|
||||||
|
});
|
||||||
|
|
||||||
|
stopButton.addEventListener("click", () => {
|
||||||
|
chrono.stop()
|
||||||
|
});
|
||||||
|
|
||||||
|
clearButton.addEventListener("click", () => {
|
||||||
|
chrono.clear()
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user