https://github.com/asbhogal/frontend-mentor-url-shortening-project

A pair programming project which leverages the URL Shortening API and stores condensed URLs using Local Storage.
https://github.com/asbhogal/frontend-mentor-url-shortening-project

api api-rest css3 front-end-development frontend-mentor html5 javascript js pair-programming rest-api scss url-shortener vite

Last synced: about 8 hours ago
JSON representation

A pair programming project which leverages the URL Shortening API and stores condensed URLs using Local Storage.

• Host: GitHub
• URL: https://github.com/asbhogal/frontend-mentor-url-shortening-project
• Owner: asbhogal
• Created: 2023-06-01T21:16:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-29T20:56:42.000Z (about 1 year ago)
• Last Synced: 2023-11-29T21:26:04.582Z (about 1 year ago)
• Topics: api, api-rest, css3, front-end-development, frontend-mentor, html5, javascript, js, pair-programming, rest-api, scss, url-shortener, vite
• Language: SCSS
• Homepage: https://frontend-mentor-url-shortening-project.vercel.app
• Size: 1.09 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


URL Shortening Page - Pair Programming Project


![GitHub deployments](https://img.shields.io/github/deployments/asbhogal/Frontend-Mentor-URL-Shortening-Project/production?label=DEPLOYMENT%20STATE&style=for-the-badge&labelColor=000) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/asbhogal/Frontend-Mentor-URL-Shortening-Project?style=for-the-badge&labelColor=000) ![GitHub repo size](https://img.shields.io/github/repo-size/asbhogal/Frontend-Mentor-URL-Shortening-Project?color=blueviolet&style=for-the-badge&labelColor=000)



A single web page rendered from a series of mockups for the Frontend Mentor challenge which leverages the URL Shortening API to return a condensed version of a user-submitted website address, stores these in the browser's local storage and allows the user to copy these to their clipboard. Regex has also been used to check whether the URL entered is valid.

This is a pair programming project between ofthewildfire and asbhogal, built using HTML5, CSS3, SCSS and JavaScript.

:heavy_check_mark: Features:


- Designs representative of mockups

- Uses async-await functionality to call API

- Leverages Clipboard API

- Regex for user-inputted URL validation

- Fully responsive

- Optimised for the web

- Locally hosted fonts

:nerd_face: Stacks & Tools Used:















Links :link:


 - URL Shortening Page

 - Frontend Mentor Challenge