loading...
Cover image for Day 3 - 100 days of Coding - Vs Code Extension

Day 3 - 100 days of Coding - Vs Code Extension

ganesh profile image Ganesh Raja ・1 min read

100 Days of Code (6 Part Series)

1) Vs-Code Extension - Project Setup and Basic functionalities 2) Vs Code Extension 3 ... 4 3) Day 3 - 100 days of Coding - Vs Code Extension 4) Day 4 - 100 days of Coding - Vs Code Extension - Store Date in a permanent file 5) Day 5 - 100 days of Coding - Python - Add text into Image 6) Day 6 - 100 days of Coding - Vs Code Extension - add restart feature

So it's day three of the extension building. For the first two days, we built a basic working extension and converted it into class.

Today we are gonna majorly focus on adding pause Feature to our Pomodoro Timer. To achieve this we need to store the timer into our class field. We will store the current state as either Pomodoro or Rest in our class as well. we will store the timer id into the class.

    this.tick = 0;
    this.currentTimerID = null;
    this.currentAction = POMODO_TIMER;

Whenever a new timer is called this will be updated. Whenever new tick happened tick will be updated and Whenever the actions is changed current Action will be updated.


  pausePomodoTimer() {
    if (this.currentTimerID) {
      this.vsCodeStatusBar.text = "Pomodo Timer passed. Click to Resume";
      clearInterval(this.currentTimerID);
      switch (this.currentAction) {
        case POMODO_TIMER:
          this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
        case REST_TIMER:
          // this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
      }
    }
  }

Whenever the user tried to pause (with a new command registered. ) by clicking on status bar item. We will be updating the item command to start (for resume on next click) and clear the current timer. When user tries to resume next, we will take the value and state stored in the constructor and resume it.

You can check the full code in my repo simple-pomodoro-timer

100 Days of Code (6 Part Series)

1) Vs-Code Extension - Project Setup and Basic functionalities 2) Vs Code Extension 3 ... 4 3) Day 3 - 100 days of Coding - Vs Code Extension 4) Day 4 - 100 days of Coding - Vs Code Extension - Store Date in a permanent file 5) Day 5 - 100 days of Coding - Python - Add text into Image 6) Day 6 - 100 days of Coding - Vs Code Extension - add restart feature

Posted on Jun 12 by:

Discussion

markdown guide