/Tip-Calculator-App

The Tip Calculator can help you figure out how much is the correct tip supply

Primary LanguageCSS

Tip Calculator

Table of contents

Overview

The challenge

Users should be able to:

  • See hover states for all interactive elements on the page
  • Calculate tips about a predetermined base (5 - 10 - 15 - 25 - 50)
  • Calculate tips in custom way
  • Reset all form to 0 with a button
  • Divide the tip between N numbers of people

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS3
  • Flexbox
  • CSS Grid
  • JavaScript

What I learned

I learned how it's possible manipulate the DOM (Document Object Model)

const attr = this.getAttribute('name')
const float = parseFloat(this.value)
const h5 = document.createElement('h5')
h5.id = 'h5'
const id = this.name
const element= document.querySelector('#' + id)
if (id == 'custom') element.style.display = 'block'
    const errorMessage = document.createTextNode(`Can't be zero`)
    h5.appendChild(errorMessage)
    h5.style.display = 'inline'
    h5.style.color = 'red'
    element.children[0].classList.add('h5Inline')
    element.insertBefore(h5, element.children[1])

how make events and propagate them.

$button.forEach( function(e,i) {
	e.addEventListener('click',((e)=>{
		e.preventDefault()
		let q = parseInt(e.target.name)
		$count.percent = q
		$countOfData++
	}))
});

How to use global methods for modified the aspect of the content

if (deleteNode != null) {
    setTimeout((() => {
        deleteNode.parentNode.removeChild(deleteNode)
        element.children[0].removeAttribute('class')
    }),500)
}else{
    paint()
}

Useful resources

Author