Code Line Daily widget

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>${data.date}.${ext(data.language)}</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.

Comments

[Nikola Stojaković]

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;

• Themes support
• Filters (for example, show me only JS snippets or show me CSS snippets each monday and thursday)

[Silvestar Bistrović]

Hi Nikola, thank you for suggestions. 🙌

Browser extension already exists:
chrome.google.com/webstore/detail/...

I think I am going to add filters.
What do you mean by "themes". Could you elaborate, please?

[Nikola Stojaković]

Amazing!

By themes I meant allowing user to change layout of the daily code line box - you may find this inspiring if you decide to add that feature.