Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions2Comments52

All comments

  • AshongAbdallah06• 760

    @AshongAbdallah06

    Submitted

    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• 815

    @CarlHumm

    Posted

    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• 815

    @CarlHumm

    Posted

    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

    @Jedyokey

    Submitted

    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• 815

    @CarlHumm

    Posted

    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• 815

    @CarlHumm

    Posted

    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• 120

    @jcad57

    Submitted

    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• 815

    @CarlHumm

    Posted

    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• 815

    @CarlHumm

    Posted

    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
  • P
    Yashin• 130

    @YashinN

    Submitted

    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!!!

    #express#mongodb#node#react#react-router

    3

    Carl• 815

    @CarlHumm

    Posted

    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• 660

    @TedJenkler

    Submitted

    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

    #react#bootstrap

    1

    Carl• 815

    @CarlHumm

    Posted

    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• 815

    @CarlHumm

    Posted

    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

    @JhonFXA

    Submitted

    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• 815

    @CarlHumm

    Posted

    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• 815

    @CarlHumm

    Posted

    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
  • Chris-Mwiti• 100

    @Chris-Mwiti

    Submitted

    One of the challenges I have encountered is making the icon-succes.svg appear although it is been rendered in the DOM. Anyone with a clue on how to fix the issue ?His/her assistance will be much be appreciated.

    NewsLetter Component Card

    #tailwind-css#react

    1

    Carl• 815

    @CarlHumm

    Posted

    Hi there

    The reason your SVG isn't appearing is because you're using a duplicate ID. In SVG the ID's really need to be unique.

    If you look at this screenshot you can see that you have used #a to reference both your linear-gradient and main rectangle. To test this quickly you can open up dev tools and delete the main rectangle with #a and you will see your circle and gradient appear on the success page.

    illustrationDesktop.jsx

    <rect id="a" width={400} height={593} x={0} y={0} rx={16} />

    iconSuccess.jsx

    <linearGradient id="a" x1="100%" x2="0%" y1="0%" y2="100%">

    Hope this helps. Good luck on your next challenge.

    1
  • Carl• 815

    @CarlHumm

    Posted

    Hi there tonage, the solution looks good!

    The preview looks just like the design and it's responsive aswell. My only criticism would be that you've set max-width: 85% which is a relative percentage. On my monitor (2560x1440) the design appears very stretched because there is no real max-width. If you want it to take up 85% of the width for the most part, you could set the width to that and then set a maximum width and centre the grid. Like max-width: 1280px or even use the clamp() function with the width property.

    Other than that, good job. Interesting to see you using the attribute selector and matching to select all cards instead of using a unifying class or nth-selector. It's a good opportunity to learn for sure.

    Good luck on your future challenges/work.

    Marked as helpful

    0
  • ZHADOW999• 100

    @ZHADOW999

    Submitted

    i had some problems of centering images and text in mobile and tablets design, but i found a solution, but can anyone please suggest any other ways. pls is there a more efficient way of dealing with media queries . thanks

    Responsive space toursim website

    #accessibility

    2

    Carl• 815

    @CarlHumm

    Posted

    Hi Zhadow, really cool project

    I like the animations you've included like the rotating planets and subtle fade/slide ins.

    I did notice you have one broken link between your crew.html and index.html as you have mistyped space.html in-place of index.html.

    Additionally, setting height for an image is generally discouraged as it distorts and stretches the images aspect-ratio. To maintain aspect ratio and set a specific height you can use object-fit: cover property which works similiar to background-size: cover in that it crops the image instead of distorting it.

    Other than this, great job and keep up the good work!

    0
  • meyoh-23• 210

    @meyoh-23

    Submitted

    Anyone who can help me on how to change the colors of the .svg files kindly, Working with the logo on the footer section was quite a challenge, And the resources I got were not quite helpful. the footer logo is not as visible as it should

    responsive easybank landing page with react and MUI

    #material-ui#react

    1

    Carl• 815

    @CarlHumm

    Posted

    Hi there

    When you link to an SVG image using the <img> element you lose the benefits of full customization.

    SVG images are composed of XML which is similar to HTML. This structure and it's elements represent shapes, paths, coordinates and everything else that builds your image.

    If you open up this image in a code editor you can see this. On your image in particular there is a path with a fill attribute that looks like this. <path fill="#2D314D" This path is responsible for the text portion of the image.

    With this in mind, you could.

    1. Change this fill to white, re-save the image as logo-white and link using <img>
    2. Change this fill attribute to white and copy paste code directly inline in your HTML.
    3. Copy paste this code into your HTML and use CSS to change the fill.

    Useful Links

    1. Using SVG - CSSTricks
    2. Getting Started - MDN

    Marked as helpful

    0
  • Carl• 815

    @CarlHumm

    Posted

    Hi there, nice try

    Your JS doesn't work as accordionContent is a nodelist, not an element

    You are attempting to toggle a class on accordionContent which, like accordionHeadings, is a nodeList and not an element. For each click, we instead want to reference the accordion-content relative to the clicked element. How do we do that?

    Here are just two common options.

    1. i.nextElementSibling.classList.toggle('hidden')
    2. i.parentElement.querySelector('.accordian-content').classList.toggle('hidden')
    accordianHeadings.forEach(function (i) {
    i.addEventListener("click", function () {
        // Replace me 
    })
})

    So i references the clicked element (the heading). Working from the heading we can either go up one to the parent and search for accordion-content, or use the nextElementSibling property. Since our accordion is composed of headings and content, the nextElementSibling will always be the accordion-content which works well for us.

    Alternatively you could use the HTML Details & Summary Elements

    <details>
  <summary>Accordion Heading</summary>
  Something small enough to escape casual notice.
</details>

    Unfortunately I only had time to write a solution for the JS. Perhaps someone else can help with the layout and images.

    Good luck on your future projects

    Marked as helpful

    1
  • Victor Musyoka• 80

    @vm-ctech

    Submitted

    I found it challenging to insert the images in the smaller cards as precisely as they have been placed in the challenge. Can someone enlighten me on how to correct that?

    Time tracking dashboard using CSS grid

    #tailwind-css#web-components

    2

    Carl• 815

    @CarlHumm

    Posted

    Hi there, the solution looks nice

    In-regards to the images, you could do the following

    • Absolute Positioning
    • Flexbox & Margins
    • Background Image

    For absolute position it's straight forward, you could do something like this.

    .topsection {
position: relative;
}

.img {
position:absolute;
left:60%;
bottom:0;
transform:scale(1.2);
padding-left: 0  <-- remove the padding values on your img container
}

.bottomsection {
position:relative;
}

    Since you've already set negative margins on the bottom section, the image will be partially hidden. Also, there isn't really any need for img container, we could just have the image and position it using the same styles.

    For flexbox and margins you could do something like this

    .topsection {
display: flex;
justify-content:flex-end;
align-items:flex-end;
}

.img {
margin-right: 30%;
}

.bottomsection {
position:relative;
}

    Pretty much the same thing with an extra step, we are aligning the content inside the box to the end and at the bottom, then pushing it away from the right side with a margin.

    For Background Image you could do something like this

    
.topsection {
background-image:url('./images/icon-work.svg');
background-repeat: no-repeat;
background-size:3.6em;
background-position: 65% bottom;
}

    With this technique, you would remove the image inside top container and set the background for that container as the image URL.

    Just a rough idea

    Keep in mind these are just examples and the sizing values for the icons are quite different in the actual design. I'm just showing that there are numerous ways to position elements in CSS.

    For further reading you could refer to.

    0
  • AkamineFabio• 220

    @AkamineFabio

    Submitted

    I don't know how to set the 'align-self' or 'justify-self' on a flex-item. I've tried it in the button inside the success message, but it isn't working and I don't know why. I'm not sure if I suppose to do all this in a single page, or if the 'success message' was in another one, I made all in one, used 'preventDefault' on form submit and then made some changes in display properties.

    Flexbox,Javascript

    1

    Carl• 815

    @CarlHumm

    Posted

    Hey there, you might find these links helpful

    From what I can gather. Justify-self doesn't exist in flexbox. Align-self positions elements relative to the cross-axis - so up and down for flex-direction: row and left and right for flex-direction: column. The only options for positioning on the main-axis independent to the parent containers alignment options is to use auto margins. You can set margin-top: auto on your button to have it space itself away from the other elements and take up the remaining vertical space. Other than auto margins you can also use flex-grow to stretch to fill that space, but you wouldn't want that for this challenge.

    Seperate success page or all in one?

    Completely up to you. Pick whatever method you want to practice. Some people practice using cookies, others creating and rendering DOM elements. For the most part people follow a similiar approach to what you've done and include the success HTML in the same component and toggle its display using JS. If you wanted to take it further you could attempt to implement some animated transition. Up to you.

    Good luck on your future projects!

    Marked as helpful

    0
  • Kate Dames• 250

    @funficient

    Submitted

    Hey there,

    I need some help please. My social icons don't stick to the bottom even though I have:

    body { 
height: 100vh;
}

    I was expecting that using flex-end would put it at the end of the page, but when I reduce the screen size the social icons move up together with the grid above it containing the other content.

    How do I keep the social icons at the bottom of the screen for desktop?

    Many thanks! Kate

    Huddle Landing Page

    1

    Carl• 815

    @CarlHumm

    Posted

    Hi there, your solution looks good

    body {
display:flex;
flex-direction: column;
padding: 2rem 0;
min-height: 100vh;
}

footer {
margin-top: auto
}

    One Solution

    I edited my answer for simplicity, was a-bit poorly formatted. Basically, a simple way is to set a flex-container on body and position major layout sections as children. You can use margin-top: auto on the individual footer element, or position all elements using properties such as justify-content: space-between etc.

    Good luck, hopefully more clear

    Marked as helpful

    2
  • P
    Thomas TS• 670

    @ttsoares

    Submitted

    I was unable to figure out where to use those two colors defined in the style-guide.md file...

    NextJS, Tailwind

    #next#react#tailwind-css

    1

    Carl• 815

    @CarlHumm

    Posted

    Hello

    From looking I would guess the following

    1. Dark Blue for the main text and name instead of black.
    2. Grayish Blue for the title 'Junior Front-end Developer'
    3. Weights: 300 (Main Text), 500 (Title), 700 (Name)

    If you look carefully at your design and the original there is a subtle difference in the text colour. Yours is pure black whilst the design is some offshade of blue. I assume that blue is the one stated above.

    Hopefully this helps. Spotting colours and estimating sizes is a skill in itself that comes with more exposure.

    Hope this helps

    Marked as helpful

    0
  • Tommy Nguyen• 90

    @TommieeN

    Submitted

    My solution to the rock paper scissors challenge! Not sure why the triangle background disappeared when it got deployed, I'll try to fix that some time this week.

    This was definitely a challenging one since this is pretty much my first time working with typescript and the design for this particular challenge caught me off guard since it looked simple at first glance. Definitely learned a lot from this.

    Let me know if there are any parts of code that aren't following best practice. I'm always open to improving. Feedback is always welcomed!

    Rock Paper Scissors TypeScript, React, TailwindCSS & FramerMotion

    #framer-motion#react#typescript#tailwind-css

    1

    Carl• 815

    @CarlHumm

    Posted

    Hi there

    Not at my PC but according to this answer you need to specify the parent directory in your asset path in tailwind config, so ../src/assets/images/bg-triangle.svg instead of ./src/assets/images/bg-triangle.svg.

    Looks good man, best of luck on your next project

    1
  • Kelly Agbonifo• 90

    @kellynick

    Submitted

    I will really appreciate the feedback . I encountered a particular problem and I couldn't fix it .The number rating has an active background effect on it when ever a user click on any of the numbers (See Number 4 rating on the original screenshot from frontend for reference ). I will really appreciate any help I can get . Thanks so much

    Interactive rating component created using html , css and javascript

    2

    Carl• 815

    @CarlHumm

    Posted

    Hello Good job, you are on the correct path, there are just a few changes that might help

    If you uncomment your JavaScript you will find that on click a class named toggle will be added to each item that is clicked.

    This is just a class name. To style it we need to refrence that name in css using a CSS class selector.

    li.loop.toggle {
background: hsl(25, 97%, 53%);
color: white;
}

    Now every time an item is clicked it will reference the above styling and give it an orange background with white text.

    A new problem

    But wait! Notice now if we click multiple items the toggle class gets added to them all? That's because we haven't checked if the class already exists in our Javascript before adding another class.

    We can fix this by implementing a check. The complete code may look something like this:

    const items = document.querySelectorAll('.loop');

for(let i=0; i<items.length; i++) {
    items[i].addEventListener('click', (e) => {
        if(document.querySelector('.toggle')) {    <--------------
            document.querySelector('.toggle').classList.remove('toggle');
        }
        e.target.classList.toggle('toggle');
    })
}

    Another method of styling without JS

    There are many different ways of doing the same thing. For example, you could have used pure CSS with labels and radio inputs for the active styling and used JS to set the value. All preference.

    input[type="radio"]:checked + label

    Hope some of this helps, good luck on your future projects and learning!

    0
  • JohPr• 90

    @JohPr

    Submitted

    Hello Everyone, Unfortunately I didn't manage to validate the email. Do you guys have any solutions? Any feedback would be greatly appreciated!

    Intro component with signup

    1

    Carl• 815

    @CarlHumm

    Posted

    Hi there

    Before regular expressions can be used, they have to be compiled.

    The literal notation results in compilation of the regular expression when the expression is evaluated. Sources: MDN

    To evaluate an expression you can use one of the prototype methods available to you - the most common being .prototype.test() which returns a true/false Boolean.

    Using the strict equality operator like in the example below will not compile and evaluate the regex.

        if (email.value === pattern) {
        email.style.border = "2px solid green";
    }

    The following however will compile and evaluate the regex against the specified email input. Within the conditional we are saying if this test fails, then it's not valid.

     if(!pattern.test(email.value)) {  
    console.log('That email is not valid!');
}

    Hope this helps :)

    Marked as helpful

    0
  • Carl• 815

    @CarlHumm

    Posted

    Hello there, good job on the project, it looks like the design

    The Accordion Problem

    For your .accordion-card you have given a height of 31.25rem (500px). This is a fixed height. If you expand all the accordions they expand the columns total height to 610px. As 610px is more than the 500px height limitation, they overflow the container.

    You are using CSS Grid so both columns are even. So the left side which contains your image is also 610px in height. Your image has been told to take up 100% height. The default vertical positioning (background-position-y) is set to center. Because the container has grown beyond the .accordion-card the center is now visibly much lower.

    The Solution

    To solve this you can remove the fixed height from the container, and instead place a min-height - allowing it to grow with content. If you do this, I would also suggest adding some padding-bottom to the .faqs which is currently set to 0.

    Good luck on your next project, and keep up the learning :)

    Marked as helpful

    0