diff --git a/index.html b/index.html new file mode 100644 index 0000000..c805538 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + QR Code Generator Using HTML CSS And JacaScript + + + +
+

Enter your text or URL

+ +
+ +
+ +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..dbe1e32 --- /dev/null +++ b/script.js @@ -0,0 +1,16 @@ +let imgbox = document.getElementById("imgbox"); +let qrimage = document.getElementById("qrimage"); +let qrtext = document.getElementById("qrtext"); +function generateQR(){ + + if(qrtext.value.length>0){ + qrimage.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+qrtext.value; + imgbox.classList.add("show-img"); + } + else{ + qrtext.classList.add('error'); + setTimeout(()=>{ + qrtext.classList.remove('error'); + },500); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..00a0218 --- /dev/null +++ b/style.css @@ -0,0 +1,89 @@ +*{ + margin: 0; + padding: 0; + font-family: 'poppins',sans-serif; + box-sizing: border-box; +} + +body{ + background-color: #262a2f; + +} + +.container{ + width: 400px; + padding: 25px 35px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + background: #fff; + border-radius: 10px; +} +.container p{ + font-weight: 600; + font-size: 15px; + margin-bottom: 8px; +} +.container input{ + width: 100%; + height: 50px; + border: 1px solid #494eea; + outline: 0; + padding: 10px; + margin: 10px 0 20px; + border-radius: 5px; +} +.container button{ + width: 100%; + height: 50px; + background: #494eea; + color: #fff; + border: 0; + outline: 0; + 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; +} +#imgbox img{ + width: 100%; + padding: 10px; + +} +#imgbox.show-img{ + 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); + } + +} \ No newline at end of file