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) {

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 class="ide__body">
    <p class="ide__line">...</p>
    <p class="ide__line">${data.line}</p>
    <p class="ide__line">...</p>
  <div class="ide__footer">
    <p>Author: ${data.author}</p>
    <p><a href="${data.link}">Details</a></p>
<div class="ide__details">
  <p>What does this line do? </p>
  • 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) {

const getCLD = () => {
    .then((response) => {
      return response.json();  
    .then((data) => {
      localStorage.setItem('cldData', JSON.stringify(data));
$reset.addEventListener('click', () => {

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ć


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


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:

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



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.