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.

• Overview
  • The challenge
  • Screenshots
  • Links
  • Project Setup
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Solution URL: GitHub
• Live Site URL: Vercel

npm install

npm run dev

npm run build

npm run lint

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Responsive layout
• Vue.js - JS framework

This project was my first contact with Vue.js, I learned about the basics of list rendenring and event handling with Vue.js.

<template>
    <div class="shorten">
        <div class="shorten-form">
            <div class="shorten-form-box">
                <input v-model="url" type="url" placeholder="Shorten a link here..." 
                aria-label="input for url to be shortened"
                :class="['shorten-form__input', error ? 'error-input' :'']">
                <span v-if="error" class="error-message">Please add a link</span>
            </div>
            <button type="button" class="button button--shorten-form" 
            @click.prevent="shorten">
                <span class="link link--white">Shorten It!</span>
            </button>
        </div>
    </div>
</template>

In future projects I want to improve the usage of Vue.js, especially about best practices with this framework.

• Frontend Mentor - This helped me to find simple and well defined projects that I can use to learn new technologies while creating beautiful projects.
• Vue.js Doc - The Vue.js documentation is very easy to read and it helped me a lot with my first steps.

My husband @filipedanielski who is always supporting and encouraging me.