JavaScript Kullanarak Yapılacaklar Listesi Oluşturma

ByMoDuS · 3 Eki 2022

JavaScript Kullanarak Yapılacaklar Listesi Oluşturma

Her şeyin yeni bir zirveye ulaştığı günümüzde biz insanlar birçok şeyi hatırlayamıyoruz, bunun için buzdolabına ve takvimlere yapıştırdığımız yapışkan notları kullanıyorduk. Ancak günümüzde akıllı telefonlarda kalanlar ve notlar gibi bazı özellikler var, ancak bilgisayarlarda günlük işlerimizi ekleyen ve bize hatırlatan yapılacaklar listesi oluşturabiliyoruz.

[CODE lang="html" title="Yapılacaklar Listesi için HTML Kodu"]<main id=app></main>[/CODE]

Bu kodda basitçe main etiketinin altına bir satır ekledik ve daha sonra CSS kodunda veya JS kodunda çağrılabilecek bir id verdik. Şimdi, CSS kullanarak projeyi şekillendirelim.

[CODE lang="css" title="Yapılacaklar Listesi için CSS Kodu"]@import "https://unpkg.com/water.css@2/out/water.min.css";

body {
font-size: 1.5em;
}

section {
display: flex;
}[/CODE]

Bu CSS kodunda, gövdede bulunan font boyutunu tanımlayan bir css şablonunu içe aktardık ve bölümü esnek tuttuk. Bunu duyarlı hale getirmek için JS kısmını kodlayalım.

[CODE lang="javascript" title="Yapılacaklar Listesi için JavaScript"]import { h, text, app } from "https://esm.run/hyperapp"

const AddTodo = (state) => ({
...state,
value: "",
todos: state.todos.concat(state.value)
})

const NewValue = (state, event) => ({
...state,
value: event.target.value,
})

app({
init: { todos: ["Learn Hyperapp"], value: "" },
view: ({ todos, value }) =>
h("main", {}, [
h("h1", {}, text("To-do list

")),
h("ul", {},
todos.map((todo) => h("li", {}, text(todo)))
),
h("section", {}, [
h("input", { type: "text", oninput: NewValue, value }),
h("button", { onclick: AddTodo }, text("Add new")),
])
]),
node: document.getElementById("app"),
})[/CODE]

Bu JS kodunda bir JS şablonunu içe aktardık ve çalışmak için HTML kodunda tanımlanan id'yi çağırdık ve çalışmasını sağladık ve içine bir başlık ekledik. Nihai çıktıyı görelim.

HTML5, CSS3 & JS | JavaScript kullanarak basit yapılacaklar listemizi başarıyla oluşturduk. Bu projeyi kişisel ihtiyaçlarınız için kullanabilirsiniz ve ilgili kod satırları yukarıda belirtilen kod kalemi bağlantısı ile verilmiştir.