Browse Source

Initial commit

Kristian Vos 2 years ago
commit
f13e61f0c6
11 changed files with 281 additions and 0 deletions
  1. BIN
      PoiretOne-Regular.ttf
  2. 3 0
      README.md
  3. 4 0
      bootstrap.min.css
  4. 3 0
      font-awesome.min.css
  5. BIN
      fontawesome-webfont.ttf
  6. BIN
      fontawesome-webfont.woff
  7. BIN
      fontawesome-webfont.woff2
  8. 72 0
      index.html
  9. 1 0
      jquery.min.js
  10. 105 0
      script.js
  11. 93 0
      style.css

BIN
PoiretOne-Regular.ttf


+ 3 - 0
README.md

@@ -0,0 +1,3 @@
+# Tic Tac Toe
+A small project created for a FreeCodeCamp zipline challenge.  
+Created July 7th, 2015

File diff suppressed because it is too large
+ 4 - 0
bootstrap.min.css


File diff suppressed because it is too large
+ 3 - 0
font-awesome.min.css


BIN
fontawesome-webfont.ttf


BIN
fontawesome-webfont.woff


BIN
fontawesome-webfont.woff2


+ 72 - 0
index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Pomodoro Clock</title>
+        <link
+            rel="stylesheet"
+            href="./bootstrap.min.css"
+        />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Poiret+One"
+        />
+        <link
+            rel="stylesheet"
+            href="./font-awesome.min.css"
+        />
+        <link rel="stylesheet" href="./style.css" />
+    </head>
+    <body>
+        <!-- partial:index.partial.html -->
+        <div class="row">
+            <div class="col-xs-2 col-md-2"></div>
+            <div class="col-xs-8 col-md-8" id="main">
+                <h1 id="header">Pomodoro Clock</h1>
+                <div id="pomodoro-clock">
+                    <h1 id="state">Session</h1>
+                    <h1 id="timer">25:00</h1>
+                    <div class="progress" id="progress">
+                        <div
+                            class="progress-bar progress-bar-striped progress-bar-success active"
+                            id="progress-bar"
+                            style="width: 0%"
+                        ></div>
+                    </div>
+                </div>
+                <ul id="main-ul">
+                    <li id="session-li" class="sb-li">
+                        <ul id="session-ul" class="sb-ul">
+                            <li class="sb-li2">Session:</li>
+                            <br />
+                            <li id="session-plus" class="sb-li2 clickable">
+                                <i class="fa fa-plus"></i>
+                            </li>
+                            <li id="session-display" class="sb-li2">25:00</li>
+                            <li id="session-minus" class="sb-li2 clickable">
+                                <i class="fa fa-minus"></i>
+                            </li>
+                        </ul>
+                    </li>
+                    <li id="break-li" class="sb-li">
+                        <ul id="break-ul" class="sb-ul">
+                            <li class="sb-li2">Break:</li>
+                            <br />
+                            <li id="break-plus" class="sb-li2 clickable">
+                                <i class="fa fa-plus"></i>
+                            </li>
+                            <li id="break-display" class="sb-li2">5:00</li>
+                            <li id="break-minus" class="sb-li2 clickable">
+                                <i class="fa fa-minus"></i>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-xs-2 col-md-2"></div>
+        </div>
+        <!-- partial -->
+        <script src="./jquery.min.js"></script>
+        <script src="./script.js"></script>
+    </body>
+</html>

File diff suppressed because it is too large
+ 1 - 0
jquery.min.js


+ 105 - 0
script.js

@@ -0,0 +1,105 @@
+var audio = new Audio(
+    "http://oringz.com/oringz-uploads/sounds-1054-suppressed.mp3"
+);
+
+var state = "session";
+var time_left = 1500;
+var session_time = 1500;
+var break_time = 300;
+var running = false;
+var intervalTimer = 0;
+
+$(document).ready(function () {
+    $("#pomodoro-clock").on("click", function () {
+        running = !running;
+        timer();
+    });
+
+    $(".clickable").on("click", function () {
+        if (!running) {
+            var id = $(this).attr("id");
+
+            if (id === "session-plus") {
+                session_time += 60;
+                $("#session-display").text(fancyTime(session_time));
+                resetTimeLeft();
+            } else if (id === "session-minus") {
+                session_time -= 60;
+                $("#session-display").text(fancyTime(session_time));
+                resetTimeLeft();
+            } else if (id === "break-plus") {
+                break_time += 60;
+                $("#break-display").text(fancyTime(break_time));
+                resetTimeLeft();
+            } else if (id === "break-minus") {
+                break_time -= 60;
+                $("#break-display").text(fancyTime(break_time));
+                resetTimeLeft();
+            }
+        }
+    });
+});
+
+function timer() {
+    clearInterval(intervalTimer);
+    if (running) {
+        intervalTimer = setInterval(function () {
+            time_left--;
+            if (time_left <= 0) {
+                audio.play();
+                if (state === "session") {
+                    time_left = break_time;
+                    state = "break";
+                    $("#state").text("Break");
+                    $("#progress-bar").removeClass("progress-bar-success");
+                    $("#progress-bar").addClass("progress-bar-danger");
+                } else {
+                    time_left = session_time;
+                    state = "session";
+                    $("#state").text("Session");
+                    $("#progress-bar").addClass("progress-bar-success");
+                    $("#progress-bar").removeClass("progress-bar-danger");
+                }
+            }
+            updateDisplay();
+        }, 1000);
+    }
+}
+
+function updateDisplay() {
+    $("#timer").text(fancyTime(time_left));
+    var percentage;
+    if (state === "session") {
+        percentage = ((session_time - time_left) / session_time) * 100;
+    } else {
+        percentage = ((break_time - time_left) / break_time) * 100;
+    }
+
+    $("#progress-bar").css({
+        width: percentage + "%",
+    });
+}
+
+function fancyTime(seconds) {
+    var minutes = Math.floor(seconds / 60);
+    var remainder = seconds % 60;
+    if (minutes === 0) {
+        minutes = "0";
+    }
+    if (remainder === 0) {
+        remainder = "00";
+    }
+    if (remainder > 0 && remainder < 10) {
+        remainder = "0" + remainder;
+    }
+    return minutes + ":" + remainder;
+}
+
+function resetTimeLeft() {
+    if (state === "session") {
+        time_left = session_time;
+    } else {
+        time_left = break_time;
+    }
+    updateDisplay();
+}

+ 93 - 0
style.css

@@ -0,0 +1,93 @@
+@font-face {
+    font-family: "Poiret One";
+    src: URL("PoiretOne-Regular.ttf") format("truetype");
+}
+
+body {
+    background-color: lightgreen;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.row {
+    margin: 0;
+}
+
+#header {
+    margin-top: 50px;
+    text-align: center;
+    font-family: "Poiret One", cursive;
+    font-size: 50px;
+    color: #545454;
+}
+
+#main-ul {
+    list-style: none;
+    padding: 0;
+    width: 100%;
+    margin-top: 20px;
+}
+
+.sb-li {
+    display: inline-block;
+    width: 50%;
+    float: left;
+}
+
+.sb-ul {
+    list-style: none;
+    width: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 20px;
+}
+
+.sb-li2 {
+    text-align: center;
+    width: 100px;
+    height: 30px;
+    color: white;
+    font-size: 30px;
+    margin-top: 5px;
+}
+
+.sb-li2:first-child {
+    font-family: "Poiret One", cursive;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+#pomodoro-clock {
+    background-color: lightblue;
+    border: 2px solid black;
+    border-radius: 30px;
+    cursor: pointer;
+}
+
+#progress {
+    margin-top: 50px;
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#timer {
+    text-align: center;
+}
+
+#state {
+    text-align: center;
+}
+
+@media (max-width: 800px) {
+    body {
+        min-width: 800px;
+    }
+}

Some files were not shown because too many files changed in this diff