Demos Back to Demos

Top Tech Conferences in 2019

13 of 25

Navigate through most sought after tech conferences of 2019 with filtering, paging and sorter

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      caption="Top Tech Conferences in 2019"
      layout="row"
      layout-controls
      pager
      page-size="5"
      sort
      filter
      src="https://zinggrid-examples.firebaseio.com/2019-tech-conferences"
    >
      <zg-colgroup>
        <zg-column index="conferenceName">
          <strong>[[index.conferenceName]]</strong>
        </zg-column>
        <zg-column index="description" width="400"></zg-column>
        <zg-column index="location"></zg-column>
        <zg-column index="startDate" type="date"></zg-column>
        <zg-column index="url" type="url" header="Website" filter="disabled" sort="disabled">
          <a href="[[index.url]]" target="_blank" crossorigin>View <i class="fas fa-external-link-alt"></i></a>
        </zg-column>
        <zg-column index="categories" renderer="renderCat"></zg-column>
      </zg-colgroup>
      <zg-source>
        This dataset is based on Bizzabo Blog's <a href="https://blog.bizzabo.com/technology-events" target="_blank" crossorigin>2019 Tech Conferences: The #1 Tech Events Guide</a>  
      </zg-source>
    </zing-grid>
  </body>
</html>

CSS

html, body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-marketing.appspot.com/o/landing-pages%2Ffront-end-focus-landing-page%2Fgeometry.png?alt=media&token=1a26b9e0-881c-4c45-bff9-6722d1f08942');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	padding: var(--padding-y);
}

zing-grid {
  --theme-color-primary: #589EF8;
	--zg-cell-height: 100px;
  --zg-icon-width: 15px;
  --zg-icon-color: #589EF8;
  --zg-select-arrow-color: #ffffff;

	margin: 0 auto;
  max-width: 1100px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12px;
  min-height: 800px;
	text-align: left;
  line-height: 1.4;
}


zing-grid strong {
  color: 143947;
}
zg-caption {
  background: #143947;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
}
zg-head-cell {
	font-size: 12px;
  font-weight: bold;
  color: #143947;
}
zg-control-bar {
 	background: #143947; 
}
zg-body a {
  text-decoration: none;
  font-weight: bold;
  color: #589EF8;
}
zg-body a:hover {
  color: #dc1257;
}
/*zg-column[index="description"] {
	width: 200px !important;
}*/
[viewport="tablet-portrait"] zg-body[layout="card"] {
  --zg-card-columns: 33.33%;
}
zg-body[layout="card"] zg-cell:nth-child(2) {
  padding-top: 15px;
  padding-bottom: 15px;
  min-height: 200px;
}
zg-pager,
zg-footer,
zg-source,
zg-watermark {
  background: #143947;
  color: #ffffff;
}

zg-source {
  padding: 20px;
  text-align: center;
  letter-spacing: .05em;
  font-size: 12px;
}

zg-footer a {
 font-weight: bold;
  text-decoration: none;
  color: #589EF8;
}
zg-footer a:hover {
  color: #dc1257;
}
.category {
  font-size: 11px;
  border: 1px solid #589EF8;
  background: #589EF8;
  padding: 5px 5px;
  margin: 10px 5px;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
}
.category:hover {
  background: #dc1257;
  border: 1px solid #dc1257;
}


/* MEDIA QUERIES (MIN)
--------------------------- */

@media screen and (min-width:768px) {
  :root {
    --padding-y: 3.125rem;
  }
}


/* MEDIA QUERIES (MAX)
--------------------------- */

@media screen and (max-width:767px) {
  :root {
    --padding-y: 2rem;
  }
}

JS

// VARS
// ----------------------------------
const zgRef = document.querySelector('zing-grid')
const buttonEl = document.createElement('span');
let button;

// RENDERERS
// ----------------------------------
// CATEGORIES
function renderCat(val) {
  // For each cell value, create a button and add to wrapper
  const wrapEl = document.createElement('div');
  val.forEach(v => createButton(v, wrapEl) );
  // Render button wrapper
  return wrapEl;
}

// CREATE BUTTON
// ----------------------------------
function createButton(value, ref) {
  // Clone new button instance
  button = buttonEl.cloneNode(true);
  // Add CSS class
  button.classList.add('category');
  // Add button value text
  button.textContent = value;
  // Add button click event listener
  button.addEventListener('click', e => zgRef.filterColumn('categories', value));
  // Add new button to button wrapper
  ref.appendChild(button);
}

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio