Webleb - HTML UI Elements - Errore password rimbalzante

HTML

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --focus: hsl(var(--hue),90%,50%);
  --error: hsl(3,90%,40%);
  --trans-dur: 0.3s;
  --trans-timing1: cubic-bezier(0.65,0,0.35,1);
  --trans-timing2: cubic-bezier(0.65,0,0.35,1.5);
  font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}

body,
button,
input {
  color: var(--fg);
  font: 1em/1.5 "DM Sans", sans-serif;
}

body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

button {
  background-color: var(--fg);
  border-radius: 0.5em;
  color: var(--bg);
  cursor: pointer;
  display: block;
  padding: 0.75em 1em;
  width: 100%;
  transition: background-color var(--trans-dur), color var(--trans-dur);
  -webkit-appearance: none;
  appearance: none;
}
button:hover {
  background-color: var(--focus);
}

form {
  margin: auto;
  padding: 3em 0;
}

p {
  margin-bottom: 1.5em;
}

small {
  font-size: 0.75em;
  line-height: 2;
}

.field {
  margin-bottom: 1.5em;
  padding-bottom: 0.375em;
  position: relative;
}
.field__error, .field__label {
  position: absolute;
}
.field__error {
  color: var(--error);
  top: 100%;
  left: 0;
  transition: color var(--trans-dur);
}
.field__input, .field__label {
  -webkit-tap-highlight-color: transparent;
}
.field__input {
  background-color: white;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0.125em white inset, 0 0.25em 0 hsl(var(--hue), 10%, 70%);
  outline: transparent;
  padding: 0.75em 1em;
  min-width: 15em;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur) var(--trans-timing1), color var(--trans-dur), transform var(--trans-dur) var(--trans-timing1);
}
.field__input:hover {
  box-shadow: 0 0 0 0.125em hsl(var(--hue), 10%, 70%) inset, 0 0.25em 0 hsl(var(--hue), 10%, 70%);
  transform: scale(1.08, 1.08);
}
.field__input:focus-visible {
  box-shadow: 0 0 0 0.125em var(--focus) inset, 0 0.25em 0 var(--focus);
  transform: scale(1, 1);
}
.field__input:active {
  box-shadow: 0 0 0 0.25em hsl(var(--hue), 10%, 70%) inset, 0 0 0 hsl(var(--hue), 10%, 70%);
  transform: translateY(0.375em);
}
.field__input[aria-invalid=true] {
  animation: wobble calc(var(--trans-dur) * 3) var(--trans-timing1);
  box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
}
.field__input[aria-invalid=true] + .field__error {
  animation: fly-in calc(var(--trans-dur) * 3) var(--trans-timing1);
}
.field__label {
  pointer-events: none;
  top: 0.75em;
  left: 1em;
  transition: transform var(--trans-dur) var(--trans-timing2);
  z-index: 1;
}
.field:has(.field__input[aria-invalid=true]) .field__label {
  animation: bounce calc(var(--trans-dur) * 3) var(--trans-timing1);
}
.field:has(.field__input:focus-visible) .field__label, .field:has(.field__input:not(:placeholder-shown)) .field__label {
  pointer-events: auto;
  transform: translate(-1em, -2.5em);
}
.field:has(.field__input:placeholder-shown:active) .field__label {
  transform: translate(0.2em, 0.375em);
  transition-timing-function: var(--trans-timing1);
}

.note {
  color: hsl(var(--hue), 10%, 30%);
  transition: color var(--trans-dur);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
    --focus: hsl(var(--hue),90%,70%);
    --error: hsl(3,90%,60%);
  }

.field__input {
    background-color: hsl(var(--hue), 10%, 30%);
    box-shadow: 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0 0.25em 0 black;
  }
  .field__input:hover {
    box-shadow: 0 0 0 0.125em black inset, 0 0.25em 0 black;
  }
  .field__input:focus-visible {
    box-shadow: 0 0 0 0.125em var(--focus) inset, 0 0.25em 0 var(--focus);
  }
  .field__input:active {
    box-shadow: 0 0 0 0.25em black inset, 0 0 0 black;
  }
  .field__input[aria-invalid=true] {
    box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
  }

.note {
    color: hsl(var(--hue), 10%, 70%);
    transition: color var(--trans-dur);
  }
}
/* Animations */
@keyframes bounce {
  from, to {
    transform: translate(-1em, -2.5em);
  }
  16.67% {
    transform: translate(-1em, -1.75em) rotate(-15deg) translateX(-0.75em);
  }
  33.33% {
    transform: translate(-1em, -5em) rotate(15deg);
  }
  50% {
    transform: translate(-1em, -5em);
  }
  66.67% {
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    transform: translate(-1em, -2em);
  }
  83.33% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    transform: translate(-1em, -2.75em);
  }
}
@keyframes fly-in {
  from, 66.67% {
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    opacity: 0;
    transform: translateY(50%);
  }
  83.33% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 1;
    transform: translateY(-25%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wobble {
  from, 50%, to {
    box-shadow: 0 0 0 0.125em var(--error) inset, 0 0.25em 0 var(--error);
    transform: rotate(0);
  }
  16.67% {
    box-shadow: 0 0 0 0.125em var(--error) inset, -0.25em 0.25em 0 var(--error);
    transform: rotate(-15deg);
  }
  33.33% {
    box-shadow: 0 0 0 0.125em var(--error) inset, 0.25em -0.25em 0 var(--error);
    transform: rotate(15deg);
  }
}

JS

"use strict";
window.addEventListener("DOMContentLoaded", () => {
    const pass = new PasswordForm("form");
});
class PasswordForm {
    /**
     * @param el CSS selector of the form
     */
    constructor(el) {
        var _a;
        /** Minimum password length */
        this.minLength = 6;
        this._invalid = false;
        this._message = "";
        this.el = document.querySelector(el);
        (_a = this.el) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", this.validate.bind(this));
        this.minLengthDisplay();
    }
    get invalid() {
        return this._invalid;
    }
    set invalid(value) {
        this._invalid = value;
    }
    get message() {
        return this._message;
    }
    set message(value) {
        this._message = value;
    }
    /** Display the minimum characters required. */
    minLengthDisplay() {
        var _a;
        const reqEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector("[data-req]");
        if (reqEl) {
            reqEl.textContent = `${this.minLength}`;
        }
    }
    /**
     * Check the input.
     * @param e Submit event
     */
    validate(e) {
        var _a, _b, _c, _d;
        e.preventDefault();
        this.invalid = ((_a = this.el) === null || _a === void 0 ? void 0 : _a.pass.value.length) < this.minLength;
        (_b = this.el) === null || _b === void 0 ? void 0 : _b.pass.setAttribute("aria-invalid", this.invalid);
        if (this.invalid) {
            this.message = Message.TooShort;
        }
        else {
            this.message = "";
            (_c = this.el) === null || _c === void 0 ? void 0 : _c.pass.blur();
        }
        const errorEl = (_d = this.el) === null || _d === void 0 ? void 0 : _d.querySelector("[data-error]");
        if (errorEl) {
            errorEl.textContent = this.message;
        }
    }
}
var Message;
(function (Message) {
    Message["TooShort"] = "Too short!";
})(Message || (Message = {}));

Errore password rimbalzante

Consigliato

Generatore di password

password di accesso semplice

password di accesso

HTML

CSS

JS

Consigliato

Generatore di password

password di accesso semplice

password di accesso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS