Character Counter

Preview

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="conatiner">
      <div class="containerDiv">
        <h1>Character Count</h1>
        <span class="count"></span>
        <div class="buttons">
          <input class="text" type="text" placeholder="Type here" />
        </div>
        <div class="btns">
          <button class="btn"><i class="icon far fa-copy"></i>Copy</button>
          <button class="btn2"><i class="icon fas fa-cut"></i>Cut</button>
        </div>
      </div>
    </div>

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

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");

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

body {
  font-family: "poppins", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: white;
  overflow: hidden;
}

h1 {
  font-weight: 600;
}
.containerDiv {
  width: 30rem;
  border: 1px solid grey;
  padding: 1rem;
  background-color: blueviolet;
  text-align: center;
  border-radius: 5px;
}

.count {
  font-size: 2.5rem;
  padding: 0 50%;
}

input {
  width: 22rem;
}
input:focus {
  outline: none;
}

input,
button {
  padding: 15px;
  font-size: 20px;
  border: none;
  border-radius: 10px;
  margin: 10px;
}

button {
  background-color: #d0bfff;
  color: #495057;
  font-weight: 700;
}

input:focus {
  outline: none;
}

.btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 2.3rem;
}

.icon {
  margin-right: 4px;
}

JavaScript

const count = document.querySelector(".count");
const input = document.querySelector("input");

input.addEventListener("keyup", () => {
  count.innerHTML = input.value.length;
});

const btn = document.querySelector(".btn");
const text = document.querySelector(".text");
const btn2 = document.querySelector(".btn2");

btn.addEventListener("click", () => {
  text.focus();
  text.select();
  document.execCommand("copy");
  const oldtext = btn.innerHTML;
  btn.innerHTML = "copied";
  setTimeout(() => {
    btn.innerHTML = oldtext;
  }, 2000);
});

btn2.addEventListener("click", () => {
  text.select();
  document.execCommand("cut");
});

Latest

Leave A Reply

Please enter your comment!
Please enter your name here