Posts

drag-and-drop list board with Javascript

Image
  Features: drag and drop with HTML drag and drop API add& delete items  scroll bar stylish CODE Github DEMO HTML Four columns in the container.  First one is "backlog". The unordered list put the list generated or from localStorage. ondragenter ,ondragover and ondrop events. Add button show input box,or hide if save button clicked. The other three are same pattern. CSS add the "over" classname for different background color custom scrollbar from css tricks   For responsive screen styles.  JAVASCRIPT select all the DOM and initialize the variables. drag() aims the target of item. when dragged item enter the new column,add the "over" class and pass the current column index. When drop the item,the background go back to normal and the dragged item to new column. Then rebuildArrays() loop the each array and create the new array to save . if refresh the page, grab the data from localStorage. Get the saved column parsed from object. update the columns and ...

Math Sprint Game with Javascript

Image
  Features: countdown to show game the math equations generated with Math() seperate wrong and correct equations and added boolean  compare the equationArray with PlayerGuessArray  store bestscore to localStorage and compare when start next round again CODE Github DEMO HTML four radio input in the e form. Bestscore show in the span. when submit the selection,go to countdown page. All the math equations created in the item-container with JS. And the right ang wrong selection with onclick event. After finish ,go to score page. the times calculated within JS. When click theh playAgain,go back to splash page but the best score will be strored in the localStorage. CSS basic center the container center header   Javascript select DOM When click the input,change the style of selected-label. click start game button,load the startTimer interval. reset all the time display .timePlay accumulates. if array lengths are same,the countdown stop and check if need penaltyTime.  A...

Javascript Pictures page with NASA API

Image
  Features: Data fetch from NASA API Storage favorates data in localStorage and also can getItems Delete the saved favorates card from interface and localStorage CODE Github DEMO HTML Before the pictures fetched, the loader shows up. Because it takes some time when fetch data from server database. navigation includes favorates button and load more button. When click the "favorate", update the data fetched from localStorage. When click the "load more" ,fetch more data from server. In favorates page,the favorate buttons should be hidden. Notification show up 2 seconds after adding the favorates. CSS center the loader svg. background is the lower layer of nav items. the images should be fit in the image container. save favorate button at the fixed position.  The hidden class applied to nav button . When screen is small than 800px, the images fit in . JAVASCRIPT Select all the DOM from html. Request the NASA API Key from APOD. the apiUrl is a Object. First the loader sh...