Skip to content
OverviewSolutions
59
Comments
5

Edis

@edo979Bosnia and Herzegovina1,220 points

Frontend developer. I watched so many tutorials and now I'm in tutorials hell. I want to build something from scratch. Learning while building.

I’m currently learning...

javaScript, CSS, SASS

Latest solutions

View more solutions

Latest comments

  • Edis•1,220
    @edo979

    Hi.

    You done great job, well done. I read you code and shorten your function.

    let num;
let prevButton;
const numCont = document.getElementById('numCont');

function myId(clicked_id) {
  num = document.getElementById(clicked_id).value;

  numCont.addEventListener('click', (e) => {
    const isButton = e.target.nodeName === 'BUTTON';

    if (!isButton) return;

    prevButton?.classList.remove('active');

    if (isButton) {
      e.target.classList.add('active');
    }

    prevButton = e.target;
  })
}

    Of course you must add defer in your script tag. Read this:

    Marked as helpful
  • Edis•1,220
    @edo979

    Hello. Great work. I read your javascript file and add some changes. You javascript is excellent do not worry. I did this because I was bored and love javascript.

    let data = [],
selectedTimeFrame = 'daily'

const buttons = Array.from(document.querySelectorAll('[data-show]'))
const currentElements = Array.from(document.querySelectorAll('.current-data'))
const previousElements = Array.from(document.querySelectorAll('.previous-data'))

fetch('../data.json')
  .then((res) => res.json())
  .then((result) => {
    data = result

    updateView()
  })

// Event listeners
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    selectedTimeFrame = e.target.dataset.show

    updateView()
  })
})

function updateView() {
  data.forEach((activity, i) => {
    const currentValue = activity.timeframes[selectedTimeFrame].current

    currentElements[i].textContent = currentValue + getTimeUnits(currentValue)

    previousElements[i].textContent = formatTextPrevEl(
      activity.timeframes[selectedTimeFrame].previous
    )
  })
}

// Utility
function getTimeUnits(value) {
  return value > 1 ? 'hrs' : 'hr'
}

function formatTextPrevEl(number) {
  const timeUnit = getTimeUnits(number)

  switch (selectedTimeFrame) {
    case 'daily':
      return `${number}${timeUnit} - yesterday`

    case 'weekly':
      return `last week - ${number}${timeUnit}`

    case 'monthly':
      return `last month - ${number}${timeUnit}`

    default:
      return
  }
}
    Marked as helpful
  • Edis•1,220
    @edo979

    Well done. This project is very difficult and it took me some time to complete it. Congratulations. I like the animations on the buttons, too.

  • Edis•1,220
    @edo979

    I also noticed the aspect ratio of social icons. Nice work. Congratulations!

  • Edis•1,220
    @edo979

    Thank You very much.