QR Code Result As An Clickable Link + Result - javascript

found this code on https://reeteshghimire.com.np/2021/05/27/access-camera-and-read-qr-code-using-javascript/ , basically allow to scan qr code and give its results in plain text, however I wanted that the result is a clickable link for ie www.google.com/(qrcodescanresult)
<script src="html5-qrcode.min.js"></script>
<style>
.result{
background-color: green;
color:#fff;
padding:20px;
}
.row{
display:flex;
}
</style>
<div class="row">
<div class="col">
<div style="width:500px;" id="reader"></div>
</div>
<div class="col" style="padding:30px;">
<h4>SCAN RESULT</h4>
<div id="result">Result Here</div>
</div>
</div>
<script type="text/javascript">
function onScanSuccess(qrCodeMessage) {
document.getElementById('result').innerHTML = '<span class="result">'+qrCodeMessage+'</span>';
}
function onScanError(errorMessage) {
//handle scan error
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>
I tried to make the <div id="result">Result Here</div> to <div> <a id="result" href="https://www.google.com/+qrCodeMessage+"></a> </div> but its not working. The result became clickable but not with the right link/result.

success!!
<script src="html5-qrcode.min.js"></script>
<style>
.result{
background-color: green;
color:#fff;
padding:20px;
}
.row{
display:flex;
}
</style>
<div class="row">
<div class="col">
<div style="width:500px;" id="reader"></div>
</div>
<div class="col" style="padding:30px;">
<h4>SCAN RESULT</h4>
<div id="result">Result Here</div>
</div>
</div>
<script type="text/javascript"> function onScanSuccess(qrCodeMessage) { document.getElementById('result').innerHTML = ' Scanned Link Generated ' ; }
function onScanError(errorMessage) {
//handle scan error
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>

Related

jQuery Auto number based on div class

I want to use jQuery to assign a number to each row.
If the element has a hidden class, ignore it and automatically sort the number.
<style>
:before{
display:block;
margin-top:10px;
font: inherit;
}
.tc-hidden{
display:none;
}
.tc1 h3.tm-section-label:before {
content: "1";
}
.tc2 h3.tm-section-label:before {
content: "2";
}
.tc3 h3.tm-section-label:before {
content: "3";
}
.tc4 h3.tm-section-label:before {
content: "4";
}
</style>
<div class="tc-cell tc1">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc2 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc3 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc4">
<h3 class="tm-section-label"></h3>
</div>
As it is known, the last element must show the number 2
But it shows the number 4
You can loop through the .tc-cell elements and determine whether they were hidden, and dynamically adjust their tc-<n> class names:
let i = 1; // Starting index number for tc<i> class name to use
$('.tc-cell').each(function(){
// Remove all tc-<n> classes from this tc-cell
// See https://stackoverflow.com/a/5182103/378779
$(this).removeClass (function (index, className) {
return (className.match (/(^|\s)tc\d+/g) || []).join(' ');
});
// If we should not be hidden, add a class of tc<i> and increment i:
if ( ! $(this).hasClass('tc-hidden') ) {
$(this).addClass('tc' + i++);
}
});
:before{
display:block;
margin-top:10px;
font: inherit;
}
.tc-hidden{
display:none;
}
.tc1 h3.tm-section-label:before {
content: "1";
}
.tc2 h3.tm-section-label:before {
content: "2";
}
.tc3 h3.tm-section-label:before {
content: "3";
}
.tc4 h3.tm-section-label:before {
content: "4";
}
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<div class="tc-cell tc1">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc2 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc3 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc4">
<h3 class="tm-section-label"></h3>
</div>
You can remove classes of tc1 tc2 tc3 tc4 and if every item doesn't have tc-hidden you add the appropriate Class.
var count=0;
$.each($(".tc-cell"),(index,item)=>{
if(!$(item).hasClass("tc-hidden"))
$(item).addClass("tc" + ((index+1)-count));
else
count++;
});
<style>
:before{
display:block;
margin-top:10px;
font: inherit;
}
.tc-hidden{
display:none;
}
.tc1 h3.tm-section-label:before {
content: "1";
}
.tc2 h3.tm-section-label:before {
content: "2";
}
.tc3 h3.tm-section-label:before {
content: "3";
}
.tc4 h3.tm-section-label:before {
content: "4";
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tc-cell ">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell">
<h3 class="tm-section-label"></h3>
</div>

How to make it so that previous answer is displayed when number is clicked after equals in js calculator?

I need to make it so that the previous result is displayed when the user presses a num after pressing equals... how do I do it? And just fyi I am just helping my friend make the code for his calculator clean - his was very messy - if you want I can show you his code as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer'>Answer Will Come Here</p>
</div>
<div class='buttonDiv'>
<div class='button'>0</div>
<div class='button'>1</div>
<div class='button'>2</div>
<div class='button'>3</div>
<div class='button'>4</div>
<div class='button'>5</div>
<div class='button'>6</div>
<div class='button'>7</div>
<div class='button'>8</div>
<div class='button'>9</div>
<div class='equals'>=</div>
<div class='button'>c</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
</html>
<script type="application/javascript" src="/share.js"></script>
<script>
var eq = "";
var ans = eval(eq);
$('.button').click(function() {
eq += $(this).text();
$('.returnAnswer').text(eq);
});
$('.equals').click(function() {
$('.returnAnswer').text(ans);
});
</script>
This was a fun thing to do.... Here is what I have done to your code
Added some styles to the button (not important, but makes it easier to click)
Added a class named num to each number button, that will be used to reset the display if any button is clicked following '=' button.
Removed 'equals' class from '=' button and added it as an ID
Added code to clear the display when 'C' is clicked
Changed buttons 'x' to ' * ' and '÷' to '/' as otherwise eval function will not work
Changed back to 'x' and '÷', and added 2 lines inside equals.clicked to replace these with correct operators
Check the Code snippet
var eq = "";
var ans = eval(eq);
var equalsCliked = false;
$('.button').not("#equals, #cbutton").click(function () {
if ($(this).hasClass('num') && equalsCliked)
eq = "";
eq += $(this).text();
$('.returnAnswer').text(eq);
equalsCliked = false;
});
$('#equals').click(function () {
equalsCliked = true;
eq = eq.split("÷").join("/");
eq = eq.split("x").join("*");
ans = eval(eq);
eq = ans;
$('.returnAnswer').text(ans);
});
$('#cbutton').click(function () {
equalsCliked = false;
eq = "";
ans = eval(eq);
//eq = ans;
$('.returnAnswer').text("");
});
.button {
border: 1px solid gray;
padding: 8px;
margin: 3px 3px;
float: left;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer' style="width:330px; padding: 10px; min-height:20px; border: 1px solid gray; border-radius: 2px;">Answer Will Come Here</p>
</div>
<div class='buttonDiv' style="background-color:yellow; float:left; width: 330px;">
<div class='button num'>0</div>
<div class='button num'>1</div>
<div class='button num'>2</div>
<div class='button num'>3</div>
<div class='button num'>4</div>
<div class='button num'>5</div>
<div class='button num'>6</div>
<div class='button num'>7</div>
<div class='button num'>8</div>
<div class='button num'>9</div>
<div id="equals" class='button'>=</div>
<div id="cbutton" class='button'>C</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>

Check if div-container has more than one div-inner no jQuery

I need a if else function that checks if div_container has more than one div_inner inside of it with Javascript only.
Here's my example code:
var inner = document.querySelector('.inner')
var container = document.querySelector('.container').innerHTML;
if(container > '1') {
container.classList.add('test');
}
else {
// do nothing
}
.test {
color: red;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>
I only want to use Javascript. No jQuery at all.
You have to use querySelectorAll() to get all the container and loop through them to check the inner div's length:
var container = document.querySelectorAll('.container');
container.forEach(function(el){
var inner = el.querySelectorAll('.inner').length;
if(inner > 1) {
el.classList.add('test');
}
else {
// do nothing
}
});
.test {
color: red;
background-color: lightgray;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>
You can use querySelectorAll()
for (const container of document.querySelectorAll('.container')) {
if (container.querySelectorAll('.inner').length > 1) {
container.classList.add('test');
}
}
.test {
color: red;
}
<div class="container">
<div class="inner">Test</div>
</div>
<div class="container">
<div class="inner">Test</div>
<div class="inner">Test</div>
</div>

how to check if it was the last element

how can I check if it was the last div? If it was I need to remove all classes "ready"
html:
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>
js:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var x = $("div:first").addClass("ready");
var c = $("div");
$(".ready").css("display", "block");
if (c.hasClass("ready")) {
$(".ready:last").next().addClass("ready");
}
}
})
;
Looking at your code what I understand is you want display one div after each second. For that I'll suggest following approach.
First add hidden class to all divs and then remove it from first hidden div at each second.
$(function() {
$('div').addClass('hidden');
var i = setInterval(showBlock, 1000);
function showBlock() {
var x = $("div.hidden:first").removeClass("hidden");
if($("div.hidden").length == 0) {
clearInterval(i);
}
}
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="green">Green</div>
<div class="orange">Orange</div>
<div class="red">Red</div>
<div class="green">Green</div>
<div class="orange">Orange</div>
As far as I understand your problem, following solution must work in your case:
$(function() {
setInterval(showBlock, 1000);
function showBlock() {
var ready_divs = $("div.ready").length;
var total_divs = $("div").length;
if(ready_divs!=total_divs){
if(ready_divs==0){
$("div:first").addClass('ready');
}else{
$("div.ready:last").next('div').addClass('ready');
}
}else{
$("div").removeClass('ready')
}
}
});
div{
width: 20px;
height: 20px;
border:1px solid red;
}
div.ready{
border:3px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="orange"></div>
<div class="red"></div>
<div class="green"></div>
<div class="orange"></div>

Set multiple div height based on a defined div

How do I make <div A> and <div C> to have same height as <div B> in javascript/jquery?
<div id="wrapper">
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
</div>
<script>
$('#divA').css('height', $('#divB').innerHeight());
$('#divC').css('height', $('#divB').innerHeight());
</script>
Try
$("#divA, #divC").height($("#divB").height());
$("#divA, #divC").height($("#divB").height());
#divA, #divC {
height: 50px;
width:50px;
background:gold;
}
#divB {
height: 100px;
width:50px;
background:red;
}
div {
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="wrapper">
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
</div>
Try this demo : fiddle
var selDivB = $('#divB').height();
$('#divA, #divC').height(selDivB);

Categories

Resources