diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d08b62e --- /dev/null +++ b/css/style.css @@ -0,0 +1,215 @@ +@import url('https://fonts.googleapis.com/css?family=Courgette|Roboto'); + +*{ + box-sizing: border-box; + margin:0; + padding:0; + font-family: 'Roboto', sans-serif; +} + +.flex{ + display: flex; +} + +.center{ + justify-content: center; +} + +.vCenter{ + align-items: center; +} + +.row{ + flex-direction:row; +} + +.column{ + flex-direction:column; +} + +.between{ + justify-content: space-between; +} + +.around{ + justify-content: space-around; +} + +header{ + height: 50px; + background-color: #ee5253; +} + +.logo{ + height: 100%; + margin-left: 15px; + +} + +.logo img{ + height: 70%; + margin-right:5px; +} + +.logo figurecaption{ + color:white; + font-size:1.15em; + font-family: 'Courgette', cursive; +} + +header .contentInput{ + flex:1; +} + + +header .contentInput input{ + height: 30px; + width: 30%; + border:0; + padding-left: 5px; + border-radius:3px 0 0 3px; + outline:none; + color:rgba(0,0,0,0.85); +} + +header .contentInput img{ + height: 30px; + width: 30px; + padding: 5px; + background-color: white; + border-radius:0 3px 3px 0; + cursor:pointer; +} + +main{ + height: calc(100vh - 50px); +} + +.mainContent{ + flex:1; +} + +nav{ + min-height: 100%; + width: 200px; + background-color:#222f3e; + color: white; + list-style-type: none; + padding:20px 10px; +} + +nav .perfilContent{ + width:100%; + margin-bottom: 15px; +} + +nav .perfilContent img{ + width:70%; + border-radius:150px; + object-fit: cover; + margin-bottom: 7px; +} + +nav hr{ + height: 1px; + width: 100%; + border: 1px dashed white; + margin:16px 0; +} + +nav ul{ + background-color: rgba(255,255,255,0.1); + border-radius:4px; +} + +nav ul li{ + padding:7px 10px; + cursor:pointer; + display: flex; + align-items: center; + justify-content: center; +} + +nav figure{ + font-size:14px; +} + +nav figure img{ + width:15px; + margin-right: 5px; +} + +section{ + padding: 15px 25px; + color:rgba(0,0,0,0.7); + overflow-y: auto; +} + +section:nth-child(1){ + height: 50%; + background-color: #fafafa; + +} +section:nth-child(2){ + border-left:1px solid #ddd; + height:50%; + background-color: #f3f3f3; +} + +#info{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + margin-top: 20px; +} + +#info p{ + text-align: center; +} + +#info p:not(:first-child){ + margin-left:10px; +} + +section h2{ + text-align:center; + font-size:18px; + +} + + +table{ + width: 100%; + margin-top: 20px; + border-spacing: 0; +} + +tr{ + border-bottom:1px dashed #ddd; + text-align: center; + padding: 8px 5px; + +} + +tbody tr:nth-child(even), thead tr{ + background-color: #eee; +} + +tbody tr{ + cursor:pointer; +} + +td, th{ + flex:4; + vertical-align: middle; + text-align: center; + border:0; + padding: 7px; +} + + +.cellWithoutSize{ + flex:1; +} + diff --git a/img/ballot-outline.svg b/img/ballot-outline.svg new file mode 100644 index 0000000..b383033 --- /dev/null +++ b/img/ballot-outline.svg @@ -0,0 +1 @@ + diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..5e8e1a7 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/img/perfil.svg b/img/perfil.svg new file mode 100644 index 0000000..651b41c --- /dev/null +++ b/img/perfil.svg @@ -0,0 +1,215 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/search.svg b/img/search.svg new file mode 100644 index 0000000..7a3c321 --- /dev/null +++ b/img/search.svg @@ -0,0 +1 @@ + diff --git a/img/user.svg b/img/user.svg new file mode 100644 index 0000000..04f7b43 --- /dev/null +++ b/img/user.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf631e6 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + nKey + + + +
+ +
+ + +
+
+
+ +
+
+

Lista de usuários

+ + + + + + + + + +
IDNomeEmail
+ +
+
+

Informações

+
+ +
+
+
+ + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..235bb9f --- /dev/null +++ b/js/script.js @@ -0,0 +1,230 @@ +var abaActived = 0; +var full = []; +var search = []; + +showUsersTable(); + +searchInput.onkeyup = function(){ + search = []; + if(abaActived == 0){ + full.map( + function(item, index){ + if(item.id.toString().toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.name.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.email.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1){ + search.push(item); + } + }); + mountTableUser(search); + }else{ + full.map( + function(item, index){ + if(item.id.toString().toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1 || item.title.toLowerCase().indexOf(searchInput.value.toLowerCase()) != -1){ + search.push(item); + } + }); + mountTablePublication(search); + } +} + +abaUsers.onclick = function(){ + showUsersTable(); + abaActived = 0; + searchInput.value = ""; +} + +abaPublications.onclick = function(){ + showPublicationTable(); + abaActived = 1; + searchInput.value = ""; +} + +function showUsersTable(){ + httpRequest = new XMLHttpRequest(); + + httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/users'); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.onreadystatechange = function(){ + if(httpRequest.readyState === 4){ + var data = JSON.parse(httpRequest.responseText); + titulo.innerHTML = "Lista de usuários"; + mountTableUser(data); + full = data; + } + }; + + httpRequest.send(); +} + +function showPublicationTable(){ + httpRequest = new XMLHttpRequest(); + + httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/posts'); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.onreadystatechange = function(){ + if(httpRequest.readyState === 4){ + var data = JSON.parse(httpRequest.responseText); + titulo.innerHTML = "Lista de publicações"; + mountTablePublication(data); + full = data; + } + }; + + httpRequest.send(); +} + +function mountTableUser(data){ + + var thead = document.getElementById("users-thead"); + while(thead.lastChild){ + thead.removeChild(thead.lastChild); + } + var tbody = document.getElementById("users"); + while(tbody.lastChild){ + tbody.removeChild(tbody.lastChild); + } + while(info.lastChild){ + info.removeChild(info.lastChild); + } + + if(!data.length){ + var tr = document.createElement("tr"); + var tdNothig = document.createElement("td"); + tdNothig.innerHTML = "Nenhum resultado encontrado." + tr.appendChild(tdNothig); + tbody.appendChild(tr); + } + + for(var i = 0; i