Kung bago ka palang sa web development ay makakatulong saiyo ang pag gawa ng mga simpleng program kagaya ng paggawa ng TODO LIST WEB APP. Noong nag sisimula pa lamang ako sa web development ay ganito rin ang mga ginagawa ko , habang nag po-program ay sinasabayan ko ng pakikinig ng mga lofi music para mas lalo ako ganahan mag program at para hindi ako bagutin mag code.
Narito ang source code ng web app, nais ko sanang sabihin saiyo na hindi masama ang pagkopya ng program ng iba ngunit siguraduhin lamang na pag aaralan mo ito ng mabuti at itype mo isa isa ang bawat code na nakapaloob.
WAG I-COPY PASTE! I-TYPE MO ISA ISA
note: Para maging responsive ang todo web app mo ay mag download ka ng bootstrap css at i-link sa html file katulad ng nasa baba na code ay naka link na ang bootstrap css at ang css para sa todo web app.
wag kakalimutan na gumawa ng files for css and javascript para madali at malinis ang program.
Source code
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/style.css">
<title>Todo List Web App </title></head>
<body>
<nav class="navbar navbar-light bg-light"><div class="container">
<a class="navbar-brand" href="#">To-Do List Web App</a>
</div>
</nav>
<div class="container"><div class="row my-5">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<form id="form-Task">
<div class="form-group">
<input type="text" id="title" class="form-control" maxlength="50" autocomplete="off" placeholder="Title" required>
</div>
<div class="form-group">
<textarea type="text" id="description" cols="30" rows="10" class="form-control" maxlength="500" autocomplete="off" placeholder="Description" required>
</textarea>
</div>
<button type="submit" class="btn btn-success btn-block">Save</button>
</form>
</div>
</div> </div>
<div class="col-md-8"><div class="row">
<div class="col-sm-3 text-left title-head">
<p class="font-weight-bold">Title</p>
</div>
<div class="col-sm-6 text-left desc-head">
<p class="font-weight-bold">Description</p>
</div>
<div class="col-sm-3 text-right del-head">
<p class="font-weight-bold">Delete</p>
</div>
</div>
<hr>
<div id="tasks"></div>
</div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
CSS
body {
background-image:
linear-gradient(rgba(23, 24, 34, 0.600),
rgba(23, 24, 34, 0.600)),
url('../images/beach.gif');
background-size: cover;
}
.card, .card-body #form-Task{
background:linear-gradient(to right bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.3));
}
.title-head {
color: white;
}
.desc-head { color: white;}
.del-head { color: white;}
hr { border-top: 1px solid white;}
#title .form-control{ background:linear-gradient(to right bottom, rgba(255,255,255,0.7),rgba(255,255,255,0.3));}
Javascript
document.getElementById('form-Task').addEventListener('submit', saveTask);
// Save new To-Do
function saveTask(e) {
let title = document.getElementById('title').value;
let description = document.getElementById('description').value;
let task = {
title,
description
};
if (localStorage.getItem('tasks') === null) {
let tasks = [];
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
} else {
let tasks = JSON.parse(localStorage.getItem('tasks'));
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
}
getTasks();
// Reset form-Task
document.getElementById('form-Task').reset();
e.preventDefault();
}
// Delete To-Do
function deleteTask(title) {
let tasks = JSON.parse(localStorage.getItem('tasks'));
for (let i = 0; i < tasks.length; i++) {
if (tasks[i].title == title) {
tasks.splice(i, 1);
}
}
localStorage.setItem('tasks', JSON.stringify(tasks));
getTasks();
}
// Show To-Do List
function getTasks() {
let tasks = JSON.parse(localStorage.getItem('tasks'));
let tasksView = document.getElementById('tasks');
tasksView.innerHTML = '';
for (let i = 0; i < tasks.length; i++) {
let title = tasks[i].title;
let description = tasks[i].description;
tasksView.innerHTML +=
`<div class="card mb-3">
<div class="card-body">
<div class="row">
<div class="col-sm-3 text-left">
<p>${title}</p>
</div>
<div class="col-sm-7 text-left">
<p>${description}</p>
</div>
<div class="col-sm-2 text-right">
<a href="#" onclick="deleteTask('${title}')" class="btn btn-danger ml-5">X</a>
</div>
</div>
</div>
</div>`;
}
}
getTasks();
Ginamitan ko na ito ng bootstrap kaya ganyan ang code sa html file. Maaari ka din naman na hindi gumamit ng bootstrap ngunit hindi magiging Responsive ang web page na ginagawa mo ngunit may iba pang paraan para maging responsive ito sa pamamagitan ng pag gamit ng media query.
Tatalakayin ko ang @media query sa susunod kaya kung interesado ka ay mag subscribe na @Ceddy-lim para sa mas madami pang Tips, Guides and Projects.
HAPPY CODINGS!
