Thiết kế website giá rẻ

Question

I created a password checker with HTML, CSS and JS with RegEx, but I’m getting a problem that is VERY ANNOYING and is bothering me a lot. The problem is: when i put a lowercase letter, the checkbox activates, but the value in the input doesn’t change, and so on with the others, except with the special caracters checkbox, that checks and changes the value of the input to “weak” and add border.

this is the script.js file:

function checkPassword() {
    password = document.querySelector("#password").value
    pattern1 = /[a-z]/
    pattern2 = /[A-Z]/
    pattern3 = /[0-9]/
    pattern4 = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/
    result = document.querySelector("#forca")
    bar = document.querySelector("#security-indicator-bar")
    checkbox1 = document.querySelector("#checkbox1")
    checkbox2 = document.querySelector("#checkbox2")
    checkbox3 = document.querySelector("#checkbox3")
    checkbox4 = document.querySelector("#checkbox4")
    label1 = document.querySelector("#label1")
    label2 = document.querySelector("#label2")
    label3 = document.querySelector("#label3")
    label4 = document.querySelector("#label4")

    if (pattern2.test(password) == true && pattern1.test(password) == true) {
        result.style.color="#00ff00"
        result.style.border = "2px solid #00ff00"
        result.value = "good"
        console.log("good")
    
        bar.classList.remove("critical")
        bar.classList.remove("strong")
        bar.classList.remove("safe")
        bar.classList.add("good")
    }

    if (pattern2.test(password) == true && pattern1.test(password) == true && pattern3.test(password) == true) {
        result.style.color = "#29c429"
        result.style.border = "2px solid #29c429"
        result.value = "safe"
        console.log("safe")

        bar.classList.remove("critical")
        bar.classList.remove("strong")
        bar.classList.remove("good")
        bar.classList.add("safe")
    }

    if (pattern4.test(password) == true && pattern3.test(password) == true && pattern2.test(password) == true && pattern1.test(password) == true) {
        result.style.color ="#038f00"
        result.style.border = "2px solid #038f00"
        result.value = "strong"
        console.log("strong")
        
        bar.classList.add("strong")
        bar.classList.remove("safe")
        bar.classList.remove("good")
        bar.classList.remove("critical")
    }

    if (pattern1.test(password)) {
        label1.classList.add("activated")
        label1.classList.remove("deactivated")
        checkbox1.setAttribute("checked", "true")
        bar.classList.add("critical")
        result.style.border = "2px solid #f00"
        result.value = "weak"
    } else {
        checkbox1.removeAttribute("checked")
        label1.classList.remove("activated")
        label1.classList.add("deactivated")
        bar.classList.remove("critical")
        result.value = "no password inserted"
    }

    if (pattern2.test(password)) {
        label2.classList.add("activated")
        label2.classList.remove("deactivated")
        checkbox2.setAttribute("checked", "true")
        bar.classList.add("critical")
        result.style.border = "2px solid #f00"
        result.value = "weak"
    } else {
        checkbox2.removeAttribute("checked")
        label2.classList.remove("activated")
        label2.classList.add("deactivated")
        bar.classList.remove("critical")
        result.value = "no password inserted"
    }
    
    if (pattern3.test(password)) {
        label4.classList.add("activated")
        label4.classList.remove("deactivated")
        checkbox4.setAttribute("checked", "true")
        bar.classList.add("critical")
        result.style.border = "2px solid #f00"
        result.value = "weak"
    }  else {
        checkbox4.removeAttribute("checked")
        label4.classList.remove("activated")
        label4.classList.add("deactivated")
        bar.classList.remove("critical")
        result.value = "no password inserted"
    } 
    

    if (pattern4.test(password)) {
        label3.classList.add("activated")
        label3.classList.remove("deactivated")
        checkbox3.setAttribute("checked", "true")
        bar.classList.add("critical")
        result.style.border = "2px solid #f00"
        result.value = "weak"
    } else {
        checkbox3.removeAttribute("checked")
        label3.classList.remove("activated")
        label3.classList.add("deactivated")
        bar.classList.remove("critical")
        result.value = "no password inserted"
    }



}

and this is my index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Password Checker</title>
    <link rel="stylesheet" href="style.css">

    

</head>
<body class="rainbow_text_animated">
    <script src="script.js"></script>
    <main>
        <p class="rainbow_text_animated">Universal password checker</p>
        <form method="post" name="form">
        <input type="text" name="password" class="inputs" id="password" placeholder="Insert your password here" value="" oninput="checkPassword()"/>
        <br>
        <input type="checkbox" id="checkbox1" class="checkbox" onclick="return false"/>
        <label for="checkbox1" class="deactivated labels" id="label1">Lowercase letters</label>
        
        <input type="checkbox" id="checkbox2" class="checkbox" onclick="return false"/>
        <label for="checkbox2" class="deactivated labels" id="label2">Uppercase letters</label>
        <br>
        <input type="checkbox" id="checkbox3" class="checkbox" onclick="return false"/>
        <label for="checkbox3" class="deactivated labels" id="label3">Special caracters</label>
        
        <input type="checkbox" id="checkbox4" class="checkbox" onclick="return false"/>
        <label for="checkbox4" class="deactivated labels" id="label4">Numbers</label>
        <br>
        <br>
        <input type="text" name="force" class="inputs" id="forca" value="" readonly/>
        <div class="security-indicator">
        <div id="security-indicator-bar" class="bar"></div>
        </div>
        </form>
    </main>
</body>
</html>

if it could be of some help, this is my style.css file:

*, ::after, ::before {
    box-sizing: border-box;
}
main {
    background-color: #fff;
    width: 30vw;
    height: 35vh;
    border-radius: 5px;
    margin: 35vh 0 0 35vw;
    text-align: center;
}
p {
    padding-top: 2vh;
    font-size: 20px;
    font-weight: 600;
    text-decoration: underline;
}
input.inputs {
    border: 1px solid black;
    height: 5vh;
    width: 15vw;
    border-radius: 5px;
}
.security-indicator {
    height: 10px;
    width: 50%;
    background-color: #ddd;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-left: 7.5vw;
}

.security-indicator .bar {
    height: 10px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: all 0.2s;
}
.security-indicator .bar.completed {
    border-top-right-radius: 0;
}

.security-indicator .bar.critical {
    background-color: #eb5757;
    width: 10%;
}
.security-indicator .bar.good {
    background-color: #00ff00;
    width: 25%;
}
.security-indicator .bar.safe {
    background-color: #29c429; 
    width: 70%;
}
.security-indicator .bar.strong {
    background-color: #038f00;
    width: 100%;
}
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 100%;
}
.labels {
    transition: all 200ms;
}
.deactivated {
    color: #ff0000;
    font-size: 12px;
}
.activated {
    color: #00ff00;
    font-size: 12px;
}

@keyframes rainbow_animation {

    0%,
    100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}
@media only screen and (max-device-width: 480px) {
main {
    background-color: #fff;
    width: 400px;
    height: 250px;
    border-radius: 5px;
    text-align: center;
    margin: 35vh 0 0 10px;
}
input.inputs {
    height: 50px;
    width: 200px;
}
.security-indicator {
    height: 10px;
    width: 50%;
    margin-left: 100px;
}
}

when i remove the next conditional block (let’s say pattern3) of other conditional (let’s say pattern2) it works just fine, but i don’t know WHY it acts like this

Thiết kế website giá rẻ

Danh mục

Universal Password Checker bug