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

All comments

  • Emmanuel Ayeniko• 330

    @NIKO-DEV06

    Submitted

    This was a fun challenge. I used react + tailwind for the first time. It was also my first time doing drag and drop ever it was challenging at first but I was able to scale through;) Todos and theme are also saved to localStorage

    I wasn't able to add border hovering on the checkboxes

    Feedback is highly appreciated 🤓

    Responsive Todo WebApp using REACT + TAILWIND and localStorage

    1

    Md Kowsir Ahmed• 250

    @kowsirahmed

    Posted

    Congratulations. You did great.

    As linear gradient border color is not supported, the border hovering effect cannot be solved without trick. This article demonstrate this solution. In short,

    • position(absolutely) an element/pseudo element behind the check icon button.
    • increase its size from the original button(negative values of inset will do that in this case)
    • give this element a desired background when needed.
    0
  • Md Kowsir Ahmed• 250

    @kowsirahmed

    Posted

    @savvystrider Well done. I will recommend followings:

    Logical errors in form validation.

    • No errors for name and number are submitted empty.
    • No error if number field is invalid.
    • When space apears after entering each 4 digit in cardNumber, there is a late.

    Validation problems solution.

    • HTML: Add an span element after each input with error class <span class="error-container"></span>
    • CSS:
    .error {
    color: var(--input-errors);
    font-size: 12px;
    display: none;
}
    • JS:
      • select those errorContainers const errorsContainers = form.querySelectorAll("span.error-container")
      • change cardNumber event from 'keyup' to 'input' cardNumber.addEventListener("input", function(e) {...}
      • modify the submit event handling function
        e.preventDefault();
    let error = false; // global flag to keep track of any input error so that we can prevent final submission
    inputs.forEach((input, index) => { // for each input fields check for empty error
        if (input.value === "") { // display error and set global flag to true
            errorsContainer[index].textContent = "Can't be blank";
            errorsContainer[index].style.display = "block";
            error = true;
        } else { // remove previusly set error.
            errorsContainer[index].textContent = "";
            errorsContainer[index].style.display = "none";
        }
    })
    
    if (cardNumber.value.search(/[^\d\s]/) !== -1) { // check cardNumber has any format error and display erros
        errorsContainer[1].innerHTML = "invalid format";
        errorsContainer[1].style.display = "block";
        error = true;
    } else { // remove previusly set error.
            errorsContainer[1].textContent = "";
            errorsContainer[1].style.display = "none";
        }
    
    if (error) return; // return if error is found in any input
    // if no errors show success page
    form.style.display = "none";
    document.getElementById("success-container").style.display = "block";

    Layout problem solution

    You have to position the card-front and card-back images absolutely inrelation to the card-container. This is a great article for layout. Understanding Layout

    In short change the following in css:

    
.card-container {
    position: relative;
}

.front {
    position: absolute; /* remove self from the regular element flow. position according
     to the parent which was positioned (in this case .card-container) otherwise position 
     according to body */
    top: 50%; /* the distance between .card-container top and
     .front top is 5% of the .card-container width */
    left: 5%; /* the distance between .card-container left and
     .front top is 5% of the .card-container width */
    z-index: 1;
}

.back {
    position: absolute;
    top: 5%; /* the distance between .card-container top and
     .back top is 5% of the .card-container width */
    right: 5%; /* the distance between .card-container right and
     .back top is 5% of the .card-container width */
}

    Similarly card front and back content should be positioned.Also fix those html warning and errors given by frontendmentor.

    Marked as helpful

    1
  • Md Kowsir Ahmed• 250

    @kowsirahmed

    Posted

    @Mr-jaw Absolutely stunning work. Just one thing, arrow buttons are not clickable.

    0
  • Jethier• 390

    @jCasia

    Submitted

    The challenge I had in coding this project was probably trying to make it responsive due to the background and the images being in peculiar places for both the desktop and mobile. I used a few resources to get the JavaScript to work and try to fully understand the logic in making the accordion, which made me more confident in using DOM. Overall, it took a while but it was a very enjoyable project to code!

    FAQ Accordion card

    1

    Md Kowsir Ahmed• 250

    @kowsirahmed

    Posted

    @jCasia Very good job. Absolutely responsive. Love It.

    One thing I noticed is that, the box gets very big at 800px.

    • width property should be in % or vw unit which makes the element change its size with the container or viewport. width: 80%
    • max-width should be set in px or rem or em units which makes the element maxed at a certain limit. max-width: 600px
    • The above 2 can be combined in one line: width: min(80%, 600px).

    Marked as helpful

    0