DEV Community

Cover image for Frontend Mentor - URL shortening API landing page
Nabilla Trisnani
Nabilla Trisnani

Posted on • Updated on


Frontend Mentor - URL shortening API landing page

This is my solution to Frontend Mentor URL shortening API landing page

Table of contents


The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs.

The challenge

User 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


My process

Built with:

What I learned

  • Create empty array in localStorage
localStorage.setItem('data', '[]');
Enter fullscreen mode Exit fullscreen mode
  • Put fetched data to array in localStorage
let param = this.state.value;

  .then((res) => res.json())
  .then((result) => {
    // if localStorage 'data' is null make an empty array
    if (localStorage.getItem("data") == null) {
      localStorage.setItem("data", "[]");

    // get localStorage 'data' as var old_data
    var old_data = JSON.parse(localStorage.getItem("data"));

    // if fetch is ok return localStorage 'data' push result
    if (result.ok === true) {

    // set localStorage 'data' to new data from push result
    localStorage.setItem("data", JSON.stringify(old_data));

    // set state items equal to result, linkStorage to localStorage 'data'
      items: result,
      linkStorage: JSON.parse(localStorage.getItem("data"))
  .catch((error) => console.log("error", error));
Enter fullscreen mode Exit fullscreen mode


Top comments (0)

This is your brain on JavaScript (classic DEV post)

brain computer interface

Exploring brain-computer interfaces in JavaScript