Skip to content
OverviewSolutions
7
Comments
20
Fernando A. Malfavón
@Wlfernando

All comments

  • Michael•180
    @michael-schlueterSubmitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of getting the app to work as expected with tools I've never used before. I also tried to do a bit of extra work in creating and validating schemas for the API responses. That worked quite well.

    I neglected the styling aspect a little bit and took some shortcuts. Next time I probably would come up with some ideas for better loading / error indicators or a custom Not-Found page. I focused mainly on the functionality of the page.

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

    The main challenges were working with TanStack Router and TanStack Query in this project. I haven't worked with those tools before, so it took a bit of time to get familiar with them. Reading the docs and look at some exemplary implementations definitely helped.

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

    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.

    REST Countries API with Color Theme Switcher

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted 23 days ago

    Hi! it seems you had tough with the API. I also did this project and I can say by consulting the doc of the API that you only need to make a second call to this endpoint that I marked in the link adding "fields" and "codes" to get only de names of the borders. An example be: https://restcountries.com/v3.1/alpha?fields=name&codes=AUT,BEL,CZE. Each code become a country filtered by only the names.

    If you are interested in checking my solution, I left all the calls in one file named src/lib/api.tsx in my project

    Marked as helpful
    1
  • Adán Maidana•40
    @AdanMaidanaSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I liked how my final design turned out, it's very similar to the original image. I also managed to replace some images by using code and designing them as closely as possible because I thought it looked better that way. I also used Figma to create a prototype of how I had to build the entire site, and I feel that it turned out quite well for being the first time I used it.

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

    I didn't know how to use Grid, so I learned it from scratch with YouTube tutorials and ChatGPT.

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

    I'd like to know how to make some rows smaller and others larger so I can customize each element to my liking without making the grid layout look bad. For example, I'd like to make the first div smaller so that the fourth div can take up a bit more height, but I always end up messing up the entire grid.

    Responsive Landing Page using CSS Grid

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    grid-template-rows: 30px 100px 50px; make three rows; the first one become 30px height, the second one is 100px and the last 50px. If you need in this example a div with 130px height, declare in that div grid-row: 1 / 3, grid-row-start: 1; grid-row-end: 3;, or use grid-areas to declare the corresponding space. If you wonder why is 1 / 3, is because it consideres the lines that wraps the rows.

    Good job! the Devtool seems clean

    Another thing before I forget, the divs that are numbers "uno, dos, tres, cuatro..." should be section elements or articles; and the container should be a main element. Use semantic HTML. ^^

    The "button" have a bug when hover, try to declare the hover with the div, not to the button or wrap the pointer within the button and make it position: relative and the pointer position: absolute.

    Marked as helpful
    1
  • Rustom0•110
    @Rustom0Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    learned lot about Grid

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

    am having problem with mobile version i don't know what to do need help.

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

    i would like help for responsive caus everything am tryin its not working and i don't even know why its not working

    Bento Grid solution

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    I don't gonna lie, it seems a little convoluted. So I going to share with you this grid game and a guide.

    • The height with vh unit in body is causing trouble
    • The fr unit refers to fractions so use it preferably with integers. Example: 1fr 1fr means 1/2 for each unit; 3fr 1fr 1fr means 3/5 1/5 1/5 as well.
    • You don't need to wrap within box2 the box2-2, box4, and box5.
    • For each row you can use px in grid-template-row to define the space, like if you use height for each element

    With the declaration you have I made a close solution, so you almost there. Just remember that % is related to the measure of parents, vh-vw to the viewport, px is a fixed size, and fr use the available space; you can combine these units in grid-template. Grid is an awsome tool that helps you to avoid wrapping with a lot of divs where the colums is the width and the rows is the height, keep that in mind.

    I also did this challenge so you could go and check it with the devTools of your navigator.

    Marked as helpful
    0
  • Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    Great job! There's one thing that picked my attention: Why do you declare that many rows?

    You could declared grid-template-rows: 250px 75px 175px 250px; adding to your declare on

    grid-template-areas:
   "box7 box1 box1 box4"
   "box7 box2 box3 box4"
   "box8 box2 box3 box4"
   "box8 box6 box5 box5";

    or declare:

    grid-template:
  "box7 box1 box1 box4" 250px
  "box7 box2 box3 box4" 75px
  "box8 box2 box3 box4" 175px
  "box8 box6 box5 box5" 250px
/ 1fr 1fr 1fr 1fr;

    (Notice that I didn't use the function repeat here because is invalid with this short-hand).

    Also, your declaration with grid-auto-rows: repeat(10, 60px) is invalid, be careful with that. You can know it by opening the devTools of your navigator.

    0
  • Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    You almost got it. There's unreadable text between 900px and 767px on the section "social media" and "create schedule quicker".

    I liked the DOM with semantic HTML. The only "complain" (for say it in some way) I have, it is not necessary to wrap the img in a div.

    Overall, great job!!

    Marked as helpful
    0
  • ianwilk20•260
    @ianwilk20Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of this being my first project using tailwind styling. I learned a lot and it'll be even easier to use Tailwind next challenge!

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

    I found a little issue with the increment and decrement pill. Each time I would increment or decrease the quantity of an item, the pill would resize slightly. My hunch was that this was happening because the pill would resize to accommodate the changing quantity of text. After some research, I learned how to prevent that. By adding a fixed, ex. 0.75rem, to the quantity text the pill no longer resizes when incrementing or decrementing the quantity.

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

    Any feedback is welcome!

    Product list with cart

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    hi! I saw the DOM and I recommend to use less divs and use more semantic HTML, you could use: <ul>, <li>, <section>, <aside>, <article>, etc. Its a theme of accessibility. Or use the attribute role and aria-* on the divs.

    Also, relate the code to the repository for the project, please.

    1
  • Eric Aguayo•945
    @EAguayodevSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the grid-template: repeat(4, auto) / repeat(1, 16rem), which uses this method to bring the desktop design closer to the original.

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

    I encountered grid-template: repeat(4, auto) / repeat(1, 16rem) not adapting to mobile when adjusting the property for mobile, and I solved it using Flexbox.

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

    I would like to know why the following code grid-template: repeat(4, auto) / repeat(1, 16rem) Didn't work when I adjusted the 16 rems to adapt to screen sizes to mobile stacking in a column. I had to use Flexbox instead of mobile to accomplish it.

    Bento-grid-solution

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    I had the same problem with the short-hand grid-template using the function repeat(). It just say is invalid. You also encounter the same problem so I investigated it. It says in mdn: Note: The repeat() function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art". So, if you want to continue using repeat, use grid-template-[rows or columns] or omit the function in the short-hand grid-template.

    0
  • Michael Adebumiti•60
    @Mike-KaySubmitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    Styling the radio inputs was a bit difficult, as the styles that can be applied to default radio input are limited. I had to learn how to create keyboard accessible custom radio buttons.

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

    I tried to search for help on how to format the input values(numbers) to show the commas, but i could not find a perfect solution. I would like to know how i can solve that, and also, is it possible to customize number inputs that allows users to enter values instead of the default one? I would really appreciate corrections and feedbacks on how i can better improve. Thank you

    Mortgage repayment calculator - HTML, CSS, and JS

    2
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    hi! about your question, I introduce the instance Intl.NumberFormat() this one helps to your problem on commas. The second question I don't completly understand, do you refere on the options that apear on the tooltip? if that's the case, you can relate lists to inputs by using tag <datalist />; if it not the case, let me know.

    Marked as helpful
    1
  • Michael•180
    @michael-schlueterSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I learnt quite a lot in terms of accessibility in relation to forms. I didn't know you could announce certain things via a screenreader.

    The input validation and error handling for the different input fields were quite exhaustive. I get why people opt for certain libraries to manage more complex forms.

    I can still improve in planning the app beforehand. This time I focused mainly on the markup and styling of the app and got that done quite quickly. But there were certain details I overlooked which is why I had to adapt the markup and styling over and over again. The same goes for implementing the calculating logic. Just taking more time and takingsthose things into consideration beforehand would probably end up saving a lot of time in the end.

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

    Styling the focus states of the different input fields got a bit hairy at some point. I used different techniques (CSS only with the :has selector or the peer utility, JS with the help of additional React state) and got to know the advantages / disadvantages. In a real-world project I would probably opt for one coherent approach but I left it this way in this project.

    I also got to know some limitations of using Tailwind when I needed to style the radio button. But I got it working with the help of some custom CSS.

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

    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.

    Responsive mortgage repayment calculator

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 1 month ago

    I recommend to use the input with type text and inputMode numeric (this one only make appear the board for numbers), you could make the validations or use a library. I also did this project so you could go to see it, the name is src/components/InputNum.tsx

    Marked as helpful
    0
  • Techkie Creations•510
    @Techkie-CreationsSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that i was able to update the code respository to a more cleaner and efficient code, one that is more responsive

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

    I still had an issue with the name of the countries because it would not wrap so as an alternative I reduced the font size of the names in such a way that they still stand out but do not go out of bounds save for one country's name.

    Anyone with a way to solve this issue, please share.

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

    I need help with the word wrapping, I tried all the CSS options from overflow-wrap to word-wrap but no luck.

    REST Countries API v1.0.1

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 2 months ago

    hi! If you only want a one line text, use text-wrap, overflow, and text-overflow. Or if you want a fixed lines use display: -webkit-box, white-space, and -webkit-line-clamp. Here a video: https://www.youtube.com/watch?v=Jdkvmq8MtJY&t=35s. And I recommend use the svg when the user click one of the cards.

    0
  • Fernando A. Malfavón•370
    @WlfernandoPosted about 2 months ago

    hi! I see you have struggled with the position of your elements below 800px. Because you used flex, use the property order in the sons and that would fix it.

    Marked as helpful
    1
  • Elizabeth Sotomayor•230
    @elizabethrsotomayorSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of working with a new framework (React.js) and learning more about CSS selectors like ::before and ::after. Going into this project, I had some familiarity with React but had not tried building a project on my own so this was a great way to brush up and learn some new skills. Next time I would try to better plan out how the app would be structured because I had an idea of how everything would work together but didn't fully write out my plan.

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

    A major challenge I encountered was with managing the state in both the and components. In order to fetch the values inputted into the calculator, I had to handle the state in the parent component (``) and pass both the values and set state functions as props to the child components. Using the React documentation helped illustrate this concept more clearly and helped me understand how this is implemented.

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

    I would like help with rendering custom error states as shown in the mockup. I made the input fields required but aside from that it doesn't change the color of the labels when a field is empty.

    React.js Responsive Mortgage Calculator App

    1
    Fernando A. Malfavón•370
    @WlfernandoPosted about 2 months ago

    it depends how deeply you want to implement the solution. An easy try is use the pseudo-class :user-invalid. This one works with those that need to be filled, but not like radio or checkbox. Other is to retrive the value of validationMessage using useRef and update the state of the field with validitySate (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState). Or use the library react-hook-form, I never use it but I heard is fine.

    0