JSFiddle - React, Tailwind, and code Playground

by trung ken

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <br>
    <div class="row" id="courses-wrapper">
      <!-- javascript -->
    </div>
    <hr>
    <div class="row justify-content-center d-none" id="paid-wrapper">
      <div class="col-10">
        <div class="mb-4 d-flex gap-2">
          <img style="width: 220px;height: 220px;" src="" alt="" id="paid-qr-code">
          <div class="pt-4">
            <p>Tài khoản: <b id="paid-account-name"></b></p>
            <p>STK: <b id="paid-account-no"></b></p>
            <p>Số tiền: <b id="paid-price"></b> <b>VND</b></p>
            <p>Nội dung: <b id="paid-content"></b></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

JavaScript

const courses = [
      {
        id: 'course01',
        thumbnail: 'https://images.viblo.asia/e421fe25-2feb-4623-aad2-4ad915ec3b31.jpg',
        title: 'Khóa học HTML cơ bản',
        price: '399000'
      },
      {
        id: 'course02',
        thumbnail: 'https://images.viblo.asia/b49ab717-6e4e-4f51-9885-05dfeccd3df9.jpg',
        title: 'Khóa học CSS cơ bản',
        price: '499000'
      },
      {
        id: 'course03',
        thumbnail: 'https://images.viblo.asia/6b8d138b-6632-4189-9bf9-58cf47aea20c.jpg',
        title: 'Khóa học JavaScript cơ bản',
        price: '799000'
      },
    ]

    const bankInfo = {
      id: 'VPB',
      accountNo: '79983926',
      accountName: 'NGUYEN THANH TRUNG',
      template: 'compact',
    }

    function renderCourse(course) {
      return `
        <div class="col-4">
          <div class="card mb-3">
            <div style="height: 150px">
              <img src="${course.thumbnail}" class="card-img-top h-100" alt="${course.title}">
            </div>
            <div class="card-body">
              <h5 class="card-title">${course.title}</h5>
              <p>${course.price} đ</p>
              <div class="d-grid gap-2">
                <button class="btn btn-primary course-buy" data-title="${course.title}" data-price="${course.price}">
                  Mua
                </button>
              </div>
            </div>
          </div>
        </div>
      `
    }

    function renderCourses() {
      const coursesWrapper = document.querySelector('#courses-wrapper')
      let html = ''
      courses.forEach(course => html += renderCourse(course))
      coursesWrapper.innerHTML = html
    }

    renderCourses()

    const paidWrapper = document.querySelector('#paid-wrapper')
    const paidQRCode = document.querySelector('#paid-qr-code')
    const paidAccountName = document.querySelector('#paid-account-name')
    const paidAccountNo = document.querySelector('#paid-account-no')
    const paidPrice =...