Frontend Mentor - Shortly URL shortening API Challenge solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

The challenge

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

--I also added this functionalities:

Users should be able to:

• Not search for a link, if it's already been shown on the page
• Receive an error message when the form is submitted if:
  • The input is unvalid
  • The input is already searched

Screenshot

-💻 Desktop-View

-📱 Mobile-View

Links

• Solution URL: Click here
• Live Site URL: Click here

Built with

• Semantic HTML5 markup
• CSS custom properties
• Bootstrap
• Flexbox
• Mobile-first workflow
• JavaScript-DOM 0

What I learned

I learned how to copy text from an input:

let copyText = e.target.previousElementSibling
    navigator.clipboard.writeText(copyText.value);

-how to add an stlysheet and add to html and change the color of placeholder,because it is not possible to get that directly with JS:

const style = document.createElement("style")
style.type = "text/css"
const {
  sheet
} = document.head.appendChild(style)

const rule = sheet.insertRule("::placeholder {}")
const placeholderStyle = sheet.rules[rule].style;
 placeholderStyle.color = "#dc3545";

-how to use pseudo-class "not" with "hover":

.nav-link:hover:not(.sign-up-button) {
  color: var(--darkViolet) !important;
}

Useful resources

• This resources helped me to:

• Shorco Api - shorten the links.

• Thewebdev.info - update placeholder color using JavaScript.

• W3Schools - copy clipboard in JS.

Author

• Frontend Mentor - @alpbrace