DEV Community

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

Posted on • Edited on

8 3

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.

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay