Skip to content
OverviewSolutions
11
Comments
3
Gassai Hamza
@GHamza-Dev

All comments

  • Gassai Hamza•290
    @GHamza-Dev

    Hi Phil 👋

    First, keep it up!!! I really liked your solution.

    • For the first issue it happens because you grabbed the input value just once and what happened is the function called each time you click the button but it uses the old input value.

    To fix this problem you should grab the input value each time you want to make a check

    An appropriate solution would be like:

    //....
const email = document.getElementById("email"); 
// Notice that I selected the element and kept it (without getting the value from it).
//....
//......
//....
let inputValue = " ";  // simple declaration

function validation() {

        inputValue = email.value; // I get the value of the input each time I call the function

        if (inputValue.match(pattern))  // Or simply: if (email.value.match(pattern)) 
        {
            form.classList.add("valid");
            form.classList.remove("invalid");
            //.....
            //.......... the rest of your code

    Thus should work 100%!! and if you need more clarification do not hesitate to ask for it.

    Final tip: There is also a way of validating inputs using CSS you may want to learn about it If so search for validity pseudo-selectors (:valid & :invalid pseudo-selectors)

    HAPPY CODDING!!

    Marked as helpful
  • Gassai Hamza•290
    @GHamza-Dev

    Hi Robert Pandele👋

    I have some suggestions for you (I would really push myself to take into consideration the following suggestions)

    • Use h1,h2,h3... if needed instead of div or p (title,titel2,editorTitle...).
    • Use anchor tag a for links.
    • Use img tag for your logos with alt attribute (<img src="images/logo.svg" alt="blogr"/>).
    • Use ul element for lists (lists of links in the footer and dropdown menus).
    • For the humburder button should have a cursor pointer:
    .hamburger {
    ....
   cursor: pointer;
   ...
}

    Otherwise, you did a nice job!

    HAPPY CODDING!!

  • Gassai Hamza•290
    @GHamza-Dev

    Hi, I'm not sure if my solution is practical ;) but I would suggest putting both profileCard_username & profileCard_userAge in one div and set display: inline; to theme