Skip to content
OverviewSolutions
9
Comments
8
Adelinked
@Adelinked

All comments

  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hi nkp111, I really like your solution but i noticed that when we update the IP address and have a new location it's not updated on the map. There a useMap hook from react-leaflet that you can use to update the center of the map for exemple like this:

    import { useMap } from "react-leaflet";

export default function ChangeView({ center, zoom }) {
  const map = useMap();
  map.setView(center, zoom);
  return null;
}
    Marked as helpful
    0
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hi , OgBobosky it's a good solution that you've provided here and i have some suggestions:

    • Use the fonts as in the style-guide file provided with this challenge: (- Family: Alata
    • Weight: 400
    • Family: Josefin Sans
    • Weight: 300) for that go to : https://fonts.google.com/ select the fonts that you need than the site will give you the link elements to add to the head of your html file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap" rel="stylesheet">

    after that you can use them in your css. exemple:

    .immersive {
 /*your other properties*/
    font-family: Josefin Sans,sans-serif;
 /*your other properties*/
}
    • Add the navigation menu for small devices accessible via a humberger icon as in the design
    • Don't forget to fix the issues provided in the accessibility and the html validation reports.
    0
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hey Abraham, it's a good solution you have provided. I have some suggestions :

    1. Following the active-design provided when hovering the links, the images and the "see all" button.
    2. Using the font Family: Josefin Sans like in the hero section or creations' titles.
    3. Consider adding content to README.md file of the project to talk about the technologies you used, to share what you learned from this project and to share helpful links with the community. happy coding!
    Marked as helpful
    0
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hi Issac, it's a great solution that you've provided here thank you. The only suggestions i can make is to follow the active-design provided for the links, the button (color: while, background:black) and the images. Also, please think of adding a READMe.md file to your GitHub repo so you can share with us the details of your solution and what you have learned from this project.

    0
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hello Antoine, I saw your preview site and I’ve some suggestions you can consider applying to your solution :

    • Make the site responsive by adding the appropriate media queries and css rules to display correctly (following the design provided in the challenge for mobile devices) especially for small screen devices.
    • Improve the form input validation for example when testing your solution i was able to submit the form with a card number with less than 16 digits. Same thing for the date and cvc fields where it displays "can't be blank" when i enter something other than numbers.
    0
  • Misa Dervisevic•150
    @DervisevicMSubmitted about 2 years ago

    Hello everyone,

    Here is my solution for the " Interactive-card-details-Form " challenge.

    Any constructive comments are welcome.

    Good coding !

    Interactive-card-details-Form

    1
    Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hello Misa, I saw your preview site and I liked a lot the work you’ve done here and I’ve some suggestions you can consider applying to your solution :

    • When the screen width is less than 925px the card display section will hide the card details section. what i suggest to fix that is adding a margin-top to the card details section:
    @media  screen and (max-width: 925px) {
/* your other rules here*/
 .card-details{
        position: relative;
        flex: 0 1 65%;
        margin-top: 300px;
    }
}

    I tested this on both Firefox and Chrome with the desktop display and with the different devices they provide in their dev tools and it looks good.

    • In the same context at some points when reducing the browser window width the card preview (images) collapses with the card details (the form) for that you need to adjust the left position property of your .card-front and .card-back classes along with the appropriate media queries.
    • Finally, i want to remind you to update the Readme file of your solution in the source repository so you can share with us what you've learned from this project and the path you followed to achieve your goal.
    Marked as helpful
    1
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    I saw your preview site and I liked a lot the work you’ve done here and I’ve some suggestions you can consider applying to your solution :

    • For the desktop design it would be better if the user can see all the form at once without the need for scrolling down as there is enough space horizontally to put the card images at the left of the form and not above it.
    • Make sure to reset the form with the initial values ("JANE APPLESEED","0000 ...",....) when the user clicks "Continue" on the completed state.
    • When the user corrects any error make sure that this error message disappears and it's also cleared when the user clicks "Continue" on the completed state.
    Marked as helpful
    1
  • Adelinked•370
    @AdelinkedPosted about 2 years ago

    Hi zryqv, it's a good solution that you're providing here and this is what found when testing its live site:

    • The month value is not being updated (always "00") in the front card when we change the value in the input. Also this same input is not displaying error messages when there is an error (ex: empty input). ** The form should reset when the user clicks "Continue" on the completed state. I will certainly learn from your solution because i'm mainly using ReactJs in my projects and i want to give tailwind a try.
    Marked as helpful
    1