Frontend Mentor - Shortly URL shortening API Challenge solution

My solution to the Shortly URL shortening API Challenge on Frontend Mentor

Overview

• Responsive site
• Any valid URL can be shortened
• Display's List of shortened URL's
  • Can copy shortened URL
• Empty input field error

Links

Code Git: Github Auddity Live Site: Shortly URL Landing Page

Built with

• Semantic HTML5
• Sass (scss)
• Flexbox
• Mobile-first
• Javasctipt
  • HTTP Request

Newly Learned

Clipboard API

This project introduced me to the Clipboard API

const copyShortUrl = (text, copyBtn) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      copyBtn.textContent = 'Copied!';
      copyBtn.style.background = 'hsl(257, 27%, 26%)';
    })
    .catch(err => {
      alert('Error in copying url: ', err);
    });
};

Author

• Portfolio Site: Auddity Webdev Site
• Frontend Mentor: Auddity
• I use to do sound design too: Auddity LLC