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.

Speedy emails, satisfied customers

Postmark Image

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay