Barcode Generator API

The Barcode Generator API is a web-based service that allows you to generate various types of barcodes dynamically using JavaScript, HTML, and CSS. This API can be integrated into web applications to create barcodes on-the-fly, making it ideal for inventory management, retail, logistics, and other applications requiring barcode generation.
dishamodi0910 · Jul 26, 2024 · 7109e39 · 7109e39
1 parent 445b5c2
commit 7109e39
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 0 deletions.
diff --git a/New_APIs/Barcode-Generator/Barcode Generator/READme.md b/New_APIs/Barcode-Generator/Barcode Generator/READme.md
@@ -0,0 +1,42 @@
+# Barcode Generator
+This is a simple barcode generator application built using HTML, CSS, and JavaScript. The application allows users to input a string and generate a corresponding barcode.
+
+## Features
+* Generate barcodes from user input.
+* Simple and easy-to-use interface.
+* Responsive design for different screen sizes.
+
+## Technologies Used
+* HTML
+* CSS
+* JavaScript
+* JsBarcode library
+
+## Getting Started
+* Prerequisites
+To run this project locally, you need a web browser.
+
+* Installation
+Clone the repository:
+
+```bash
+git clone https://github.com/your-username/barcode-generator.git
+```
+
+* Navigate to the project directory:
+
+```bash
+cd barcode-generator
+```
+
+* Open index.html in your web browser to see the barcode generator in action.
+
+## Usage
+* Open the application in your web browser.
+* Enter the text you want to convert into a barcode in the input field.
+* Click the "Generate Barcode" button to generate the barcode.
+* The generated barcode will be displayed below the input field.
+
+## Screenshots
+
+![alt text](image.png)
diff --git a/New_APIs/Barcode-Generator/Barcode Generator/image.png b/New_APIs/Barcode-Generator/Barcode Generator/image.png
diff --git a/New_APIs/Barcode-Generator/Barcode Generator/index.html b/New_APIs/Barcode-Generator/Barcode Generator/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Barcode Generator</title>
+    <!-- Google Fonts-->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Barcode CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.6/JsBarcode.all.min.js"></script>
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Barcode Generator</h1>
+      <input type="text" id="input" />
+      <button id="btn-barcode-generator">Barcode Generator</button>
+      <svg id="barcode"></svg>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/New_APIs/Barcode-Generator/Barcode Generator/script.js b/New_APIs/Barcode-Generator/Barcode Generator/script.js
@@ -0,0 +1,13 @@
+let input = document.getElementById("input");
+let btn = document.getElementById("btn-barcode-generator");
+btn.addEventListener("click", () => {
+  JsBarcode("#barcode", input.value, {
+    format: "code128",
+    displayValue: true,
+    fontSize: 24,
+    lineColor: "#000",
+  });
+});
+window.onload = (event) => {
+  input.value = "";
+};
diff --git a/New_APIs/Barcode-Generator/Barcode Generator/style.css b/New_APIs/Barcode-Generator/Barcode Generator/style.css
@@ -0,0 +1,38 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  background-color: #0092fd;
+}
+.container {
+  width: min(500px, 90vw);
+  background-color: #ffffff;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  padding: 3rem;
+  border-radius: 0.8em;
+}
+h1 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+input {
+  width: 60%;
+  border: 1px solid #000000;
+  padding: 1em;
+  border-radius: 0.7em;
+}
+button {
+  background-color: #0092fd;
+  color: #ffffff;
+  border: none;
+  width: 38%;
+  border-radius: 0.7em;
+  padding: 1em;
+  font-size: 0.8em;
+}