Volkya · November 17, 2019 00:05
diff --git a/index.html b/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>New task</title>
 </head>

 <body>
    <!--NAVEGACION-->
    <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>
                    <div class="form-group">
                        <input type="number" id="hour" min="1" max="24" placeholder="your hour" class="form-control">
                    </div>
                    <input type="submit" value="Add" class="btn btn-primary btn-block">
                </form>
                </div>
            </div>
            <div id="task-list" class="col-md-8">
                <!--Here the content of elements created-->
            </div>
        </div>
    </div>

    <script src="app.js">
  
    </script>
 </body>

 </html>
diff --git a/oop-javascript.markdown b/oop-javascript.markdown
diff --git a/script.js b/script.js
 // Class of object, format, TASK
 class Task {
    constructor(title, description, hour) {
        this.title = title;
        this.description = description;
        this.hour = hour;
    }
 }



 // UI constructor class // action according to event

 class UI {
    addTask(task) {
        const taskList = document.getElementById('task-list');
        const newItem = document.createElement('div');
        newItem.innerHTML = `
       <div class="card text-center mb-4 card-body">
            <strong>Title:</strong> ${task.title}
            <strong>Description:</strong> ${task.description}
            <strong>Hour:</strong> ${task.hour}
            <a href="#" class="btn btn-danger" name="delete">Delete</a>   
       </div>
       `;
        taskList.appendChild(newItem);
    }

    resetForm() {
        document.getElementById('task-form').reset();
    }
    editTask() {

    }
    removeTask(element) {
        if (element.name == 'delete') {
            element.parentElement.remove();
            this.showMessage('Task deleted', 'danger')
        }
    }

    showMessage(message, cssClass) {
        /*const divm = document.createElement('div');
        //div.className = `alert alert-${cssClass}`;
        div.className = 'alert alert-' + cssClass;
        div.appendChild(document.createTextNode(message));
        //Showing in DOM 
        const container = document.querySelector('.container');
        const app = document.querySelector('#App');
        // Insert div Message in the UI
        document.insertBefore(div, app);*/
        const div = document.createElement('div');
        div.className = `alert alert-${cssClass}`;
        div.appendChild(document.createTextNode(message));
        // Show in The DOM
        const container = document.querySelector('.container');
        const app = document.querySelector('#App');
        // Insert Message in the UI
        container.insertBefore(div, app);
        // Remove the Message after 3 seconds
        setTimeout(function () {
            document.querySelector('.alert').remove();
        }, 3000);
    }
 }


 // DOM Events // elements task-form and task-list
 document.getElementById('task-form')
    .addEventListener('submit', function (e) {
        const title = document.getElementById('title').value;
        const description = document.getElementById('description').value;
        const hour = document.getElementById('hour').value;
        // New object task
        const task = new Task(title, description, hour);
        //New UI
        const ui = new UI();

        if(title === '' || description === '' || hour === ''){
            return ui.showMessage('Complete fields, please', 'info');
        }
        ui.addTask(task);
        ui.resetForm();
        ui.showMessage('Task added', 'success');
        //console.log(title, description, hour);

        e.preventDefault();
    });


 document.getElementById('task-list').addEventListener('click', function (e) {
    const ui = new UI();
    ui.removeTask(e.target);
    e.preventDefault();
 });
	<!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>New task</title>
	</head>

	<body>
	<!--NAVEGACION-->
	<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>
	<div class="form-group">
	<input type="number" id="hour" min="1" max="24" placeholder="your hour" class="form-control">
	</div>
	<input type="submit" value="Add" class="btn btn-primary btn-block">
	</form>
	</div>
	</div>
	<div id="task-list" class="col-md-8">
	<!--Here the content of elements created-->
	</div>
	</div>
	</div>

	<script src="app.js">

	</script>
	</body>

	</html>
	// Class of object, format, TASK
	class Task {
	constructor(title, description, hour) {
	this.title = title;
	this.description = description;
	this.hour = hour;
	}
	}



	// UI constructor class // action according to event

	class UI {
	addTask(task) {
	const taskList = document.getElementById('task-list');
	const newItem = document.createElement('div');
	newItem.innerHTML = `
	<div class="card text-center mb-4 card-body">
	<strong>Title:</strong> ${task.title}
	<strong>Description:</strong> ${task.description}
	<strong>Hour:</strong> ${task.hour}
	<a href="#" class="btn btn-danger" name="delete">Delete</a>
	</div>
	`;
	taskList.appendChild(newItem);
	}

	resetForm() {
	document.getElementById('task-form').reset();
	}
	editTask() {

	}
	removeTask(element) {
	if (element.name == 'delete') {
	element.parentElement.remove();
	this.showMessage('Task deleted', 'danger')
	}
	}

	showMessage(message, cssClass) {
	/*const divm = document.createElement('div');
	//div.className = `alert alert-${cssClass}`;
	div.className = 'alert alert-' + cssClass;
	div.appendChild(document.createTextNode(message));
	//Showing in DOM
	const container = document.querySelector('.container');
	const app = document.querySelector('#App');
	// Insert div Message in the UI
	document.insertBefore(div, app);*/
	const div = document.createElement('div');
	div.className = `alert alert-${cssClass}`;
	div.appendChild(document.createTextNode(message));
	// Show in The DOM
	const container = document.querySelector('.container');
	const app = document.querySelector('#App');
	// Insert Message in the UI
	container.insertBefore(div, app);
	// Remove the Message after 3 seconds
	setTimeout(function () {
	document.querySelector('.alert').remove();
	}, 3000);
	}
	}


	// DOM Events // elements task-form and task-list
	document.getElementById('task-form')
	.addEventListener('submit', function (e) {
	const title = document.getElementById('title').value;
	const description = document.getElementById('description').value;
	const hour = document.getElementById('hour').value;
	// New object task
	const task = new Task(title, description, hour);
	//New UI
	const ui = new UI();

	if(title === '' \|\| description === '' \|\| hour === ''){
	return ui.showMessage('Complete fields, please', 'info');
	}
	ui.addTask(task);
	ui.resetForm();
	ui.showMessage('Task added', 'success');
	//console.log(title, description, hour);

	e.preventDefault();
	});


	document.getElementById('task-list').addEventListener('click', function (e) {
	const ui = new UI();
	ui.removeTask(e.target);
	e.preventDefault();
	});