Last active
March 4, 2019 17:35
-
-
Save bogdan-nourescu/af8a1bf0dea129c68d281b00c591818c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| .deleteBtn{ | |
| display:inline-block; | |
| width:30px; | |
| height:30px; | |
| background-position:center; | |
| background-repeat:no-repeat; | |
| background-size: contain; | |
| background-image:url("627249-delete3-512.png") | |
| } | |
| .editBtn{ | |
| display:inline-block; | |
| width:30px; | |
| height:30px; | |
| background-position:center; | |
| background-repeat:no-repeat; | |
| background-size: contain; | |
| background-image:url("edit-icon.png") | |
| } | |
| .description{ | |
| position:relative; | |
| } | |
| .description>*{ | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .name{ | |
| white-space: nowrap; | |
| } | |
| .tags>span{ | |
| border:1px solid orange; | |
| border-radius:15px; | |
| padding:1px 5px; | |
| white-space: nowrap; | |
| } | |
| svg{ | |
| vertical-align: middle; | |
| width:20px; | |
| height:20px; | |
| } | |
| table{ | |
| border-collapse:collapse; | |
| } | |
| </style> | |
| <script> | |
| var lista=[ | |
| { | |
| "name":"12 Concepts", | |
| "link":"https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104", | |
| "description":"12 Concepts That Will Level Up Your JavaScript Skills", | |
| "tags":["JS","Closures","Destructuring","Spread Syntax","Callback Functions","Promises","Async Await"], | |
| "complexity":0, | |
| }, | |
| { | |
| "name":"13 Concepts", | |
| "link":"https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104", | |
| "description":"13 Concepts That Will Level Up Your JavaScript Skills", | |
| "tags":["Callback Functions","Promises","Async Await"], | |
| "complexity":1, | |
| }, | |
| { | |
| "name":"13 Concepts", | |
| "link":"https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104", | |
| "description":"13 Concepts That Will Level Up Your JavaScript Skills", | |
| "tags":["Callback Functions","Promises","Async Await"], | |
| "complexity":3, | |
| }, | |
| { | |
| "name":"13 Concepts", | |
| "link":"https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104", | |
| "description":"13 Concepts That Will Level Up Your JavaScript Skills", | |
| "tags":["Callback Functions","Promises","Async Await"], | |
| "complexity":4, | |
| }, | |
| { | |
| "name":"13 Concepts", | |
| "link":"https://hackernoon.com/12-javascript-concepts-that-will-level-up-your-development-skills-b37d16ad7104", | |
| "description":"13 Concepts That Will Level Up Your JavaScript Skills", | |
| "tags":["Callback Functions","Promises","Async Await"], | |
| "complexity":2, | |
| } | |
| ]; | |
| var idxEdit = null; | |
| var complexityColors=["yellow","orange","red","darkred","black"] | |
| function draw(){ | |
| var str = ""; | |
| for(var i=0;i<lista.length;i++){ | |
| var spans = ""; | |
| for(var j=0;j<lista[i].tags.length;j++){ | |
| spans+=`<span>${lista[i].tags[j]}</span>` | |
| } | |
| str+=` | |
| <tr> | |
| <td class="name"> | |
| <svg style="fill:${complexityColors[lista[i].complexity]};" viewBox="0 0 100 100"><path d="M96.674,40.998c-0.018-0.042-0.048-0.077-0.09-0.1c-2.16-1.22-4.451-1.839-6.809-1.839c-3.1,0-6.219,1.092-9.268,3.244 c-0.248,0.174-0.537,0.266-0.838,0.266c-0.474,0-0.918-0.23-1.19-0.616c-0.462-0.655-0.306-1.564,0.351-2.027 c3.653-2.579,7.025-3.832,10.307-3.832c1.604,0,3.234,0.299,4.988,0.917c0.083,0.029,0.176,0.002,0.23-0.067 c0.057-0.07,1.369-1.779,0.662-5.938c-0.313-1.494-0.887-2.714-1.699-3.615c-1.637-2.077-3.297-2.513-4.402-2.513 c-0.686,0-1.12,0.171-1.139,0.178c-0.04,0.016-0.074,0.044-0.097,0.082c-1.588,2.497-3.431,4.174-6.798,6.189 c-0.227,0.135-0.484,0.206-0.746,0.206c-0.51,0-0.987-0.271-1.249-0.708c-0.412-0.688-0.187-1.583,0.501-1.995 c4.064-2.432,5.68-4.031,6.658-6.599c0.494-1.812-0.115-4.256-1.412-5.676l-0.26-0.319c-1.475-1.815-4.216-5.194-11.146-6.969 c-0.962-0.306-1.944-0.461-2.92-0.461c-2.824,0-4.666,1.271-4.743,1.325c-0.076,0.053-0.107,0.15-0.078,0.237 c0.275,0.808,1.113,3.266,0.26,6.018c-0.189,0.613-0.749,1.024-1.389,1.024c-0.146,0-0.291-0.021-0.432-0.065 c-0.765-0.238-1.195-1.054-0.957-1.82c0.565-1.823,0.444-3.433-0.369-4.92c-1.063-1.946-2.537-3.256-4.497-4.003 c-1.871-0.796-4.836-0.973-6.032-1.012c-7.705,0.042-13.198,0.538-20.15,3.025c-0.89,0.29-1.584,0.873-1.955,1.64 c-0.438,0.908-0.428,2.04,0.031,3.273c0.006,0.015,0.022,0.065,0.05,0.145c0.538,1.574,1.064,2.986,1.564,4.199 c0.148,0.359,0.148,0.754-0.001,1.113c-0.149,0.358-0.429,0.638-0.788,0.786c-0.178,0.073-0.364,0.11-0.554,0.11 c-0.587,0-1.115-0.354-1.346-0.901c-0.417-0.995-1.716-4.25-1.728-4.28c-0.024-0.064-0.626-1.574-2.565-1.574 c-1.456,0-3.263,0.867-5.366,2.575c-2.797,2.167-4.225,4.13-4.245,5.833c-0.014,1.201,0.703,1.796,0.753,1.835 c0.577,0.368,3.712,2.758,5.022,4.217c0.548,0.609,0.53,1.515-0.041,2.061c-0.272,0.26-0.629,0.403-1.005,0.403 c-0.401,0-0.774-0.16-1.051-0.449c-3.252-3.397-5.918-5.05-8.152-5.05c-0.314,0-0.622,0.034-0.916,0.101 c-0.867,0.199-2.273,1.198-3.119,2.514c-2.983,3.876-3.957,6.917-4.232,12.121c-0.166,3.115,0.675,6.155,1.619,7.476 c1.327,1.856,2.669,2.907,3.178,3.275c0,0,0.409,0.26,0.565,0.138c1.328-1.043,2.849-1.591,4.716-1.591 c1.117,0,2.38,0.188,3.754,0.56c0.364,0.099,0.668,0.337,0.855,0.671c0.192,0.342,0.239,0.755,0.128,1.132 c-0.18,0.616-0.753,1.046-1.396,1.046c-0.138,0-0.275-0.021-0.408-0.059c-0.96-0.28-1.856-0.399-2.662-0.423 c-0.794-0.021-2.242,0.054-2.898,0.795c-0.03,0.034-0.057,0.068-0.067,0.111c-0.009,0.041-0.164,3.581,4.875,5.387 c4.232,1.516,6.432,1.566,15.629,1.566c1.356,0,2.848-0.014,4.693-0.045c0.465-0.013,1.124-0.242,1.544-0.729 c0.32-0.37,0.457-0.834,0.396-1.319c-0.005-0.781,0.116-1.494,0.384-2.244c1.102-3.088,3.321-5.104,7.196-6.541 c0.164-0.061,0.333-0.092,0.506-0.092c0.605,0,1.152,0.382,1.363,0.95c0.135,0.364,0.121,0.759-0.042,1.112 c-0.162,0.354-0.451,0.622-0.815,0.758c-2.963,1.099-4.788,2.669-5.426,4.666c-1.075,3.37,1.413,7.07,1.443,7.1 c7.405,7.257,21.792,7.464,22.515,5.45c0.609-1.495,1.028-3.868-0.441-6.687c-2.301-4.414-10.107-4.688-10.186-4.692 c-0.801-0.022-1.436-0.693-1.413-1.492c0.021-0.78,0.675-1.415,1.489-1.415l0,0c0.391,0.011,9.591,0.313,12.688,6.255 c1.682,3.225,1.445,6.095,0.949,7.94c-0.119,0.495-0.029,0.995,0.24,1.338c0.172,0.216,0.493,0.474,1.063,0.474 c0,0,5.096,0.033,9.26-0.833c0.563-0.116,1.1,0.3,1.188,0.865c0.088,0.567-0.301,1.099-0.867,1.187 c-6.111,0.956-11.469,1.434-16.12,1.434c-5.62,0-10.209-0.699-13.853-2.098c0.062,2.569,0.935,4.809,2.522,6.642 c0.01,0.015,0.019,0.026,0.028,0.04c0.529,0.557,1.322,1.345,2.046,2.005c0.554,0.505,3.175,2.175,3.857,2.587 c1.316,0.768,7.3,4.45,7.875,4.82c2.634,1.697,3.414,3.539,3.496,3.649c0.281,0.372,0.426,1.476,0.426,1.476 c0.238,0.99,1.131,1.726,2.195,1.723c1.243-0.003,2.25-1.014,2.246-2.258c0,0,0.035-2.529-0.951-4.262 c-0.158-0.321-2.233-3.721-4.628-5.568c-0.727-0.561-2.442-1.815-2.442-1.815l-0.01-0.005c-0.195-0.133-0.256-0.395-0.131-0.598 c0.127-0.206,0.398-0.272,0.607-0.145c0,0,5.053,3.549,8.221,2.666c4.656-1.297,10.75-4.359,10.75-11.249 c0-1.024-0.102-1.987-0.296-2.894c0.646-0.344,1.288-0.733,1.929-1.18c0.752-0.602,0.976-1.348,1.031-1.868 c0.078-0.744-0.137-1.532-0.562-2.052l-3.068-3.951l-0.036-0.039c-0.639-0.812-1.475-0.982-2.065-0.982 c-0.503,0-0.897,0.121-1.108,0.201c-1.078,0.544-2.214,0.99-3.371,1.325c-0.762,0.219-1.585-0.244-1.801-0.994 c-0.107-0.373-0.064-0.766,0.123-1.106c0.188-0.34,0.496-0.586,0.87-0.693c2.64-0.763,7.403-2.869,9.661-8.402 c0.223-0.55,0.752-0.905,1.348-0.905c0.188,0,0.372,0.036,0.547,0.108c0.743,0.302,1.102,1.153,0.798,1.896 c-0.724,1.775-1.716,3.382-2.966,4.804c-0.57,0.92-0.496,1.873,0.234,2.922l2.004,2.604c0.027,0.037,0.064,0.063,0.107,0.074 c0.033,0.01,0.816,0.231,1.934,0.231c1.506,0,3.637-0.409,5.232-2.363c3.898-4.661,4.088-8.694,4.225-11.639 c0.015-0.293,0.027-0.578,0.044-0.882C98.668,42.479,97.29,41.384,96.674,40.998z M36.965,39.066 c-1.875,1.853-3.944,3.217-6.147,4.056c-0.025,0.009-0.046,0.023-0.064,0.041c-1.014,0.551-1.368,1.311-1.179,2.537l0.835,4.753 c0.075,0.381-0.003,0.769-0.22,1.091s-0.545,0.542-0.927,0.616c-0.785,0.155-1.556-0.374-1.708-1.146l-0.91-5.13 c-0.278-1.078-1.313-1.648-1.984-1.724c-0.027-0.015-0.059-0.024-0.093-0.025c-7.229-0.261-13.015-4.931-13.073-4.978 c-0.3-0.247-0.487-0.595-0.526-0.981c-0.038-0.386,0.077-0.765,0.322-1.065c0.277-0.339,0.688-0.533,1.126-0.533 c0.333,0,0.66,0.116,0.919,0.328c0.219,0.178,5.435,4.361,11.695,4.361c3.694,0,7.022-1.437,9.891-4.269 c0.552-0.546,1.51-0.541,2.056,0.013c0.273,0.276,0.422,0.643,0.419,1.031C37.396,38.429,37.242,38.793,36.965,39.066z M38.882,28.967c-4.545,0-7.796,2.812-7.933,2.931c-0.266,0.233-0.606,0.362-0.959,0.362c-0.419,0-0.818-0.18-1.093-0.494 c-0.256-0.292-0.384-0.666-0.358-1.054c0.024-0.387,0.199-0.742,0.491-0.998c1.991-1.75,5.635-3.619,9.889-3.619 c3.065,0,5.996,0.972,8.712,2.89c0.317,0.224,0.528,0.558,0.594,0.941c0.066,0.382-0.021,0.768-0.245,1.085 c-0.272,0.386-0.717,0.616-1.189,0.616c-0.301,0-0.59-0.092-0.837-0.267C43.705,29.772,41.325,28.967,38.882,28.967z M72.535,49.581 c-0.25,0.298-0.601,0.48-0.987,0.514c-6.263,0.549-10.929-0.831-13.767-4.08c-0.443-0.506-0.849-1.073-1.205-1.685 c-0.008-0.015-0.02-0.029-0.031-0.042c-0.377-0.379-0.893-0.582-1.535-0.605c-0.227-0.008-0.467,0.006-0.734,0.044 c-0.029-0.006-1.84,0.392-3.618,0.333c-4.008-0.132-6.585-2.011-6.692-2.09c-0.646-0.476-0.783-1.388-0.307-2.034 c0.284-0.387,0.742-0.608,1.222-0.59c0.291,0.01,0.569,0.106,0.806,0.279c0.081,0.058,2.017,1.343,5.049,1.523 c1.466,0.087,2.904-0.376,3.079-0.45c1.121-0.471,1.079-1.714,1.024-2.195c-0.238-2.811,0.26-5.053,0.28-5.148 c0.173-0.769,0.962-1.274,1.739-1.098c0.779,0.177,1.273,0.955,1.098,1.736c-0.014,0.063-1.338,6.288,2.026,10.122 c2.197,2.503,6.026,3.548,11.313,3.083c0.816-0.068,1.507,0.532,1.575,1.322C72.903,48.906,72.785,49.283,72.535,49.581z M71.393,27.072c-2.604,2.497-3.887,6.469-3.265,10.121c0.122,0.711-0.359,1.389-1.069,1.51c-0.074,0.013-0.149,0.019-0.223,0.019 c-0.639,0-1.211-0.453-1.288-1.089c-0.478-3.902,0.785-7.504,0.8-7.541c0.084-0.205,0.095-0.383,0.031-0.529 c-0.076-0.18-0.25-0.279-0.385-0.332c-3.904-0.432-10.935-1.918-14.2-7.014c-0.503-0.741-1.819-0.361-3.95-0.364 c-9.574-0.016-10.931-6.165-10.984-6.427c-0.069-0.342-0.001-0.692,0.192-0.983c0.193-0.292,0.487-0.491,0.83-0.56 c0.086-0.018,0.174-0.027,0.261-0.027c0.613,0,1.151,0.436,1.28,1.036c0.041,0.176,1.091,4.34,8.443,4.34 c0.364,0,0.743-0.01,1.126-0.031c0.845-0.103,1.318-0.548,1.441-1.358c0.121-2.833,2.255-4.939,3.497-5.736 c0.211-0.136,0.455-0.208,0.705-0.208c0.449,0,0.861,0.225,1.104,0.602c0.189,0.294,0.252,0.644,0.177,0.985 c-0.075,0.342-0.278,0.634-0.571,0.823c-0.135,0.089-3.305,2.208-1.962,5.336c2.418,5.634,10.642,6.83,14.065,7.082 c0.432-0.034,0.924-0.292,1.346-0.708c0.289-0.333,0.54-0.601,0.789-0.839c3.327-3.189,3.526-6.311,3.533-6.442 c0.037-0.72,0.652-1.28,1.367-1.243c0.715,0.032,1.275,0.639,1.248,1.353C75.725,19.022,75.523,23.114,71.393,27.072z"></path></svg> | |
| <a target="_blank" href="${lista[i].link}" > | |
| ${lista[i].name} | |
| </a> | |
| </td> | |
| <td class="description"><span>${lista[i].description}</span></td> | |
| <td class="tags">${spans}</td> | |
| <td style="white-space:nowrap;"> | |
| <div class="editBtn" onclick="edit(${i});"></div> | |
| <div class="deleteBtn" onclick="del(${i});"></div> | |
| </td> | |
| </tr> | |
| `; | |
| } | |
| document.querySelector("table tbody").innerHTML=str; | |
| showTable(); | |
| } | |
| function showTable(){ | |
| document.querySelector("form").style.display="none"; | |
| document.querySelector("table").style.display=""; | |
| } | |
| function del(idx){ | |
| if(confirm(`are you sure you want to delete ${lista[idx].name}?`)){ | |
| lista.splice(idx,1); | |
| draw(); | |
| } | |
| } | |
| function showAddForm(){ | |
| document.querySelector("form").reset(); | |
| document.querySelector("form").style.display=""; | |
| document.querySelector("table").style.display="none"; | |
| } | |
| function add(){ | |
| var el = {}; | |
| /* | |
| var els = document.querySelectorAll('[name]'); | |
| for(var i=0;i<els.length;i++){ | |
| var val = els[i].value; | |
| var name = els[i].getAttribute("name"); | |
| el[name]=val; | |
| } | |
| */ | |
| el.name = document.querySelector('[name="name"]').value; | |
| el.link = document.querySelector('[name="link"]').value; | |
| el.description = document.querySelector('[name="description"]').value; | |
| el.tags = document.querySelector('[name="tags"]').value.split(/[\n\r]+/g); | |
| el.complexity = parseInt(document.querySelector('[name="complexity"]').value); | |
| if(idxEdit===null){ | |
| lista.push(el); | |
| }else{ | |
| lista[idxEdit] = el; | |
| idxEdit = null; | |
| } | |
| draw(); | |
| } | |
| function edit(idx){ | |
| showAddForm(); | |
| idxEdit = idx; | |
| var el = lista[idx]; | |
| document.querySelector('[name="name"]').value = el.name; | |
| document.querySelector('[name="link"]').value = el.link; | |
| document.querySelector('[name="description"]').value= el.description; | |
| document.querySelector('[name="tags"]').value = el.tags.join("\r\n"); | |
| document.querySelector('[name="complexity"]').value = String(el.complexity); | |
| } | |
| </script> | |
| </head> | |
| <body onload="draw();"> | |
| <button onclick="showAddForm();">ADD</button> | |
| <form onsubmit="event.preventDefault();add();" style="display:none;"> | |
| <label>Name:<input type="text" name="name" /></label><br /> | |
| <label>Link:<input type="text" name="link" /></label><br /> | |
| <label>Description:<textarea name="description"></textarea></label><br /> | |
| <label>Tags:<textarea name="tags"></textarea></label><br /> | |
| <label>Complexity: | |
| <select name="complexity"> | |
| <option value="0">Basic</option> | |
| <option value="1">Simple</option> | |
| <option value="2">Medium</option> | |
| <option value="3">Advanced</option> | |
| <option value="4">Guru</option> | |
| </select> | |
| </label><br /> | |
| <input type="submit" "ADD"/><input type="button" value="Cancel" onclick="showTable();"/> | |
| </form> | |
| <table border="1" style="width: 100%;"> | |
| <thead> | |
| <tr> | |
| <td style="width:20%;">Nume</td> | |
| <td style="width:30%;">Descriere</td> | |
| <td style="">Taguri</td> | |
| <td style="width:60px;"></td> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment