index.html

<!DOCTYPE html>
<html>

<head>
    <title>Drink Water</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <h1>Drink Water</h1>
    <h3>Goal:2 litres</h3>
    
          <div class="bottle">
        
        <div class="remained" id="remained">
            <div class="ok" id="lt">2L</div>
            <div class="text" id="text">remained</div>

        </div>
        <div class="filled" id="filled">
            <div class="percent" id="pcnt">0%</div>
               
        </div>

    </div>
    
    <br><br>
    <div class="fix">
    <div class="bt"><h3 id="bt">Select how many glasses of water you have drunk</h3></div>
    <div class="small">
        <div class="level-one">
           <button type="button" id ="1"  onclick="clicked(id)">
            250 mL
           
             </button>
          
          <button  type="button" id ="2" onclick="clicked(id)">250 mL</button>
          <button  type="button" id ="3" onclick="clicked(id)">250 mL</button>
          <button  type="button" id ="4" onclick="clicked(id)">
            250 mL
            </button>
            </div>
          
        
        <br>
        <br>
        
        <div class="level-two">
          <button type="button" id ="5" onclick="clicked(id)">
            250 mL
           
          </button><button type="button"  id ="6"onclick="clicked(id)">
            250 mL
           
          </button><button type="button"  id ="7" onclick="clicked(id)">
            250 mL
            
          </button><button type="button"  id ="8" onclick="clicked(id)">
            250 mL
            
          </button>
        </div>
    </div>
    </div>
</body>
<script src="change.js"></script>
</html>