Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 13, 2020 07:41 pm GMT

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');
  • 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. :)


Original Link: https://dev.to/starbist/code-line-daily-widget-4dd2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To