Html Question posted in
Some basic documentation can be found here.

Html – Making text box above already centered container

Im trying to make a informative text box and i feel like the answer should be pretty simple but im overlooking something. After a few tries and also checking the mighty GPT im coming here for advice.

Currently it looks like this
enter image description here

And i want it to look something like this, where the marked area is the text box
enter image description here

The code is the following

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Checker</title>
    <link rel="stylesheet" href="styles.scss">
</head>
<body>
    <!-- Informative Text Box Container -->
    <div class="info-container">
        <p>This is an informative text box. It provides guidelines for creating a strong password.</p>
</div>

<!-- Main Content Container -->
<div class="container">
    <h1>Password Strength Checker</h1>
    <label for="password">Enter Password:</label>
    <input type="password" id="password" placeholder="Password">
    <div class="criteria">
        <div class="criteria-item" id="capitalCheck">Capital Letters: <span class="indicator"></span></div>
        <div class="criteria-item" id="numberCheck">Numbers: <span class="indicator"></span></div>
        <div class="criteria-item" id="symbolCheck">Symbols: <span class="indicator"></span></div>
    </div>
    <button onclick="calculateTime()">Calculate</button>
    <div id="result"></div>
</div>

<script src="script.js"></script>

And the scss

/* styles.scss */

/* Informative Text Box Container */
.info-container {
    background-color: #f0f0f0;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center; /* Center text */
}

/* Main Content Container */
.container {
    background-color: #fff;
    padding: 30px; /* Adjusted padding to match the informative text box */
    width: 400px; /* Matched width with .article.container */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Additional styles */
.criteria-item {
    margin-bottom: 10px;
}

/* Rest of your existing styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container>h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

label {
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

p#result {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
}

ul.criteria {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

ul.criteria>li {
    font-size: 16px;
}

span.indicator {
    font-size: 16px;
    color: red;
}

span.valid {
    color: green;
}

and finally the javascript

document.getElementById("password").addEventListener("input", function() {
    var password = this.value.trim(); // Trim to remove leading and trailing spaces
    var capitalCheck = document.getElementById("capitalCheck").querySelector(".indicator");
    var numberCheck = document.getElementById("numberCheck").querySelector(".indicator");
    var symbolCheck = document.getElementById("symbolCheck").querySelector(".indicator");

    capitalCheck.textContent = /[A-Z]/.test(password) ? '✔' : '✘';
    numberCheck.textContent = /d/.test(password) ? '✔' : '✘';
    symbolCheck.textContent = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password) ? '✔' : '✘';

    capitalCheck.style.visibility = /[A-Z]/.test(password) ? "visible" : "visible";
    numberCheck.style.visibility = /d/.test(password) ? "visible" : "visible";
    symbolCheck.style.visibility = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password) ? "visible" : "visible";
});


function calculateTime() {
    var password = document.getElementById("password").value;
    var charCount = password.length;
    var hasUpperCase = /[A-Z]/.test(password);
    var hasNumber = /d/.test(password);
    var hasSymbol = /[!@#$%^&*()_+-=[]{};':"\|,.<>/?]/.test(password);

    var possibleCharacters = 26 + (hasUpperCase ? 26 : 0) + (hasNumber ? 10 : 0) + (hasSymbol ? 32 : 0); // lowercase letters + uppercase letters + numbers + symbols
    var permutations = Math.pow(possibleCharacters, charCount);

    var seconds = permutations / 1000000000; // divide by 1 billion to convert to seconds
    var minutes = seconds / 60;
    var hours = minutes / 60;
    var days = hours / 24;
    var years = days / 365;

    var result = "It would take approximately ";
    if (years >= 1) {
        result += Math.floor(years) + " years, " + Math.floor(days % 365) + " days, " + Math.floor(hours % 24) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (days >= 1) {
        result += Math.floor(days) + " days, " + Math.floor(hours % 24) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (hours >= 1) {
        result += Math.floor(hours) + " hours, " + Math.floor(minutes % 60) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else if (minutes >= 1) {
        result += Math.floor(minutes) + " minutes, and " + Math.floor(seconds % 60) + " seconds to crack this password.";
    } else {
        result += Math.ceil(seconds) + " seconds to crack this password.";
    }

    document.getElementById("result").innerText = result;
}
Tags:

2

Answers


  1. 0

    Just add this to the scss or css (this is based on your html)

    CSS or SCSS :

    body {
   /** rest of the css **/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;        
  }
    Login or Signup to reply.
  2. 0

    You could use relative positioning.

    If you have any element, you can set the css property position to the value relative, the child to absolute then use the top, right, left, or bottom properties to position the element with respect to it’s parent.

    Here’s an example:

    .parent {
  position: relative;
  background: lightblue;
}

.child {
  width: 50%;
  position: absolute;
  top: 100%;
  right: 0;
  background: lightgreen;
}
    <div class="parent">
  Here is some content with position relative in normal layout flow
  <div class="child">
    Here is some content with position absolute
    positioned in relation to it's parent
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search