So I have this code for a password generator with reCAPTCHA as a term of use.
this is the code:
<!DOCTYPE html>
<html>
<head>
<style>
#password-container {
width: 500px;
margin: 0 auto;
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
border: 2px solid black;
border-radius: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
background-color: blue;
color: white;
cursor: pointer;
}
</style>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div id="password-container">
<div id="password">Press the button to generate new password</div>
<button id="generate-button">new password</button>
<button id="copy-button" style="display: none;">copy to clipboard</button>
<br><br>
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
</div>
<script>
function generatePassword() {
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
const numbers = "0123456789";
const symbols = "!##$%^&*()_+-=[]{};:'\"\\|,.<>/?`~";
let password = "";
for (let i = 0; i < 8; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
for (let i = 0; i < 2; i++) {
password += numbers.charAt(Math.floor(Math.random() * numbers.length));
}
for (let i = 0; i < 2; i++) {
password += symbols.charAt(Math.floor(Math.random() * symbols.length));
}
return password;
}
document.querySelector("#generate-button").addEventListener("click", function() {
const password = generatePassword();
document.querySelector("#password").innerHTML = password;
document.querySelector("#copy-button").style.display = "inline-block";
});
document.querySelector("#copy-button").addEventListener("click", function() {
const password = document.querySelector("#password").innerHTML;
navigator.clipboard.writeText(password).then(function() {
alert("copied to clipboard");
});
});
</script>
</body>
</html>
When pressing on the "New password" button, the password is generated even when the reCAPTCHA isn't solved.
how can I make code follow the right order?
I think the code is pretty self explanatory.
Related
I'm using react-native-webview and another page I can render a static webview like this:
return `<html>
<head>
<style>
.t-center{
text-align: center;
</style>
</head>
<body>
<div class="t-center">
<h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
<h1>0000000</h1>
</div>
</body>
</html>`
But now I need to render a list of items from an array inside a webview. I tried using the map but it didn't work:
return items.map((item) => {
return `<html>
<head>
<style>
.t-center{
text-align: center;
</style>
</head>
<body>
<div class="t-center">
<h1>GUIA DE AGENDAMENTO - ENTREGA</h1>
<h1>${item.namE_CLI}</h1>
</div>
</body>
</html>`;
});
here is the solution where you can find the props value injectedJavaScript which helps to inject JavaScript to webview. sample code given below how to add array list to webview.
ex:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
let myList = `["A", "B", "C", "D"]`;
const overrideJs = `
let $buttons = $('<div id="buttonGallery">');
let myList = ${myList}
let myColors = ["red", "green", "blue", "red"];
myList.map(function(letter, index) {
let $button = $("<div></div>")
.addClass("buttons")
.attr("id", "button_" + letter)
.html("<p>" + letter + "</p>")
.on("mouseenter", function() {
$(this).css("background", myColors[index]);
})
.on("mouseleave", function() {
if (!$(this).hasClass('clicked')) {
$(this).css("background", "transparent");
}
})
.on("click", function() {
$(this).css("background", myColors[index]);
$(this).addClass('clicked');
})
$buttons.append($button);
});
$("body").append($buttons);
$("#done").on("click", clearColor);
function clearColor() {
$(".buttons").css({
backgroundColor: 'transparent'
});
$(".buttons").removeClass('clicked');
}
`
const html = `<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style media="screen">
.buttons {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
#buttonGallery {
margin: 10px;
padding: 10px;
border: solid 2px black;
width: 155px;
}
#done {
width: 150px;
height: 50px;
border: solid 2px black;
text-align: center;
color: black;
cursor: pointer;
background-color: white;
margin: 2px;
}
</style>
</head>
<body>
<div id="done">
<p>done</p>
</div>
</body>
</html>
`
return (
<View style={{ flex: 1, backgroundColor: 'red' }}>
<WebView
ref={(r) => this.webviewRef = r}
source={{ html }}
// onMessage={}
injectedJavaScript={overrideJs}
injectedJavaScriptForMainFrameOnly={false}
allowUniversalAccessFromFileURLs={true}
/>
</View>
)
};
export default App;
Thanks Virendrasinh R, your propose is very good! But I found a way to do this with map and toString():
const names = items.map(function (item) {
return `<div class="row"><span class="title">${item["idcont"]} - ${item["nomE_CLI"]}</span></div>
<div class="row"><strong>Tipo:</strong> ${item["tipO_CONHECIMENTO"]}</div>
<div class="row"><strong>Contêiner:</strong> ${item["idcont"]}</div>
<div class="row"><strong>N:</strong> ${item["numerO_CE_MERCANTE"]}</div>
<div class="row"><strong>Status:</strong> ${item["status"]}</div>
<div class="row"><strong>Data Status:</strong> ${item["datA_STATUS"]}</div>
<div class="row"><strong>Data Prevista:</strong> ${item["dH_PREV_INSPECAO"]}</div>
<div class="row last-row"><strong>Data Descarga:</strong> ${item["dH_DESCARGA"]}</div>
`;
});
const html = `
<html>
<head>
<style>
body{
padding: 0 25px;
}
.row{
font-size: 38px;
border-bottom: 1px solid ${theme.color.gray};
padding: 10px;
}
.last-row{
margin-bottom: 50px;
}
.title{
color: ${theme.color.success};
font-size: 48px;
font-weight: bold;
}
strong{
color: ${theme.color.primary};
}
</style>
</head>
<body>${names.toString()}</body>
</html>
`;
I have a popup when click to layer on map and popup displayed at selected position. I want to show popup to left screen, how can i do that. Please help me, my english not good. Thanks
My popup show like this
Popup here
I want when click popup will show left screen, not center
If you want the popup on center left, you could do it like this:
<html>
<head>
<meta charset="utf-8" />
<style>
.map {
height: 100%;
width: 100%;
}
html,
body {
height: 100%
}
.ol-popup {
background-color: white;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
min-width: 280px;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.13.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.13.0/css/ol.css">
</head>
<body>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
document.addEventListener("DOMContentLoaded", function () {
drawMap();
});
function drawMap() {
const osmLayer = new ol.layer.Tile({
source: new ol.source.OSM({
attributions: '© OpenStreetMap',
})
});
map = new ol.Map({
target: 'map',
layers: [
osmLayer,
],
view: new ol.View(),
});
const popup = new ol.Overlay({
element: document.getElementById('popup'),
});
map.addOverlay(popup);
map.getView().fit([0,0,0,0]);
map.on('click', function (evt) {
const element = popup.getElement();
const popupMap = popup.getMap();
const coordinate = evt.coordinate;
const viewExtent = popupMap.getView().calculateExtent();
const centerPoint = ol.extent.getCenter(viewExtent);
content.innerHTML = '<p>You clicked here:</p><code>' + coordinate + '</code>';
popup.setPosition( [viewExtent[0], centerPoint[1]] );
});
}
</script>
</body>
</html>
Remove position absolute and determine the position:
https://jsfiddle.net/ve5mn0by/5/
EDIT:
without Openlayers Overlay, just HTML:
map.on('click', function (evt) {
const container = document.createElement('div');
const content = document.createElement('div');
container.style.width = '10rem';
container.style.height = '100%'
//container.style.backgroundColor = '#FF0000';
container.style.position = 'absolute';
container.style.display = 'flex';
content.style.width = '100%';
content.style.height = '10rem'
content.style.backgroundColor = '#FFFF00';
content.style.alignSelf = 'center';
container.appendChild(content);
document.body.appendChild(container);
});
After adding and entering a button, I implemented changing the table by pressing the button, but I want to change the column and row of the table immediately as soon as I enter the number. For example, if I enter 4, I want to have a 4X4 table. I don't know. Help me.
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<button type="button" #click="change(size)">Change</button>
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
for (let r = 0; r < this.size; ++r) {
this.matrix[r] = [];
for (let c = 0; c < this.size; ++c)
this.matrix[r][c] = r * this.size + c +1;
}
},
methods:{
change(s){
this.size=s
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
}
})
</script>
</body>
</html>
you can using a watcher on your size state
the watch statement should be like this:
watch: {
size(newVal){
this.change(newVal)
}
}
and you can see a working example in the below :)
var app = new Vue({
el: '#app',
data: {
size: 3,
matrix: [],
clicked: [],
color: "",
},
created() {
this.change(this.size)
},
methods:{
change(s){
console.log(this.size)
let arr=[]
for (let r = 0; r < this.size; ++r) {
arr[r] = [];
for (let c = 0; c < this.size; ++c)
arr[r][c] = r * this.size + c +1;
}
this.matrix=arr
}
},
watch: {
size(newVal){
this.change(newVal)
}
}
})
div { padding: 30px; margin: 30px auto; width: 600px;
border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
table { border-collapse: collapse; margin-top: 10px; }
td { width: 50px; height: 50px; border: 1px solid gray; font-size: 20pt;
text-align: center; cursor: pointer; }
.yellow { background-color: yellow; }
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="size" >
<table :style="{backgroundColor: color}">
<tr v-for="(row, index1) in matrix" v-bind:key="index1">
<td v-for="(value, index2) in row" v-bind:key="index2">
{{ value }}
</td>
</tr>
</table>
<h1>{{size}}</h1>
</div>
</body>
</html>
I'm creating a multiple choice question program and I have it so that once the correct answer is chosen a new question is generated.
Although I want it to go to the next question automatically, I want it to delay for about 0.5 seconds so the user can see that their answer is correct.
I chose to remove the class and replace it with another class so that the background changes colour. Once the new question comes up I want all the colours to return to normal, so I once again remove the new class and replace it with the old class.
If I don't advance to the new question automatically, the colours come up just the way I like them, but if I create it so that it moves on automatically, I am unable to keep the display the same.
After searching through the forums I read that setTimeout should work, but I haven't had much success. I have also tried doing animations so that it takes time, but that didn't work for me either. The animations worked fine, but it still went on to the new set of questions.
I'll include the whole program as it might be better but the section I'm working on is under the function check().
I've been trying to figure out how to delay something for a long time but have been completely unsuccessful. Oh, please be kind to me, I have very little experience. I have only learned how to do javascript by doing the khan academy course. Thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project: listening to sounds </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ***************** CSS styles ***************** -->
<style>
body {
font-family: comic sans ms, sans-serif;
background-image: url("background.jpg");
background-color: rgb(216, 252, 252);
}
form {
font-size: 1.2em;
}
#text {
background-color: wheat;
width: 150px;
height: 25px;
color: blue;
font-size: 1em;
}
.SoundBite {
float: left;
clear: none;
position: absolute;
top: 130px;
left: 100px;
padding: 5px;
background: darkblue;
color: white;
height: 120px;
width: 200px;
border-radius: 50px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 5em;
}
.SoundBite:hover {
background-color: darkgreen;
cursor: pointer;
}
.Score {
float: right;
clear: none;
position: absolute;
top: 50px;
left: 140px;
padding: 5px;
background: darkblue;
border-color: pink;
border: 5px;
opacity: 0.8;
color: white;
height: 45px;
width: 120px;
border-radius: 50px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 2em;
pointer-events: none;
}
.Answer {
position: absolute;
color: white;
height: 45px;
width: 120px;
padding: 5px;
border-radius: 25px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 2em;
background-color: darkblue;
}
.AnswerCorrect {
position: absolute;
color: white;
height: 45px;
width: 120px;
padding: 5px;
border-radius: 25px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 2em;
background-color: green;
}
.Answer:hover {
background-color: #e44404;
cursor: pointer;
}
.AnswerWrong {
position: absolute;
color: white;
height: 45px;
width: 120px;
padding: 5px;
border-radius: 25px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 2em;
background-color: red;
}
#Answer1 {
top: 20px;
left: 400px;
}
#Answer2 {
top: 85px;
left: 400px;
}
#Answer3 {
top: 150px;
left: 400px;
}
#Answer4 {
top: 220px;
left: 400px;
}
#Answer5 {
top: 290px;
left: 400px;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<audio id="audio" src="audio/rug.mp3" autostart="false" ></audio>
<audio id = "win" src="audio/win.mp3" autostart = "true"></audio>
<audio id = "lose" src = "audio/lose.mp3" autstart = "true"></audio>
<a onclick="playSound();"><div span class="SoundBite"><i class="fa fa-file-sound-o" id="audio" src="audio/rug.mp3" autostart="false" style="font-size:64px;color:skyblue"></i></div></a>
<a onclick ="checkAnswer = 1; check();"><div class = "Answer" id="Answer1">1</div>
<a onclick ="checkAnswer = 2; check();"><div class = "Answer" id="Answer2">2</div>
<a onclick ="checkAnswer = 3; check();"><div class = "Answer" id="Answer3">3</div>
<a onclick ="checkAnswer = 4; check();"><div class = "Answer" id="Answer4">4</div>
<a onclick ="checkAnswer = 5; check();"><div class = "Answer" id="Answer5">5</div>
<div class = "Score">Score</div>
<!-- <a onclick ="next();"><div id = "Next">Start</div> -->
<!-- ********************************* Javascript programming follows ********************************* -->
<script>
$(function() {
});
// declare the variables to be used ... do I need global variables? Maybe I should think about these...
var word, ext, directory, wordPosition, decoyWordPosition, answerPosition, decoyAnswerPosition, answer, checkAnswer, correct, incorrect, tries;
directory = "audio/";
ext = ".mp3";
correct = 0;
incorrect = 0;
tries = 0;
// list of words that are spoken
word = ["dam", "dog", "dug", "cat", "cot", "cut", "ran", "rot", "rug"];
wordPosition = Math.floor(Math.random()*word.length); // returns a random array wordPosition
/***************************************************************************
** Functions:
**
**************************************************************************/
// function to display word
function displayWord() {
//$(".SoundBite").text(word[wordPosition]);
//$("#audio").attr("src", directory+word[wordPosition]+ext);
}
// function to display the answer in one of the positions that are assigned
function displayAnswer(answerNumber, wordNumber) {
$("#Answer"+answerNumber).text(word[wordNumber]);
$("#audio").attr("src", directory+word[wordPosition]+ext);
}
// function to play the sound
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
// function to play a winning sound
function win() {
var sound = document.getElementById("win");
sound.play();
}
// function to play a losing sound
function lose() {
var sound = document.getElementById("lose");
sound.play();
}
function timer() {
new Date().toLocaleTimeString();
}
function check() {
if (answer == checkAnswer) {
//$("#Answer"+checkAnswer).animate({height: "45px", opacity: '0'})
//.animate({height: "45px", opacity: '1.0'});
$("#Answer"+checkAnswer).animate({height: "45px", opacity: '0'})
.animate({height: "45px", opacity: '1.0'})
.removeClass("Answer").addClass("AnswerCorrect");
win();
correct++;
tries++;
refresh();
next();
// need a delay function -- can't get it to work.
} else {
$("#Answer"+checkAnswer).removeClass("Answer").addClass("AnswerWrong"); //css({'background-color': 'red'});
lose();
incorrect++;
tries++;
}
// write in the score
$(".Score").text(Math.round(correct/tries*100)+"%");
}
// making a function to populate the answers
function populateAnswers() {
for (var i = 0; i < 6; i++) {
if (answerPosition < 6) {
if (decoyWordPosition == wordPosition) {
answer=answerPosition
}
displayAnswer(answerPosition, decoyWordPosition);
answerPosition++;
decoyWordPosition++;
if (decoyWordPosition >= word.length) { // want to make sure that the words are within the array
decoyWordPosition = 1 // reset to the beginning to 'wrap' the array.
}
} else {
answerPosition = 1;
}
}
}
// using a random generator to place the answer in a random spot 1 through 4
function randomGenerator() {
answerPosition = Math.floor(Math.random()*4)+1;
}
// returns a random array wordPosition
function randomWord() {
wordPosition = Math.floor(Math.random()*word.length);
}
function refresh() {
for (var i = 1; i <= 5; i++) {
$("#Answer"+i).removeClass("AnswerWrong").addClass("Answer");
$("#Answer"+i).removeClass("AnswerCorrect").addClass("Answer");
}
}
/***************************************************************************
* program as a function *
**************************************************************************/
function next() {
$("#Next").text("Continue");
randomWord();
randomGenerator();
// make the decoy answers randomly
if (wordPosition == 0 || wordPosition == 1) {
// In case the array is at the beginning: make the decoy start at the same spot as the wordPosition
decoyWordPosition = wordPosition;
} else {
// start the decoy word after the word
decoyWordPosition = wordPosition -2;
}
populateAnswers();
}
next();
</script>
</body>
</html>
Just for other people who are trying to find the solution to the setTimeout feature.
I was using it like this:
setTimeout(myFunction(), 2000);
However, it won't work with the brackets after the function. You need to omit those brackets:
setTimeout(myFunction, 2000);
Firstly, I followed this to generate keys, certificates and CA certificates to directories which are client, server and testca. Then I verified, SSL works.
Then I followed this to configure RabbitMQ Web-Stomp Plugin, and my ssl_config is as following:
[
{rabbitmq_web_stomp,
[{ssl_config, [{port, 15671},
{backlog, 1024},
{certfile, "path/to/certs/client/cert.pem"},
{keyfile, "path/to/certs/client/key.pem"},
{cacertfile, "path/to/certs/testca/cacert.pem"},
{password, "changeme"}]}]}
].
However, when I tried to connect it via websockets by following code, which is copied from here, and I made some modifications.
<!DOCTYPE html>
<html><head>
<script src="jquery.min.js"></script>
<script src="stomp.js"></script>
<style>
.box {
width: 440px;
float: left;
margin: 0 20px 0 20px;
}
.box div, .box input {
border: 1px solid;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
padding: 5px;
margin: 3px 0 10px 0;
}
.box div {
border-color: grey;
height: 300px;
overflow: auto;
}
div code {
display: block;
}
#first div code {
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #eee;
margin-bottom: 5px;
}
#second div {
font-size: 0.8em;
}
</style>
<title>RabbitMQ Web STOMP Examples : Echo Server</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head><body lang="en">
<h1>RabbitMQ Web STOMP Examples > Echo Server</h1>
<div id="first" class="box">
<h2>Received</h2>
<div></div>
<form><input autocomplete="off" value="Type here..."></input></form>
</div>
<div id="second" class="box">
<h2>Logs</h2>
<div></div>
</div>
<script>
var has_had_focus = false;
var pipe = function(el_name, send) {
var div = $(el_name + ' div');
var inp = $(el_name + ' input');
var form = $(el_name + ' form');
var print = function(m, p) {
p = (p === undefined) ? '' : JSON.stringify(p);
div.append($("<code>").text(m + ' ' + p));
div.scrollTop(div.scrollTop() + 10000);
};
if (send) {
form.submit(function() {
send(inp.val());
inp.val('');
return false;
});
}
return print;
};
// Stomp.js boilerplate
var client = Stomp.client('wss://192.168.111.131:15671/ws');
client.debug = pipe('#second');
var print_first = pipe('#first', function(data) {
client.send('/queue/webstomp', {"content-type":"text/plain"}, data);
});
var on_connect = function(x) {
id = client.subscribe("/queue/webstomp", function(d) {
print_first(d.body);
});
};
var on_error = function() {
console.log('error');
};
client.connect('test', 'test', on_connect, on_error, '/');
$('#first input').focus(function() {
if (!has_had_focus) {
has_had_focus = true;
$(this).val("");
}
});
</script>
</body></html>
it replied me that I lost connection as following screenshot.
I'd be really appreciate any helpful suggestion on this issue.
BTW: this code example works when I didn't use SSL.
Finally I figured this out by referring this post, so the key point is to explicitly authorized my certificate by visiting the address in https first, in my case is wss://192.168.111.131:15671/ws. So I need to visit https://192.168.111.131:15671/ws in browser and authorize the exception and then I can make my wss connection normally.