diff --git a/New_APIs/Barcode-Generator/Barcode Generator/READme.md b/New_APIs/Barcode-Generator/Barcode Generator/READme.md new file mode 100644 index 0000000..20ae49e --- /dev/null +++ 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) \ No newline at end of file diff --git a/New_APIs/Barcode-Generator/Barcode Generator/image.png b/New_APIs/Barcode-Generator/Barcode Generator/image.png new file mode 100644 index 0000000..638be7e Binary files /dev/null and b/New_APIs/Barcode-Generator/Barcode Generator/image.png differ diff --git a/New_APIs/Barcode-Generator/Barcode Generator/index.html b/New_APIs/Barcode-Generator/Barcode Generator/index.html new file mode 100644 index 0000000..89ebb81 --- /dev/null +++ b/New_APIs/Barcode-Generator/Barcode Generator/index.html @@ -0,0 +1,25 @@ + + + + + Barcode Generator + + + + + + + + +
+

Barcode Generator

+ + + +
+ + + diff --git a/New_APIs/Barcode-Generator/Barcode Generator/script.js b/New_APIs/Barcode-Generator/Barcode Generator/script.js new file mode 100644 index 0000000..d179db6 --- /dev/null +++ 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 new file mode 100644 index 0000000..ff3c1ad --- /dev/null +++ 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; +}