Creating a kid friendly timer for my kids

trying to get this time to display the right info when the timer is active and finishes. when it runs it says “undefined” for info. I followed this guy tutorial and cant seem to figure out what is wrong with the code.
(389) How to Create a Countdown Card in Home Assistant - YouTube

type: custom:button-card
entity: timer.kids_game_timer
show_entity_picture: true
name: Break Time
show_label: true
label: |
    if (entity.state == "active")
      return (entity.attributes.current_course) + " / " + (entity.attributes.run_state) + "<br />" + 'Time left: ' + (entity.attributes.remaining);
    if (entity.state == "idle")
      return "Turned off"
    - width: 30px
    - color: black
    - justify-content: flex-start
    - margin-top: '-4px'
    - height: 130px
    - padding: 12px 0 12px 18px
    - justify-self: start
    - font-size: 12px
    - color: black
    - opacity: '0.5'
    - padding-top: 10px
    - justify-self: start
    - font-size: 14px
    - font-weight: 500
    - margin-bottom: 0px
    - text-align: left
    - padding-top: 5px

Timers don’t have attributes called current_course, remaining, or run_state. You have told it to provide you 3 pieces of information that don’t exist, and it is telling you it doesn’t have defined values for those variables.

You need to change the js template in the label section to return values that exist. If you explain what information you would like to have displayed we can help you update the configuration.

That video is using attributes from his washing machine. Not a timer.