Formulaire d'idée

Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 November 2024

Comment créer une barre latérale de grille en CSS

21 October 2024

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<form id="idea" class="idea-form" action="">
	<svg class="idea-form__icon" viewBox="0 0 32 32" width="32px" height="32px" aria-hidden="true">
		<g fill="currentcolor">
			<path d="M16,2A10,10,0,0,0,6,12a9.19,9.19,0,0,0,3.46,7.62c1,.93,1.54,1.46,1.54,2.38h2c0-1.84-1.11-2.87-2.19-3.86A7.2,7.2,0,0,1,8,12a8,8,0,0,1,16,0,7.2,7.2,0,0,1-2.82,6.14c-1.07,1-2.18,2-2.18,3.86h2c0-.92.53-1.45,1.54-2.39A9.18,9.18,0,0,0,26,12,10,10,0,0,0,16,2Z" />
			<rect x="11" y="24" width="10" height="2"/>
			<rect x="13" y="28" width="6" height="2"/>
		</g>
	</svg>
	<button class="idea-form__btn idea-form__btn--start" type="button" data-toggle>I have an idea</button>
	<div class="idea-form__fill"></div>
	<div class="idea-form__content">
		<label for="my-idea" class="idea-form__label">Idea</label>
		<textarea id="my-idea" class="idea-form__textarea" placeholder="My idea is…">

CSS

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

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

body,
button,
textarea {
  font: 1em/1.5 Montserrat, sans-serif;
}

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

.idea-form {
  background-color: black;
  color: white;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 16.5em;
  height: 4.5em;
  transition: background-color var(--trans-dur), color var(--trans-dur), height var(--trans-dur) var(--trans-timing2);
}
.idea-form, .idea-form__btn, .idea-form__content {
  border-radius: 1.5em;
}
.idea-form, .idea-form__btn {
  position: relative;
}
.idea-form__btn, .idea-form__textarea {
  outline: transparent;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur), opacity var(--trans-dur) var(--trans-timing1);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.idea-form__btn:disabled, .idea-form__textarea:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.idea-form__btn {
  background-color: black;
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 0);
  color: white;
  cursor: pointer;
  display: flex;
  margin-inline-start: auto;
  padding: 0.5em 1em;
  z-index: 2;
}
.idea-form__btn--start {
  background-color: transparent;
  box-shadow: none;
  color: currentColor;
  display: flex;
  align-items: center;
  letter-spacing: 0.0625em;
  padding-inline-start: 5.25em;
  width: 100%;
  height: 4.5em;
  text-transform: uppercase;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, start);
}
.idea-form__btn:focus-visible {
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 1);
}
.idea-form__content {
  opacity: 0;
  padding: 1.5em 1em 0.75em;
  padding-inline-start: 5.25em;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, end);
}
.idea-form__fill, .idea-form__icon, .idea-form__label {
  position: absolute;
}
.idea-form__fill {
  background-color: hsl(var(--hue), 90%, 50%);
  border-radius: 50%;
  top: 1.75em;
  left: 2em;
  width: 1em;
  height: 1em;
  transform: translateY(50%) scale(0);
  transition: transform var(--trans-dur) var(--trans-timing1);
}
[dir=rtl] .idea-form__fill {
  right: 2em;
  left: auto;
}
.idea-form__btn--start:focus-visible {
  box-shadow: none;
}
.idea-form__btn--start:focus-visible + .idea-form__fill, .idea-form__btn--start:hover + .idea-form__fill {
  transform: translateY(0) scale(1);
}
.idea-form__icon {
  color: currentColor;
  display: block;
  top: 0.75em;
  left: 1em;
  width: 3em;
  height: 3em;
  z-index: 1;
}
[dir=rtl] .idea-form__icon {
  right: 1em;
  left: auto;
}
.idea-form__label {
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.idea-form__textarea {
  background-color: transparent;
  color: black;
  display: block;
  margin-bottom: 0.75em;
  resize: none;
  width: 100%;
  height: 3em;
}
.idea-form__textarea::placeholder {
  color: hsl(var(--hue), 10%, 50%);
}
.idea-form[data-expanded=true] {
  background-color: transparent;
  height: 8.5em;
  transition-timing-function: steps(1, end), ease, var(--trans-timing2);
}
.idea-form[data-expanded=true] .idea-form__btn--start {
  opacity: 0;
  pointer-events: none;
  transition-timing-function: var(--trans-timing1), steps(1, end);
  visibility: hidden;
}
.idea-form[data-expanded=true] .idea-form__content {
  opacity: 1;
  transition-timing-function: var(--trans-timing1), steps(1, start);
  visibility: visible;
}
.idea-form[data-expanded=true] .idea-form__fill {
  transform: translateY(0) scale(32);
}

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

.idea-form {
    background-color: white;
    color: black;
  }
}

JS

"use strict";
window.addEventListener("DOMContentLoaded", () => {
    const ideaForm = new IdeaForm("#idea");
});
class IdeaForm {
    /**
     * @param el CSS selector of the form
     */
    constructor(el) {
        var _a, _b, _c;
        /** Timeout function for submission */
        this.timeout = 0;
        this._idea = "";
        this._expanded = false;
        this._state = SubmitState.Default;
        this.form = document.querySelector(el);
        (_a = this.form) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.toggle.bind(this));
        (_b = this.form) === null || _b === void 0 ? void 0 : _b.addEventListener("input", this.ideaUpdate.bind(this));
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addEventListener("submit", this.ideaSubmit.bind(this));
        document.addEventListener("click", this.outsideToCollapse.bind(this));
        document.addEventListener("keydown", this.escToCollapse.bind(this));
    }
    get idea() {
        return this._idea;
    }
    set idea(value) {
        var _a;
        this._idea = value;
        const submitBtn = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("[type=submit]");
        if (submitBtn) {
            submitBtn.disabled = value.length === 0;
        }
    }
    get expanded() {
        return this._expanded;
    }
    set expanded(value) {
        var _a;
        this._expanded = value;
        (_a = this.form) === null || _a === void 0 ? void 0 : _a.setAttribute("data-expanded", `${value}`);
    }
    get state() {
        return this._state;
    }
    set state(value) {
        var _a, _b;
        this._state = value;
        const textarea = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("#my-idea");
        const submitBtn = (_b = this.form) === null || _b === void 0 ? void 0 : _b.querySelector("[type=submit]");
        if (textarea) {
            textarea.disabled = value !== SubmitState.Default;
        }
        if (submitBtn) {
            if (value === SubmitState.Sending) {
                submitBtn.textContent = Label.Sending;
                submitBtn.disabled = true;
            }
            else if (value === SubmitState.Done) {
                submitBtn.textContent = Label.Sent;
            }
            else {
                submitBtn.textContent = Label.Submit;
            }
        }
    }
    /**
     * Click outside the form to collapse.
     * @param e Click event
     * */
    outsideToCollapse(e) {
        if (this.state !== SubmitState.Default)
            return;
        let parent = e.target;
        while (parent !== null) {
            if (parent === this.form) {
                return;
            }
            parent = parent.parentElement;
        }
        this.expanded = false;
    }
    /**
     * Hide the form by pressing Esc.
     * @param e Keyboard event
     * */
    escToCollapse(e) {
        if (e.code === "Escape" && this.state === SubmitState.Default) {
            this.expanded = false;
        }
    }
    /**
     * Show or hide the form.
     * @param e Click event
     * */
    toggle(e) {
        var _a;
        const button = e.target;
        if (button.hasAttribute("data-toggle")) {
            this.expanded = !this.expanded;
            if (this.expanded) {
                const textarea = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("#my-idea");
                textarea === null || textarea === void 0 ? void 0 : textarea.focus();
            }
        }
    }
    /**
     * Submit the idea content.
     * @param e Submit event
     * */
    async ideaSubmit(e) {
        e.preventDefault();
        if (this.state !== SubmitState.Default)
            return;
        const delaySending = 1000;
        const delayDone = 600;
        const delayReset = 300;
        this.state = SubmitState.Sending;
        return await new Promise(resolve => {
            // send
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                resolve();
            }, delaySending);
        }).then(async () => {
            // submitted
            this.state = SubmitState.Done;
            return await new Promise(resolve => {
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    resolve();
                }, delayDone);
            });
        }).then(() => {
            // collapse and reset
            this.expanded = false;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                var _a;
                (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
                this.idea = "";
                this.state = SubmitState.Default;
            }, delayReset);
        });
    }
    /**
     * Update the idea content internally.
     * @param e Input event
     * */
    ideaUpdate(e) {
        const textarea = e.target;
        this.idea = textarea.value;
    }
}
var Label;
(function (Label) {
    Label["Sending"] = "Sending\u2026";
    Label["Sent"] = "Sent";
    Label["Submit"] = "Submit";
})(Label || (Label = {}));
var SubmitState;
(function (SubmitState) {
    SubmitState[SubmitState["Default"] = 0] = "Default";
    SubmitState[SubmitState["Sending"] = 1] = "Sending";
    SubmitState[SubmitState["Done"] = 2] = "Done";
})(SubmitState || (SubmitState = {}));

Formulaire d'idée

Recommandé

Comment créer une barre latérale de grille en CSS

Erreur 403

Le système solaire

HTML

CSS

JS

Recommandé

Comment créer une barre latérale de grille en CSS

Erreur 403

Le système solaire

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS