Challenge

My partner and I successfully built out the landing page using JavaScript and SCSS, and we are proud to say that it functions flawlessly. Following the provided design, we ensured that the site layout is responsive and adjusts beautifully to different screen sizes, providing an optimal viewing experience for users on any device.

To implement the URL shortening feature, we integrated the shrtcode API. This allowed users to enter a valid URL and receive a shortened version in return. The API seamlessly handled the URL shortening process, ensuring accuracy and security. We also ensured that the shortened links remained accessible even after refreshing the browser. By utilizing JavaScript's local storage capabilities, we stored the shortened links as data, making them persistently available to users.

To enhance user convenience, we implemented a one-click copy-to-clipboard functionality. When users click on the shortened link, it is automatically copied to their clipboard, eliminating the need for manual selection and copy actions. To address potential errors, we added form validation. If a user submits an empty input field, an error message is displayed, prompting them to provide a valid URL. This ensures that the URL shortening process proceeds smoothly and accurately.

Throughout the development process, we paid close attention to detail and meticulously implemented the design specifications. By utilizing JavaScript for functionality and SCSS for styling, we achieved a polished and visually appealing landing page that meets all the requirements outlined in the challenge.