Increment and Decrement Button in HTML

Increment and Decrement Button in HTML
Code Snippet:Vanila JS Input Increment & Decrement
Author: Fauzan Ahmad
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 4,824
License: MIT
Edit Code online: View on CodePen
Read More

This code creates an Increment and Decrement Button in HTML. It allows you to increase or decrease a counter value displayed in an input field. The buttons and input field are styled using CSS to provide a user-friendly interface for adjusting the counter. This code is helpful for implementing simple numeric increment and decrement functionality on a web page.

You can use this code in various web applications, such as e-commerce sites, quantity selection forms, or interactive calculators. It provides an intuitive way for users to adjust numeric values easily.

How to Create Increment and Decrement Button in HTML

1. Begin by creating the HTML structure for your increment and decrement buttons. You can copy the following code into your HTML file:

<div class="input-group">
  <button id="decrement">-</button>
  <input type="number" id="input" value="0" readonly>
  <button id="increment">+</button>
</div>

2. To make your buttons stylish, add the following CSS code to your HTML file or create a separate CSS file. It styles the buttons, input field, and container.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(
    225deg,
    rgba(242, 113, 33, 1) 0%,
    rgba(233, 64, 87, 1) 47%,
    rgba(138, 35, 135, 1) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 0 1rem;
}

.input-group {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3), 4px 7px 15px rgba(0, 0, 0, 0.2),
    9px 15px 25px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  max-width: 360px;
}

button,
input {
  outline: none;
  border: none;
  padding: 16px;
  font-size: 18px;
}

input {
  width: 100%;
  text-align: center;
}

button {
  cursor: pointer;
}
button:nth-last-child(1) {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
}
button:nth-child(1) {
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
}

button:hover {
  background-color: #e6e6e6;
}
button:nth-last-child(1):active {
  box-shadow: inset -4px 5px 10px rgba(0, 0, 0, 0.5);
}
button:nth-child(1):active {
  box-shadow: inset 4px 5px 10px rgba(0, 0, 0, 0.5);
}

3. Now, let’s add the JavaScript functionality to your HTML. Place the following JavaScript code at the end of your HTML file or in a separate JavaScript file:

let counter = 0;

function increment() {
  counter++;
}

function decrement() {
  counter--;
}

function get() {
  return counter;
}

const inc = document.getElementById("increment");
const input = document.getElementById("input");
const dec = document.getElementById("decrement");

inc.addEventListener("click", () => {
  increment();
  input.value = get();
});

dec.addEventListener("click", () => {
  if (input.value > 0) {
    decrement();
  }
  input.value = get();
});

This JavaScript code defines three functions for incrementing, decrementing, and retrieving the counter value. It also sets up event listeners to respond to button clicks.

That’s all! You’ve successfully created Increment and Decrement buttons in HTML using JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X