<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Drink Water</title> </head> <body> <h1>Drink Water</h1> <h3>Goal: 2 Liters</h3> <div class="cup"> <div class="remained" id="remained"> <span id="liters"></span> <small>Remained</small> </div> <div class="percentage" id="percentage"></div> </div> <p class="text">Select how many glasses of water that you have drank</p> <div class="cups"> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> <div class="cup cup-small">250 ml</div> </div> <script src="script.js"></script> </body> </html>