Book list in Javascript

Today i will show you how to create a book list with pure JavaScript with modular approach.

 
html of application

Demo

 
<body>
	 <div class="container">
        <div id="form-block">
      <h1>Add Book</h1>

  <div class="form-group">
    <label>Title</label>
     <input type="text" id="title" class="form-control">
   
  </div>
<div class="form-group">
    <label>Author</label>
     <input type="text" id="author" class="form-control">
   
  </div>
  <div class="form-group">
    <label>Isbn</label>
     <input type="text" id="isbn" class="form-control">
   
  </div>
       <button type="submit" id="submitButton" class="btn btn-primary mb-2">Submit</button>
  
 <table class="table"  id="book-list">
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>ISBN</th>
      <th>Delete Item</th>
    </tr>
  </thead>
  <tbody>
    
   
  </tbody>
</table>

    </div> 
    
    </div>
  </body>
	<script src="app.js">
	</script>
app.js 
 
//  BOOK CONTOLLER MODULE
var BOOKController = (function() {
    var Books = function(id, title, author, isbn) {
        this.id = id;
        this.title = title;
        this.author = author;
        this.isbn = isbn;
    };

    var data = {
        books: []
    };
    return {
        addBooks: function(titleData, authorData, isbnData) {
            var newBook, ID;
            //[12,24,51,62,75,88,98]
            console.log(data.books)
            if (data.books.length > 0) {
                ID = data.books[data.books.length - 1].id + 1;
            } else {
                ID = 0;
            }
            //console.log(ID)
            newBook = new Books(ID, titleData, authorData, isbnData);

            data.books.push(newBook);
            return newBook;
        },
        deleteBook: function(id) {
            //alert(typeof id)
            var ids, index;
            ids = data.books.map(function(current) {

                return current.id;
            });
            index = ids.indexOf(id);

            if (index !== -1) {
                data.books.splice(index, 1)
            }
        },
        testing: function() {
            console.log(data);
        }
    };
})();
var Books = function(title, author, isbn) {
    title = this.title;
    author = this.author;
    isbn = this.isbn;
}

//UI CONTOLLER MODULE
var UIController = (function() {
    var DOMStrings = {
        inputTitle: '#title',
        inputAuthor: '#author',
        inputIsbn: '#isbn',
        submitBtn: '#submitButton',
        booklist: '#book-list'
    };
    return {
        getInputs: function() {
            return {
                title: document.querySelector(DOMStrings.inputTitle).value,
                author: document.querySelector(DOMStrings.inputAuthor).value,
                isbn: document.querySelector(DOMStrings.inputIsbn).value
            };

        },
        addBookslist: function(obj) {
            var html
            //create html with placeholder
            html = '<tr id=' + obj.id + '><td>' + obj.title + '</td><td>' + obj.author + '</td><td>' + obj.isbn + '</td><td>X</td></tr>';
            //insert in DOM
            document.querySelector(DOMStrings.booklist).insertAdjacentHTML('beforeend', html);

        },
        clearFields: function() {
            var fields, fieldsArray;
            fields = document.querySelectorAll(DOMStrings.inputTitle + ',' + DOMStrings.inputAuthor + ',' + DOMStrings.inputIsbn);
            fieldsArray = Array.prototype.slice.call(fields);
            //console.log(fieldsArray)

            fieldsArray.forEach(function(current) {
                current.value = "";
            });
            fieldsArray[0].focus();
        },
        showAlert: function(message, customClass) {
            //Create div
            var newDiv, newContent, currentDiv;
            newDiv = document.createElement('div');
            newDiv.className = "alert" + ' ' + customClass;
            newContent = document.createTextNode(message);
            newDiv.appendChild(newContent);
            currentDiv = document.querySelector(".container");
            document.body.insertBefore(newDiv, currentDiv);
            setTimeout(function() {
                document.querySelector('.alert').remove();
            }, 3000)
        },
        deleteBookList: function(deleteId) {
            document.getElementById(deleteId).remove();
        },
        getDOMStrings: function() {
            return DOMStrings;
        }
    };
})();

//APP CONTOLLER MODULE
//Connecting UI and BOOK MODULE WITH APP CONTOLLER(GLOBAL)
var APPController = (function(BOOKCtrl, UICtrl) {
    var setupEventListners = function() {
        var DOM = UICtrl.getDOMStrings();
        document.querySelector(DOM.submitBtn).addEventListener('click', ctrAddItem)
        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                ctrAddItem();

            }
        });
        document.querySelector(DOM.booklist).addEventListener('click', ctrDeleteItem);
    };

    var ctrAddItem = function() {
        var inputs, newItem;
        //get input data
        inputs = UICtrl.getInputs();
        //console.log(inputs)
        if (inputs.title !== "" && inputs.author !== "" && inputs.isbn !== "") {
            var newItem = BOOKCtrl.addBooks(inputs.title, inputs.author, inputs.isbn);
            //add the new item in UIController
            UICtrl.addBookslist(newItem);
            UICtrl.showAlert('Added Succssfully.', 'alert-success');
            //Clear fields
            UICtrl.clearFields();
            //console.log(inputs)
        } else {
            UICtrl.showAlert('Please fill all fields', 'alert-danger')
        }

    };
    var ctrDeleteItem = function(event) {
        var bookId;
        bookId = event.target.parentNode.parentNode.id;
        if (bookId) {
            BOOKCtrl.deleteBook(parseInt(bookId));
            UICtrl.deleteBookList(bookId);
            UICtrl.showAlert('Deleted Succssfully.', 'alert-danger');
        }
    };
    return {
        init: function() {
            console.log('App started');
            setupEventListners();
        }
    };
})(BOOKController, UIController);

APPController.init();

Demo

50 thoughts on “Book list in Javascript

  1. Federikjjp

    Привет дамы и господа.
    Есть такой замечательный сайт для заказа инструмента Milwaukee.

    Приглашаем вас в наш специализированный магазин Milwaukee. Вас ждет широкий ассортимент оригинальных и качественных инструментов от американского бренда Milwaukee:
    шуруповерты
    дрели
    перфораторы
    отбойные молотки
    аксессуары
    Здесь вы можете посмотреть, пощупать, протестировать инструменты, оснастку и аксессуары Milwaukee. Наши грамотные консультанты с радостью покажут вам продукцию, помогут с выбором и расскажут обо всех действующих акциях.
    В нашем магазине при первой покупке от 100 рублей вы получаете скидочную карту, которую можно использовать во всех магазинах
    Нам будет приятно видеть у нас на интернет ресурсе
    От всей души Вам всех благ!
    Бур SDS-PLUS MS2 с 2-мя режущими кромками 10х210 MILWAUKEE 1шт. 4932371709
    Вентилятор M12AF-0
    Отвертка диэлектрическая шлицевая MILWAUKEE 0.5 x 3 мм 4932464035
    Шлифовальные диски по металлу 230х6 мм SG 27 MILWAUKEE 4932490102
    Матрица C13 Cu35-70

  2. Bogdanazs

    Здравствуйте друзья!
    Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.Хозяева квартир, загородных домов, коттеджей, а также офисных и торговых помещений для обустройства проемов все чаще выбирают двери из закаленного стекла. Такой материал неспроста стал популярен. По прочности и звукоизоляции стекло не уступает деревянным полотнам, а по износостойкости в разы превосходит другие классические материалы. Кроме всех плюсов технических характеристик, стекло является наиболее декоративным материалом и в ближайшее время точно не выйдет из моды.
    Более подробная информация размещена https://drive.google.com/file/d/1vmrY5GSwVaOZLTTZYDu9eRJGb7VqrLSr/view?usp=sharing
    От всей души Вам всех благ!

  3. Bogdanbdf

    Приветствую Вас дамы и господа!
    Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.На сегодняшний день межкомнатные двери из стекла быстро набирают популярность и спрос у покупателей. Причина этого понятна, ведь стеклянные двери защищают от посторонних глаз и звуков, а также пропускают свет, визуально расширяют пространство помещения и отлично вписываются в любой интерьер, который может быть выполнен как в классическом варианте, так и в стиле модерн или хай-тек.
    Более подробная информация размещена https://drive.google.com/file/d/1vmrY5GSwVaOZLTTZYDu9eRJGb7VqrLSr/view?usp=sharing
    Увидимся!

  4. Bogdannbk

    Приветствую Вас господа!
    Предлагаем Вашему вниманию изделия из стекла для дома и офиса.Наша организация ООО «СТЕКЛОЭЛИТ» работает 10 лет на рынке этой продукции в Беларуси.Офис сегодня – это не пыльная комната в панельном здании, а лицо компании, его визитная карточка. Во многом это определяет интерьер, но также огромное значение имеют дверные конструкции и стеклянные перегородки в офисе. Появившись в качестве перегородок достаточно давно, стеклянные стены использовались чаще всего просто в качестве разделителя помещения, и только недавно они вошли в список интерьерных изюминок. В своих конструкциях мы используем стекло от лучшего мирового производителя листового стекла AGC GLASS EUROPE.
    Более подробная информация размещена https://drive.google.com/file/d/1vmrY5GSwVaOZLTTZYDu9eRJGb7VqrLSr/view?usp=sharing
    От всей души Вам всех благ!

  5. Marinaxnv

    Добрый день дамы и господа!
    Предлагаем Вашему вниманию сервис оргтехники и продажу расходников для дома и офиса.Наша организация «КОПИМЕДИАГРУПП» работает 10 лет на рынке этой продукции в Беларуси.Заправка картриджей.Качественная заправка принтера в Минске выполняется мастерами. Расходники для печатающих аппаратов имеют ограниченный ресурс, и после их отработки приходится покупать новый картридж или заправлять старый. Заправка, ремонт и восстановление картриджей – альтернативное и удобное решение, позволяющее использовать картридж для печати повторно и многократно. Не рекомендуем заправлять картридж в домашних условиях, поскольку выполнить процедуру аккуратно и без повреждений устройства под силу только профессиональным работникам.
    «КОПИМЕДИАГРУПП» ? это место, где заправить картридж для принтера вы сможете быстро и недорого. Чтобы оформить заявку на заправку картриджа, свяжитесь с менеджером. После согласования деталей заказа, указания марки принтера и количества картриджей, уточнения места и выбора подходящего времени для проведения работ, мы направим к вам специалиста. Также по телефону определим стоимость заправки картриджа для принтера. Перед выездом на дом или в офис мастер предварительно созвонится с вами, предупредив о приезде.КАК ПРОИСХОДИТ ЗАПРАВКА.Инструкция по заправке картриджа включает несколько важных этапов: разборку, очистку устройства от остатков отработанного материала, смазку и саму заправку. После установки картриджа на место мастер проверяет качество печати. Если при эксплуатации картридж течет, выясняется причина и выполняется восстановление или ремонт устройства.Мы работаем качественно и ответственно, благодаря чему получаем только положительные отзывы о своей работе. Особенности сотрудничества с нами:заправка выполняется в течение 15 минут;у нас приемлемая цена на заправку картриджей;используем качественные расходные материалы, проверенные на совместимость;
    предоставляем гарантии на заправку сроком до 6 месяцев (если тонер для заправки картриджей не выработается раньше);выезд во все районы Минска;для постоянных клиентов есть скидки.Оплатить услуги можно наличным или безналичным способами.
    http://raovatsoctrang.com/member.php?u=4302547
    http://insidious.biz/community/index.php?/topic/288-reichster-bitcoin-besitzer/#comment-66246
    http://www.theanglersforum.co.uk/forums/member.php?950300-Marinavex
    https://cszone.club/user/Marinaexg/
    http://www.minimir.su/forum/member.php?u=320939

  6. Marinawlj

    Привет господа!
    Предлагаем Вашему вниманию сервис оргтехники и продажу расходников для дома и офиса.Наша организация «КОПИМЕДИАГРУПП» работает 10 лет на рынке этой продукции в Беларуси.ЗАПРАВКА КАРТРИДЖЕЙ В МИНСКЕ.Заправляем все типы картриджей лазерных принтеров и МФУ.Ремонт принтеров и обслуживание офисной техники.Продажа картриджей собственного производства.
    Работаем на рынке более 10 лет. Более 1000 организаций воспользовались нашими услугами!Заправляем картриджи на выезде у Заказчика, так и в нашем Сервисном Центре (выезд курьера от 5 картриджей в обе стороны – бесплатно. На время заправки оставляем подменные картриджи, чтобы ваша работа не останавливалась);Не экономим на качестве, используем расходные материалы высокого качества, ведущих мировых производителей Imex, Tomoegawa, Mitsubishi (Япония), StaticControl (США) и др.;Наличный и безналичный расчет. Оплата по факту выполненной работы. Гибкие условия оплаты, отсрочка платежа;
    Гарантия на выполненные работы. Средний срок выполнения работ – 1 раб. день;Бесплатная консультация по обслуживанию и работе с офисной техникой, приобретению офисной техники и расходных материалов к ней;
    http://www.satakuntaenduro.com/vbulletin/member.php?u=168953
    https://marketinginc.com/forums/member.php?1449900-Marinavgc
    https://forum.tavria.org.ua/member.php?u=306223
    http://www.chrisvernerstudio.com/forum/viewtopic.php?f=3&t=2041
    http://forum.semperlex.ro/viewtopic.php?f=20&t=57594

  7. Marinailo

    Привет дамы и господа!
    Предлагаем Вашему вниманию сервис оргтехники и продажу расходников для дома и офиса.Наша организация «КОПИМЕДИАГРУПП» работает 10 лет на рынке этой продукции в Беларуси.Что мы можем предложить.Заправка лазерных картриджей для черно-белых и цветных принтеров и МФУ. Наш опыт позволяет заправлять картриджи практически любого производителя, наиболее популярные из них HP, Canon, Samsung, Xerox, Ricoh, Brother, Panasonic, Kyocera. При появлении дефектов печати может потребоваться ремонт картриджа, мы также можем выполнить его на выезде. Стоимость весьма демократична, при этом качество отличное.Качество.При заправке картриджей используем тонер только премиального уровня IMEX, TOMOEGAWA (ЯПОНИЯ), StaticControl (США) позволит реже производить ремонт картриджа, а в дальнейшем – отсутствие проблем с принтером, которые очень часто встречаются при использовании некачественного, дешевого тонера.Заправка картриджей с выездом.Наша работа построена таким образом, чтобы максимально освободить ваше время, а ваше участие в данном процессе было минимальным.Заправляем картриджи для принтера с выездом на дом или в офис, вам не придется ехать через весь город и тратить свое время – это мы сделаем за вас. Выезжаем со специальным пылесосом, что позволяет заправить картридж на месте без грязи и пыли и с соблюдением технологического процесса.Доставка картриджей и техники.Курьерская доставка, мы приезжаем к вам, забираем картриджи, заправляем их у себя в мастерской, после чего доставляем заправленные картриджи обратно.Так же и с техникой – заберем ваш принтер в ремонт и привезем обратно исправным.Дисконтная программа.
    Мы ориентированы на долгосрочное сотрудничество и поэтому регулярно дарим скидки. При заправке картриджей более двух единиц – Вы уже экономите.
    http://kick.gain.tw/viewthread.php?tid=238187&pid=305828&page=1&extra=#pid305828
    http://45.79.158.127/index.php?action=profile;u=31898
    http://azeroth.su/forum/viewtopic.php?f=22&t=82223
    https://cardvilla.cc/members/112172.html
    https://www.emrald.de/forum/viewtopic.php?f=3&t=1352378

  8. Bogdancpt

    Привет дамы и господа.
    Есть такой интересный сайт для заказа инструмента Milwaukee.
    Первый импортер MILWAUKEE (Милуоки)
    Ваша работа требует использования качественного электроинструмента, но вы еще не нашли его?
    Мы предлагаем инструмент MILWAUKEE (Милуоки) от лучшего американского производителя. Многолетний лидер данной сферы находится в постоянном поиске улучшений, все последние разработки Вы можете купить у нас.Звоните и заказывайте профессиональные инструменты для любых задач в нашем фирменном магазине Milwaukee
    Мы будем рады Вас видеть у нас на вебресурсе
    Увидимся!
    https://1s-forum.fun/member.php/638574-Bogdanwha
    http://iv-lisica.ru/index/8-12230
    https://www.bitcoinforum.com.tr/off-topic-genel-konu-disi/11035-%F2%EEgo%EE%EE%F7%ED%E0%FF-%EFe%EB%E0-o%E5%ED%E0.html#post38017
    http://admkam.ru/forum/viewtopic.php?f=29&t=111248
    http://www.littlefx.com/member.php?316810-Victorgce

  9. Bogdanrri

    Здравствуйте дамы и господа!
    Предлагаем Вашему вниманию интересный сайт для заказа инструмента Milwaukee.
    Фирменный магазин Milwaukee предлагает широкий перечень инструментов и расходных материалов Milwaukee для бытовых и профессиональных целей.Инструменты бренда Milwaukee созданы благодаря новаторским разработкам, инструмент Milwaukee отличается высочайшим качеством и высокой производительностью. Все инструменты Milwaukee успешно реализуются по всему миру. В линейку товаров бренда входит более чем 3500 видов электроинструментов класса Heavy Duty и 4000 аксессуаров для выполнения различных видов работ. Вся продукция отличается наилучшим соотношением цены, качества и срока службы инструмента. Каждому клиенту предоставляется индивидуальный подход, подбор необходимого инструмента исходя из целей использования. Наши специалисты отдела электроинструментов и аксессуаров профессионально проконсультируют каждого клиента обратившегося в фирменный магазин Milwaukee. Весь ассортимент электроинструментов Milwaukee Вы можете купить в нашем фирменном магазине Milwaukee. Мы осуществляем бесплатную доставку по всей территории Беларуси в сжатые сроки
    Мы будем рады Вас видеть у нас на интернет ресурсе
    Увидимся!
    http://forum.spfi.com.ua/viewtopic.php?f=10&t=3855
    https://britva.ru/forum/memberlist.php?mode=viewprofile&u=55551
    http://archive.appraisalbuzz.com/buzz/blog/2014/12/09/the-buzz-on-marijuana-grow-house-reporting?page=2611#comment-226168
    https://roqstech.de/viewtopic.php?f=7&t=1434959&p=3479288#p3479288
    https://www.medicinacinesenews.it/forum/memberlist.php?mode=viewprofile&u=318844

Leave a Reply

Your email address will not be published. Required fields are marked *