JSFiddle - React, Tailwind, and code Playground
SASS
*
box-sizing: border-box
ul
padding: 0
margin: 0
list-style-type: none
a
text-decoration: none
body
padding: 25px
.user-form
width: 250px
.user-form > input
display: block
width: 100%
margin: 10px 0
.workers
width: 250px
.workers-list li
display: flex
align-items: center
justify-content: space-between
padding: 10px 0
border-bottom: 1px solid #000
.workers-list
margin-bottom: 10px
JavaScript
const AppCtrl = (() =>{
const workers = [
{
name: 'Mike',
work: 'Google',
id: 0
}
];
return {
addWorker(worker) {
worker.id = workers.length;
workers.push(worker);
},
removeWorker(worker) {
const id = Number(worker.dataset.id);
workers.forEach(function(worker, index) {
if(worker.id === id) {
workers.splice(index, 1);
}
});
},
isWorkerEmpty(worker) {
const vals = Object.values(worker);
for(let i of vals) {
if(!i.length) {
return false;
}
}
return true;
},
getTotalWorkers() {
return workers.length;
},
getUsers() {
return workers;
}
}
})();
const UiCtrl = (() => {
const selectors = {
userForm: 'user-form',
userName: 'user-name',
userWork: 'user-work',
totalWorkers: 'total-workers',
workersList: 'workers-list',
removeBtn: 'remove-btn',
worker: 'worker',
workers: 'workers'
};
return {
createForm() {
const form = document.createElement('form');
form.classList.add(selectors.userForm);
document.body.appendChild(form);
const userName = document.createElement('input');
userName.classList.add(selectors.userName);
form.appendChild(userName);
const userWork = document.createElement('input');
userWork.classList.add(selectors.userWork);
form.appendChild(userWork);
const formSubmit = document.createElement('input');
formSubmit.type = 'submit';
formSubmit.value = 'Добавить работника';
form.appendChild(formSubmit);
},
createWorkersField() {
const workers = document.createElement('div');
workers.classList.add(selectors.workers);
document.body.appendChild(workers);
},
createTotalWorkersItem(numberOfWorkers) {
const totalWorkers = document.createElement('span');
totalWorkers.classList.add(selectors.totalWorkers);
totalWorkers.appendChild(document.createTextNode(`Total workers:...