Skip to content

Latest commit

 

History

History
110 lines (90 loc) · 3.62 KB

README-pl.md

File metadata and controls

110 lines (90 loc) · 3.62 KB
Raw

🌍 polski ∙ English

Lista rzeczy do zrobienia


🎬 Prezentacja

to-do list


📝 Opis

'Lista rzeczy do zrobienia' to aplikacja zbudowana przy użyciu biblioteki React.js.

Aplikacja umożliwia:

  • pobieranie przykładowych zadań,
  • dodawanie nowych zadań do listy,
  • oznaczanie zadań jako ukończone,
  • wyszukiwanie zadań,
  • wyświetlanie szczegółów zadania,
  • usuwanie zadań z listy,
  • ukrywanie ukończonych zadań,
  • oznaczanie wszystkich zadań jako ukończone.

Wykorzystaj tę aplikację, aby efektywnie zarządzać swoimi zadaniami i śledzić postęp w wykonywaniu obowiązków!

Instrukcje użytkowania:

  1. Pobieranie przykładowych zadań:
    • Wybierz opcję "Pobierz przykładowe zadania", aby załadować zestaw przykładowych zadań do listy.
  2. Dodawanie zadania:
    • Wprowadź nazwę zadania w polu tekstowym.
    • Naciśnij przycisk "Dodaj zadanie" lub wciśnij klawisz Enter, aby dodać zadanie do listy.
  3. Oznaczanie zadania jako ukończone:
    • Kliknij na pole wyboru obok zadania, aby je oznaczyć jako ukończone.
  4. Wyszukiwanie zadań:
    • Wpisz szukane słowo lub frazę w pole wyszukiwania.
    • Zadania pasujące do kryteriów wyszukiwania zostaną automatycznie wyświetlone na liście.
  5. Wyświetlanie szczegółów zadania:
    • Kliknij na zadanie na liście, aby wyświetlić jego szczegóły.
  6. Usuwanie zadania:
    • Kliknij przycisk usuwania (ikona kosza) obok zadania, aby je usunąć z listy.
  7. Ukrywanie ukończonych zadań:
    • Użyj opcji "Ukryj ukończone" lub "Pokaż ukończone", aby schować lub pokazać zakończone zadania z listy.
  8. Oznaczanie wszystkich zadań jako ukończone:
    • Wykorzystaj opcję "Ukończ wszystkie", aby oznaczyć wszystkie zadania jako ukończone.

🛠 Technologie

  • JavaScript ES6+ Features
  • React
  • JSX
  • CSS Grid
  • CSS Flex
  • Normalize.css
  • Styled Components
  • Media Queries
  • Controlled Components
  • Redux
  • Redux Toolkit
  • Redux Saga
  • Redux Router

⚙ Konfiguracja

Aby uruchomić program z repozytorium 'to-do-list-react' na swoim komputerze, wykonaj następujące kroki:

  1. Pobranie kodu źródłowego:
    Sklonuj repozytorium ze strony GitHub na swój komputer lokalny za pomocą polecenia:
     git clone https://github.com/mariuszmmm/to-do-list-react.git
  1. Instalacja zależności:
    Przejdź do katalogu projektu, a następnie zainstaluj wszystkie wymagane zależności za pomocą menedżera pakietów, takiego jak npm:
    cd to-do-list-react
    npm install
  1. Uruchomienie aplikacji:
    Po zainstalowaniu zależności, możesz uruchomić aplikację lokalnie. Użyj polecenia:
    npm start

To polecenie uruchomi aplikację w trybie deweloperskim, otwierając ją w przeglądarce pod adresem http://localhost:3000.


🖥 Widok aplikacji

Aplikacja jest w pełni responsywna i dostosowuje się do różnych urządzeń.
Zrzuty ekranu prezentują wygląd aplikacji zarówno na telefonach, jak i tabletach, pokazując, jak responsywnie dostosowuje się do zmiany rozmiaru ekranu.

  • 320x568

to-do list

  • 600x960

to-do list