DEV Community

Cover image for Code Line Daily widget
Silvestar Bistrović
Silvestar Bistrović

Posted on • Edited on

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.

const cldData = localStorage.getItem('cldData');
Enter fullscreen mode Exit fullscreen mode
  • Parse data if available: 
const parsedData = cldData && JSON.parse(cldData);
Enter fullscreen mode Exit fullscreen mode
  • 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>`; }
Enter fullscreen mode Exit fullscreen mode
  • 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)); }); }
Enter fullscreen mode Exit fullscreen mode 
$reset.addEventListener('click', () => { localStorage.removeItem('cldData'); getCLD(); });
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
stojakovic99 profile image
Nikola Stojaković • • 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;

  • Themes support
  • Filters (for example, show me only JS snippets or show me CSS snippets each monday and thursday)
Collapse
 
starbist profile image
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?

Collapse
 
stojakovic99 profile image
Nikola Stojaković • • Edited

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.