How To Make QR Code Generator Website Using HTML CSS And JavaScript

Làm ứng dụng tạo mã QR đơn giản bằng HTML, CSS và Javascript

Chào mọi người,

Hôm nay, chúng ta sẽ bắt đầu một cuộc hành trình thú vị vào thế giới của lập trình web bằng HTML, CSS và JavaScript để tạo ra một ứng dụng đơn giản nhưng hữu ích: một ứng dụng tạo mã QR (Quick Response code). Mã QR đã trở thành một phần quan trọng của cuộc sống hàng ngày, giúp chúng ta chia sẻ thông tin một cách nhanh chóng và dễ dàng. Và chúng ta sẽ tạo ra một ứng dụng riêng của chúng ta để tạo mã QR một cách tự động.

Trong hướng dẫn này, chúng ta sẽ sử dụng HTML để xây dựng giao diện người dùng, CSS để thiết kế và trang trí ứng dụng của mình, và JavaScript để tạo mã QR dựa trên dữ liệu người dùng cung cấp. Điều tuyệt vời là bạn không cần kiến thức lập trình nâng cao để bắt đầu. Chúng ta sẽ đi từng bước một để tạo nên ứng dụng này.

Hãy cùng nhau khám phá và học cách tạo ứng dụng tạo mã QR đơn giản bằng HTML, CSS và JavaScript!

Bước 1: Thêm HTML


<div class="container">
  <p>Enter your text or URL</p>
  <input type="text" placeholder="Text or URL" id="qrText" />

  <div id="imgBox">
    <img src="" alt="qrImage" id="qrImage" />
  </div>
  <button onclick="generateQR()">Generate QR Code</button>
</div>

Bước 2: Thêm CSS


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #242424;
}

.container {
    position: relative;
    width: 400px;
    padding: 25px 35px;
    background-color: #fff;
    border-radius: 10px;
}

.container p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.container input {
    width: 100%;
    height: 50px;
    border: 1px solid #494eea;
    outline: none;
    padding: 10px;
    margin: 10px 0 20px;
    border-radius: 5px;
}

.container button {
    width: 100%;
    height: 50px;
    background-color: #494eea;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin: 20px 0;
    font-weight: 500;
}

#imgBox {
    width: 200px;
    border-radius: 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease;
}

#imgBox img {
    width: 100%;
    padding: 10px;
}

#imgBox.show {
    max-height: 300px;
    margin: 10px auto;
    border: 1px solid #d1d1d1;
}

.error {
    animation: shake 0.1s linear 10;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(0);
    }
}

Bước 3: Thêm Javascript


const imgBox = document.querySelector("#imgBox");
const qrImage = document.querySelector("#qrImage");
const qrText = document.querySelector("#qrText");

function generateQR() {
  if (qrText.value.length > 0) {
    fetch(
      `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${qrText.value}`
    )
      .then((res) => {
        const { url } = res;
        qrImage.src = url;
        imgBox.classList.add('show');
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    qrText.classList.add("error");
    setTimeout(() => {
      qrText.classList.remove("error");
    }, 500);
  }
}

Full tutorial:


Hoàn thành

Cuối cùng, chúng ta đã hoàn thành hướng dẫn về cách tạo ứng dụng tạo mã QR đơn giản bằng HTML, CSS và JavaScript. Hy vọng rằng bạn đã tận hưởng quá trình học và đã có được kiến thức và kỹ năng mới trong lĩnh vực phát triển web.

Ứng dụng tạo mã QR có thể là một công cụ hữu ích trong cuộc sống hàng ngày của bạn, và nó cũng là một ví dụ tuyệt vời về cách bạn có thể kết hợp HTML, CSS và JavaScript để tạo ra các ứng dụng web tùy chỉnh theo ý muốn của bạn. Hãy sáng tạo và mở rộng ứng dụng này bằng cách thêm các tính năng mới hoặc cải thiện giao diện để phù hợp với nhu cầu của bạn.

Nếu bạn còn bất kỳ câu hỏi nào hoặc muốn chia sẻ kết quả của mình, đừng ngần ngại liên hệ hoặc để lại bình luận. Chúng tôi luôn sẵn sàng giúp đỡ và lắng nghe ý kiến của bạn.

Chúc mọi người thành công trong việc phát triển các ứng dụng web và hi vọng bạn tận hưởng cuộc hành trình này! Hẹn gặp lại trong những hướng dẫn và dự án tiếp theo.

No comments:

Powered by Blogger.