From dd380686f394b6394ba89bc9038fdf95465f4505 Mon Sep 17 00:00:00 2001 From: Kumar Anirudha Date: Sat, 2 Nov 2019 05:43:06 +0530 Subject: [PATCH] editor improved. url support added --- css/editor.css | 106 ++++++++++++++++++++++++++++++++++++++++++++++--- editor.html | 25 ++++++++---- js/editor.js | 40 ++++++++++++++++--- js/main.js | 14 +++---- 4 files changed, 160 insertions(+), 25 deletions(-) diff --git a/css/editor.css b/css/editor.css index 7938258..2a1c2e5 100644 --- a/css/editor.css +++ b/css/editor.css @@ -51,12 +51,12 @@ section .main { } img { - width: 70%; - height: 70%; + width: 100%; + height: 100%; background-cover: contain; background-repeat: no-repeat; background-size: 100% 100%; - filter: brightness(var(--brightness)) contrast(var(--contrast)) blur(var(--blur)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)) invert(var(--invert)); + /*filter: brightness(var(--brightness)) contrast(var(--contrast)) blur(var(--blur)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)) invert(var(--invert));*/ } section .filters { @@ -77,6 +77,7 @@ section .filters { display: flex; justify-content: center; align-items: center; + margin-top: 50px; } .search__box input { @@ -86,6 +87,7 @@ section .filters { font-size: 1rem; color: #e4e4e4; outline: none; + box-shadow: none !important; } .go { @@ -158,7 +160,99 @@ a:hover{ } #qrcode { - width: 500px; - height: 500px; - margin-top: 50px; + max-width: 500px; + max-height: 500px; + margin: 10px 50px 10px 50px; +} + +.vertical-row { + display: grid; +} + +.download-btn { + margin: 1rem .5rem; + border: 2px solid black; + background-color: white; + padding: 14px 28px; + font-size: 16px; + cursor: pointer; + border-color: #2196F3; + color: dodgerblue; +} + +.download-btn:hover { + background: #2196F3; + color: white; +} + +/* DropDown */ +.dropbtn { + background-color: #4CAF50; + color: white; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + min-width: 250px; +} + +/* The container
- needed to position the dropdown content */ + +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 100%; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; +} + +/* Links inside the dropdown */ + +.dropdown-content span { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ + +.dropdown-content span:hover { + background-color: #f1f1f1; + cursor: pointer; +} + +/* Show the dropdown menu on hover */ + +.dropdown:hover .dropdown-content { + display: block; +} + +/* Change the background color of the dropdown button when the dropdown content is shown */ + +.dropdown:hover .dropbtn { + background-color: #3e8e41; +} + +/* Hide all filter content */ +#message, #url { + display: none; +} + +.editor-h2 { + margin-left: 50px; + color: #707070; + font-size: 25px; +} + +.error { + border-color: #ff0000 !important; } diff --git a/editor.html b/editor.html index bd8d535..f26856c 100644 --- a/editor.html +++ b/editor.html @@ -16,12 +16,11 @@ - -
+
@@ -87,25 +86,37 @@
-->
-
+
-

Generate QR Code

+

Generate QR Code

+

Generate and print QR code of your choice:

- Download as PNG - +
+ Download as PNG + +
+
+ +
+ Text + URL + +
+
- + +
diff --git a/js/editor.js b/js/editor.js index e604816..79599a8 100644 --- a/js/editor.js +++ b/js/editor.js @@ -1,5 +1,35 @@ -function update(e) { - if (e.keyCode == 0){ - document.getElementsByClassName('.btn').disabled = true; - }; -} \ No newline at end of file +// function update(e) { +// if (e.keyCode == 0){ +// document.getElementsByClassName('.btn').disabled = true; +// }; +// } + +$('.drop-btn').click(function () { + $('.filter-box').val(''); + $('.filter-box').hide(); + let el = $(this).attr('id').replace('drop-', ''); + $('.dropbtn').html($(this).text()); + $('#'+el).show(); +}); + +$('#url').keyup(function() { + if (validURL($(this).val())) { + $(this).removeClass('error'); + } + else { + $(this).addClass('error'); + } + // else { + // $(this).attr('border-color', 'unset'); + // } +}); + +function validURL(str) { + var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator + return !!pattern.test(str); +} diff --git a/js/main.js b/js/main.js index 1a6c763..76e44f7 100644 --- a/js/main.js +++ b/js/main.js @@ -1,8 +1,8 @@ $(document).ready(function() { - if($('#message').val().trim() == ""){ + // if($('#message').val().trim() == ""){ $('#downloadPDF').hide(); $('#downloadButton').hide(); - } + // } // Test for placeholder support $.support.placeholder = (function() { var i = document.createElement('input'); @@ -53,15 +53,15 @@ $(document).ready(function() { var qrcode = new QRCode("qrcode"); -function makeCode() { - var elText = $('#message').val(); +function makeCode(elText) { + // var elText = $('#message').val(); if (!elText) { // console.log("Input a text"); elText.focus(); return; } qrcode.makeCode(elText); - + } function downloadCodePNG(){ @@ -79,12 +79,12 @@ function downloadCodePDF(){ doc.save(); } -$('#message').keyup(function() { +$('.filter-box').keyup(function() { const messageValue = $(this).val(); if(messageValue.trim() != ""){ $('#downloadPDF').show(); $('#downloadButton').show(); - makeCode(); + makeCode(messageValue); downloadCodePNG(); }else{ $('#downloadPDF').hide();