@cicciosgamino/qr-code-element
Version:
QR-Code WebComponent based on Project Nayuki Qr Code Library
155 lines (114 loc) • 3.65 kB
HTML
<!-- twitter / ig @cicciosgamino
_______ _ _
/ ____(_)_________(_)___ _________ _____ _____ ___ (_)___ ____
/ / / / ___/ ___/ / __ \/ ___/ __ `/ __ `/ __ `__ \/ / __ \/ __ \
/ /___/ / /__/ /__/ / /_/ (__ ) /_/ / /_/ / / / / / / / / / / /_/ /
\____/_/\___/\___/_/\____/____/\__, /\__,_/_/ /_/ /_/_/_/ /_/\____/
/____/
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="@cicciosgamino">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QrCode Example</title>
<style>
* {
/* reset browser defaults */
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* base rem unit (10px) */
font-size: 62.5%;
block-size: 100%;
background-color: var(--surface1);
color: var(--text1);
}
body {
padding: 7rem;
font-family: system-ui, sans-serif;
font-size: 2rem;
display: grid;
place-content: center;
gap: 5rem;
}
.text {
inline-size: 100%;
position: relative;
}
/* --------------------------------- Input ----------------------------- */
input {
border: none;
background-image: none;
background-color: transparent;
box-shadow: none;
border-bottom: 1px solid #333;
}
input, textarea {
inline-size: 100%;
padding: 1.3rem;
}
input:focus {
border-bottom: 1px solid purple;
outline: 1px solid purple;
}
input:not(:focus):valid {
background-color: transparent;
}
label {
position: absolute;
top: -3.1rem;
left: 1rem;
font-size: 1.9rem;
}
qr-code-element {
--size: 33rem;
/* neede only if you slot the center svg image */
--icon-size: 6.7rem;
}
</style>
</head>
<body>
<div class="text">
<input
id="qrtext"
type="text"
name="qrtext"
placeholder="text here ...">
<label for="qrtext">QrText</label>
</div>
<!-- grapich-element is SVG by default -->
<qr-code-element
text="Hello World">
<!-- <qr-code-element
text="Hello World"
error-correction="medium"
graphic-element="canvas"
mask-pattern="-1"> -->
<!-- center icon | set slot="icon" attribute
<svg version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" slot="icon">
<ellipse cx="24" cy="24.187" rx="24" ry="23.813" fill="#fff" stop-color="#000000" style="paint-order:stroke fill markers"/>
<path d="m14.784 13.284a1.5002 1.5002 0 0 0-1.5 1.5v18.432a1.5002 1.5002 0 0 0 1.5 1.5h18.432a1.5002 1.5002 0 0 0 1.5-1.5v-18.432a1.5002 1.5002 0 0 0-1.5-1.5zm1.5 3h15.432v15.432h-15.432zm10.074 7.0645-3.2324 4.2383-2.1348-2.7305-2.9199 3.8613h12.273z" color="#000000" style="-inkscape-stroke:none;paint-order:stroke fill markers"/>
</svg> -->
</qr-code-element>
<noscript>
Please enable JavaScript to view this website.
</noscript>
<!-- Import Js Module -->
<script type="module" src="../qr-code-element.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (e) => {
const qrText = document.getElementById('qrtext')
const qrCodeElement = document.querySelector('qr-code-element')
// get the statistics if you need
// qrCodeElement.getStatistics()
qrText.addEventListener('input', (e) => {
qrCodeElement.setAttribute('text', event.target.value)
})
})
</script>
</body>
</html>