Skip to content
OverviewSolutions
2
Comments
53
Carl
@CarlHumm

All comments

  • yasclou•120
    @yasclouSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I can put into practice some acquired knowledge, and learn some new things, all very basic

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

    The most difficult thing to do was the table part, I still don't know how to do it so that it looks good.

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

    The final part in the table does not have a solid line, I did not do it correctly or there were other ways to do it, I would like to know how to do it correctly.

    best regard

    responsive landpage con media query

    1
    Carl•855
    @CarlHummPosted 4 months ago

    Hi there

    I think in the design it is a single unbroken line, like a row. So you could apply the border-bottom to the table rows and then remove it for the last row. This could look like the following.

    table {
border-collapse: collapse;
}

tr {
border-bottom: 1px solid  #efefef;
}

tr:last-of-type {
border-bottom: 0 
}

    Best of luck with your future challenges!

    Marked as helpful
    0
  • Ashong•930
    @AshongAbdallah06Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Using React for this project.

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

    The responsiveness was a little bit tricky, but I was able to pull through.

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

    The header-image doesn't seem to change according to the function, and I don't know why. Or maybe it changes, but I just don't see it. Some help would be greatly appreciated.

    Product Preview Component

    2
    Carl•855
    @CarlHummPosted 9 months ago

    Hi there

    The image does change, but only on initial load. To see this you can open up dev tools (F12) and inspect the img elements src. As you resize the webpage you will see the image src does not change. But if you resize and then refresh it does.

    This is because the code responsible for changing the image is your if/else logic in your App.js component. This component is rendered once and then doesn't change. To get this to change you could implement some useState and then setState dependent on a resize event - but you don't need to do this, and probably shouldn't.

    There are already more suitable native solutions to change images based on viewport that don't require JS, they include:

    1. The picture element
    2. Img srcset attribute

    For a project like this I would probably use the Picture element.

    Good luck.

    Marked as helpful
    1
  • Carl•855
    @CarlHummPosted 9 months ago

    Hi there

    To remove the outline around the buttons you can type border: 0 or border: none. The border is set by default by the browser. You can see this yourself if you open up dev tools (F12), highlight the button element, and then scroll down the styles panel until you see the styles for 'user agent stylesheet'.

    I would also recommend re-thinking and removing the min-width: 220vh. You're setting the width of your container to more than twice the height of the screen, which on desktop is a lot and causes it to overflow horizontally. I see you've used similar units in other places too, including media queries. This is not common or best practice as you're attempting to control the width/horizontal resolution using a vertical unit (viewport height). A much more common approach is to use pixels, rems and ems. Viewport units have their place but I don't think they are necessary here.

    Other than this, good job. Feel free to ask me any questions and good luck on your next project!

    Marked as helpful
    1
  • Jedy++•70
    @JedyokeySubmitted 9 months ago

    I would like to sort an issue in this project I worked on. The border-bottom below "Ingredients and Instructions" sections are taking the full screen width in tab and mobile screens unlike the desktop screen were the border-bottom below those sections are perfectly centralized only occupying the width of the contents and not the entire screen width. I have tried all I could to fix this problem on mobile and tab screens but I can't pin-point where the problem is coming from. Thanks in advance!

    Simple Recipe Page Design Preview

    2
    Carl•855
    @CarlHummPosted 9 months ago

    Hi Jedy.

    Mobile/Tablet CSS

    @media screen and (max-width: 992px)
.flex-container {
    width: 100%;

    Desktop CSS

    .flex-container {
    width: 50%;
    margin: auto;
}

    Your CSS Explained

    The media query sets the flex-container to 100% width on any resolution less than 992px. So, tablets/mobiles. Because this container contains all your sections, and your sections do not have a width set, they will take up 100% of space available in .flex-container and span the full page width.

    For devices above 992px in resolution, like desktops, they will instead have this container set to 50% and a margin: auto applied to center it. As you can guess, this would also limit the parents children (sections) to a max width of 50% of the viewport width, and center them.

    By limiting the width of these sections to 50%, and centering them, their borders also only take up this amount of space. The sections are not "occupying the width of their contents" but instead occupying the width of their parent, which is .flex-container, which is 50%.

    What should you do?

    If you don't want the border/sections to take up full width on mobile you could:

    1. Set a different width for flex-container
    2. Add margin/padding to body element
    3. Set max-widths for nested sections

    Hope this helps, feel free to ask any questions.

    0
  • Carl•855
    @CarlHummPosted 10 months ago

    Hi there!

    The reason why your content grows upwards instead of down is because of transform: translate(-50%, -50%) and left: 50%; top: 50%.

    As you know this command will center your content perfectly on both the horizontal and vertical axis, and it will do this relative to the space available using percentages.

    When you click questions and .answers gets given display: flex your .card has more content, and so the height grows. In-order to preserve the current alignment and keep the box center, instead of growing downwards the content grows middle out to ensure even margins top and bottom.

    Solution?

    Well there are plenty of different ways you could center your content. You don't need to use position: absolute, or transform: translate. For instance, you could:

    1. Method 1 : Align the box to the center using margin-left: auto and margin-right: auto and then apply a negative margin-top for overlap.
    2. Method 2 : Nest .card within <main> and make it a flex container with justify-content: center, then position the .card to overlap using margin, top or translateY.
    3. Method 3 : Similar to before, but use grid and overlap by spanning rows.

    Hope this helps, and good luck on your next project/challenge!

    Marked as helpful
    1
  • Jon D•190
    @jcad57Submitted 10 months ago

    I did sort of customize it to myself.. so not identical copy. My question is pertaining to the reported "errors" FE mentor displays above. Is it proper practice to wrap <li> tags in <a> tags? I want the whole <li> to be clickable - should I have used a button instead? Any other accessibility-related changes I could make? Thanks!

    Social Links Solution (with a little customization)

    1
    Carl•855
    @CarlHummPosted 10 months ago

    Hi there

    Good job on the solution. It's always fun to extend/customize a solution and make it your own.

    1. Nest <a> inside <li>

    Instead of wrapping your <li> with <a>, I would nest the anchor tags within the list item and apply the .button class like so <a class="button"></a>

    That way the anchor tag defines the size for the interactive area as-well as the size of the list item.

    Nesting links within list items is the common convention as shown in this example. In general block level elements such as <li> should contain inline elements such as <a>, <span>, with some exceptions with flexibility brought by HTML5.

    2. Use semantic <nav> element to represent navigation

    As the links are external links that point offsite I would use anchor elements within a nav element. At the moment you have a div for .social-links, this could be a nav element instead.

    I would suggest a structure similar to this

    <nav>
<ul>
<li> <a> </a> </li>
</ul>
</nav>

    3. Use elements for meaning, not styling

    1. Name should not be <h1> as it would likely not be the main page title in a real application/website, I would use an <h3> personally.
    2. Location should not be <h2> but a paragraph or span as it's subtext to your <h1>
    3. Elements with class .bio-snippet could use <ul> and <li>, as to me the information reads like a list

    4. Useful to think of the larger context

    If we think of this component as a small part of a larger real website/application, then the main title, often in the hero, would be the <h1>. The headings outlining each major section would be <h2> and headings within those sections, and within individual cards would be <h3>. Of-course, this is just a learning exercise and without an <h1> it would throw errors in the validator. You could create a hidden page title <h1> for screen readers by applying an .sr-only class if you wished to overcome this.

    If unsure on element usage, sometimes it can be useful to look around the internet at a variety of tech websites and inspect element on UI components with similar relationships between information (product cards, search results listings, solutions cards, etc).

    5. Take my advice with a pinch of salt

    I'm still learning so don't know everything - particularly regarding accessibility. The Front-End Mentor Discord is a good place to ask about that kind of thing. Below are also some helpful resources regarding accessibility.

    1. Understandingaccessibility
    2. Fedmentor
    3. Learn Accessibility - MDN
    4. Webaim - Htmlcheatsheet/
    5. Deque - Blog
    6. a11yproject

    Cool dog.

    Marked as helpful
    1
  • Carl•855
    @CarlHummPosted 10 months ago

    Hi there

    I saw your comment on discord and have taken a brief look for you. So far I can see that:

    1. You enter your IP Address
    2. You click submit
    3. Coordinates is updated and passed to your Map component
    4. Map does not move

    The reason the map does not move is due to Immutability of MapContainer

    Except for its children, MapContainer props are immutable: changing them after they have been set a first time will have no effect on the Map instance or its container. The Leaflet Map instance created by the MapContainer element can be accessed by child components using one of the provided hooks.

    So once our new coordinates reach our Map component, we cannot use the MapContainer props directly to set the view (like we did with center on initialization).

    Instead we must use a custom component and the useMap() hook. The useMap() hook provides our custom component with an instance of our Map, and exposes some helpful functions which allow us to change the view for our map. The useMap() hook knows which map instance to use by default based on which MapContainer we have nested our custom child component within.

    Here is a simple example based on your Map component

    
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import { Icon } from "leaflet";
import CustomIcon from "../assets/icon-location.svg";

function UpdateMap({latitude, longitude}) {
  const map = useMap();
  map.setView([latitude, longitude], map.getZoom());
  return null
}


const Map = ({ lat, lng }) => {
  const customIcon = new Icon({
    iconUrl: CustomIcon,
    iconSize: [30],
  });

  return (
    <MapContainer
      id="map"
      center={[lat, lng]}
      zoom={13}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[lat, lng]} icon={customIcon}>
        <Popup>
          <b>Latitude: </b>
          {lat} <b>Longitude: </b>
          {lng}
        </Popup>
      </Marker>
      <UpdateMap latitude={lat} longitude={lng} />
    </MapContainer>
  );
};

export default Map;

    Also, I see in App.js you have done this

     <Map lat={coords[0] || 51.505} lng={coords[1] || -0.09} />

    Instead of providing an expression with the OR operator you could take those default values (51.505, -0.09) and use them as initial values for your useState. Like this:

    const [coords, setCoords] = useState([51.505, -0.09]);

    Hope this helps! I'll be happy to clear up any questions if you have any.

    Marked as helpful
    1
  • Yashin•130
    @YashinNSubmitted about 1 year ago

    This challenge was definitely one jam packed learning experience 😁.

    Made this a fullstack project using the MERN stack. Created my own api end points and data base for this project, still have soooo much to learn🤓.

    Here is the link Rest Countries Api

    Any feedback, comments , tips & tricks please let me know? 👍

    Pagination coming soon.....

    Fullstack rest countries api 🙌 Built with the MERN stack!!!

    3
    Carl•855
    @CarlHummPosted about 1 year ago

    Hello there, well done on completing the challenge!

    I liked that you

    1. Implemented a back-end
    2. Kept consistent with using version control and commits
    3. Organized code into appropriate folders

    As for changes, @Giovanni makes some good points with the colours of box shadow and loader dots whilst in dark mode. Other than this, I have listed some potential improvements below which may interest you.

    Search & Filter Logic

    • If I type in United and filter by Europe I should expect to see United Kingdom. At present this is not the case as the application only supports filter by search or select, but not search & select. An implementation detail but one worth considering.

    Caching Country Data

    • At present if you visit a country it will re-fetch the data regardless of whether it has already seen it. Example: You visit country, click back, visit same country, or you visit country, view border country, return to same country.

    You could implement a caching object into your custom hook so you can load from cache if present, otherwise fetch/update load states and then populate cache at end. Or alternatively have a library manage this for you such as @tanstack/react-query with useQuery() hook.

    Trim the input field

    • If the input field is empty and a user enters space twice or more it will return no results. One way of managing it would be to trim the input so that results are displayed if nothing is entered.

    Error Components

    • When nothing is found (such as entering country/asdsadsa or when inputing a country that doesn't exist, it would be nice to be presented with an error component to show us the state. Was something not found? Did something go wrong? Can you clear the search query and return to me where I was? That kind of thing. You have a loader component for the loading state so it shouldn't be too difficult to implement an error one.

    Overflowing Content

    • Remove min-width 100vw on body to prevent overflow - It's unnecessary.

    Good luck with the pagination and future projects!

    Marked as helpful
    0
  • Teodor Jenkler•3,800
    @TedJenklerSubmitted about 1 year ago

    Hi need help figruing out why i need to click two times for api request to update, have tried alot of soulutions and if i put updater() outside a function i solve it but then the ip adress isent shown in first render

    Ip-Adress-Tracker-api-TeodorJenkler

    1
    Carl•855
    @CarlHummPosted about 1 year ago

    Hi

    I had a look at your solution and can see what you mean by having to click twice to have the map move/details update.

    I noticed the following happens.

    • You click the button inside <IPInput /> and get taken to handleClick
    • Within handleClick you call updater() which updates the ip state in the parent component (<App />)
    • This state is then passed to <DisplayValues /> component which you can see from the updated IP value.
    • Since we're still in an active clickEvent, we return to IPInput's handleClick and continue (Not re-rendered yet)
    • You then make a fetch request using props.ip as the value for ipAddress= (Still haven't re-rendered so props.ip is the same as the initial render)
    • After retrieving the data, you attempt to setState for the other fields (Same content, nothing updates)
    • Now that the click event is finished, we return (Component re-renders because of ip state change)
    • If we click now for a second time props.ip will be the correct value and the fetch will retrieve and set the correct state for the map - but each new ip will require two clicks.

    Why does this happen?

    Component props are not updated till re-render, so props.ip is a stale value and you should use update instead. Not precisely sure why the component waits till the end of the click event to re-render, perhaps to do with how react asynchronously queues and batches state updates, not sure. But if it didn't wait, the fetch would be unreachable anyway.

    Quick Fix to Test

    • Use the input value (update) to query the ip instead of props.ip

    Alternative Solutions

    1. Since IPInput is just there to grab the ip and set the parentState it should be dumb. Instead of adding handleClick function with code identical to the parent useEffect, you could delete this, and only pass setIp as props. Then you could change the state dependency for your useEffect to ip so that when IPInput updates, the useEffects runs.
    2. Or if you want more control over when fetch is called you could create a seperate fetch function (which sets state for IP) in App.js, call it initially in your useEffect and then pass the function to IPInput as a prop to call at your discretion.

    Including API Keys

    Other than this, I highly reccommend you npm i dotenv --save and create a .env file to store your API key. Within this file you can do something like REACT_APP_API_KEY="ASDSADSA" and then in your app use ${process.env.REACT_APP_API_KEY}. Be sure not to upload it with the key filled for github as others can use your API key and exhaust credits.

    I'm still a beginner learning react so there might be inaccuracies in my explanation, hopefully you understand despite the bad formatting :)

    Good luck on your challenge

    Marked as helpful
    1
  • Carl•855
    @CarlHummPosted about 1 year ago

    Hi there Nazif

    Well done on completing the challenge. It looks like a cool, but complex challenge that I hope to attempt sometime in the future after some study.

    I noticed you set the following values

    1. max-inline-width: 1440px and overflow:hidden for .layout svelte-j7s0ua (Grid Container)
    2. width: calc(100dvw - var(--sidebar-width)) for main.with-sidebar.svelte-j7s0ua (Card area)

    Header content being hidden by overflowing content

    Because the card area is basing it's dimensions on the overall viewport, and the grid container has a set max-width of 1440px, this will cause the content to overflow and as such the header content will be spaced beyond the 1440px and clipped out of view.

    To test this you could remove the width from main.with-sidebar.svelte-j7s0ua or remove max-width from .layout svelte-j7s0ua.

    Other than this minor issue everything else functions well, I like the drag and drop feature. Unfortunately I'm not experienced enough to comment on state management or SvelteKit.

    Good luck on future challenges

    Marked as helpful
    1
  • JhonFXA•120
    @JhonFXASubmitted about 1 year ago

    I'm encountering a small issue with the responsiveness. I was testing the site using a mobile resolution on my computer, and the results looked fine. However, when i access the site on a real mobile screen, it appears distorted. It's a bit hard to describe, but the layout appears broken. I plan to test it on other smartphones.

    My solution for Newsletter signup form

    1
    Carl•855
    @CarlHummPosted about 1 year ago

    Hi there

    It looks like the distortion and extra space is coming from an element with a class of .success-message, which is positioned off-page using transform: translateX(800px).

    The solution would be to control the overflow by setting the position to relative and the overflow property to hidden for the parent container of the overflowing content, in this case that's main.

    So just do something like this.

    main {
position: relative;
overflow:hidden
}

    I see you tried to set overflow-x:hidden to the body. You may be thinking, why can't I just do the same as above for the body, like this:

    body {
position:relative;
overflow-x:hidden;
}

    This will not work. Whilst I'm not exactly sure on the details I believe it pertains to something called Overflow Viewport Propagation

    To get this to work you would need to set the root HTML elements overflow property to anything but visible and then assign an overflow property to the body - however this is highly discouraged as it disables scrollbars and impacts accessibility

    Good luck

    Marked as helpful
    1
  • Carl•855
    @CarlHummPosted about 1 year ago

    Hello Prajwal

    I've only had a quick look and noticed some minor issues that you could fix.

    • You have a typo in your regions list. The region is known as Americas and not America.
    • Your form works on submission. As such, if a user selects a region from the select list it will not update the results unless they focus the input field and press enter. A temporary quick fix to demonstrate would be to add an onChange event listener to your select list that points towards the onSubmit handler and compare the difference.

    I haven't used Outlet myself but I assume it's similar to context api in that you create a context for child components to consume. I found it odd that you have both filteredData and responseData and not a single shared state/context. It also appears you've passed down responseData to dashboard but not used it - this could be my misunderstanding though so feel free to correct me

    Good luck implementing changes, and all the best on your next project

    0