Code Line Daily widget

#codepen #showdev #beginners

Here's a Code Line Daily widget: a component that displays a line of code of the day.

Here's how I built it.

Get data from localStorage:

const cldData = localStorage.getItem('cldData');

Parse data if available:

const parsedData = cldData && JSON.parse(cldData);

If parsed data available, call function for building HTML code:

if(cldData) {
  buildCLD(parsedData);
}

const buildCLD = (data) => {
  $ide.innerHTML = `<div class="ide__inner">
  <div class="ide__header">
    <p><a href="https://cld.silvestar.codes/line/${data.date}/">${data.date}.${ext(data.language)}</a></p>
  </div>
  <div class="ide__body">
    <p class="ide__line">...</p>
    <p class="ide__line">${data.line}</p>
    <p class="ide__line">...</p>
  </div>
  <div class="ide__footer">
    <p>Author: ${data.author}</p>
    <p>${data.language}</p>
    <p><a href="${data.link}">Details</a></p>
  </div>
</div>
<div class="ide__details">
  <p>What does this line do? </p>
  <p>${data.note}</p>
</div>`;
}

If no data from localStorage available, call function for fetching new data from Code Line Daily, outputting HTML code and saving data to localStorage:

if(!cldData) {
  getCLD(); 
}

const getCLD = () => {
  fetch('https://cld.silvestar.codes/api/get-random-line')
    .then((response) => {
      return response.json();  
    })
    .then((data) => {
      buildCLD(data);
      localStorage.setItem('cldData', JSON.stringify(data));
    });
}

Add function for clearing the localStorage and fetching fresh data from Code Line Daily API:

$reset.addEventListener('click', () => {
  localStorage.removeItem('cldData');
  getCLD();
});

Why localStorage part, you ask? Because I am trying to save you and me some bandwidth. :)

P.S. The widget is now visible on my homepage: https://www.silvestar.codes.

Top comments (3)

Nikola Stojaković • Mar 13 '20 • Edited

Nice idea! :)

As someone already mentioned on ProductHunt, it would be great to see this as a browser extension and here are some features I would personally like to see in such extension as a user;