Javascript has a powerful event and DOM objects, that enable anyone to do fancy things with it. Today I have thought of writing a todo list in *.txt file and adding it to a *.htm file with javaScript. Something like this:
And it reads nicely every line of your todo.txt file and even takes the name of the file as a header. The other interesting trick is that the two div-s are changing colors, based on the events in the JavaScript like this:
|
1 2 |
event.target.classList.remove("file_present"); document.getElementById("instructions").classList.remove("file_present"); |
If you know when to ask for adding css class and to remove it, the effect is really nice. Pretty much that is all. Here comes the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>VitoshAcademy</title> <style> .file_present{ background-color: blue !important; color: yellow !important; } #block_container{ } #fileplace { display:inline; color:blue; background-color: yellow; color:blue; width: 200px; height: 100px; border: 1px solid black; padding: 10px; margin:30px; } #instructions{ display:inline; color:white; background-color:white; width: 200px; height: 100px; border: 0px solid black; padding: 10px; margin:30px; } </style> <script> var fileName; window.addEventListener("load", init); function init() { var readingPlace = document.getElementById('fileplace'); readingPlace.addEventListener('dragover', my_dragover); readingPlace.addEventListener('dragenter', my_dragenter); readingPlace.addEventListener('dragleave', my_dragleave); readingPlace.addEventListener('drop', my_drop); } function my_dragover(event) { event.stopPropagation(); event.preventDefault(); event.dataTransfer.dropEffect = 'move'; } function my_dragenter(event) { event.target.classList.add("file_present"); document.getElementById("instructions").classList.add("file_present"); } function my_dragleave(event) { event.target.classList.remove("file_present"); document.getElementById("instructions").classList.remove("file_present"); } function my_drop(event) { event.stopPropagation(); event.preventDefault(); if (event.dataTransfer.files[0]) { fileName = event.dataTransfer.files[0].name; fileName = fileName.split(".")[0]; var my_reader = new FileReader(); my_reader.addEventListener("load", readFile); my_reader.readAsText(event.dataTransfer.files[0], "UTF-8"); } } function readFile(event) { document.getElementById("instructions").classList.remove("file_present"); var body = document.getElementsByTagName("body")[0]; var rows = event.target.result.split("\n"); var title = document.createElement("h1"); title.appendChild(document.createTextNode(fileName)); body.appendChild(title); var my_list = document.createElement("ul"); body.appendChild(my_list); for (var i = 0; i < rows.length; i++) { var li = document.createElement("li"); li.appendChild(document.createTextNode(rows[i])); my_list.appendChild(li); } } </script> </head> <body> <h1>File to read</h1> <div id="block_container"> <div id="fileplace">Drag file here</div> <div id="instructions">Now Release!</div> </div> </body> </html> |
Available also in GitHub! Enjoy it! 🙂