Webleb - UI Elements - Bouncy Password Error

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 = {}));

Bouncy Password Error

Recommended

404 Error Page HTML Template

Password generator

Password input Light

HTML

CSS

JS

Recommended

404 Error Page HTML Template

Password generator

Password input Light

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS