Yazılım Öğrenme Rehberi 7, HTML, CSS ve JavaScript’i kullanarak daha kapsamlı bir web uygulaması geliştirmeye odaklanır. Bu yazıda, önceki rehberlerde öğrendiğiniz bilgileri kullanarak, daha gelişmiş ve işlevsel bir web uygulaması oluşturacağız. Amacımız, kullanıcı dostu bir arayüz ve dinamik etkileşimler sunan bir görev yönetim uygulaması geliştirmektir.
Giriş
Önceki yazılarda, HTML, CSS ve JavaScript’in temellerini öğrenerek basit bir yapılacaklar listesi oluşturduk. Bu bilgiler, web geliştirme sürecinde karşılaşacağınız birçok problemin çözümünde size yardımcı olacaktır. Şimdi, bu bilgileri daha kapsamlı bir projede uygulayarak pekiştireceğiz. Bu rehberde, kullanıcıların görev ekleyip yönetebileceği, tamamlanan görevleri arşivleyebileceği ve çeşitli filtrelerle görevleri görüntüleyebileceği bir görev yönetim uygulaması geliştireceğiz.
Proje: Görev Yönetim Uygulaması
Bu projede, HTML ile yapının temelini oluşturacağız, CSS ile stil vereceğiz ve JavaScript ile etkileşimli hale getireceğiz. Projeyi adım adım oluşturacağız.
Adım 1: HTML Yapısı
İlk olarak, HTML yapısını oluşturacağız. Bu yapıda, başlık, metin girişi, düğme, görev listesi ve filtreler olacak.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Görev Yönetim Uygulaması</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Görev Yönetim Uygulaması</h1>
<input type="text" id="taskInput" placeholder="Yeni görev ekle...">
<button onclick="addTask()">Ekle</button>
<div class="filters">
<button onclick="filterTasks('all')">Tüm Görevler</button>
<button onclick="filterTasks('active')">Aktif Görevler</button>
<button onclick="filterTasks('completed')">Tamamlanan Görevler</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
Bu HTML yapısı, başlık, metin girişi, düğmeler ve görev listesini içeren temel bir yapı sağlar.
Adım 2: CSS ile Stil Verme
HTML yapımızı oluşturduktan sonra, CSS ile stil vereceğiz. Bu, sayfanın daha şık ve kullanıcı dostu görünmesini sağlar.
style.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);
width: 400px;
}
h1 {
color: #333;
text-align: center;
}
input {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
}
button:hover {
background-color: #218838;
}
.filters button {
width: 30%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
.filters button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f3f3f3;
margin: 5px 0;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: gray;
}
.delete {
background-color: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
padding: 5px;
}
.delete:hover {
background-color: #c82333;
}
Bu CSS, sayfanın görünümünü iyileştirir ve kullanıcı dostu hale getirir. Görev yönetim uygulamasına eklenen filtre düğmeleri ve görevlerin stilini belirler.
Adım 3: JavaScript ile Etkileşim Ekleme
Son olarak, JavaScript kullanarak görev ekleme, tamamlama, silme ve filtreleme işlemlerini gerçekleştireceğiz.
script.js
let tasks = [];
function addTask() {
let taskInput = document.getElementById('taskInput');
let taskText = taskInput.value;
if (taskText === '') {
alert('Lütfen bir görev girin.');
return;
}
let task = {
id: Date.now(),
text: taskText,
completed: false
};
tasks.push(task);
taskInput.value = '';
renderTasks();
}
function renderTasks(filter = 'all') {
let taskList = document.getElementById('taskList');
taskList.innerHTML = '';
let filteredTasks = tasks.filter(task => {
if (filter === 'all') return true;
if (filter === 'active') return !task.completed;
if (filter === 'completed') return task.completed;
});
filteredTasks.forEach(task => {
let li = document.createElement('li');
li.appendChild(document.createTextNode(task.text));
if (task.completed) {
li.classList.add('completed');
}
li.onclick = function() {
task.completed = !task.completed;
renderTasks(filter);
}
let deleteButton = document.createElement('button');
deleteButton.appendChild(document.createTextNode('Sil'));
deleteButton.className = 'delete';
deleteButton.onclick = function(event) {
event.stopPropagation();
tasks = tasks.filter(t => t.id !== task.id);
renderTasks(filter);
}
li.appendChild(deleteButton);
taskList.appendChild(li);
});
}
function filterTasks(filter) {
renderTasks(filter);
}
Bu JavaScript kodu, görev ekleme, tamamlama, silme ve filtreleme işlemlerini gerçekleştiren fonksiyonlar içerir. Görev eklendiğinde, yeni bir <li> öğesi oluşturulur, tamamlandığında completed sınıfı eklenir ve silindiğinde listeden kaldırılır. Ayrıca, filtre düğmeleri ile görevlerin durumu göre filtrelenmesini sağlar.
HTML, CSS ve JavaScript’in Birleşimi
Bu projede, HTML, CSS ve JavaScript’in birlikte nasıl çalıştığını gördük. HTML sayfanın yapısını, CSS sayfanın görünümünü ve JavaScript sayfanın etkileşimini sağlar. Bu üç teknoloji birlikte kullanılarak kapsamlı ve kullanıcı dostu web uygulamaları oluşturulabilir.
Yazılım Geliştirme Sürecinde Dikkat Edilmesi Gerekenler
Yazılım geliştirme sürecinde dikkat etmeniz gereken bazı önemli noktalar şunlardır:
Sürekli İyileştirme ve Öğrenme
Yazılım dünyası sürekli değişen ve gelişen bir alandır. Yeni teknolojileri, araçları ve yöntemleri takip etmek için sürekli öğrenme alışkanlığı edinmek önemlidir. Bloglar, podcast’ler ve konferanslar bu konuda faydalı kaynaklar olabilir.
İşbirliği ve Katkı
Açık kaynak projelere katkıda bulunmak, topluluk içinde işbirliği yapmak ve ekip projelerinde yer almak, yazılım öğrenme sürecinizi hızlandırır ve geliştirici olarak büyümenizi sağlar.
Geri Bildirim ve Test
Kodunuzu düzenli olarak test etmek ve geri bildirim almak, yazılım geliştirme sürecinde önemli bir yer tutar. Birim testleri, entegrasyon testleri ve kullanıcı geri bildirimi, kodunuzun kalitesini artırmanıza yardımcı olur.
Sonuç
HTML, CSS ve JavaScript, modern web geliştirme için temel teknolojilerdir. Bu rehberde, bu üç teknolojiyi bir arada kullanarak kapsamlı bir görev yönetim uygulaması oluşturduk. Bir sonraki rehberde, daha ileri düzey projeler ve teknikler keşfedeceğiz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu bilgileri kullanarak yolculuğunuza başlayabilirsiniz. Yazının devamı için burayı inceleyebilirsiniz.
Yararlandığım Kaynaklar
- HTML5 Standard
- MDN Web Docs – HTML
- MDN Web Docs – CSS
- MDN Web Docs – JavaScript
- W3Schools – HTML
- W3Schools – CSS
- W3Schools – JavaScript
- Coursera
- Udemy
- edX
- freeCodeCamp
- “Clean Code” – Robert C. Martin
- “The Pragmatic Programmer” – Andrew Hunt ve David Thomas
- “You Don’t Know JS” – Kyle Simpson
- Stack Overflow
- GitHub
Bu kaynaklardan yararlanarak yazılım öğrenme sürecinizi daha verimli ve etkili hale getirebilirsiniz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu rehberi ve kaynakları kullanarak yolculuğunuza başlayabilirsiniz.
[…] HTML, CSS ve JavaScript, modern web geliştirme için temel teknolojilerdir. Bu rehberde, bu üç teknolojiyi bir arada kullanarak basit bir yapılacaklar listesi uygulaması oluşturduk. Bir sonraki rehberde, daha ileri düzey projeler ve teknikler keşfedeceğiz. Yazılım geliştirme dünyasında başarılı bir kariyer yapmak için bu bilgileri kullanarak yolculuğunuza başlayabilirsiniz. Yazının devamı için burayı inceleyebilirsiniz. […]