An Interest In:
Web News this Week
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
January 17, 2022 06:13 am GMT
Original Link: https://dev.to/atuljoshy/build-a-simple-water-drinking-tracker-with-js-1717
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To