Skip to content

Instantly share code, notes, and snippets.

@Volkya

Volkya/index.html

Created November 17, 2019 00:04
Show Gist options
  • Save Volkya/3a42e055946b180b235e238d34a7f61d to your computer and use it in GitHub Desktop.
Save Volkya/3a42e055946b180b235e238d34a7f61d to your computer and use it in GitHub Desktop.
Download ZIP
localStorage-Javascript
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--BOOTSWATCH-->
<link rel="stylesheet" href="https://bootswatch.com/4/sandstone/bootstrap.min.css">
<title>localStorage</title>
</head>
<body>
<!--NAVEGATION-->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">TASKS</a>
</nav>
<br>
<div class="container">
<!--GRUD TASK-->
<div id="App" class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h4>Add new task</h4>
</div>
<form class="card-body" id="task-form">
<div class="form-group">
<input type="text" id="title" placeholder="Task describe" class="form-control">
</div>
<div class="form-group">
<textarea id="description" cols="30" rows="10" class="form-control" placeholder="describe your task"></textarea>
</div>
<input type="submit" value="Add" class="btn btn-primary btn-block">
</form>
</div>
</div>
<div id="tasks" class="col-md-8">
<!--Here the content of elements created-->
</div>
</div>
</div>
<script src="app.js">
</script>
</body>
</html>
Raw
script.js
// Get form-task, listening to submit input form
document.getElementById('task-form').addEventListener('submit', saveTask);
// Save form task
function saveTask(e) {
let title = document.getElementById('title').value;
let description = document.getElementById('description').value;
//Object task constructor
let task = {
title,
description
};
//If its null
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));
}
//Form reset when is update
getTasks();
document.getElementById('task-form').reset();
e.preventDefault();
}
//Delete tasks
function deleteTask(title) {
console.log(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();
}
function getTasks(){
let tasks = JSON.parse(localStorage.getItem('tasks'));
let taskView = document.getElementById('tasks');
taskView.innerHTML = '';
for(let i = 0; i < tasks.length; i++){
let title = tasks[i].title;
let description = tasks[i].description;
taskView.innerHTML += `<div class="card mb-3">
<div class="card-body">
<p>${title} - ${description}
<a href="#" onclick="deleteTask('${title}')" class="btn btn-danger ml-5">Delete</a>
</p>
</div>
</div>`;
}
}
getTasks();
//localStorage.setItem('tasks', JSON.stringify(task));
//console.log(JSON.parse(localStorage.getItem('tasks')))
/*
const 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));
}
e.preventDefault();*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment