Welcome to the URL Shortener App, a simple yet efficient web tool designed to convert lengthy URLs into compact, shareable links. Built using HTML, CSS, and JavaScript, this app integrates the TinyURL API to generate shortened URLs on the fly. Whether you're sharing links via social media or simplifying complex URLs, the app provides a clean, easy-to-use interface that saves both the original and shortened URLs in your browser’s localStorage for quick access later. With a modern, responsive design powered by Bootstrap, the app ensures that the experience is seamless across devices and browsers.

To use the app, simply enter the long URL you want to shorten into the input field, and click the "Shorten URL" button. The app will fetch the shortened version and display both the original and shortened URLs in a neatly organized table. Even after refreshing or revisiting the page, the stored URLs remain accessible, thanks to localStorage. The URL Shortener App is a convenient solution for managing and sharing links, making it an essential tool for anyone who frequently shares long URLs.

You may also check this simple HTML, CSS and JavaScript project:

• Breakout Game
• Arabic to Roman Converter
• Email Username Generator Tool
• Automatic Input Suggestions
• One-time Password Input

Features:

• URL Shortening: Users can shorten any valid URL using the TinyURL API.
• LocalStorage: All original and shortened URLs are saved locally in the browser for future reference.
• Responsive Table: The app displays original URLs and their corresponding shortened URLs in a neatly styled, responsive table.
• Bootstrap Integration: The app utilizes Bootstrap for a modern, responsive design.
• Cross-Browser Support: Works seamlessly on modern browsers.

Technologies Used:

• HTML: Provides the structure for the app interface, including form inputs and table elements.
• CSS: Custom styling, along with Bootstrap, is used to make the app visually appealing and user-friendly.
• JavaScript: Handles the app's logic, including URL shortening, storing data, and interacting with local storage.
• TinyURL API: A powerful service used to convert long URLs into shortened versions.

How to Use:

1. Enter a URL: In the input field, type or paste the URL that you want to shorten.
2. Shorten the URL: Click the "Shorten URL" button, and the app will send the URL to the TinyURL API, retrieve the shortened version, and display it in the table.
3. View and Use Shortened URL: The table displays both the original and shortened URLs. You can click on the links to navigate directly to the URLs.
4. Data Persistence: The app stores the URL pairs in the browser’s localStorage, so even after refreshing the page, your previously shortened URLs will be displayed.

Sample Screenshots of the Project:

Sample Data

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, the URL Shortener App provides a quick and user-friendly way to condense long URLs into manageable links using the TinyURL API, while conveniently storing them locally for future reference. With its responsive design and easy-to-use interface, this app is perfect for simplifying the process of sharing URLs across various platforms. Whether you're managing personal or professional links, this tool offers a streamlined solution to keep your URLs organized and accessible.

That's it! I hope this "URL Shortener App Using HTML, CSS and JavaScript" will assist you on your  programming journey, providing value to your current and upcoming project.

For additional tutorials and free source codes, explore our website.

Enjoy Coding :>>