Olá, eu sou a Mari Inoue! 👩🏽

🚀 Sobre mim

Fui aluna da Reprograma - ON12 - Back-End.

Foi assim que comecei minha jornada como DEV 💜

Hoje trabalho com densevolvimento web na área de Logística - Front End.

Fiz transição de carrerira, eu era estilista de moda 🤩 hoje sou uma Deva.

Gosto muito da area de tech do que eu escolhi para mim.

Projeto - Gerenciamento de tarefas para pessoas com TDAH

TDAH & Tempo Você luta com o tempo? Eu sim 🙋‍♀️ ! Quando estou fazendo algo apaixonante (como desenhar estes posts☺️) geralmente perco totalmente a noção de tempo! Aparentemente é bastante comum para pessoas com TDAH passarem por essa experiência de “cegueira temporal” ⏰ Utilizar ferramentas visuais como os calendários visuais, planejadores ou cronogramas reversos realmente me ajudaram.

ODS

Tema

HEY tem a parte boa também!

O TDAH e as realizações de tarefas

Dificuldade:

de se concentrar e se organizar.
para gerenciar as tarefas diárias
em completar projetos e trabalhos de forma eficiente.

Solução

Nesse sentido, o gerenciamento de tarefas pode ser uma ferramenta valiosa para ajudar as pessoas com TDAH.

Objetivo:

Gerenciar suas atividades diárias
Manter organizadas.
Melhorar foco e eficiência

Produto

Criar Todo List e Pomodoro Timer

Tecnologias:

Ferramenta	Descrição
javascript	Linguagem de programação utilizada
jest	Testes unitários
nodejs	Ambiente de execução do javascript

Funcionalidades

Ferramenta de organização

Lista de tarefas
Criar lista de tarefas
Remover lista de tarefas

Ferramenta de geranciar tempo

Cronometro
Set de 25 minutos
Set de 5 minutos
Iniciar o cronometro
Parar o cronometro
Reset do cronometro

Aprendizados

O que você aprendeu construindo esse projeto? Quais desafios você enfrentou e como você superou-os?

Esse projeto foi a consolidação de 10 semanas de imersão

Fundamentos de POO
Testes unitários
Clean code - nome variaveis, função com uma responsabilidade
Organização das pastas do projeto.

Mão no Código

//------------- Classe List -----------------------------
 export default class List {
  todoItems;
  constructor() {
    this.todoItems = [];
  }

//--------------clean code Nomes descritivos -------------
//--------------Funcão single responsability--------------
//--------------Feature Adição----------------------------
  addTodoItem(todoItem) {
    this.todoItems.push(todoItem);
  }
//--------------Feature Remoção----------------------------
  removeTodoItem(todoItem) {
    this.todoItems = this.todoItems.filter((word) => word !== todoItem);
  }
//--------------Feature Listagem de tarefas----------------------------
  getTodoItems() {
    return this.todoItems;
  }
}

const listinha = new List();

//------ Instâncias -------

listinha.addTodoItem("Banho e tosa");
listinha.addTodoItem("Arrumar bolsa da natação");
listinha.addTodoItem("Almoçar as 13:00");
listinha.addTodoItem("Tomar remédio");

listinha.getTodoItems();
//console.log -> getTodoItems ['Banho e tosa','Arrumar bolsa da natação','Almoçar as 13:00','Tomar remédio']

listinha.removeTodoItem("Banho e tosa");
//remover o item [ 'Arrumar bolsa da natação', 'Almoçar as 13:00', 'Tomar remédio' ]

export class PomodoroTimer {
    workDuration;
    breakDuration;
    interval;
    seconds;
    isPlaying;
    timerDisplay;
  constructor(workDuration, breakDuration) {
    this.workDuration = workDuration;
    this.breakDuration = breakDuration;
    this.interval = null;
    this.seconds = workDuration * 60;
    this.isPlaying = true;
    this.timerDisplay = document.getElementById("timer-display");
  }

//--------------clean code Nomes descritivos -------------
//--------------Funcão single responsability--------------
//--------------Feature Iniciar----------------------------
  start() {
    if (!this.interval) {
      this.interval = setInterval(() => {
        this.tick();
      }, 1000);
    }
  }

//--------------Feature Parar Tempo -------------------------
  stop() {
    clearInterval(this.interval);
    this.interval = null;
  }

//--------------Feature Resetar----------------------------
  reset() {
    this.stop();
    this.seconds = this.isPlaying
      ? this.workDuration * 60
      : this.breakDuration * 60;
    this.updateDisplay();
  }

//--------------Feature conta segundos----------------------------
  tick() {
    if (this.seconds > 0) {
      this.seconds--;
      this.updateDisplay();
    } else {
      this.isPlaying = !this.isPlaying;
      this.seconds = this.isPlaying
        ? this.workDuration * 60
        : this.breakDuration * 60;
      this.updateDisplay();
    }
  }

//--------------Feature Atuliza o display----------------------------
  updateDisplay() {
    if (this.timerDisplay) {
      this.timerDisplay.textContent = `${
        this.isPlaying ? "Work" : "Break"
      } Time: ${this.formatTime(this.seconds)}`;
    }
  }

//--------------Feature formatar tempo ----------------------------
  formatTime(seconds) {
    const minutes = Math.floor(seconds / 60)
      .toString()
      .padStart(2, "0");
    const remainingSeconds = (seconds % 60).toString().padStart(2, "0");
    return `${minutes}:${remainingSeconds}`;
  }
}

const timer = new PomodoroTimer(25, 5);

Demonstração

        📁 projeto-to-list
          |
          |-  📁 src
          |    |
          |    |- 📄 pomodoroTimer.js 
          |    |- 📄 index.js 
          |
          |
          |    |- 📁 __tests__
          |         |- 📄 pomodoroTimer.spec.js 
          |         |- 📄 todoList.spec.js 
          |
          |- 📄 jest.config.js
          |- 📄 .babelrc
          |- 📄 package-lock.json
          |- 📄 node_modules
          |- 📄 .gitignore
          |- 📄 package.json
          |
          |    |- 📄 pomodoro.html     
          |    |- 📄 index.html 
          |
          |
          📄 README.md

Rodando os testes

Para rodar os testes, rode o seguinte comando

  npm run test

Teste de cobertura

Testei as funções Pomodoro Timer, o iniciar, parar e resetar.
Testei as funções do Todo List, o adicionar tarefas, listar as tarefas e remover tarefas.

Link Coverage

Rodando localmente

Clone o projeto

  git clone https://github.com/Mariinoue/IJOn25-Projeto-Final

Entre no diretório do projeto

  cd my-project

Instale as dependências

  npm install

Inicie o servidor

  npm run start

Roadmap

Adicionar mais features
Criar telas
Tracking de emoção
Ansiedade
Planner mensal
Planner semanal

Mariinoue/IJOn25-Projeto-Final