Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 17, 2022 06:13 am GMT

Build a simple water drinking tracker with JS

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 SELECTORSlet saveEl = document.getElementById("save-el");let countEl = document.getElementById("count-el");// VARIABLESlet count = 0;// FUNCTIONS//This function is called when the user clicks the increment buttonfunction increment() {  count += 1;  countEl.textContent = count;}//This function is called when the user clicks the save buttonfunction 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;}

Original Link: https://dev.to/atuljoshy/build-a-simple-water-drinking-tracker-with-js-1717

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To