TodoApp (Yapılacaklar listesi uygulaması)

Merhaba, bu yazımda javascript öğrenirken yapmış olduğum todolist uygulamasından bahsetmek istiyorum. Bu uygulama için html, css ve javascript kullanılması gerekiyor.

Html Kodları

Todo App

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 mt-5">

            <div class="card">
                <div class="card-body">
                    <div class="input-group">
                        <input type="text" id="txtItem" class="form-control" title="title">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type=button id="btnCreate">Add</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    My List
                    <button id="deleteAll" class="btn btn-danger btn-sm d-none">
                        Delete All
                    </button>
                </div>
                <ul id="myList" class="list-group list-group-flush">

                </ul>
            </div>


        </div>
    </div>
</div>




<script type="text/javascript" src="script.js"></script>

Css Kodları

ul li.checked{
	background: #888;
	color: #fff;
	text-decoration: line-through;
}

.close{
	position: absolute;
	right: 0;
	top: 0;
	padding: 12px 16px 12px 16px;
}
#deleteAll
{
	position: absolute;
	right: 5px;
	top: 10px;
}

Javascript Kodları

var items = ['item 1','item 2','item 3','item 4'];


var list = document.querySelector('#myList');

items.forEach(function(item){	
	CreateItem(item);	
});


list.addEventListener('click',function(item){
    
	if (item.target.tagName=='LI'){
		item.target.classList.toggle('checked');
		ToogleDeleteButton();
	}
	
	
});

document.querySelector('#deleteAll').onclick=function(){
	
	var elements = document.querySelectorAll('.checked');
	
	elements.forEach(function(item){
		
		item.style.display='none';
		
	});
	
}


function ToogleDeleteButton(){
	var checkList = document.querySelectorAll('.checked');
	
	if(checkList.length>0){
		document.querySelector('#deleteAll').classList.remove('d-none');
	}else{
		document.querySelector('#deleteAll').classList.add('d-none');
	}
	
}

document.querySelector('#btnCreate').onclick=function(){

	var item = document.querySelector('#txtItem').value;
	
	if(item===''){
		alert('lütfen bir değer giriniz');
		return;
	}
	
	CreateItem(item);		
};

function CreateItem(item){
	var li =document.createElement('li');
	var t=document.createTextNode(item);	
	li.className='list-group-item';
	li.appendChild(t);	
	list.appendChild(li);	
	
	var span = document.createElement('span');
	var text = document.createTextNode('\u00D7');
	span.className='close';
	span.appendChild(text);
	li.appendChild(span);	
	
	document.querySelector('#txtItem').value='';
	
	span.onclick = function(){
		var li =this.parentElement;
		li.style.display='none';
		li.classList.remove('checked');
	}
}

Bu uygulama ile yapılacaklar listesi oluşturabilirsiniz. Herhangi bir veritabanına bağlı olmadığı için sayfayı yenilediğinizde verileriniz kaybolacaktır.

Uygulamayı Github hesabımdan (Clone or download) kısmından indirebilirsiniz: https://github.com/Hayriozblbl/TodoApp

Bir cevap yazın