Frontend Mentor - Tip calculator app solution

This is a solution to the Tip calculator app challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Extras

Overview

Screenshots

Links

• Solution URL: My Solution
• Live Site URL: Splitter

Click, tap or point the camera

My process

Built with

• Semantic HTML5 markup;
• CSS custom properties;
• Flexbox;
• Mobile-first workflow;
• JavaScript (no frameworks or libraries);
• GitFlow.

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

• CSS
  • Flexbox;
  • How to change placeholders;
  • How to change text insertion indicator;
  • How to change cursor appearance;
  • Multiple classes (.class.class);
  • Outline + Box-Shadow vs. Border.
• HTML
  • Div element.
• JavaScript
  • NaN and Infinity;
  • querySelectorAll();
  • How to handle DOM events;
  • Node.contains().

/*To leave the container covering the useful screen in the mobile version*/
.container, html, .area {
    height: 100%;
    margin: 0;
}

//I'm proud of my functions for inputs, in this format
input.addEventListener('keyup', event=>{});
//and I also really liked my Regular Expression (one of the only ones without "search" that worked) for hundred units
const commaRegex = /(\d)(?=(\d{3})+(?!\d))/g; //Application: 1000.00 => 1,000.00 for example

Continued development

I want to learn more about HTML DOM Events, and improve the creation of Regular Expressions (mine almost never worked right).

Useful resources

• Keycode - This helped me to get the JavaScript event keycodes. I've added it to my favorites list, to use when I need it.
• Regex101 - I use this site to test my regular expressions.
• HTML DOM Events - Here I discovered other events for inputs (besides the traditional ones: blur and focus). I want to know and use more options in the future.
• GitFlow (pt-BR video 🇧🇷) - I learned how to use GitFlow with this video.

Author

• Frontend Mentor - @gileadeteixeira
• Twitter - @giltxra
• LinkedIn - @gileade-teixeira

Extras

• I did it without a team;
• Estimated Time vs. Completed Time (discounting hours "living" 😂):
  • ET - 2 days ___ CT - Almost 3 days;
  • Started on 7/26/2021, Completed on 07/29/2021.