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

href="https://blogger.googleusercontent.com/img/a/AVvXsEiE6yRyTt3Q9bZ2jPmKwXw6SsdJB8rQchg988sli3j20y8VUs8uwELe0ypZbDbnDRPJh9r0Zg_VaAdj7zQrVkPwtuEs3fSXilQ4qezDst_9mYhx5ZjyB0zkYV2LTdwDomdO7U3mL5TTpLBS8zMfk06p-gwk5rL6VZbBtDEsnvSmCiVQDgnVTxx6yESUeZU"
style="margin-left: 1em; margin-right: 1em;"
> alt="Làm ứng dụng tạo mã QR đơn giản bằng HTML, CSS và Javascript"
data-original-height="608"
data-original-width="1082"
height="360"
src="https://blogger.googleusercontent.com/img/a/AVvXsEiE6yRyTt3Q9bZ2jPmKwXw6SsdJB8rQchg988sli3j20y8VUs8uwELe0ypZbDbnDRPJh9r0Zg_VaAdj7zQrVkPwtuEs3fSXilQ4qezDst_9mYhx5ZjyB0zkYV2LTdwDomdO7U3mL5TTpLBS8zMfk06p-gwk5rL6VZbBtDEsnvSmCiVQDgnVTxx6yESUeZU=w640-h360"
title="Làm ứng dụng tạo mã QR đơn giản bằng HTML, CSS và Javascript"
width="640"
/>

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!

Các bài viết liên quan:

• 
  href="https://www.hijublog.com/2023/08/animated-login-form-don-gian-bang-html-css.html"
  target="_blank"
  >Animated Login Form đơn giản bằng HTML và CSS >
  


• 
  href="https://www.hijublog.com/2023/08/sticky-header-on-scroll-don-gian-bang-html-css-javascript.html"
  target="_blank"
  >Sticky Header On Scroll đơn giản bằng HTML, CSS và
  Javascript >
  


• 
  href="https://www.hijublog.com/2023/08/kiem-tra-do-manh-cua-mat-khau-html-css-javascript.html"
  target="_blank"
  >Password Strength Checker đơn giản bằng HTML, CSS và
  Javascript >
  


• 
  href="https://www.hijublog.com/2023/09/lam-may-tinh-bo-tui-don-gian-bang-html-css-javascript.html"
  target="_blank"
  >Làm máy tính bỏ túi đơn giản bằng HTML, CSS và Javascript >
  


• 
  href="https://www.hijublog.com/2023/09/lam-dong-ho-treo-tuong-don-gian-bang-html-css-javascript.html"
  target="_blank"
  >Làm đồng hồ treo tường đơn giản bằng HTML, CSS và
  Javascript >
  


• 
  href="https://www.hijublog.com/2023/09/cach-lam-hieu-ung-border-dep-mat-bang-html-css.html"
  target="_blank"
  >Cách làm hiệu ứng border đẹp mắt bằng HTML và CSS >
  

Bước 1: Thêm HTML

style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
><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

style="background: rgb(248, 248, 248); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"
>
style="line-height: 125%; margin: 0px;"
>@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);
}
}