Admin Dash

In this example below you will see how to do a Admin Dash with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hugofovargue, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hugofovargue ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Admin Dash</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="header">
    <div class="cell cell-lg" data-col="1">Standard Name</div>
    <div class="cell cell-sm" data-col="2">Unique ID</div>
    <div class="cell cell-sm" data-col="3">Version</div>
    <div class="cell cell-sm" data-col="4">Date Uploaded</div>
    <div class="cell cell-sm" data-col="5">Status</div>
  </div>
  <div class="row" data-row="1">
    <div class="cell cell-lg" data-colKey="1">Outpatient Letter</div>
    <div class="cell cell-sm" data-colKey="2">OUTPAT1</div>
    <div class="cell cell-sm" data-colKey="3">1.0</div>
    <div class="cell cell-sm" data-colKey="4">27th Oct 2017</div>
    <div class="cell cell-sm" data-colKey="5">Live</div>
  </div>
  <div class="row" data-row="2">
    <div class="cell cell-lg" data-colKey="1">beta</div>
    <div class="cell cell-sm" data-colKey="2">BTAE</div>
    <div class="cell cell-sm" data-colKey="3">2.0</div>
    <div class="cell cell-sm" data-colKey="4">23rd 00 00</div>
    <div class="cell cell-sm" data-colKey="5">Draft</div>
  </div>
  <div class="row" data-row="3">
    <div class="cell cell-lg" data-colKey="1">Outpatient Letter</div>
    <div class="cell cell-sm" data-colKey="2">OUTPAT1</div>
    <div class="cell cell-sm" data-colKey="3">1.0</div>
    <div class="cell cell-sm" data-colKey="4">27th Oct 2017</div>
    <div class="cell cell-sm" data-colKey="5">Live</div>
  </div>
  <div class="row" data-row="4">
    <div class="cell cell-lg">Outpatient Letter</div>
    <div class="cell cell-sm">OUTPAT1</div>
    <div class="cell cell-sm">1.0</div>
    <div class="cell cell-sm">27th Oct 2017</div>
    <div class="cell cell-sm">Live</div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hugofovargue/admin-dash-zPmGvE */
@import 'Gotham', sans-serif;

* {
  margin: 0;
  padding: 0;
  font-family: 'Gotham', sans-serif;
}

body {
  width: 50%;
  padding: 15px;
}



/*Downloaded from https://www.codeseek.co/hugofovargue/admin-dash-zPmGvE */
$('[data-col]').on('click', function() {
  const colKey = $(this).attr('data-col');
  // if Name
  switch(colKey) {
    case '1':
    case '2':
      // Sort Name or UUID alphabetically
      sortAlpha(colKey);
      break;
  }
});

function sortAlpha(colKey) {
  var values = [];
  
//   $('.row').each(function(index) {
    $('[data-colKey='+ colKey +']').each(function() {
      values.push($(this).text());
    });
  // });
  
  console.log(values);
}

Comments