Module not found: Error: Can’t resolve ‘./components/Layout’ in ‘C:UsersSeamusreact-portfoliosrc’
enter image description here
enter image description here
I tired changing the names and coping out peoples code I’m still learning.
Category: javascript
Category Added in a WPeMatico Campaign
Module not found: Error: Can’t resolve ‘./components’
I created this custom React package: https://github.com/leongaban/leon-theme
npm i leon-theme
Next created a new basic create-react-app & installed styled-components
When I import this line into the new react app’s index.js file I get the following error:
ERROR in ./node_modules/leon-theme/dist/index.js 7:21-44
Module not found: Error: Can’t resolve ‘./components’ in ‘/Users/leongaban/Projects/test3/node_modules/leon-theme/dist’
What the custom package’s compiled index.js looks like
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("./components"), exports);
//# sourceMappingURL=index.js.map
I downgraded react-scripts "react-scripts": "^4.0.2" but this didn’t help.
At a loss atm, at first I was trying to solve a process is missing error, but just needed to install styled-components in the new react app. Now running into this Can’t resolve error.
Package’s tsconfig
{
"compilerOptions": {
"outDir": "./dist",
"module": "nodenext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"moduleResolution": "nodenext",
"rootDirs": ["src"],
"baseUrl": ".",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true
},
"include": ["src/**/*"]
}
I need an interactive page in Django [closed]
- The user uploads a checklist:
- The user uploads a file with a checklist and a note to the site.
- Checking for comments:
- The system analyzes the downloaded file.
- If there are any comments, go to the next step. If not, it ends.
- Model for downloading letters and instructions:
- The site provides the user with a form for downloading a letter and prescription.
- The user downloads the appropriate files and proceeds to the next step.
- Processing of letters and instructions:
- The system processes the downloaded letter and order and proceeds to the next step.
- Model for loading a repeat checklist:
- The site provides the user with the opportunity to download a new checklist and note.
- Checking the repeated checklist:
- The system analyzes the new file.
- If there are any comments, go to step 3 (downloading the letter and instructions).
- If there are no comments, go to step 7.
- Model for downloading the report:
- The site provides the user with a form to download the report.
- The user downloads the report and proceeds to the next step.
- Completing the process:
- The system processes the downloaded report.
All these steps should be on one page. I tried using fetch js, but something went wrong
if ('{{ files.id }}' !== ''){
const filesId = parseInt('{{ files.id }}')
fetch('/supervision/api/prescriptions/${filesId}/')
.then(response => response.json())
.then(data => {
if(data.status !== 404)
console.log(data);
else{
fetch(`{% url "supervision:get_prescription_form" %}`)
.then(response => response.json() )
.then(data => {
console.log(data)
document.getElementById('prId').innerHTML = data.html;
document.getElementsByName('csrfmiddlewaretoken')[0].value = data.csrf_token;
console.log(document.getElementById('prId').children)
document.getElementById('prId').children[0].addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(this)
fetch("{% url 'supervision:post_prescription' files.pk %}", {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data)
})
.catch(error => {
console.error('Error:', error);
});
});
})
.catch(error => console.error('Error:', error));
}
})
.catch(error => console.error('Error:', error));
}
Unable to fetch individual values from firebase data using Vanilla JS [duplicate]
I am unable display each data received from firebase snapshot, even when I run an forEach or for loop on the returned array that too doesn’t works
I have created an function to fetch all entries from firebase, push the snapshot data into an array and then return that array. I am now not able to display the values from the returned array, I tried with forEach and for loop, none of them and working on it, even it is not showing the length of array properly.
Function which fetches all data from firebase this is returning expected data properly
function fetchAllEntries(firebaseDB) {
// Create a reference to the database.
const fetchedData = database.ref(firebaseDB);
// Create an array to store the results.
let results = [];
// Use the on() method to listen for changes to the query results.
fetchedData.on("value", (snapshot) => {
// Get the data from the snapshot.
const data = snapshot.val();
results.push(data);
});
// Return the results array.
return results;
}
Screenshot of how array is displayed in console log for reference –
Array Reference Screenshot
Not working implementation – 1
fetchedData.forEach(function(item) {
console.log(item);
});
Not working implementation – 2
console.log(fetchedData[0]);
All this implementation is done with Vanilla JS
If anyone could help with how can I loop through results array and display each value would be really helpful.
stopPropagation and preventDefault don’t work with select2 for remove tags button
I want to prevent click propagation on the following element:
.select2-selection__choice__remove
I try this:
$(document).ready(function () {
$("document").on(
"mouseup",
".select2-selection__choice__remove",
function (event) {
event.stopPropagation();
event.preventDefault();
},
);
});
The example I want to solve is this:
https://jsfiddle.net/dk_dragonknight/c1ef7138/
I need that, when clicking on the “x” icon on the left side of the tag, the dropdown does not close (stopPropagation needs to work for this).
Note: this is just a code I posted to reproduce the problem, it’s not mine and therefore I need a solution for this here
Find timespent Brightcove embed code in iframe
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://players.brightcove.net/5785763993001/default_default/index.min.js"></script>
</head>
<body>
<div style="position: relative; display: block; max-width: 960px;">
<div id="myPlayer" style="padding-top: 56.25%;">
<iframe
id="brightcove-iframe"
src="https://players.brightcove.net/5785763993001/default_default/index.html?videoId=6336141823112"
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>
</div>
<script>
var player;
// Initialize the Brightcove player
videojs("myPlayer", {}, function () {
player = this;
// Add event listeners to track play, pause, and ended events
player.on("play", function () {
alert('Video is playing');
});
player.on("pause", function () {
alert('Video is paused');
});
player.on("ended", function () {
alert('Video has ended');
});
});
</script>
</body>
</html>
I’m attempting to embed a Brightcove video player within an iframe, and I want to capture events like play and pause in order to track the amount of time viewers spend watching the video. I’ve successfully obtained the var player object, but I’m encountering difficulties when trying to implement event handling for these actions.
I am not enter in the play function.It seems play and pause function is not working.I expect that when I click the play button, it will provide information about the amount of time I’ve spent watching the video.
OSTicket : Failed to load resource: the server responded with a status of 404 (Not Found)
After changing from Apache to Nginx, I’m facing an issue in OSTicket where I receive an error when attempting to assign tasks to agents. The error message I’m encountering is [‘Failed to load resource: the server responded with a status of 404 (Not Found)’]. Can someone please provide guidance on how to troubleshoot and resolve this problem? Any insights or solutions would be greatly appreciated.”
react-native “Segmentation fault: 11 bash -l -c …” when build app
What I want to achieve
At react-native
yarn run:ios
When I try to launch an existing app, an error occurs and it doesn’t work.
premise
The execution environment is as follows.
System:
OS: macOS 13.6
CPU: (8) arm64 Apple M1
Memory: 179.06 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
Yarn: 1.22.19 - ~/.nodebrew/current/bin/yarn
npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
Watchman: 2023.09.18.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/teraichi/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: javac 21 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.64.4 => 0.64.4
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Problems/error messages occurring
Below is an excerpt of the error message that occurs when building from xCode.
PhaseScriptExecution [CP-User] Generate Specs
/Users/teraichi/Library/Developer/Xcode/DerivedData/Cucom-
basegvsyhmpmsgdvjavywleoezbw/Build/Intermediates.noindex/Pods.build/Debug-
iphonesimulator/FBReactNativeSpec.build/Script-9666B301DB9D9BA74C1C0CDD9B765E7B.sh
(in target 'FBReactNativeSpec' from project 'Pods')
...
/Users/teraichi/Library/Developer/Xcode/DerivedData/Cucom-
basegvsyhmpmsgdvjavywleoezbw/Build/Intermediates.noindex/Pods.build/Debug-
iphonesimulator/FBReactNativeSpec.build/Script-9666B301DB9D9BA74C1C0CDD9B765E7B.sh:
line 4: 23095 Segmentation fault: 11 bash -l -c 'SRCS_DIR=/Users/teraichi/Work/Cucom-App-
v2/node_modules/react-native/scripts/../Libraries
CODEGEN_MODULES_OUTPUT_DIR=/Users/teraichi/Work/Cucom-App-v2/node_modules/react-
native/scripts/../React/FBReactNativeSpec/FBReactNativeSpec CODEGEN_MODULES_LIBRARY_NAME=
FBReactNativeSpec /Users/teraichi/Work/Cucom-App-
v2/node_modules/react-native/scripts/generate-specs.sh' 2>&1
23096 Done | tee "${SCRIPT_OUTPUT_FILE_0}"
Command PhaseScriptExecution failed with a nonzero exit code
Even if I build from xCode or from yarn, I get the same error.
Applicable source code
# /Users/teraichi/Library/Developer/Xcode/DerivedData/Cucom-basegvsyhmpmsgdvjavywleoezbw/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-9666B301DB9D9BA74C1C0CDD9B765E7B.sh
#!/bin/sh
set -o pipefail
bash -l -c 'SRCS_DIR=/Users/teraichi/Work/Cucom-App-v2/node_modules/react-native/scripts/../Libraries CODEGEN_MODULES_OUTPUT_DIR=/Users/teraichi/Work/Cucom-App-v2/node_modules/react-native/scripts/../React/FBReactNativeSpec/FBReactNativeSpec CODEGEN_MODULES_LIBRARY_NAME=FBReactNativeSpec /Users/teraichi/Work/Cucom-App-v2/node_modules/react-native/scripts/generate-specs.sh' 2>&1 | tee "${SCRIPT_OUTPUT_FILE_0}"
What I tried
- Restart my computer
- OS version up
- update xCode version
- node version up、version down
- Other solutions posted on the internet
Sites referred to
“Command PhaseScriptExecution failed with a nonzero exit code” when archiving
how to duplicate value textboxt html with currency format?
I want to copy the contents of the value from the textbox 1 to the textbox 2 with the respective id of bayar and destination. I use a library for the currency format.
function copyValue() {
var n1 = document.getElementById('bayar').value;
var rupiahFormat = new Intl.NumberFormat('id-ID', {
style: 'currency',
currency: 'IDR',
}).format(n1);
console.log(rupiahFormat);
document.getElementById('destination').value = rupiahFormat;
}<input type="number" name="bayar" id="bayar" class="form-control" onkeyup="copyValue()" />
<input type="number" name="destination" id="destination" class="form-control" />Send Form Data to mySQL Database After JavaScript Validation via PHP(client side, server-side validation together)
I am working on validating a signup page of a website using javascript and PHP methods.(client-side validation and server -side validation)
when I tried php connection on submit button, i was successfully getting the data in phpmyadmin database.
The problem is when I linked the html file of the signup page to a javascript validating user input,
the signup button in the page no longer works(its does nothing). So i am unable to enter the data through php and into the database.
When I removed “form id” in the form section of the html, the php connection works again.
I used javascript to validate fullname, username , email, phone, password, and password2(for confirming again).
//validation rules javascript
fullname = if client leaves the entry blank, or error
username = if client leaves the entry blank, or error / enter between 8 to 30 characters, or error
email = if client leaves the entry blank, error / correct email format, or error
phone = if client leaves the entry blank, error / correct phone no. format, or error
password = if client leaves the entry blank, error / enter between 8 to 20, english including at least one number and one special character, or error
password2 = if client leaves the entry blank, error / checks if password = password2 matching, or error.
//signin.html//
<!DOCTYPE html>
<!--
// WEBSITE: https://themefisher.com
// TWITTER: https://twitter.com/themefisher
// FACEBOOK: https://www.facebook.com/themefisher
// GITHUB: https://github.com/themefisher/
-->
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Craft Sutra</title>
<!-- Mobile Specific Metas
================================================== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Construction Html5 Template">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="author" content="Themefisher">
<meta name="generator" content="Themefisher Constra HTML Template v1.0">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<!-- Themefisher Icon font -->
<link rel="stylesheet" href="plugins/themefisher-font/style.css">
<!-- bootstrap.min css -->
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<!-- Animate css -->
<link rel="stylesheet" href="plugins/animate/animate.css">
<!-- Slick Carousel -->
<link rel="stylesheet" href="plugins/slick/slick.css">
<link rel="stylesheet" href="plugins/slick/slick-theme.css">
</head>
<body id="body">
<script>
const hypenTel = (target) => {
target.value = target.value
.replace(/[^0-9]/g, '')
.replace(/^(d{2,3})(d{3,4})(d{4})$/, `$1-$2-$3`);
}
</script>
<script defer src="signin_valid.js"></script>
<section class="signin-page">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="block text-center">
<div class="signinlogo">
<a class="logo" href="index.html">
<img src="images/logo.png" alt="">
</a>
<h2 style="font-family: 'Noto Sans KR', sans-serif; font-size: x-large" class="text-center">계정 만들기</h2>
<form class="text-left clearfix" id="form" action="connectsignin.php" method="post">
<div class="input-control">
<input type="text" id="fullname" name="fullname" type="text" placeholder="이름">
<div class="error"></div>
</div>
<div class="input-control">
<input type="text" id="username" name="username" placeholder="아이디">
<div class="error"></div>
</div>
<div class="input-control">
<input type="text" id="email" name="email" placeholder="이메일(로그인시 사용)">
<div class="error"></div>
</div>
<div class="input-control">
<input type="text" oninput="hypenTel(this)" maxlength="13" id="phone" name="phone" placeholder="전화번호">
<div class="error"></div>
</div>
<div class="input-control">
<input type="password" id="password" name="password" placeholder="비밀번호">
<div class="error"></div>
</div>
<div class="input-control">
<input type="password" id="password2" name="password2" placeholder="비밀번호 재입력">
<div class="error"></div>
</div>
<div class="text-center">
<button type="submit" style="font-size: small;" class="btn-main text-center">회원가입</button>
</div>
</div>
</form>
<p class="mt-20">이미 회원 등록하셨나요?<a href="login.html"> 로그인</a></p>
<p><a href="forget-password.html"> 비밀번호를 잊으셨나요?</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
Essential Scripts
=====================================-->
<!-- Main jQuery -->
<script src="plugins/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap Touchpin -->
<script src="plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
<!-- Instagram Feed Js -->
<script src="plugins/instafeed/instafeed.min.js"></script>
<!-- Video Lightbox Plugin -->
<script src="plugins/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
<!-- Count Down Js -->
<script src="plugins/syo-timer/build/jquery.syotimer.min.js"></script>
<!-- slick Carousel -->
<script src="plugins/slick/slick.min.js"></script>
<script src="plugins/slick/slick-animation.min.js"></script>
<!-- Google Mapl -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC72vZw-6tGqFyRhhg5CkF2fqfILn2Tsw"></script>
<script type="text/javascript" src="plugins/google-map/gmap.js"></script>
<!-- Main Js File -->
<script src="js/script.js"></script>
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/style(signin+login).css">
</body>
</html>
//javascript file//
const form = document.getElementById('form');
const fullname = document.getElementById('fullname');
const username = document.getElementById('username');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const isValidPhone = phone => {
const re = /^d{2,3}-d{3,4}-d{4}$/;
return re.test(String(phone).toLowerCase());
}
const isValidPassword = password => {
const re = new RegExp("^(?=.{8,20}$)[a-zA-Z0-9._](?=.*[0-9])(?=.*[!@#$%^&*])");
return re.test(password);
}
const isValidUsername = username => {
const re = new RegExp("^(?=.{8,30}$)[a-zA-Z0-9._]");
return re.test(username);
}
const validateInputs = () => {
const fullnameValue = fullname.value.trim();
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const phoneValue = phone.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(fullnameValue === '') {
setError(fullname, '이름을 입력해 주세요.');
} else {
setSuccess(fullname);
}
if(usernameValue === '') {
setError(username, '아이디를 입력해 주세요.');
} else if (!isValidUsername(usernameValue)) {
setError(username, '아이디는 8~30자로 입력해주세요.');
} else {
setSuccess(username);
}
if(emailValue === '') {
setError(email, '이메일을 입력해 주세요.');
} else if (!isValidEmail(emailValue)) {
setError(email, '올바른 이메일을 입력해 주세요.');
} else {
setSuccess(email);
}
if(phoneValue === '') {
setError(phone, '전화번호를 입력해 주세요.');
} else if (!isValidPhone(phoneValue)) {
setError(phone, '올바른 전화번호가 아닙니다');
} else {
setSuccess(phone);
}
if(passwordValue === '') {
setError(password, '비밀번호을 입력해 주세요.');
} else if (!isValidPassword(passwordValue)) {
setError(password, '비밀번호는 영문 숫자 특수문자를 모두 포함하여 8~20자로 입력해 주세요.');
} else {
setSuccess(password);
}
if(password2Value === '') {
setError(password2, '비밀번호를 확인해 주세요.');
} else if (password2Value !== passwordValue) {
setError(password2, "비밀번호가 일치하지 않습니다.");
} else {
setSuccess(password2);
}
};
// PHP file //
<?php
$fullname = $_POST['fullname'];
$username = $_POST['username'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$password = $_POST['password'];
$password2 = $_POST['password2'];
// Database connection
$conn = new mysqli('localhost','root','','craft sutra');
if($conn->connect_error){
echo "$conn->connect_error";
die("Connection Failed : ". $conn->connect_error);
} else {
$stmt = $conn->prepare("insert into signin(fullname, username, email, phone, password, password2) values(?, ?, ?, ?, ?, ?)");
$stmt->bind_param("sssiss", $fullname, $username, $email, $phone, $password, $password2);
$execval = $stmt->execute();
echo $execval;
echo "회원가입이 완료됐습니다...";
$stmt->close();
$conn->close();
}
?>
all the files(html, php, js) mentioned are located in this theme folder:
“C:xampphtdocscraft sutratheme”
I am new to coding and website creation so please be patient with me . thanks
111111111111111111111111
Tone.js FFT keeps getting negative infinity values
I’ve been trying to get values for the fft using Tone.js. I want to get values of the note that was played using this function
async function playCasio(noteToPlay, duration) {
Tone.start()
// Create an FFT component
const fft = new Tone.FFT(1024)
const casio = new Tone.Sampler({
urls: {
A1: "A1.mp3",
A2: "A2.mp3",
},
baseUrl: "https://tonejs.github.io/audio/casio/",
})
const tones = await Tone.loaded();
// Connect the Casio sampler to the FFT
casio.chain(fft, Tone.Destination)
casio.triggerAttackRelease(noteToPlay, duration);
const fftValues = fft.getValue();
console.log(fftValues);
}
However, when I look at the console log, it says this
screenshot of console log
meaning fft is listening for silence (-Infinity db).
It does play the right sound, and I can hear it.
I could not find the solution.
How can I achieve this? I just want some values to display other than -Infinity
I’ve tried to connect casio to destination, tried to use promise so that it waits till the note is played.
How do I implement Wi-Fi Direct with nodejs?
I want to know how to use nodejs to control WiFi on Windows OS, and then use Wi-Fi Direct technology to achieve offline communication between two applications.
I want to try using Wi-Fi Direct to communicate when application wasn’t connected to the Internet.
thank you very much.
love from china.
qrcode.toImage – input text field for content showing Error: No input text in console
I’m using qrcode-with-logos to create a local html page that can generate QRCodes with a predefined logo. I’ve created a text input within the body of the HTML and I’m attempting to get the content option within QrCode to use what has been inserted in the text input however nothing is returning.
I’ve tried using toString() however it keeps returning blank. When I directly insert a value into content “https://www.google.com/” as an example, it works perfectly. The whole point is that I can paste in different URLs via the page and quickly get my QR codes. I’ve used the dist demo as a template and modified it so far to my needs.
<body>
<input id="text" type="text" placeholder="Enter text here">
<button onclick="qrcode.toImage()">click me!</button>
</p>
<canvas id="canvas"></canvas>
<img src="" alt="" id="image" />
<script src="./qrcode-with-logos.umd.min.js"></script>
<script type="text/javascript">
var text = document.getElementById("text").value;
window.qrcode = new QrCodeWithLogo({
canvas: document.getElementById("canvas"),
content: text,
width: 380,
// download: true,
image: document.getElementById("image"),
logo: {
src: "data:image/png;base64,
logoSize: 0.2
}
});
</script>
</body>
I’m using qrcode-with-logos to create a local html page that can generate QRCodes with a predefined logo. I’ve created a text input within the body of the HTML and I’m attempting to get the content option within QrCode to use what has been inserted in the text input however nothing is returning.
I’ve tried using toString() however it keeps returning blank. When I directly insert a value into content “https://www.google.com/” as an example, it works perfectly. The whole point is that I can paste in different URLs via the page and quickly get my QR codes. I’ve used the dist demo as a template and modified it so far to my needs.
<body>
<input id="text" type="text" placeholder="Enter text here">
<button onclick="qrcode.toImage()">click me!</button>
</p>
<canvas id="canvas"></canvas>
<img src="" alt="" id="image" />
<script src="./qrcode-with-logos.umd.min.js"></script>
<script type="text/javascript">
var text = document.getElementById("text").value;
window.qrcode = new QrCodeWithLogo({
canvas: document.getElementById("canvas"),
content: text,
width: 380,
// download: true,
image: document.getElementById("image"),
logo: {
src: "data:image/png;base64,
logoSize: 0.2
}
});
</script>
</body>
How to create element randomly in screen position using javascript
This is my HTML
<html><body style="
overflow: hidden;
min-height: 10000px;
">
<div id="DatA"><div class="img-magnifier-glass" style="
bottom: -9999;
left: 0;
"></div></div>
<floor style="
border: 5px solid #000;
position: absolute;
width: 500;
height: 10px;
left: 300;
bottom: 100;
"></floor><style id="stylus-65" type="text/css" class="stylus">* {box-sizing: border-box;}
.img-magnifier-glass {
line-height: 6.5;
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}
</style><floor style="
border: 5px solid #000;
position: absolute;
width: 1000;
height: 10px;
left: 0;
bottom: -10000;
"></floor></body></html>
I want to create element randomly in screen scroll position
I try this
createF = (a) => {
for (let i = 0; i < a; i++) {
xc = document.querySelector('floor').cloneNode();
xc.style.top = Math.random() * Math.random() * 567 + "px";
xc.style.left = (Math.random() * Math.random() * 600) + 300 + "px";
xc.style.width = "50px";
xc.style.height = "5px";
document.querySelector("#DatA").append(xc);
}
}
but it doesn’t create element randomly in screen scroll position but it create element randomly in top of document even if i scroll to bottom. my html have 10000px height
I don’t have any idea how to calculate and set position to where my screen scroll and then append randomly
How to prevent cross-site websocket hijacking?
I am writing a SaaS web application, in which data is served to the client via websockets. I have implemented authentication via user access token on connection. I need to prevent websocket connection from a different site as well as from curl requests.
Site origin policy and cross origin resource sharing (CORS) are ineffective for websockets, so when upgrading the http connection to websocket, verifying the origin header would prevent access from another website, since Origin header is verified by browser.
The issue here is that only browser originated requests mandate authentic origin. Origins can be spoofed via curl requests outside of a browser. How then could I prevent a user connecting to the websocket using their authentication token and spoofing the origin?