HOW I CREATED A SIMPLE RUNNING TRACKER WITH HTML, CSS, AND JAVASCRIPT
The running tracker is basically is a tracker where you can log each day, how many miles you have run, and also set a target for yourself weekly.
I started this project by creating my user interface with HTML
CREATING THE USER INTERFACE
The first step is to create the UI. create a folder on your desktop and open it on vscode. and create a new HTML document inside our public folder called index.html and add the following content inside it
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RUNNING TRACKER</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,900;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo">
<div class="logo">
<svg viewBox="0 0 383 367" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M288.603 64.462C306.387 64.462 320.81 49.991 320.81 32.207C320.81 14.423 306.388 0 288.603 0C270.77 0 256.348 14.422 256.348 32.207C256.348 49.991 270.77 64.462 288.603 64.462Z"
fill="rgba(231, 227, 220, 0.877)" />
<path
d="M177.603 88.382L127.466 146.315C124.494 149.969 120.011 152.211 114.944 152.211C105.979 152.211 98.7194 144.951 98.7194 136.034C98.7194 131.162 100.814 126.825 104.176 123.853L158.26 61.584C161.232 58.027 165.715 55.737 170.782 55.737L249.033 55.688C254.783 55.688 259.947 58.027 263.748 61.681L313.641 111.575L355.008 70.305C357.932 67.82 361.684 66.358 365.776 66.358C375.034 66.358 382.489 73.862 382.489 83.12C382.489 87.164 381.124 90.818 378.737 93.742L328.892 143.976C313.739 159.081 301.558 146.266 301.558 146.266L270.959 115.521L223.161 170.823L266.964 214.626C266.964 214.626 276.221 223.202 270.91 240.255L246.353 349.735C244.404 359.237 236.024 366.399 225.987 366.399C214.439 366.399 205.133 357.044 205.133 345.545C205.133 343.694 205.328 341.94 205.766 340.283L225.987 250.484L176.19 202.101L133.362 249.851C133.362 249.851 126.443 258.378 108.074 257.744L21.1994 257.89C11.5034 258.037 2.68437 251.41 0.540366 241.568C-2.04263 230.361 4.87637 219.349 16.1314 216.865C17.8864 216.475 19.6404 216.329 21.3454 216.377L96.0394 216.572L206.499 88.522L177.605 88.376L177.603 88.382Z"
fill="pink" />
</svg>
</div>
</body>
The running tracker image was an SVG image that can be gotten from Google. below are the rest of the code used in my HTML
<form>
<label for="entry">Number of miles today</label>
<br>
<input type="number" id="entry" step="0.1">
<br />
<button type="submit">Add</button>
</form>
<hr>
<section class="entriesWrapper">
<h3> Last 7 days</h3>
<ul id="entries">
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
</ul>
</section>
<section class="data">
<div>
<p>Total:</p>
<span id="total">0</span>
</div>
<div>
<p>Average distance:</p>
<span id="average">0</span>
</div>
<div>
<p>This week high:</p>
<span id="high">0</span>
</div>
</section>
<section class="progress">
<h3>Weekly target: <span id="progressTotal">0</span> /<span id="target">25</span>miles </h3>
<div class="progressCircleWrapper">
<div id="progressCircle">
<div id="progressCenter"> </div>
</div>
</div>
</section>
<script src="script.js"></script>
after creating the user interface we need to beautify our UI to make it attractive and user friendly.
FONT AND STYLING
create a style.css file inside your folder and also link it to your HTML.
html {
font-family: 'Roboto', sans-serif;
font-size: 10px;
background: rgb(185, 171, 185);
}
body {
padding: 10px;
background:rgb(46, 30, 40);
color: rgba(197, 112, 112, 0.877);
width: 90%;
margin:0 auto;
}
I got my forms fonts from google fonts and used the color picker to pick my preferred background color. I would advise you to pick a color and font of your preference.
after styling the body I moved on to the logo section where I have my SVG image by moving the whole logo to the center with
.logo {
text-align: center;
}
to change the color of the SVG image it can be done either in the CSS or inside our HTML. I styled my SVG image inside my HTML by replacing the color in the fill tag of my SVG
fill="pink" />
</svg>
then I styled the rest of my element like this
form {
text-align: center;
}
label{
font-size: 18px;
}
input[type="number"] {
font-family: inherit;
background: rgba(231, 227, 220, 0.877);
width: 80%;
margin:10px 0;
padding: 8px 0;
border: none;
font-size: 12px;
text-align: center;
}
button {
font-family: inherit;
font-size: 14px;
font-weight: bolder;
width: 80px;
height: 80px;
border: none;
border-radius: 50%;
background: palevioletred;
margin: 5px 0 1px 0;
}
ul {
padding: 0;
display: flex;
list-style: none;
justify-content:space-between;
}
li {
border: 1px solid;
padding: 10px 15px;
}
.entriesWrapper {
padding: 10px 0;
font-size: 16px;
}
.entriesWrapper h3 {
margin: 0;
text-align: center;
font-weight: lighter;
}
.data {
font-size: 14px;
}
.data div {
background: pink;
display: flex;
align-items: center;
justify-content: space-between;
margin: 5px 0;
padding: 0 1px;
}
.progress {
text-align: center;
padding-bottom: 10px;
}
.progress h3 {
font-size: 16px;
font-weight: lighter;
}
.progressCircleWrapper {
display: flex;
justify-content: center;
}
#progressCircle {
width: 250px;
height: 250px;
border-radius: 50%;
background: conic-gradient(pink 50%, rgb(46, 30, 40) 50%);
display: flex;
justify-content: center;
align-items: center;
}
#progressCenter {
width: 220px;
height: 220px;
border-radius: 50%;
background: rgb(46, 30, 40);
}
@media screen and ( min-width:800px) {
body {
width: 60%;
}
}
input [type="number"] {
width: 40%;
}
svg {
max-width: 50%;
}
after styling and making the UI presentable the app functional by creating a js file inside our folder called script.js then you link the script element in your html just befor the closing of the body tag like this
<script src= "script.js"></script>
</body>
IMPLEMENTING MY JAVASCRIPT
After linking my js in my HTML , I worked on the entry section and made it functional by
const goal= 25;
let entries = [];
const entriesWrapper = document.querySelector("#entries");
document.querySelector('#target').innerText = goal;
function addNewEntry(newEntry){
entriesWrapper.removeChild(entriesWrapper.firstElementChild);
const listItem = document.createElement("li");
const listValue = document.createTextNode(newEntry.toFixed(1));
listItem.appendChild(listValue)
entriesWrapper.appendChild(listItem);
}
then I proceeded to calculate the total average weekly and also fixing the progress circle
function reducer(total, currentValue){
return total + currentValue
}
function calcTotal(){
const totalValue = entries.reduce(reducer)
document.getElementById('total').innerText = totalValue
document.getElementById('progressTotal').innerText = totalValue
}
function calcAverage(){
const average = (entries.reduce(reducer) / entries.length).toFixed(1)
document.getElementById('average').innerText = average
}
function weeklyHigh() {
const high = Math.max(...entries)
document.getElementById('high').innerText + high;
}
function calcGoal() {
const totalValue = entries.reduce(reducer).toFixed(1);
const completedPercent = totalValue / (goal / 100);
const progressCircle = document.querySelector("#progressCircle");
if (completedPercent > 100) completedPercent === 100;
progressCircle.style.background = 'conic-gradient(pink ${completedPercent}%, rgb(46, 30, 40) ${completedPercent}% 100% )';
}
function handleSubmit(event) {
event.preventDefault()
const entry = Number(document.querySelector('#entry').value);
console.log(entry)
if (!entry) return;
document.querySelector("form").reset();
entries.push(entry);
addNewEntry(entry);
calcTotal();
calcAverage();
weeklyHigh();
calcGoal();
}
const form =document.querySelector('form')
.addEventListener('submit', handleSubmit);
CONCLUSION
The app is quite simple and straightforward, its one of my first projects, and I'm open to corrections and comments.