<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="css.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
</head>
<body>
<div class="main">
<button class="btn active">TASKS</button>
<button class="btn">DONE</button>
<button class="btn">REMOVE</button>
<div class="content active">
<div class="window">
<table cellpadding="2" border="2" cellspacing="0">
<tbody class="table">
</tbody>
</table>
<button class="add">
<i class="fas fa-plus"></i>
</button>
<div class="modal">
<div class="popap">
<div class="popap-head">
<div class="close">X</div>
</div>
<div class="popap-main">
<form class="popap-form">
<label>
<span>Name</span>
<input type="text" class="create-task" name="taskName"/>
</label>
<label>
<span>Description</span>
<textarea class="create-task" name="taskDesc"></textarea>
</label>
<label>
<select class="create-task" name="taskPriority">
<option value="low">низкий</option>
<option value="normal">средний</option>
<option value="high">высокий</option>
</select>
</label>
</form>
<div class="popap-btn">
<div class="btn-ok">ok</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="window">2</div>
</div>
<div class="content">
<div class="window">3</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>let tasks = {
cur: [],
done: [],
removed: []
};
let btn = document.querySelectorAll('.btn');
let content = document.querySelectorAll('.content');
function modify(className, modify, index) {
let mass = document.querySelectorAll(className);
for (let i = 0; i < mass.length; i++) {
mass[i].classList.remove(modify);
if (i === index) {
mass[i].classList.add(modify);
}
}
}
function change(index) {
modify('.btn', 'active', index);
modify('.content', 'active', index);
}
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function () {
change(i);
})
}
function modalControl() {
let $modal = document.querySelector(".modal");
const open = () => {
$modal.classList.add("show");
};
const close = () => {
$modal.classList.remove("show");
};
const toggle = (event) => {
if (event === "close") {
close();
} else {
open();
}
};
return {toggle};
}
let modal = modalControl();
function validate() {
const $form = document.querySelector("form");
const $input = $form.querySelector("input");
const $textarea = $form.querySelector("textarea");
const clearForm = () => {
$input.value = "";
$textarea.value = ''
};
const getOk = () => {
let field = document.querySelectorAll('.create-task');
field = [...field];
let nTask = field.reduce((_nTask, item) => {
// console.log(item.name, item.value)
_nTask[item.name] = item.value;
return _nTask;
}, {});
tasks.cur.push(nTask)
//console.log(tasks)
table();
modal.toggle("close");
clearForm();
};
const checkForm = () => {
if (!$input.value) {
$input.classList.add("error");
} else {
$input.classList.remove("error");
getOk();
}
};
return {checkForm, clearForm};
}
let valid = validate();
function table() {
let $table = document.querySelector(".table");
$table.innerHTML = "";
for (let i = 0; i<tasks.cur.length; i++) {
$table.innerHTML += `<tr data-id="i">
<td>${tasks.cur[i].taskName} </td>
<td>${tasks.cur[i].taskDesc} </td>
<td>${tasks.cur[i].taskPriority} </td>
<td><div class="curBtn">
<button class="edit" ><i class="far fa-edit"></i></button>
<button class="done" ><i class="far fa-check-circle"></i></button>
<button class="delete" ><i class="far fa-trash-alt"></i></button>
</div></td>
</tr>`;
}
}
function editTask() {
const done = () => {
for (let i = 0; i < tasks.cur.length; i++){
let $table = document.querySelector(".table");
$table.closest('tr');
if($table.dataset.id==="i"){
console.log('true')
}
}
}
return {done}
}
let edit = editTask();
document.addEventListener("click", function (e) {
if (
e.target.classList.contains("modal") ||
e.target.classList.contains("close")
) {
modal.toggle("close");
valid.clearForm();
}
if (e.target.classList.contains("add")) {
modal.toggle("open");
}
if (e.target.classList.contains("btn-ok")) {
valid.checkForm();
}
if (e.target.classList.contains('done')) {
edit.done()
}
})i{
pointer-events: none;
}
.main{
margin: 20px;
}
.main .btn{
background-color: darkgray;
outline: none;
}
.content .window{
border: 2px solid #000;
display: inline-block;
position: relative;
min-height: 100px;
min-width: 250px;
padding-bottom: 45px;
padding-right: 20px;
}
.curBtn{
display: flex;
flex-direction: row;
}
table td{
padding-right:5px;
}
.content .window .add{
border-radius: 50%;
width: 25px;
height: 25px;
position: absolute;
bottom: 3px;
right: 5px;
}
.content .window button .add i{
margin-left: -1px;
}
.content{
display: none;
position: relative;
}
.content.active{
display: block;
width: 25px;
height: 25px;
}
.modal {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
cursor: pointer;
}
.modal.show{
display: block;
position: absolute;
top:150px;
left: 0;
}
.popap {
position: absolute;
border: 1px solid rgba(0, 0, 0, .5);
width: 300px;
height: 250px;
background: #fff;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
cursor: default;
border-radius: 3px;
}
.popap-head {
position: relative;
height: 25px;
}
.popap-head .close {
position: absolute;
height: 20px;
padding: 0 2px;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
border: 1px solid #ccc;
cursor: pointer;
}
.popap-head .close:hover {
border-color: #333;
}
.popap-main {
padding: 20px;
box-sizing: border-box;
}
.popap-form {
margin-bottom: 20px;
}
.popap-main label {
display: block;
margin-bottom: 10px;
}
.popap-main label span {
font: 12px sans-serif;
display: block;
}
.popap-main label input {
width: 100%;
margin: 0;
padding: 0;
}
.popap-main label input.error{
border-color: red;
}
.popap-btn {
text-align: right;
}
.btn {
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
border-radius: 3px;
cursor: pointer;
}
.btn-ok{
display: inline-block;
border: 1px solid #ccc;
padding: 5px;
border-radius: 3px;
cursor: pointer;
}
.btn:hover {
border-color: #333;
}
