Skip to content
OverviewSolutions
4
Comments
6
P
Allan Martinez
@allmtz

All comments

  • hanny•170
    @hannyfishSubmitted over 1 year ago

    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
    Allan Martinez•200
    @allmtzPosted over 1 year ago

    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
  • Allan Martinez•200
    @allmtzPosted almost 2 years ago

    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-LCSubmitted almost 2 years ago

    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

    2
    Allan Martinez•200
    @allmtzPosted almost 2 years ago

    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
    @MusicalaudioSubmitted almost 2 years ago

    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
    Allan Martinez•200
    @allmtzPosted almost 2 years ago

    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
    @BeshoySSubmitted almost 2 years ago

    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

    1
    Allan Martinez•200
    @allmtzPosted almost 2 years ago

    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
    @ihzavipSubmitted almost 2 years ago

    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

    2
    Allan Martinez•200
    @allmtzPosted almost 2 years ago

    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