Skip to content

Instantly share code, notes, and snippets.

@moonbyt3

moonbyt3/index.html

Created August 12, 2019 22:00
Show Gist options
  • Save moonbyt3/9e7877e62007359b6bdf1d277c86b4ae to your computer and use it in GitHub Desktop.
Save moonbyt3/9e7877e62007359b6bdf1d277c86b4ae to your computer and use it in GitHub Desktop.
Download ZIP
Todo List
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>
<body>
<main>
<div class="container container--dashboard">
<div class="dashboard">
<div class="dashboard-row">
<label for="title">Task Title</label>
<input class="form-input" type="text" name="title">
</div>
<div class="dashboard-row dashboard-list-items">
<label for="listItem">Todo</label>
<input class="form-input" type="text" name="listItem">
</div>
<div class="dashboard-row dashboard-row--functions">
<input class="btn btn--add" type="button" value="+">
<input class="btn btn--submit" type="submit">
</div>
</div>
</div>
<div class="container" id="tasks">
</div>
</main>
</body>
</html>
Raw
script.js
var data = [
];
var Dashboard = (function() {
// cache DOM
var $listItems = $('.container-item');
var $submitBtn = $('.btn--submit');
var $addBtn = $('.btn--add');
//Model Objects
function TaskObj(id, task) {
this.id = id;
this.task = task;
}
function Task(title, taskArr) {
this.title = title;
this.taskItems = taskArr;
}
//functions
var createInput = function() {
var wrapper = $('.dashboard-list-items');
var input = document.createElement('input');
input.setAttribute('class', 'form-input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'listItem');
wrapper.append(input);
}
var createTask = function(title, tasks) {
var taskWrapper = document.createElement('div');
var listWrapper = document.createElement('div');
var taskImg = document.createElement('img');
var taskTitle = document.createElement('span');
var taskTextWrap = document.createElement('div');
var taskRemove = document.createElement('span');
taskWrapper.classList.add('container-item');
listWrapper.setAttribute('class', 'list-wrap');
taskImg.setAttribute('src', 'foo.jpg');
taskTitle.setAttribute('class', 'container-item-title');
taskTextWrap.setAttribute('class', 'container-item-text');
taskRemove.setAttribute('class', 'task-remove-icon');
taskImg.src = 'https://image.flaticon.com/icons/svg/616/616948.svg';
taskTitle.innerHTML = title;
for (var i = 0; i < tasks.length; i++) {
taskTextWrap.innerHTML += `<span class="list-item">${tasks[i]}</span>`;
}
taskWrapper.appendChild(listWrapper);
listWrapper.appendChild(taskImg);
listWrapper.appendChild(taskTitle);
listWrapper.appendChild(taskTextWrap);
listWrapper.appendChild(taskRemove);
var wrap = document.getElementById('tasks');
wrap.appendChild(taskWrapper);
}
var updateTask = function() {
var task = $('.js-task-active');
var taskTitle = task.find('.container-item-title');
var taskItems = task.find('.container-item-text');
console.log(task)
}
var emptyInputs = function() {
var title = $('[name="title"]');
var todoItems = $('[name="listItem"]');
todoItems.not(':first').remove();
title[0].value = '';
todoItems[0].value = '';
}
var renderTasks = function(data) {
for (var i = 0; i < data.length; i++) {
createTask(data[i].task.title, data[i].task.taskItems);
}
}
// bind events
$addBtn.on('click', function() {
createInput();
});
$submitBtn.on('click', function(e) {
e.preventDefault();
//get input values
var inputs = $('input[type="text"]');
var title = '';
var tasks = [];
for (var i = 0; i < inputs.length; i++) {
var attr = $(inputs[i]).attr('name');
switch (attr) {
case 'title':
title = inputs[i].value;
break;
case 'listItem':
//push every item to array
tasks.push(inputs[i].value)
break;
}
}
// check if input values are empty
if (title != '' && tasks.length > 0 && tasks[0] != "") {
// check if some task is clicked (ready to be updated)
if ($('.js-task-active').length > 0) {
var currentTaskId = data.length >= 0 ? data.length + 1 : 0;
var task = $('.js-task-active');
var taskTitle = task.find('.container-item-title');
var taskListItems = task.find('.list-item');
//update task title
taskTitle.text(title);
// update task items
for (let i = 0; i < taskListItems.length; i++) {
$(taskListItems[i]).text(tasks[i]);
}
} else {
// its new task
//create object
var currentTaskId = data.length >= 0 ? data.length + 1 : 0;
var task = new Task(title, tasks);
var obj = new TaskObj(currentTaskId, task);
//Create task and render it to the page
createTask(obj.task.title, obj.task.taskItems);
data.push(obj);
emptyInputs();
}
} else {
alert('please fill in task details');
}
});
return {
render: function(a, b) {
return createTask(a, b);
},
createInput: function() {
return createInput();
}
}
})();
var Task = (function(){
//cache DOM
var $taskEdit = $('.list-wrap > img');
//bind events
// click on task, send info to form
$(document).on('click', '.list-wrap', function(e) {
e.preventDefault();
// add border to todo item to indicate its selected
var task = $(this);
$(task).addClass('js-task-active');
var taskTitle = task.find('.container-item-title');
var taskTodoItems = task.find('.list-item');
var inputTitle = $('[name="title"]');
var inputTask = $('[name="listItem"]');
inputTitle[0].value = $(taskTitle[0]).text();
//delete all todo inputs in dashboard module
$('.form-input[name="listItem"]').remove();
// make new input for every item in list
for (var i = 0; i < taskTodoItems.length; i++) {
var wrapper = $('.dashboard-list-items');
// create new input field
var input = document.createElement('input');
input.setAttribute('class', 'form-input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'listItem');
wrapper.append(input);
// put value in input
input.value = $(taskTodoItems[i]).text();
}
});
//delete task from board
$(document).on('click', '.task-remove-icon', function(e) {
e.stopPropagation();
let task = $(this).closest('.container-item');
task.remove();
});
return {
sayHi: function() {
console.log('Hi!');
}
}
})();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(244, 248, 251);
min-height: 350px;
overflow-x: scroll;
}
.container--dashboard {
min-height: 150px;
padding: 30px 15px;
background-color: white;
}
.container-item {
margin: 0 40px;
transition: all .3s ease;
}
.dashboard-row {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.dashboard-list-items {
flex-direction: column;
}
.btn--add {
display: block;
width: 30px;
height: 30px;
margin-bottom: 15px;
}
.form-input {
width: 100%;
height: 30px;
border: 1px solid black;
transition: .3s ease;
padding: 0 15px;
margin-bottom: 10px;
}
.form-input:last-child {
margin-bottom: 0;
}
.form-input:focus {
border: 1px solid #e2574c;
}
.dashboard-row label {
display: block;
width: 100%;
margin-bottom: 5px;
text-transform: uppercase;
}
.dashboard-row--functions {
flex-direction: column;
}
.list-wrap {
position: relative;
transition: all 1s ease-out;
padding: 40px 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.list-wrap:hover {
cursor: pointer;
}
.list-wrap img {
transition: all 1s ease-out;
display: block;
max-width: 50px;
height: 50px;
margin: 15px;
}
.container-item-title {
font-weight: bold;
color: #e2574c;
}
.container-item-text {
transition: all 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
margin-top: 15px;
}
.list-item {
display: block;
transition: all .3s ease-out;
display: block;
text-decoration: none;
color: #e2574c;
margin-bottom: 5px;
}
.list-wrap:hover {
background-color: white;
box-shadow: -1px 0px 70px 0px rgba(0, 0, 0, 0.19);
}
.list-wrap:hover .container-item-text {
height: auto;
opacity: 1;
}
.img-lg.img-lg {
max-width: 100px;
height: 50px;
}
.btn {
background-color: transparent;
display: inline-block;
vertical-align: middle;
padding: 15px 35px;
transition: .3s ease-in-out;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
outline: none;
border: 2px solid rgb(244, 248, 251);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn--add {
padding: 0;
}
.btn:hover {
cursor: pointer;
background-color: rgb(244, 248, 251);
}
.js-task-active {
border: 1px solid red;
}
.js-task-active .container-item-text {
height: initial;
opacity: 1;
}
.task-remove-icon {
position: absolute;
right: 10px;
top: 10px;
height: 25px;
width: 25px;
border-radius: 50%;
border: 1px solid #e2574c;
transition: .3s ease-in;
}
.task-remove-icon:hover {
cursor: pointer;
border: 1px solid white;
background-color: #e2574c;
}
.task-remove-icon:hover::before {
color: white;
}
.task-remove-icon::before {
content: 'x';
position: absolute;
color: #e2574c;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
transition: .3s ease-in;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment