diff --git a/board/js/UI.js b/board/js/UI.js new file mode 100644 index 0000000..ac78ccf --- /dev/null +++ b/board/js/UI.js @@ -0,0 +1,49 @@ +"use strict"; + +var UI={ + + render:function(card){ + var div=document.createElement('div'); + div.classList.add('card'); + var d=new Date(card.date); + var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2); + var dateSpan=document.createElement('span'); + dateSpan.classList.add('date'); + var dateText=document.createTextNode(date); + dateSpan.appendChild(dateText); + var textSpan=document.createElement('span'); + textSpan.classList.add('text'); + var text=document.createTextNode(card.name); + textSpan.appendChild(text); + var deleteButton=document.createElement('a'); + deleteButton.classList.add('deleteButton'); + deleteButton.setAttribute('href',''); + deleteButton.setAttribute('data-key',card.date); + var deleteText=document.createTextNode('[delete]'); + deleteButton.appendChild(deleteText); + div.appendChild(dateSpan); + div.appendChild(textSpan); + div.appendChild(deleteButton); + var board=document.getElementById('board'); + board.appendChild(div); + deleteButton.addEventListener('click',deleteCard,false); + }, + + delete:function(elmt){ + elmt.parentNode.remove(); + } + +} + + + + + + + + + + + + + diff --git a/board/js/cards - copie.js b/board/js/cards - copie.js new file mode 100644 index 0000000..b33ec1e --- /dev/null +++ b/board/js/cards - copie.js @@ -0,0 +1,65 @@ +"use strict"; + + +var card={}; +var addCard=document.getElementById('addCard'); +addCard.addEventListener('submit',getCard,false); + +function getCard (e) { + e.preventDefault(); + var name=document.querySelector("input[name='name']").value; + var date=document.querySelector("input[name='date']").value; + if(!name){return;} + var cardDate=!date?new Date().getTime():new Date(date).getTime(); + /*if(!date){ + var cardDate=new Date().getTime(); + } + else{ + var cardDate=new Date(date).getTime(); + }*/ + card.name=name; + card.date=cardDate; + localStorage.setItem(card.date,JSON.stringify(card)); + // création des nodes dans le DOM + var div=document.createElement('div'); + div.classList.add('card'); + var d=new Date(card.date); + var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2); + var dateSpan=document.createElement('span'); + dateSpan.classList.add('date'); + var dateText=document.createTextNode(date); + dateSpan.appendChild(dateText); + var textSpan=document.createElement('span'); + textSpan.classList.add('text'); + var text=document.createTextNode(card.name); + textSpan.appendChild(text); + var deleteButton=document.createElement('a'); + deleteButton.classList.add('deleteButton'); + deleteButton.setAttribute('href',''); + deleteButton.setAttribute('data-key',card.date); + var deleteText=document.createTextNode('[delete]'); + deleteButton.appendChild(deleteText); + div.appendChild(dateSpan); + div.appendChild(textSpan); + div.appendChild(deleteButton); + var board=document.getElementById('board'); + board.appendChild(div); + deleteButton.addEventListener('click',deleteCard,false); +} + +function deleteCard (e) { + e.preventDefault(); + var key=this.getAttribute('data-key'); + if(!key){return;} + localStorage.removeItem(key); + this.parentNode.remove(); +} + + + + + + + + + diff --git a/board/js/cards.js b/board/js/cards.js index 2043dbd..066f320 100644 --- a/board/js/cards.js +++ b/board/js/cards.js @@ -1,5 +1,6 @@ "use strict"; + var card={}; var addCard=document.getElementById('addCard'); addCard.addEventListener('submit',getCard,false); @@ -10,37 +11,23 @@ function getCard (e) { var date=document.querySelector("input[name='date']").value; if(!name){return;} var cardDate=!date?new Date().getTime():new Date(date).getTime(); - /*if(!date){ - var cardDate=new Date().getTime(); - } - else{ - var cardDate=new Date(date).getTime(); - }*/ card.name=name; card.date=cardDate; - localStorage.setItem(card.date,JSON.stringify(card)); - var div=document.createElement('div'); - div.classList.add('card'); - var d=new Date(card.date); - var date=d.getFullYear()+'/'+('0'+(d.getMonth()+1)).slice(-2)+'/'+('0'+d.getDate()).slice(-2); - var dateSpan=document.createElement('span'); - dateSpan.classList.add('date'); - var dateText=document.createTextNode(date); - dateSpan.appendChild(dateText); - var textSpan=document.createElement('span'); - textSpan.classList.add('text'); - var text=document.createTextNode(card.name); - textSpan.appendChild(text); - var deleteButton=document.createElement('a'); - deleteButton.classList.add('deleteButton'); - deleteButton.setAttribute('href',''); - var deleteText=document.createTextNode('[delete]'); - deleteButton.appendChild(deleteText); - div.appendChild(dateSpan); - div.appendChild(textSpan); - div.appendChild(deleteButton); - var board=document.getElementById('board'); - board.appendChild(div); + model.add(card,function(){ + console.log('item recorded'); + UI.render(card); + }); +} + +function deleteCard (e) { + e.preventDefault(); + var self=this; + var key=self.getAttribute('data-key'); + if(!key){return;} + model.delete(key,function(){ + UI.delete(self); + }); + } @@ -51,3 +38,4 @@ function getCard (e) { + diff --git a/board/js/model.js b/board/js/model.js new file mode 100644 index 0000000..0b2e291 --- /dev/null +++ b/board/js/model.js @@ -0,0 +1,29 @@ +"use strict"; + +var model={ + + add : function(card,callback){ + localStorage.setItem(card.date,JSON.stringify(card)); + var key=localStorage.getItem(card.date); + if(key){ + callback.call(this); + } + }, + delete : function(key,callback){ + localStorage.removeItem(key); + if(!localStorage.getItem(key)){ + callback.call(this); + } + } + + +} + + + + + + + + +