Michael
@michael-schlueterAll solutions
- Submitted 9 days ago
REST Countries API with Color Theme Switcher
- HTML
- CSS
- JS
- API
I had trouble with displaying the names of the border countries. The API only provided the country-codes for the border-countries. I thought about fetching the data for all countries to get the country name with the help of the respective country-code but that seemed rather exhaustive. An alternative would be to make multiple API requests for the specific border countries (one for each country) to get the country name that way, but that also didn't feel right. In the end I used the data file which was provided to get the country name that way. That's problematic because of possible (future) inconsistencies between the API data and the static data in that file. So I don't know what the best approach would've been here.
I also tried to implement infinite scrolling for displaying all country cards but that got way over my head. So I decided not to pursue this for a project of this scope. But I may revisit this challenge again.
- Submitted 30 days ago
Responsive mortgage repayment calculator
- HTML
- CSS
- JS
I ran into a bit of trouble formatting the user input (just like in the design file). Displaying 300,000 instead of 300000 is just not possible in an input field of type number. But it felt somewhat wrong to use an input field of type text for a number input. You would have to add a bit more of input validation to make sure the user doesn't put in any text. Additionally you'd have come up with additional state to separate between the value you are displaying (formatted) and the value you are calculating the result with. In the end I decided that it's not worth it to implement the formatting in such a small project. Maybe I'll revisist it later on or find another approach.
I also didn't know if I should give the user additional feedback that only numbers could be put into the form fields. There is no error message popping up, there user is simply unable to put anything other than numbers into those fields. I thought it was kind of self-explanatory in an app like this.
- Submitted about 1 month ago
Responsive Product List with Cart
- HTML
- CSS
- JS
I'm not really satisfied with the animation-side of things in this project. There are some transitions in there (e.g. for borders, colors etc.) but also some are missing. The different buttons for adding an item to the cart and selecting the quantity of an item have no transition when they are appearing / disappearing. I probably could've added an animation library to smooth things out but I thought it would be somewhat of an overkill for this project. But I definitely have to refine my skills in that department.
Also I didn't get to auto-focus certain elements for keyboard-navigation. I got it to work when the user adds an element to the cart, so that the focus is automatically on one of the buttons to adjust the quantity. But it doesn't work the other way around. When a user decreases the quantity to 0 using the 'Enter' key, the "add-to-cart" button is being rendered but not automatically in the focus. Instead the user has to press "tab" to focus the button again. I'm also not sure if its good practice to use auto-focus in these circumstances of if keyboard-users are expecting to press "tab" regardless.
