All comments

• 

  Darionas• 320

  @Darionas

  Submitted over 1 year ago

  

  Make a selected/clicked button active in JavaScript without Loop

  2

  3

  0

  

  Edis• 1,220

  @edo979

  Posted over 1 year 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

  This comment has received 2 repliesShow
• 

  imad• 3,330

  @imadvv

  Submitted almost 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

  #fetch#accessibility

  2

  17

  3

  

  Edis• 1,220

  @edo979

  Posted almost 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
• 

  Duncan Kithinji• 590

  @duncan91-ops

  Submitted about 2 years ago

  Hello Developers, Please feel free to share any input you might have or suggestions on improvement. This was an absolutely amazing state management challenge & I also got to plenty on modals.

  

  React, Context, Styled Components Crowdfunding Product Page Solution

  #accessibility#styled-components#react

  1

  4

  1

  

  Edis• 1,220

  @edo979

  Posted about 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

  This comment has received 1 replyShow
• 

  👾 Ekaterine Mitagvaria 👾• 7,640

  @catherineisonline

  Submitted 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

  61

  0

  

  Edis• 1,220

  @edo979

  Posted about 2 years ago

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

  0

  This comment has received 1 replyShow
• 

  Edis• 1,220

  @edo979

  Submitted over 2 years ago

  

  FAQ accordion

  2

  6

  0

  

  Edis• 1,220

  @edo979

  Posted over 2 years ago

  Thank You very much.

  0