100-project-100-days-website/100_projects/17-count-input-characters-fill-borders/main.js
2023-03-10 11:47:57 +03:00
Ask

14 lines
545 B
JavaScript

{8e1096692642ead2cf37d98d4aebd0444967585a true 545 main.js 0xc002d25d50}

let count = document.querySelector(".count");
let progress = document.querySelector(".progress");
let input = document.querySelector("input");
let div = document.querySelector("div");
let maxLength = input.getAttribute("maxlength");
count.innerHTML = maxLength; // 20
input.oninput = function () {
count.innerHTML = maxLength - this.value.length;
count.innerHTML == 0 ? count.classList.add("zero") : count.classList.remove("zero");
// Set The Progress
progress.style.width = `${(this.value.length * 100) / maxLength}%`;
};