Moje przykładowe projekty

Możemy zacząć od konkretnego projektu, który będzie jednocześnie przydatny i pozwoli na rozwijanie umiejętności web developmentu. Proponuję stworzenie **aplikacji do zarządzania zadaniami (To-Do App)**. Projekt ten nie tylko pomoże Ci opanować kluczowe technologie, ale także może być później używany do organizacji pracy czy codziennych zadań.

Funkcjonalności aplikacji:
1. **Dodawanie nowych zadań**: Użytkownik może dodać nowe zadanie do listy.
2. **Oznaczanie zadań jako zakończone**: Po zakończeniu zadania użytkownik może oznaczyć je jako wykonane.
3. **Edycja zadań**: Możliwość edytowania już istniejących zadań.
4. **Usuwanie zadań**: Użytkownik może usunąć zadanie, jeśli nie jest już potrzebne.
5. **Filtrowanie zadań**: Użytkownik może filtrować zadania według statusu (np. wszystkie, zakończone, do zrobienia).

### Technologie:
– **HTML/CSS**: Do stworzenia struktury i wyglądu aplikacji.
– **JavaScript (ES6)**: Do obsługi logiki działania aplikacji (dodawanie, usuwanie zadań, oznaczanie jako ukończone).
– **LocalStorage**: Do przechowywania danych (lista zadań) bez potrzeby korzystania z bazy danych.
– **Responsive Web Design**: Aplikacja powinna być dostępna zarówno na komputerach, jak i urządzeniach mobilnych.

### Kroki do realizacji:

1. **HTML**:
– Zdefiniuj strukturę aplikacji. Na początek wystarczy prosty formularz do dodawania zadań oraz lista, w której będą wyświetlane zadania.

„`html
<div class=”container”>
<h1>Lista zadań</h1>
<form id=”task-form”>
<input type=”text” id=”task-input” placeholder=”Dodaj nowe zadanie” required />
<button type=”submit”>Dodaj</button>
</form>
<ul id=”task-list”></ul>
</div>
„`

2. **CSS**:
– Nadaj podstawowy styl aplikacji, aby wyglądała estetycznie.

„`css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#task-list {
list-style: none;
padding: 0;
}

#task-list li {
padding: 10px;
border-bottom: 1px solid #ddd;
}

#task-list li.completed {
text-decoration: line-through;
color: gray;
}
„`

3. **JavaScript**:
– Dodaj logikę do obsługi listy zadań.

„`javascript
document.addEventListener(’DOMContentLoaded’, loadTasks);
const taskForm = document.getElementById(’task-form’);
const taskInput = document.getElementById(’task-input’);
const taskList = document.getElementById(’task-list’);

// Funkcja do załadowania zadań z localStorage
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem(’tasks’)) || [];
tasks.forEach(addTaskToDOM);
}

// Funkcja do dodawania zadania
function addTask(taskText) {
const tasks = JSON.parse(localStorage.getItem(’tasks’)) || [];
tasks.push(taskText);
localStorage.setItem(’tasks’, JSON.stringify(tasks));
addTaskToDOM(taskText);
}

// Funkcja do dodania zadania do DOM
function addTaskToDOM(taskText) {
const li = document.createElement(’li’);
li.textContent = taskText;
taskList.appendChild(li);

li.addEventListener(’click’, () => {
li.classList.toggle(’completed’);
});
}

// Obsługa formularza
taskForm.addEventListener(’submit’, (e) => {
e.preventDefault();
const taskText = taskInput.value.trim();
if (taskText !== ”) {
addTask(taskText);
taskInput.value = ”;
}
});
„`

4. **LocalStorage**:
– Zapewnij, że zadania będą przechowywane w localStorage, aby nie znikały po odświeżeniu strony.

### Dalsze rozszerzenia:
– **Edycja zadań**: Dodaj możliwość edytowania zadań.
– **Filtrowanie zadań**: Stwórz możliwość filtrowania zadań, np. tylko ukończone, do zrobienia.
– **Priorytety zadań**: Użytkownik może oznaczyć zadania priorytetowe.
– **Integracja z backendem**: Jeśli chcesz rozwinąć projekt, możesz połączyć aplikację z bazą danych za pomocą Node.js i Express.

Ten projekt jest świetnym wstępem do większych aplikacji i może być bazą do wielu innych funkcjonalności. Jak Ci się podoba taki pomysł?