C7N

// GET request
const { data } = await axios.get('/api/users');

// POST request
await axios.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
});

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{
      label: 'Sales',
      data: [120, 190, 80],
      backgroundColor: '#3b82f6'
    }]
  }
});

<!-- Image gallery -->
<a data-fancybox="gallery" href="photo-full.jpg">
  <img src="photo-thumb.jpg" alt="Photo">
</a>

<script>
  Fancybox.bind('[data-fancybox]', {
    animated: true
  });
</script>

<!-- Wrap code in pre > code with language class -->
<pre><code class="language-javascript">
  console.log('Hello world');
</code></pre>

$(document).ready(function() {
  // DOM manipulation
  $('#title').text('Hello World');

  // Event handling
  $('#btn').on('click', function() {
    $(this).toggleClass('active');
  });

  // AJAX
  $.getJSON('/api/data', function(data) {
    console.log(data);
  });
});

<!-- Requires jQuery -->
<select id="mySelect" style="width:100%">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<script>
  $('#mySelect').select2({
    placeholder: 'Choose an option',
    allowClear: true
  });
</script>

// Simple alert
Swal.fire('Success!', 'Saved.', 'success');

// Confirmation dialog
const result = await Swal.fire({
  title: 'Are you sure?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Delete'
});

// Toast notification
Swal.mixin({ toast: true, position: 'top-end', timer: 3000 })
  .fire({ icon: 'success', title: 'Done!' });

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<script>
  new Swiper('.swiper', {
    loop: true,
    pagination: { el: '.swiper-pagination' },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  });
</script>

<!-- Solid icons -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-search"></i>

<!-- Regular (outline) icons -->
<i class="far fa-heart"></i>
<i class="far fa-envelope"></i>

<!-- Brand icons -->
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>

<!-- Sizing -->
<i class="fas fa-star fa-xs"></i>     <!-- smaller -->
<i class="fas fa-star fa-lg"></i>     <!-- larger -->
<i class="fas fa-star fa-2x"></i>     <!-- 2x -->