This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Responsive Design
@media only screen and (max-width:400px) {
.container{
flex-direction:column-reverse;
justify-content: center;
align-items: center;
}
.left{
width:100%;
margin: 20px auto 0 auto;
}
.right{
width:90%;
margin: 0 auto 0 auto;
}
.bill,.tip,.people{
width:100%;
}
#people,#bill-amount{
width:100%;
}
}
for(let i=0;i<5;i++){
groupBtn[i].addEventListener('click',function(){
var val=groupBtn[i].value;
valueArray[1]=parseInt(val.slice(0,val.length-1));
main();
});
}
valueArray[1]=parseInt(val.slice(0,val.length-1));
- MDN - This website help me to make this project responsive.
- w3schools - This website help me to learning the event handler in js.
- Frontend Mentor - @aman-abesec