Skip to content
OverviewSolutions
12
Comments
4

Md Kowsir Ahmed

@kowsirahmedBangladesh250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Md Kowsir Ahmed•250
    @kowsirahmed

    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.
  • Md Kowsir Ahmed•250
    @kowsirahmed

    @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
  • Md Kowsir Ahmed•250
    @kowsirahmed

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

  • Md Kowsir Ahmed•250
    @kowsirahmed

    @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