This is a solution to the Shortly URL shortening API Challenge challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Shorten any valid URL
- See a list of their shortened links, even after refreshing the browser
- Copy the shortened link to their clipboard in a single click
- Receive an error message when the
form
is submitted if:- The
input
field is empty
- The
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Nav Menu was more complicated in Mobile, so nav was desktop-first
- Svelte
- In mobile nav needed "inset" and "height: fit-content" to make it work.
- SVG hover needed to edit SVG file: take out fill color and put back in CSS
- Svelte was easier in some ways than vanilla JS. Could have further componentized, but simple enough to keep in one component
- Had to use positioning and negative posiion and negative margin at points