Bu örneğimizde HTML, CSS ve Javascript kullanarak bir alışveriş listesi sayfası yapımına değineceğiz. Yapacağımız alışveriş listesinde özellikle Javascript kullanarak eleman ekleme, eleman silme ve bütün elemanları silme işlemlerinin kodları yer alacak.

Yaptığımız uygulamanın dosyalarına buraya tıklayarak ulaşabilirsiniz. 


HTML:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,600|Pacifico" rel="stylesheet">
    <title>Alışveriş Listesi</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Alışveriş Listesi</h1>
    <h3>Bugün Alınacaklar</h3>
    <input type="text" name="" class="textbox" id="userinput" placeholder="Ne alacaksın?">
		<button id="enter" class="input-button">Al</button>
		<button id="clear" class="input-button">Listeyi temizle</button>
		<section>
			<div class="container" id="ulHook">
				<ul>
					<div class="li-wrapper">
						<li>Un</li>
						<div class="div"></div>
					</div>

					<div class="li-wrapper">
						<li>Su</li>
						<div class="div"></div>
					</div>

					<div class="li-wrapper">
						<li>Tuz</li>
						<div class="div"></div>
					</div>

					<div class="li-wrapper">
						<li>Eldiven</li>
						<div class="div"></div>
					</div>

					<div class="li-wrapper">
						<li>Maske</li>
						<div class="div"></div>
					</div>
				</ul>
			</div>
		</section>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>



CSS:

body{
    background-color: lightskyblue;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    text-align: center;
}
h1{
    font-size: 80px;
}
h3{
    font-size: 30px;
}
ul { list-style-type:none; }
input:focus{
    outline: 1px;
    outline-color: lightblue;
}
.container{
    width: 250px;
    height:auto;
    background-color:mediumaquamarine;
    margin-left:auto;
    margin-right:auto;
    border-radius: 5px;
}
.textbox{
    border-radius: 5px;
    height: 40px;
    width: 200px;
    border:none;
    padding-left: 20px;
}
.input-button{
    background-color: lightsalmon;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
    border:1px;
}
.div {
	display: flex;
}

.li-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px;
}



JAVASCRIPT:

// html dosyamızdaki id'lerin tanımını yaptık
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
const ul = document.querySelector("ul");
const li = document.getElementsByTagName("li");
const deleteButton = document.getElementsByTagName("i");
var clearButton = document.getElementById("clear");

// li taglerimizdeki css sınıflarını düzenlemek için eklenen fonksiyon
function strikeThrough(e) {
    if (e.target.tagName === "LI") {
        e.target.classList.toggle("done");
    }
}

// silme butonlarının iconlarını belirledik
function createDeleteButtonIcon() {
    for (var ind = 0; ind < li.length; ind++) {
        var createDeleteButton = document.createElement("i");
        var createDiv = document.getElementsByClassName("div");
        console.log(createDiv);
        createDeleteButton.classList.add("fa", "fa-trash");
        createDiv[ind].appendChild(createDeleteButton);
    }
}

// çöp kutusu iconuna tıklandığında o düğümü silme
function deleteNodeOnClick(e) {
    var trash = document.querySelectorAll("i");
    for (var ind = 0; ind < trash.length; ind++) {
        console.log(e);
        this.parentNode.parentNode.remove();
    }
}

// girilecek inputun uzunluğunun değerini döndüren fonksiyon
function inputLength() {
    return input.value.length;
}

//Liste oluşturma foksiyonu
function createListElement() {
    var divClassWrapper = document.createElement("div");
    divClassWrapper.classList.add("li-wrapper");

    var li = document.createElement("li");
    var createDiv = document.createElement("div");

    li.appendChild(document.createTextNode(input.value));
    divClassWrapper.appendChild(li);
    divClassWrapper.appendChild(createDiv);
    ul.appendChild(divClassWrapper);

    input.value = "";
    createDiv.classList.add("div");
    var createDeleteButton = document.createElement("i");
    createDeleteButton.classList.add("fa", "fa-trash");
    createDiv.appendChild(createDeleteButton);
    deleteParentNodeOnClick();
}

// Tıklama esnasında listeye eleman ekler. Eleman ekleme fonksiyonuna yönlendirir
function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

// Enter tuşuna tıklandığında elemanı ekleme
function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

// Silme butonuna tıklandığında düğümü silme
function deleteParentNodeOnClick() {
    for (var i = 0; i < deleteButton.length; i++) {
        deleteButton[i].addEventListener("click", deleteNodeOnClick);
    }
}

// Listedeki bütün elemanları silme
function clearList() {
    ul.innerHTML = "";
}

// Butonların tetiklenmesi durumunda çalışacak fonksiyonlara yönlendirme aşaması
clearButton.addEventListener("click", clearList);
ul.addEventListener("click", strikeThrough);
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
createDeleteButtonIcon();
deleteParentNodeOnClick();

Yorum Gönder

Daha yeni Daha eski