<h3 id="heading-the-challenge">The challenge</h3>
The challenge is to build out a tip calculator app and get it looking as close to the design as possible.
Users should be able to:
<ul>
<li>Calculate the correct tip and total cost of the bill per person
</li>
<li>View the optimal layout for the app depending on their device's screen size
</li>
<li>See hover states for all interactive elements on the page
</li>
</ul>
<h3 id="heading-built-with">Built with</h3>
<ul>
<li>HTML5
</li>
<li>JavaScript
</li>
<li>CSS
</li>
</ul>
<h3 id="heading-what-i-learnt">What I learnt</h3>
HTML DOM (Document Object Model)
<ul>
<li>A programmatic interface is provided that enables the creation, modification, or deletion of items within the document. Additionally, we have the capability to incorporate events into these sections in order to enhance the interactivity of our webpage.
 Used Dom Elements in my code
</li>
<li><code>getElementById()</code> method returns an element with a specified id.
</li>
<li><code>addEventListener()</code> method attaches an event handler to an specified .
</li>
<li><code>setAttribute()</code> method sets a new value to an attribute for the html element .
</li>
<li><code>removeAttribute()</code> method removes an attribute from an element.
</li>
</ul>
<h2 id="heading-author">Author</h2>
<ul>
<li>Frontend Mentor - <a target="_blank" href="https://www.frontendmentor.io/profile/anushkaDev9">@anushkaDev9</a>
</li>
<li>GitHub Repository - <a target="_blank" href="https://github.com/anushkaDev9/Tip-Calculator-">https://github.com/anushkaDev9/Tip-Calculator-</a>
</li>
<li>Live site - <a target="_blank" href="https://anushkadev9.github.io/Tip-Calculator-/">https://anushkadev9.github.io/Tip-Calculator-/</a>
</li>
<li>linkedIn - <a target="_blank" href="https://www.linkedin.com/in/anushka-rangari-4517921a4/">https://www.linkedin.com/in/anushka-rangari-4517921a4/</a>
</li>
</ul>

### The challenge

The challenge is to build out a tip calculator app and get it looking as close to the design as possible.

Users should be able to:

* Calculate the correct tip and total cost of the bill per person
    
* View the optimal layout for the app depending on their device's screen size
    
* See hover states for all interactive elements on the page
    

### Built with

* HTML5
    
* JavaScript
    
* CSS
    

### **What I learnt**

**HTML DOM (Document Object Model)**

* A programmatic interface is provided that enables the creation, modification, or deletion of items within the document. Additionally, we have the capability to incorporate events into these sections in order to enhance the interactivity of our webpage.
    
    Used Dom Elements in my code
    
* `getElementById()` method returns an element with a specified id.
    
* `addEventListener()` method attaches an event handler to an specified .
    
* `setAttribute()` method sets a new value to an attribute for the html element .
    
* `removeAttribute()` method removes an attribute from an element.
    

## Author

* Frontend Mentor - [@anushkaDev9](https://www.frontendmentor.io/profile/anushkaDev9)
    
* GitHub Repository - [https://github.com/anushkaDev9/Tip-Calculator-](https://github.com/anushkaDev9/Tip-Calculator-)
    
* Live site - [https://anushkadev9.github.io/Tip-Calculator-/](https://anushkadev9.github.io/Tip-Calculator-/)
    
* linkedIn - [https://www.linkedin.com/in/anushka-rangari-4517921a4/](https://www.linkedin.com/in/anushka-rangari-4517921a4/)

Responsive Tip Calculator

The challenge

Built with

What I learnt

Author