Initial commit

2026-05-13 17:12:08 +00:00 · 2022-02-23 13:23:22 +01:00
commit 80ebdcadbc
9 changed files with 183 additions and 0 deletions
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -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>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="FLOW" />
+  </component>
+</project>
@@ -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 */
+  }
+}
@@ -0,0 +1,2 @@
+# chronometer
+ 
@@ -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()
+});