Skip to content
OverviewSolutions
59
Comments
5
Edis
@edo979

All comments

  • Edis•1,220
    @edo979Posted about 2 years ago

    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
    0
  • imad•3,330
    @imadvvSubmitted about 2 years ago

    Greetings Frontend Mentor Community!!

    This was a great challenge for more practice, I get more practice using Grid and flex, but learned new things as well.

    maybe the most interesting one, was the New syntax for range media queries, @media (400px <= width <= 600px ).

    but over, Any feedback will be awesome

    Happy Codding!!, and have a Good Day/Night

    Frontend Mentor - Time tracking dashboard solution

    2
    Edis•1,220
    @edo979Posted about 2 years ago

    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
    1
  • Edis•1,220
    @edo979Posted over 2 years ago

    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.

    1
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted over 2 years ago

    Hello, Frontend Mentor community! This is my solution to the Ping coming soon page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Ping coming soon page

    11
    Edis•1,220
    @edo979Posted over 2 years ago

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

    0
  • Edis•1,220
    @edo979Posted over 2 years ago

    Thank You very much.

    0