Build a simple water drinking tracker with JS

Atul Joshy — Mon, 17 Jan 2022 06:13:14 +0000

What:

We will be building a simple water drinking tracker

Why:

This will help you understand how to work with:

Functions
DOM manipulation
Basic CSS styling

How:

We will be using HTML, CSS and Vanilla Javascript for this project

Code:

HTML

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Water Tracker</title>
</head>
<body> 
    <div class="container">
        <h1>Today</h1>

        <h2 id="count-el">0</h2>
        <button id="increment-btn" onclick="increment()">Add Glass</button>
        <button id="save-btn" onclick="save()">Day Over</button>
        <p>Previous day's trackings: </p>
        <div class="previous-day-container">
            <div id="save-el"></div>
        </div>

    </div>
    <script src="app.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 10%;
    background: #fffbe2;
    background-size: cover;
    font-weight: bold;
    text-align: center;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    border-radius: 32px;
    background: #ffffff;
    padding: 60px;
    border: #dddddd3a solid 1px;
    max-width: 20%;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #313131;
}

h2 {
    color: #313131;
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

button:active {
    background: rgb(255, 255, 255);
    color: rgb(149, 142, 255);
}

p{
  color: rgb(155, 155, 155);
}

#increment-btn{
    background: #242424;
    margin: 10px;
}

#save-btn{
  background: #242424;
  margin: 10px;
}

#save-btn:hover{
  color: #1c1c1c;
  background: #ADF7B6;
  cursor: pointer;
}

#increment-btn:hover{
    color: #1c1c1c;
    background: #95c3ff;
    margin: 10px;
}

 .red{
   background: red;
   color: white;
   margin: 10px;
 }
 .green{
   background: green;
   color: white;
   margin: 10px;
 }
 .previous-day-container{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }
 .previous-day{
    width: 20px;
    height: 20px;
  padding: 15px;
  border-radius: 50px;
  margin: 0px 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
 }

 .previous-day-red{
   color: rgb(255, 53, 53);
   background: #ffb6b6;
 }

 .previous-day-green{
  color: rgb(24, 212, 103);
  background: #cdffdc;
}

JAVASCRIPT

// ELEMENT SELECTORS
let saveEl = document.getElementById("save-el");
let countEl = document.getElementById("count-el");

// VARIABLES
let count = 0;

// FUNCTIONS
//This function is called when the user clicks the increment button
function increment() {
  count += 1;
  countEl.textContent = count;
}
//This function is called when the user clicks the save button
function save() {
  let countStr = count ;
  countEl.textContent= 0;
  if(count<8){
      let number = document.createElement('p')
      number.className = 'previous-day previous-day-red'
      number.innerHTML = `${countStr}`
      let div = document.querySelector('div.previous-day-container')
      div.appendChild(number)
  }
  else if(count>=8){
    let number = document.createElement('p')
      number.className = 'previous-day previous-day-green'
      number.innerHTML = `${countStr}`
      let div = document.querySelector('div.previous-day-container')
      div.appendChild(number)
}
  count = 0;
}

DEV Community: Atul Joshy

Build a simple water drinking tracker with JS

What:

Why:

How:

Code: