//import $ from 'jquery' //import cuid from 'cuid' // import item from './items' let items = [] function bookmarkTemplate(item) { let itemTitle = `

${item.title}, Rating: ${item.rating}

` return itemTitle } function dropDownForm() { return ` ` } function addButtonTemplate() { return `` } function createItem(title, desc, rating) { return { id: cuid(), title, desc, rating } } function handleAddItem() { console.log('addItem called') $('body').on('submit', $('#bookmark-form'), (e) => { e.preventDefault() let titleValue = $('#title').val() let description = $('#description').val() let rating = $('#rate').val() items.push(createItem(titleValue, description, rating)) let item = [...items] render() console.log(item) console.log('submit') }) } function handleAddItemSubmit (){ $('.bookmark-head-list').html(mapItems(item)) console.log(titleValue) } function getIdOfItem(current) { return $(current) .closest('.bookmark-head') .data('item-id') } // use this on delete function findById(id) { return items.find(currentItem => currentItem.id === id) } function handleToggleHidden() { console.log('ran handleToggleHidden') $('.bookmark-head-list').on('click', '.bookmark-head', function (e) { let getId = getIdOfItem(e.target) console.log(getId) let id = findById(getId) $('.bookmark-head').children('#bookmark-dropdown').toggleClass('hidden') console.log(items) }) } console.log(items) function mainPageHTML() { return $('body').html(`

Bookmark App

${addButtonTemplate()}

`) } function addButtonClick() { $('body').on('click', '.add', function (e) { e.preventDefault() return $('body').html(`

Bookmark App

${dropDownForm()}

`) }) } function cancelButtonClick() { $('body').on('click', '.cancel', function () { console.log('cancel button clicked') return mainPageHTML() }) } function mapItems(i) { let item = i.map(item => bookmarkTemplate(item)) return item.join('') } function render() { handleAddItem() mainPageHTML() cancelButtonClick() addButtonClick() handleToggleHidden() } $(render)

BOOKMARKAPP//WIA