The goal of this landing page challenge is integration with the shrtcode URL shortening API and playing with browser storage.
The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs.
You can use any JavaScript framework/library on the front-end such as React or Vue. You also have complete control over which packages you use to do things like make HTTP requests or style your project.
Users should be able to:
1. View the optimal layout depending on their device's screen size.
2. See hover states for all interactive elements on the page.
3. Shorten any valid URL.
4. Copy the shortened link to their clipboard in a single click.
5. Receive an error message when the form is submitted if the input field is empty.
6. See a list of their shortened links, even after refreshing the browser.
I do not have access to the Figma sketch so the design is not pixel perfect.
- Semantic HTML5 markup
- CSS custom properties
- Flex
- Grid
- Desktop-first workflow
- Shrtco - url shortening API (old)
- Ulvis - url shortening API (current)
Another attempt to play around with API and understand it better. Not very hard as I only need one data from get request. This will be my 3rd small project using API. Working with it is not hard however it does get a little harder when I have to work with dynamic DOM elements. Once again was glad to practice some CSS and eventlisteners. I try not to match the original design as much as I did before as it takes more time and I prefer to spend it mostly on JavaScript.
The hardest part which I never managed to finish is saving the cache after reloading. I tried different ways but I am not getting the final result. I do manage to retrieve the previous data (the input value, for instance) however I am unable to make it visible. I usually use console.log-s to understand what I am doing and it does work, I do retrieve everything I need but I have a hard time displaying it on dynamic elements. The elements stay there after refresh however they are empty. I will for sure get back to this project again!
This project serves as a project to show off my personal skills. I do not accept any contributions like pull requests to this project however if you have any suggestions or ideas feel free to message me or submit an idea in the discussions. Otherwise, you are free to fork this project and change it for your own purposes.
- Figma - Paste your design image to check the size of containers, width, etc.
- Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.
- Shrtco - url shortening API (old).
- Ulvis - url shortening API (current).
A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!