All solutions

What specific areas of your project would you like help with?

All feedback is welcomed! Also, some suggestions about frameworks, as this project taked long using plain CSS and JS and in sight on larger works it's crucial to be more efficient.

What are you most proud of, and what would you do differently next time?

Dinamically change the height of the chart bars after modifying the data.json file.

Steps in JS:

1. Identify the highest value of the week //52.36
2. Set the value as the maximum height of the chart (in px, rem, etc.). //52.3610rem
3. Adjust the rest of the values relative to that maximum height by applying basic math. //17.453.33rem // 34.916.66rem ...

What challenges did you encounter, and how did you overcome them?

The animation for maintaining the hover bar color when clicking on it. I ended up using opacity values of 1 and 0.7.

What specific areas of your project would you like help with?

I don't understand the warning Buttons must have discernible text. Also about lightness modes, just feedback and maybe more understandable ways to do it :)

What are you most proud of, and what would you do differently next time?

Having a compact JS code. DS have a lot of potential, in my opinion, not only reducing asymptotic ejecution time costs, but enhancing readability. Also, with larger projects in mind in a future, it's a must to take care of the code.

What challenges did you encounter, and how did you overcome them?

It is necessary to establish regular expressions. They are very commonly used for validating the requirements of each field in forms. I first started looping over the input.value, having lots of booleans (e.g. for the email: one for the @, other for the dot...), etc. That's completely unfeasible. So I found these expressions that save a lot of work, for example for the email format: /^[^\s@]+@[^\s@]+\.[^\s@]+$/

What challenges did you encounter, and how did you overcome them?

• I had problems customizing the radio-inputs (only with the check circle).

• Then, the selection of the best DS for the script was tricky, but I think the best in this case is mapping the three main inputs. This means a map like:

  i:{
    'input': DOM' input type-text
    'icon': DOM' icon of the input (pound, percentage...)
    'err': DOM' error message (This field is required)
     },
  i+1: 
    {
    same for the next input element
    }
 } 

So with just being careful with the i you could deal more comfortably with the inputs to make them interactable around errors and user' attempts, achieving active states.

• Finally, the web isn't responsive yet, I focused on JS :)

What are you most proud of, and what would you do differently next time?

Using flex and grid layouts. Knowing all their varieties.

What specific areas of your project would you like help with?

I don't know how to remove all the white space on the mobile version (for me when screen.width < 900px). Maybe a body or .card classes problem.

What challenges did you encounter, and how did you overcome them?

I started to get into responsive design, with a basic approach using @media(width). Also prioritized making the design with padding and margin sentences displayed in a flex layout, but could also be done by using grids and managing gaps.

Tips will be well received :)

What specific areas of your project would you like help with?

I'd like to know about tables, more than the basics of table, tr, td, etc. And useful approaches with CSS.