add other items; include list of elements over the tag editor.

Author: marcofavorito

README.md

@@ -44,3 +44,7 @@ You'll find many textbooks, papers, articles, blog posts, readings and similar i
 Tag for kind of document, e.g.: `blogs`, `books`, `papers`, `readings`, `textbooks`, `thesis`, `websites`.
 
 Tag for topic, e.g.: `algorithms`, `artificial-intelligence`, `blockchain`, `computer-programming`, `computer-science`, `deep-learning`, `distributed-systems`, `logic`, `machine-learning`, `mathematics`, `operating-systems`, `philosophy`, `physics`, `reinforcement-learning`.
+
+## Credits
+
+The tag editor is built with [jQuery-tagEditor](https://github.com/Pixabay/jQuery-tagEditor).

bookshelf.tsv

@@ -83,7 +83,7 @@ Approximate Nearest Neighbor Queries in Fixed Dimensions	https://www.cs.umd.edu/
 Vitalik Buterin's website	https://vitalik.ca/	websites	blockchain	cryptocurrency	distributed-systems
 Ethereum:A Secure Decentralised Generalised Transaction Ledger	https://gavwood.com/paper.pdf	papers	blockchain	cryptocurrency	distributed-systems
 The Elements of Statistical Learning	https://web.stanford.edu/~hastie/Papers/ESLII.pdf	textbooks	machine-learning	data-mining	algorithms	statistics
-The space complexity of approximating the frequency moments	http://www.cs.princeton.edu/courses/archive/spring04/cos598B/bib/alonMS.pdf	textbooks	algorithms	big-data
+The space complexity of approximating the frequency moments	http://www.cs.princeton.edu/courses/archive/spring04/cos598B/bib/alonMS.pdf	papers	algorithms	big-data
 Near-Optimal Hashing Algorithms for Approximate Nearest Neighbor in High Dimensions	http://pages.di.unipi.it/ferragina/dott2014/lsh.pdf	papers	algorithms	big-data
 An Improved Data Stream Summary: The Count-Min Sketch and its Applications	http://dimacs.rutgers.edu/~graham/pubs/papers/cm-full.pdf	papers	algorithms	big-data
 Data Scientist: The Sexiest Job of the 21st Century	https://hbr.org/2012/10/data-scientist-the-sexiest-job-of-the-21st-century	readings	data-science
@@ -163,10 +163,10 @@ Tracing the Trajectory of Skill Learning With a Very Large Sample of Online Game
 The human emotional brain without sleep - a prefrontal amygdala disconnect	https://walkerlab.berkeley.edu/reprints/Yoo-Walker_CurrBiol_2007.pdf	papers	psychology	sleep
 Simon Says Don’t Use Flashcards	https://well.blogs.nytimes.com/2012/08/23/simon-says-dont-use-flashcards/	readings	psychology	human-learning
 Somnus Inventa Center for Human Sleep Science	https://www.humansleepscience.com/	websites	psychology	neuroscience	sleep
-Google Style Guides	https://google.github.io/styleguide/	readings best-practices	computer-programming
+Google Style Guides	https://google.github.io/styleguide/	readings	best-practices	computer-programming
 The NumPy array: a structure for efficient numerical computation	https://arxiv.org/pdf/1102.1523.pdf	papers	computer-programming	python	numpy
 Introduction to the Theory of Computation	https://theswissbay.ch/pdf/Book/Introduction%20to%20the%20theory%20of%20computation_third%20edition%20-%20Michael%20Sipser.pdf	textbooks	computer-science
-How to solve it - A new Aspect of Mathematical Method	https://math.hawaii.edu/home/pdf/putnam/PolyaHowToSolveIt.pdf	book	mathematics	problem-solving
+How to solve it - A new Aspect of Mathematical Method	https://math.hawaii.edu/home/pdf/putnam/PolyaHowToSolveIt.pdf	books	mathematics	problem-solving
 The Road to Reality, A Complete Guide to The Laws of The Universe	https://archive.org/stream/RoadToRealityRobertPenrose/road%20to%20reality-robert%20penrose_djvu.txt	textbooks	mathematics	physics
 Interpreting Mathematics in Physics: Charting the Applications of SU(2) in 20th Century Physics	https://arxiv.org/pdf/physics/0605012.pdf	papers	mathematics	physics
 List of important publications in theoretical computer science	https://en.wikipedia.org/wiki/List_of_important_publications_in_theoretical_computer_science	readings	computer-science
@@ -176,8 +176,8 @@ Tor: The Second-Generation Onion Router	https://svn.torproject.org/svn/projects/
 Incentives Build Robustness in BitTorrent	http://bittorrent.org/bittorrentecon.pdf	papers	distributed-systems
 Chord: A Scalable Peer-to-peer Lookup Service for Internet Application	http://nms.csail.mit.edu/papers/chord.pdf	papers	distributed-systems
 The Akamai Network: A Platform for High-Performance Internet Applications	https://www.cs.rutgers.edu/~rmartin/teaching/fall15/papers/arch2/cdn.pdf	papers	distributed-systems
-The Part-Time Parliament	https://lamport.azurewebsites.net/pubs/lamport-paxos.pdf	papers	distributed-systems	algorithm
-Paxos Made Simple	https://lamport.azurewebsites.net/pubs/paxos-simple.pdf	papers	distributed-systems	algorithm
+The Part-Time Parliament	https://lamport.azurewebsites.net/pubs/lamport-paxos.pdf	papers	distributed-systems	algorithms
+Paxos Made Simple	https://lamport.azurewebsites.net/pubs/paxos-simple.pdf	papers	distributed-systems	algorithms
 A Simpler Proof for Paxos and Fast Paxos	http://wwwusers.di.uniroma1.it/~mei/SistemiDistribuiti/Schedule_files/fastpaxosfordummies.pdf	papers	distributed-systems	algorithms
 The PageRank Citation Ranking: Bringing Order to the Web	https://www.cis.upenn.edu/~mkearns/teaching/NetworkedLife/pagerank.pdf	papers	information-retrieval	algorithms
 The Stationary Distribution of a Markov Chain	https://piazza-resources.s3.amazonaws.com/izdx3b2pxs84nl/j1pw8wbajdgd2/markovChains.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAR6AWVCBX7UFLF3NP%2F20180910%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180910T175657Z&X-Amz-Expires=10800&X-Amz-SignedHeaders=host&X-Amz-Security-Token=FQoGZXIvYXdzEOL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDCR4XbzjXnzDaDhCZCK3A3aQa7VL%2FLbT1A4aSdWtyD%2FaCivJncPGxWdvYQe7Zj1c85PExALGO83c1A2XDuXF8rU5YugLlloRGh%2B2SlTiWaWG%2Frr6PdWaINWRkOjolU03YPuTXHnTj7sGji9qEe%2FGDXHtGMWQfZtzuyy600p4qlQWt2FCBmpJ7gpW5syC%2FmAJeZwpVATYM3W128nluRWdYejrfBOLagefMDGQjHe8SjgKLCi0Gr6X4%2BR%2F7DXTwASTZnYKT1iu46Z9F2V6zVj2%2F1zhzb6%2F%2FsxScapc5YlYpT3u1XZkiW2lScHD5OyVbymbQK68h65jP0ZftNerdIvQ8Bj7oOVyxsjrW%2F6knC83ge1akUbsRIuACgU1AtrmlaWTpETxHO9LPP3IJ6mjaMQrjnoVuHMo0ykkat7WZe1YlK%2FVfgURPHQXUMTT3mjY9ex%2F%2FvmzN80X%2BiQp6BdA9fLi2KZIInkzoNuOw4wiYYWFoFaQ6fBAVp6ie9hVQcwvpdFOrm1tv%2FRPdRxxFsJwTjg9ANZYiN7UYvgtJTeE%2FlbBghoXtzzgN24lpoGXEqGnVHOsbPMvJxJpougM8OkPn0qNYvcNIBsqt3Mo3sHa3AU%3D&X-Amz-Signature=4de71946287f0fd51b40efbfd41b789f050dd4437cdbb603b595fc9660deddfb	readings	mathematics	algorithms
@@ -186,7 +186,7 @@ Jeffrey Dean's website	https://ai.google/research/people/jeff	websites	software-
 Building Software Systems at Google and Lessons Learned	https://static.googleusercontent.com/media/research.google.com/en//people/jeff/Stanford-DL-Nov-2010.pdf	readings	software-engineering
 Clever Algorithms: Nature-Inspired Programming Recipes	http://www.cleveralgorithms.com/nature-inspired/index.html	textbooks	algorithms
 Type Theory and Functional Programming	https://www.cs.kent.ac.uk/people/staff/sjt/TTFP/	textbooks	computer-science	logic
-Writing a Simple Operating System - from Scratch	http://www.cs.bham.ac.uk/%7Eexr/lectures/opsys/10_11/lectures/os-dev.pdf	textbooks	operative-systems	computer-programming
+Writing a Simple Operating System - from Scratch	http://www.cs.bham.ac.uk/%7Eexr/lectures/opsys/10_11/lectures/os-dev.pdf	textbooks	operating-systems	computer-programming
 Crypto101	https://www.crypto101.io/	textbooks	computer-security
 Book of Proof	http://www.people.vcu.edu/%7Erhammack/BookOfProof/	textbooks	mathematics	logic
 How to prove it	http://users.metu.edu.tr/serge/courses/111-2011/textbook-math111.pdf	textbooks	mathematics	logic
@@ -205,3 +205,7 @@ Specifying Behavioural Features of Design Patterns in First Order Logic	https://
 Formalising Design Patterns in Predicate Logic	http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.727.6857&rep=rep1&type=pdf	papers	software-engineering	logic
 How Computers Work - Processor and Main Memory	http://www.fastchip.net/howcomputerswork/bookbpdf.pdf	readings	operating-systems	computer-architecture	electronics
 UML Cheatsheet	http://loufranco.com/wp-content/uploads/2012/11/cheatsheet.pdf	readings	software-engineering	uml	cheatsheets
+Bran's Kernel Development - A tutorial on writing kernels	http://www.osdever.net/bkerndev/Docs/intro.htm	readings	computer-programming	operating-systems	linux
+Roll your own toy UNIX-clone OS	http://www.jamesmolloy.co.uk/tutorial_html/index.html	readings	computer-programming	operating-systems	linux
+QEMU	https://github.com/qemu/qemu	websites	computer-programming	operating-systems
+MikeOS	http://mikeos.sourceforge.net/	websites	operating-systems	computer-programming

css/index.css

@@ -4,6 +4,26 @@ body{
     align-content: center;
 }
 
-.container-fluid{
+.row{
+    margin: 5px;
+}
+
+.container{
     padding: 5px;
 }
+
+
+.tag_code{
+    padding: 2px;
+    margin: 2px;
+    background-color: #f2f2f2;
+    cursor:pointer;
+}
+
+/* .tag_code.tag_on{
+    background-color: #ffffff;
+}
+
+.tag_code.tag_off{
+    background-color: #f2f2f2;
+} */

index.html

@@ -9,24 +9,39 @@
         <title>My Bookshelf</title>
 
         <link rel="stylesheet" type="text/css" href="https://rawgit.com/Pixabay/jQuery-tagEditor/master/jquery.tag-editor.css">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
         <link rel="stylesheet" type="text/css" href="css/index.css">
 
         <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
         <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script src="https://rawgit.com/Pixabay/jQuery-tagEditor/master/jquery.tag-editor.min.js"></script>
         <script src="https://rawgit.com/Pixabay/jQuery-tagEditor/master/jquery.caret.min.js"></script>
         <script src="js/classes.js"></script>
     </head>
     <body>
-        <div class="page-header">
-            <h1>My bookshelf</h1>
-        </div>
         <a href="https://github.com/MarcoFavorito/my-bookshelf"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-        <div class="container-fluid">
-            <textarea id="tagEditor"></textarea>
-            <div id="booksList"></div>
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                    <h1>My bookshelf</h1>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col" id="available-tags">
+                    Available tags:
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <textarea id="tagEditor"></textarea>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div id="booksList"></div>
+                </div>
+            </div>
         </div>
         <script>
 
@@ -125,23 +140,61 @@ <h1>My bookshelf</h1>
             }
         }
 
-        function main(text){
-            bookshelf = parseBookshelfFile(text);
-            var tags = bookshelf.tag2items.keys();
-            var tag_array = Array.from(tags);
-
+        function setup_tag_editor(tags){
             $('#tagEditor').tagEditor({
                  autocomplete: {
                      autoFocus: true,
-                     source: tag_array,
+                     source: tags,
                      minLength: 1,
                      delay: 0
                  },
                  placeholder: 'Enter tags, e.g. machine-learning, algorithms, computer-programming, papers, textbooks, websites,  ...',
                  onChange: onTagChange,
              });
 
-             onTagChange(null, null, tag_array);
+             onTagChange(null, null, tags);
+        }
+
+        function setup_tag_list(tags){
+            var container = $('#available-tags');
+            for (var tag of tags){
+                var tag_id = `#tag-${tag}`;
+                var code_tag = $(`<code id=\"${tag_id}\">${tag}</code>`);
+                code_tag.click(onclick_tag(tag));
+                code_tag.addClass("tag_code tag_off")
+                container.append(code_tag);
+                container.append(" ");
+
+            }
+
+        }
+
+        function onclick_tag(tag){
+
+            var f = function(){
+                var current_tag = tag;
+                var clicked = false;
+                return function(){
+                    if (clicked == false){
+                        $('#tagEditor').tagEditor('addTag', current_tag);
+                        clicked = true;
+                    }
+                    else{
+                        $('#tagEditor').tagEditor('removeTag', current_tag);
+                        clicked = false;
+                    }
+                };
+            }();
+            return f;
+        }
+
+        function main(text){
+            bookshelf = parseBookshelfFile(text);
+            var tags = bookshelf.tag2items.keys();
+            var tag_array = Array.from(tags);
+
+            setup_tag_editor(tag_array);
+            setup_tag_list(tag_array);
 
 
         }