loading...
Cover image for Code Line Daily widget

Code Line Daily widget

starbist profile image Silvestar Bistrović Updated on ・2 min read

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

Here's how I built it.

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));
    });
}
$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.

Posted on by:

starbist profile

Silvestar Bistrović

@starbist

Fearless web engineer, CSS developer, JAMstack enthusiast, and WordPress theme specialist

Discussion

pic
Editor guide
 

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)
 

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?

 

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.