Skip to content
OverviewSolutions
12
Comments
4
Md Kowsir Ahmed
@kowsirahmed

All comments

  • Emmanuel Ayeniko•330
    @NIKO-DEV06Submitted almost 2 years ago

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

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

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

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

    0
  • Jethier•390
    @jCasiaSubmitted almost 2 years ago

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

    @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