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
OverviewSolutions4Comments6

All comments

  • hanny• 170

    @hannyfish

    Submitted

    Has anyone got any advice specifically regarding the images for this one? Should I have used entirely Flexbox instead of Grid? It's extremely satisfying watching everything move as the container expands but I'm pretty frustrated I couldn't stop the images from being cut off - even using multi-background image didn't seem to work properly this time around, especially regarding background-size.

    My hovers also seem to have broken and I don't know why. :( Feedback appreciated!

    FAQ Card using Grid and Flexbox

    2

    P
    Allan Martinez• 200

    @allmtz

    Posted

    Congrats on completing the challenge it looks great !

    I think the broken hover effects are because of an extra semi-colon. Try changing .faq-question::hover to .faq-question:hover

    Let me know if that helps

    1
  • P
    Allan Martinez• 200

    @allmtz

    Posted

    Hello nice job and congrats on finishing the challenge !

    To detect a swipe on mobile you could use the touchstart and touchend events. Check out this Stack Overflow question : https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android.

    Heres the second answer to detect horizontal swipes :

    let touchstartX = 0
let touchendX = 0
    
function checkDirection() {
  if (touchendX < touchstartX) alert('swiped left!')
  if (touchendX > touchstartX) alert('swiped right!')
}

document.addEventListener('touchstart', e => {
  touchstartX = e.changedTouches[0].screenX
})

document.addEventListener('touchend', e => {
  touchendX = e.changedTouches[0].screenX
  checkDirection()
})

    Alternatively, you could look into using a library like Swiper.js: https://github.com/nolimits4web/swiper

    Let me know if this helps !

    0
  • LEO• 170

    @Leo-LC

    Submitted

    I used section landmarks, more as a visual help as I was going through the HTML architecture. I know it's not a good habit. What would be a good solution ? What is supposed to be "main" in that kind of project ?

    I've got an issue between 1024px' and '1200px' (roughly) : the height of a grid is larger (due to a paragraph inside) than images on the other grid areas, making some weird, cut-off images and an orange overflow (used as a "filter"). Also, on the bottom section, it makes h3` go over 3 lines, making everything off. What would be the good way to understand and fix these issues ?

    Thanks so much everyone.

    Responsive Landing Page using Sass

    #node#sass/scss

    2

    P
    Allan Martinez• 200

    @allmtz

    Posted

    Hey not sure what the best approach is but here are a couple different ideas for the 'filter' issue

    1. Set the height of the phone and keyboard image to 100% or
    2. Wrap the image in a <div> and then overflow:hidden the <div> or
    3. Add grid rows and span the image across the rows so it only takes up the space it needs

    Let me know if any of these work !

    Marked as helpful

    0
  • Musicalaudio• 160

    @Musicalaudio

    Submitted

    Had a bit of trouble with the responsiveness of this one, as well as the box shadows.

    Any criticism/feedback is appreciated.

    Order Summary Card Component

    2

    P
    Allan Martinez• 200

    @allmtz

    Posted

    Nice job and congratulations on completing the challenge !

    It looks like theres no width set on your grid element <main>. Because of this <main> shrinks smaller than the content it's holding. To fix this you need to add 3 style properties to <main>

    1. width: 350px; : this will stop the shrinking
    2. margin: auto; : this keeps the element centered
    3. padding: 1rem; : this keeps the card from touching the window borders on small screens

    Hope this helps !

    1
  • Beshoy S.• 460

    @BeshoyS

    Submitted

    Hi Everyone, This is my current practice using react, typescript and sass. I have a problem with the copy button, when I click one button from the list all other controls on the list change the style, please let me know if someone has a fix for it.

    Feedback is appreciated and welcomed.

    URL shortening API landing page

    #react#sass/scss#typescript#vite#axios

    1

    P
    Allan Martinez• 200

    @allmtz

    Posted

    Really nice job and congratulations on completing the challenge !

    As to your question: It looks like the problem is that all the Button components render based on the same isCopied variable:

    title={ isCopied ? "Copied!" : "Copy" }

    As a result, when the value of isCopied changes, every Button is affected . Instead, You need a way to uniquely identify if an individual Button is copied or not. For example:

    title={ uniqueBtnID === copiedID ? "Copied!" : "Copy" }

    You could set the state of copiedID whenever a button is clicked. I submitted a pull request with a possible fix, let me know if it helps !

    Marked as helpful

    1
  • ihza• 200

    @ihzavip

    Submitted

    I spent three days building it, and I have some questions. I look forward to hearing from you guys with any feedback.

    1. I built it with vite react and already "npm run build" it and the icon won't show
    2. I'm struggling to add interactivity class for the navbar(weekly,daily,monthly)
    3. I'm not quite satisfied with my code so i want to refactor it but i dont know where to start

    if you have feedbacks and suggestions I'd like to hear that, thankyou<3

    • i already fix issue number 1

    time dashboard with react and tailwindcss

    #react#tailwind-css

    2

    P
    Allan Martinez• 200

    @allmtz

    Posted

    Hey ihza nice solution ! Regarding question 2:

    You could conditionally style the clicked timeframe using a ternary. For example the "Daily" option:

    <a
  onClick={clickGetId}
  id="daily"
  className={ `${clickedId === "daily"  ? "text-red-400" : "text-white"} cursor-pointer ` }
> Daily </a>

    In this example the text will turn red when it's clicked on but you could replace text-red-400 with any styling you want. Let me know if this works for you !

    Marked as helpful

    1