Web Design

Build a Web Application using HTML CSS & JavaScript – Workout Rounds Timer

In this tutorial we will build a complete application using HTML5, CSS3 and JavaScript. This application is heavily based on JavaScript functional programing

Audio Files

HTML Source Code:

  <i class="fas fa-heartbeat"></i>

    <!-- create 3 stopwatches -->
    <div class="workout-timer-container flex">
      <header class="flex">
        <h1 class="title">Workout Rounds Timer</h1>
        <div class="inputs-container">
          <div class="input-group flex">
            <label class="roundTime">Round length</label>
            <input type="number" id="roundTime" placeholder="minutes" />
          </div>
          <div class="input-group flex">
            <label class="restTime">Rest length</label>
            <input type="number" id="restTime" placeholder="minutes" />
          </div>

          <button class="btn" id="start" onclick="startTimer()">Start</button>
        </div>
        <h4>Set the duration of your Rounds and Rest Time</h4>

        <h2 id="start-countdown"></h2>
        <h2 id="theTime"></h2>
      </header>

      <!-- todo: Round Container -->
      <div class="rounds-container flex">
        <section class="group flex">
          <div class="round">Round 1</div>
          <span class="round-time" id="round_1"></span>
        </section>
        <section class="group flex">
          <div class="rest">Rest</div>
          <span class="rest-time" id="rest_1"></span>
        </section>
        <section class="group flex">
          <div class="round">Round 2</div>
          <span class="round-time" id="round_2"></span>
        </section>
        <section class="group flex">
          <div class="rest">Rest</div>
          <span class="rest-time" id="rest_2"></span>
        </section>
        <section class="group flex">
          <div class="round">Round 3</div>
          <span class="round-time" id="round_3"></span>
        </section>
      </div>
    </div>

    <!--Audio Alerts -->
    <audio id="alert10Sec" loop>
      <source src="/audio/Wood clack.mp3" />
    </audio>
    <audio id="alertStop" loop>
      <source src="/audio/StopRound.mp3" />
    </audio>
    <audio id="alertGo" loop>
      <source src="/audio/StartRoundBell.mp3" />
    </audio>

CSS Source Code:

:root {
  --bg-c-1: #484c67;
  --bg-c-2: #37394e;
  --orange: #e98850;
  --red: #e24379;
  --blue: #01567d;
  --green: #44de00;
}

body {
  height: 100vh;
  margin: auto;
  color: #eee;
  text-shadow: 4px 4px 5px #333;
  background-color: var(--bg-c-1);
  position: relative;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.workout-timer-container {
  width: 600px;
}

.title {
  font-size: 6rem;
  text-align: center;
  margin: 15vh 0;
}

h4 {
  text-align: center;
}

.inputs-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: var(--bg-c-2);
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0 15px 10px #333;
  transition: all 0.2s ease;
}
.inputs-container:hover {
  box-shadow: 0 10px 5px #333;
  transition: all 0.2s ease;
}
.input-group {
  padding: 1rem;
}
label.roundTime {
  font-size: 1.1rem;
  color: var(--red);
}
label.restTime {
  font-size: 1.1rem;
  color: var(--orange);
}
input {
  color: var(--orange);

  font-size: 2rem !important;
  max-width: 120px;
  text-align: center;
}
input::placeholder {
  color: #999;
}
input#roundTime {
  color: var(--red);
}
input#roundTime:hover {
  border-bottom: 1px solid var(--red);
}
input#restTime:hover {
  border-bottom: 1px solid var(--orange);
}

.btn {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: var(--green);
  color: var(--bg-c-1);
  font-size: 1.4rem;
  font-weight: 500;
  box-shadow: 0 15px 10px #333;
  border: 2px solid #333;
}
.btn:active {
  transform: scale(0.95);
}
#theTime {
  background-color: var(--bg-c-2);
  border-radius: 5px;
  padding: 1rem;
  box-shadow: inset 0 0 15px 3px #333;
  color: var(--green);
}
.fas {
  font-size: 20rem;
  position: absolute;

  top: 10vh;
  z-index: -1;
  color: var(--red);
}
.fa-heartbeat {
  color: var(--red);
}
.fa-fist-raised {
  color: var(--orange);
}
.fa-chair {
  color: var(--green);
}
.group {
  height: 100vh;
  justify-content: space-evenly;
}
.group {
  display: none;
}
.active {
  font-size: 30vh;
  display: flex;
}

.active > .round,
.active > .rest {
  font-size: 10vh;
}

.round-time,
.rest-time {
  background-color: var(--bg-c-2);
  border-radius: 5px;
  box-shadow: 0 15px 10px #333;
  transition: all 0.2s ease;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.animateSeconds {
  color: var(--red);
  animation: animateTime 1s ease;
}

@keyframes animateTime {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(1);
  }
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: