Frontend Mentor - URL shortening API landing page

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

---

Table of contents

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

Overview

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

Links

• Solution
• Live Preview

My process

Built with:

• HTML5
• SCSS
• Bootstrap
• React
• shrtcode API

What I learned

• Create empty array in localStorage

localStorage.setItem('data', '[]');

• Put fetched data to array in localStorage

let param = this.state.value;

fetch(`https://api.shrtco.de/v2/shorten?url=${param}`)
  .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) {
      old_data.push(result);
    }

    // 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'
    this.setState({
      items: result,
      linkStorage: JSON.parse(localStorage.getItem("data"))
    });
  })
  .catch((error) => console.log("error", error));

---

Author

• Frontend Mentor: @NabillaTrisnani
• Github: @NabillaTrisnani
• LinkendIn: Nabilla Trisnani
• Twitter: @NabillaTrisnani