Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
const getProblemcontent=async()=>{
let result=await fetch(http://localhost:5800/problem/${params.id});
result=await result.json();
// console.log(result);
setContent(result);
console.log((content.ans[0]));
}
in this code if i simply write console.log(content.ans) this will print all the element of ans array but if console.log(content.ans[0]) undefined type error i am not understanding whats wrong in this anyone can solve this issue
Thanks!
I don’t entirely know what I’m doing, so sorry if this is a dumb question, but I’ve tried to fix this, and I can’t figure out what exactly the problem is. I’m trying to make a scraper to make my own word frequency list, just for the hell of it, and I’m trying to collect links to pages off of pages. Here’s the code:
async function linkChain (links, depth, already) {
if (!depth) { return new Promise(resolve => { resolve(links); }); }
let promises = [];
let length = links.length
for (already; already < length; already++) {
promises.push(
axios.get(www + links[already]).then(response => {
let $ = cheerio.load(response.data);
try {
console.log("here");
let link = $("a").attribs.href;
if (link.slice(0,6) == "/wiki/" && links.indexOf(link) == -1) { links.push(link); }
} catch (e) {} finally { return new Promise(resolve => { resolve(); }); }
})
);
}
Promise.all(promises).then(() => {
console.log(links);
return linkChain(links, depth - 1, already);
});
}
async function run () {
const links = await linkChain(["/wiki/Wikipedia:Popular_pages"], 2, 0);
console.log(links);
}
run();
The cheerio and axios stuff is (I’m pretty sure) working; when I was just pulling links off of one page, the program ran fine, and I got over 1200 links. All that gets console.logged now though is first ‘undefined’ from run(), then “here” once and then the one link I passed in as an argument twice from linkChain().
I was expecting this to pull links off of multiple pages the way the earlier version pulled links off of the one. Heck, I have no idea why it won’t push anything onto links. I’ve tried using .then.catch instead of await and async, I’ve tried a lot of stuff that was dumb, I’ve tried searching Stack Overflow (although I may have missed a solution, I’m not great at this).
I have made a webapp. This webapp has some private user data. When someone logs into the app, they can look at that data. However, I am creating a user application where, my app(app1) will be embedded in another app(app2) in an iframe. So, it can be assumed that whenever a user accesses app2 they are an authentic user. Now, when the user makes a request from app2, I want to show some private data in app1. I want this to happen without any authorization in app1 as the user is already authorized in app2. Does anyone have any ideas? Thanks.
$('#tbl_AdminAcceptPendding tbody tr').each(function (index, item) {
var $item = $(item);
myDataPadding.push({
"quantity_rep": $item.find('td').eq(9).find('input').val(),
"quantity_total": $item.find('td').eq(11).find('input').val(),
})
});
for (let obj of myDataPadding) {
var quantity_rep = obj.quantity_rep;
var quantity_total = obj.quantity_total;
var balance = quantity_total - quantity_rep
}
But When I console this data is show Sum this var to String
Example 4+4 = 8
but this console error like 4+4 = 44
I have a Web Application which using javascript code to call API. My customer uses the Application, open the Chrome Dev Tool by press F12, put the breakpoint in somewhere, edit the javascript code. This makes the data incorrect.
How can I prevent this prolem? They say this is a bug in the app.
I was searching about thunks on Redux-toolkit and I found 2 ways of dealing with them:
createAsyncThunk or just using async + dispatch
Using createAsyncThunk:
export const deleteColumnAndTasks = createAsyncThunk(
'yourSlice/deleteColumnAndTasks',
async ({ boardId, column }) => {
const tasksToDelete = column.taskIds || [];
await changeBoardColumns({
operationType: 'delete',
targetBoardId: boardId,
columnId: column.id
});
await deleteColumn({ columnId: column.id });
await Promise.all(tasksToDelete.map(taskId => deleteTask({ taskId })));
}
);
Using async + dispatch
export const deleteColumnAndTasks = ({ boardId, column }) => async dispatch => {
const tasksToDelete = column.taskIds || [];
try {
await dispatch(changeBoardColumns({
operationType: 'delete',
targetBoardId: boardId,
columnId: column.id
}));
await dispatch(deleteColumn({ columnId: column.id }));
await Promise.all(tasksToDelete.map(taskId => dispatch(deleteTask({ taskId }))));
} catch (error) {
console.log('Error deleting column and tasks', error);
}
};
What is the difference between the two ways?
I am learning node.js and I was playing around with req.params when I stumbled upon a problem. Basically, req.params doesn’t seem to work, I tried looking for the wrong syntax but it’s right. The thing is that the response had a status code of 200 and it showed the document as JSON in the network tab. Please help me fix this issue.
Here is the code
const express = require('express')
const app = express()
const { products } = require('./data')
app.get('/', (req, res) => {
res.send('<h1> Home Page</h1><a href="/api/products">products</a>')
})
app.get('/api/products', (req, res) => {
res.json(products)
res.status(200)
})
app.get("/api/products/:num", (req, res) => {
const { num } = req.params
const reqProduct = products.find(
(product) => product.id === Number(num)
)
res.json(reqProduct)
})
app.listen(5000, () => {
console.log("The server is listening")
})
Here is the dummy data which I am using:
const products = [
{
id: "1",
price: "10",
description: "qwerty",
image: "Helooo"
},
{
id: "2",
price: "20",
description: "qwerty",
image: "Helooo"
},
{
id: "3",
price: "30",
description: "qwerty",
image: "Helooo"
}
]
module.exports = { products }
And here is how the webpage looks if I try to navigate URL using req.params:
i got this svg.
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.73 268.03"><defs><style>.cls-1{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><path class="cls-1" d="M227.34,231.69c9.24-1.11-85.47,12.9-85.47,12.9l31.28,15c4.65,0,37.16-9.81,37.16-9.81,13.94-5.68,20.13-2.58,20.13-2.58,37.16,9.81,50.29,2.26,50.29,2.26s0-71-62-74.5c-2.24-.13-6.32-3.62-8.28-4.65a235.64,235.64,0,0,0-23.7-10.71,253.36,253.36,0,0,0-36-11.1c-7.16-1.63-14.4-2.95-21.68-3.91-3-.4-7-.13-9.79-1.42-10.27-4.86-7.15-14-10.1-23.45,0,0-2.58-15-5.68-13.94,0,0,.52-17-6.19-21.16,0,0-.52-18.06-4.65-17,0,0-11.35-40.26-26.83-37.68,0,0-5.68-10.32-10.33-9.81,0,0-6.71-2.61-9.8,0,0,0-6.71-2-15-16.5,0,0-10.32,3.1-10.32,6.71L32.25,29.88S30.7,33.49,14.7,20.07c0,0-5.68,3.62-4.13,9.81l4.65,10.84c2.58,1.55-2.59,18.58-2.59,18.58S5.41,76.85,7,82.53l2.58,6.71c-4.13-.52-5.16,5.16-5.16,5.16v27.87s-3.1,16.51,0,20.64c0,0-3.1,8.78,10.32,19.62,0,0,3.61,28.9,13.93,40.25L19.86,227l1,3.62c-4.13,0-3.61,10.32-3.61,10.32,10.87,1,21.78,1.75,32.69,2.17,5.34.21,13.27-1.51,18.29-.36,3.89.89,7.74,6.82,11.12,9.79a87.75,87.75,0,0,0,13.16,9.6c3.42,2,7.64,3.87,11.25,2.19a4.53,4.53,0,0,0,2.47-2.54c.68-2.08-.74-4.22-2.14-5.89a83.43,83.43,0,0,0-36.85-25.28c1.13-4.24,2.46-8.5,3.29-12.79-3.28,11.61,17,16,24.15,17.44,15.47,3,31.55,3.21,47.25,3,12.6-.2,25.18-.89,37.74-1.84C195.38,235.25,211.68,231.69,227.34,231.69Z"/></svg>
and i want to make an event when mouse is on the image to fill the svg area inside the stroke from bottom to top with a color.
i have try this
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
const path = document.querySelector("#Layer_2");
console.log(path);
path.addEventListener("mouseenter", () => {
path.setAttribute("fill", "blue");
console.log("tocaste el lobo");
});
path.addEventListener("mouseleave", () => {
path.setAttribute("fill", "transparent");
console.log("saliste del lobo");
});
});
but doesnt work
I have an input that populates items based on the user’s input.
I then grabbed all the items using querySelectorAll and adding addEventListener to each iteration.
The issue is, when I console log each item, it returns undefined.
Why is that?
here’s the codepen: https://codepen.io/ericnguyen23/pen/OJojZYB?editors=1011
I need to chane style for 5 case with onclick event. for ex.
if user clicks on btn, need to change more than 3 different style
<script>
function myFunction() {
document.getElementById("pa-menu").classList.toggle("responsive-menu-action");
}
window.onclick = function(event) {
if (!event.target.matches('.pa-header-right-responsive-menu-btn')) {
var dropdowns = document.getElementsByClassName("pa-menu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('responsive-menu-action')) {
openDropdown.classList.remove('responsive-menu-action');
}
}
}
}
</script> .pa-menu{
width: 150px;
}
.customa{
background:red;
}
.customb{
font-size:14px;
}
Here is my api handler.
// Retrieve data.
const form = formidable({ multiples: true });
form.parse(request, async (err: any, fields: any, files: any) => {
if (!drupal) {
return response.status(500).send('Empty drupal handler.');
}
const { fieldName, webformId } = fields;
const file = files[fieldName];
if (fieldName && webformId && file) {
// Build api url.
const url = drupal.buildUrl(
`/webform_rest/${webformId}/upload/${fieldName}`
);
// Build file form data.
const body = new FormData();
body.append('file', file);
// Send file data.
if (file) {
const result = await drupal.fetch(url.toString(), {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
'Content-Disposition':
'file; filename="' + file.originalFilename + '"',
},
body,
withAuth: true,
});
const resultData = await result.json();
if (result.ok && 'fid' in resultData) {
return response.status(200).json(resultData.fid[0]['value']);
}
return response.status(500).send({ error: result.statusText });
}
}
});
I get here a formData. Subsequently, I want to send the file contained in this formData in post to another api.
everything looks fine except that on the other side of the second API I get a corrupted file, unable to open and small byte size.
what is wrong with my code?
thx
How can I get a future unix timestamp in Javacript? ie, pass “2023-03-08 13:05:00” and get a unix timestamp corresponding to that time.
All the examples I see use the getTime() function which is the current time like this:
Javascript: future time as UNIX timestamp
I found a solution in Php which I think serves the purpose I am looking for:
Getting a future unix timestamp using a specific date and time?
Is there a similar function in Javascript?
I’ve issue with my code that implements A5/1 cipher.
When decrypting my ciphertext, it gives the correct plaintext even after I change the key input.
Any suggestions how to fix it?
I’ve tried using chatGPT to fix it but it couldn’t find the problem.
function generateKeystream(key) {
const keystream = [];
// Initialize the shift registers
let shiftRegister1 = [1, 1, 1, 1, 1, 1, 1, 1, 1];
let shiftRegister2 = [1, 0, 1, 0, 1, 0, 1, 0, 1];
let shiftRegister3 = [1, 1, 0, 1, 1, 0,1, 1, 0];
for (let i = 0; i < key.length; i++) {
// If the shift registers are empty, fill them with the key
if (shiftRegister1.length === 0) {
shiftRegister1 = key.slice(0, 9);
}
if (shiftRegister2.length === 0) {
shiftRegister2 = key.slice(9, 18);
}
if (shiftRegister3.length === 0) {
shiftRegister3 = key.slice(18, 27);
}
// Calculate the new bits for the shift registers
let newBit1 = shiftRegister1[0] ^ shiftRegister1[2] ^ shiftRegister1[3] ^ shiftRegister1[8];
let newBit2 = shiftRegister2[0] ^ shiftRegister2[1] ^ shiftRegister2[2] ^ shiftRegister2[7];
let newBit3 = shiftRegister3[0] ^ shiftRegister3[1] ^ shiftRegister3[7] ^ shiftRegister3[8];
// Shift the registers and add the new bits
shiftRegister1 = shiftRegister1.slice(1).concat([newBit1]);
shiftRegister2 = shiftRegister2.slice(1).concat([newBit2]);
shiftRegister3 = shiftRegister3.slice(1).concat([newBit3]);
// Add the new bit to the keystream
keystream.push(newBit1 ^ newBit2 ^ newBit3);
}
return keystream;
}
// This function encrypts the provided plaintext using the provided key
function encrypt(plaintext, key) {
let ciphertext = '';
// Generate the keystream
const keystream = generateKeystream(key);
// XOR the plaintext with the keystream
for (let i = 0; i < plaintext.length; i++) {
const plaintextChar = plaintext.charCodeAt(i);
const keystreamChar = keystream[i % keystream.length];
const ciphertextChar = plaintextChar ^ keystreamChar;
ciphertext += ciphertextChar.toString(16).padStart(2, '0'); // Pad with leading zero if necessary
}
return ciphertext;
}
function decrypt(ciphertext, key) {
// Generate the keystream
const keystream = generateKeystream(key);
let decryptedText = '';
// XOR the ciphertext with the keystream
for (let i = 0; i < ciphertext.length; i += 2) {
const hexValue = ciphertext.substr(i, 2);
const byteValue = parseInt(hexValue, 16);
const keystreamByte = keystream[i / 2 % keystream.length];
const decryptedByte = byteValue ^ keystreamByte;
decryptedText += String.fromCharCode(decryptedByte);
}
return decryptedText;
}
I’m trying to create a very simple TamperMonkey to change the text in a page.
This is the scrip. Can anyone help me understand why it’s not working?
(function teste() {
'use strict';
document.getElementById("sim-vendorInformationCard--pictureFileImdexLocationInput-label").innerHTML = "mytexthere";
}) ();
I was able to run it using snippet in Chrome.
I’m getting this error based on when I click my LWC “Next” button to save my record edit form and navigate me to the following Flow screen. The data I enter in my LWC still saves fine, but everytime I click the button to save and navigate to the next screen, it will throw this error.
I have seen on other posts that this error mainly relates to parent/child components, but I am not using different components (apart from conditionally if an error is caused from my wired method).
Note: This error only occurs if I am using any user BUT System Administrator. System Admins will not get this error. I cannot see any permission issues in relation to these users getting this error.
I have to use this component within a flow and also launched from a quick action on a record page, so I am having to incorporate logic catered to both flow navigation and quick actions (e.g. closing the LWC if it’s launched from the quick action).
Here is my HTML and JS for the component:
<template>
<!-- Log errors to Neubla Logger -->
<c-logger></c-logger>
<template if:true={error}>
<c-hsaap-error-panel errors={error}></c-hsaap-error-panel>
</template>
<template if:false={error}>
<!-- If the payee record exists, show the modal header (when editing from an existing payee record) -->
<template if:true={payeeRecord}>
<lightning-modal-header label="Edit Bank Account"></lightning-modal-header>
</template>
<!-- Displays the form to edit the bank account details with custom validation on bank number fields -->
<lightning-record-edit-form object-api-name="HSAAP_Payee__c" record-id={recordId} onsuccess={handleSuccess} onsubmit={handleSubmit} onerror={handleError}>
<lightning-layout>
<lightning-layout-item size="6">
<lightning-input
class="slds-m-around_medium"
type="text"
name="accountName"
label="Account Name"
value={accountName}
onchange={handleAccountNameChange}>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
<lightning-layout class="slds-m-bottom_large">
<lightning-layout-item size="2">
<lightning-input
class="slds-m-horizontal_medium"
data-id="bankid"
type="text"
name="bank"
label="Bank"
max-length="2"
min-length="2"
placeholder="XX"
pattern="^[0-9]*$"
message-when-pattern-mismatch="Bank can only contain numbers."
message-when-too-short="Bank must be two numbers."
message-when-value-missing="Bank is required."
required
value={bank}
onchange={handleBankChange}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="3">
<lightning-input
class="slds-m-right_medium"
type="text"
name="branch"
label="Branch"
max-length="4"
min-length="4"
placeholder="XXXX"
pattern="^[0-9]*$"
message-when-pattern-mismatch="Branch can only contain numbers."
message-when-too-short="Branch must be four numbers."
message-when-value-missing="Branch is required."
required
value={branch}
onchange={handleBranchChange}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="4">
<lightning-input
type="text"
name="account"
label="Account"
max-length="7"
min-length="7"
placeholder="XXXXXXX"
pattern="^[0-9]*$"
message-when-pattern-mismatch="Account can only contain numbers."
message-when-too-short="Account must be seven numbers."
message-when-value-missing="Account is required."
required
value={account}
onchange={handleAccountChange}>
</lightning-input>
</lightning-layout-item>
<lightning-layout-item size="3">
<lightning-input
class="slds-m-horizontal_medium"
type="text"
name="suffix"
label="Suffix"
max-length="3"
min-length="2"
placeholder="XXX"
pattern="^[0-9]*$"
message-when-pattern-mismatch="Suffix can only contain numbers."
message-when-too-short="Suffix must be at least two numbers."
message-when-value-missing="Suffix is required."
required
value={suffix}
onchange={handleSuffixChange}>
</lightning-input>
</lightning-layout-item>
</lightning-layout>
<div class="slds-m-vertical_small slds-border_top slds-color__border_gray-6"></div>
<lightning-layout class="slds-m-bottom_small" horizontal-align="end">
<!-- Displays button to save the values from the form if viewed on an existing payee record -->
<template if:true={payeeRecord}>
<lightning-layout-item>
<lightning-button class="slds-m-around_small" variant="brand" type="submit" label="Save" name="save"></lightning-button>
</lightning-layout-item>
</template>
<!-- Displays save button as next if payee record doesn't exist, as this process will be when it the bank details are in a flow -->
<template if:false={payeeRecord}>
<lightning-layout-item>
<lightning-button class="slds-m-around_small" variant="brand" type="submit" label="Next" name="save"></lightning-button>
</lightning-layout-item>
</template>
</lightning-layout>
</lightning-record-edit-form>
</template>
</template>
import { LightningElement, api, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
import { FlowNavigationNextEvent } from 'lightning/flowSupport';
import getPayeeBankDetails from '@salesforce/apex/HSAAP_BankAccountDetailsController.getBankDetailsByPayeeId';
import ID_FIELD from '@salesforce/schema/HSAAP_Payee__c.Id';
import BANK_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_ID__c';
import BRANCH_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Branch__c';
import ACCOUNT_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Base_Number__c';
import SUFFIX_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Suffix__c';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/HSAAP_Payee__c.HSAAP_Bank_Account_Name__c';
export default class HsaapBankAccountDetailsInput extends LightningElement {
@api recordId;
@api accountNameValue; // The bank account name value to be passed to flow builder
@api bankValue; // The bank Id value to be passed to flow builder
@api branchValue; // The bank branch value to be passed to flow builder
@api accountValue; // The bank account base number value to be passed to flow builder
@api suffixValue; // The bank suffix value to be passed to flow builder
payeeRecord; // The payee record returned from the wired method
error; // The error returned from the wired method
wiredRecordsResult; // The result returned from the wired payee, used when refreshing UI based on form success
// Wired payee data, passing in the record Id of the payee
// This returns the bank details of the payee
@wire(getPayeeBankDetails, {
payeeId: '$recordId'
})
wiredPayee(result) {
this.wiredRecordsResult = result;
const { data, error } = result;
if (error) {
this.error = error;
} else if (data) {
this.payeeRecord = data;
}
}
// Returns the bank account name to be rendered in the UI
get accountName() {
if (this.payeeRecord) {
return this.payeeRecord.HSAAP_Bank_Account_Name__c;
}
}
// Returns the bank Id to be rendered in the UI
get bank() {
if (this.payeeRecord) {
return this.payeeRecord.HSAAP_Bank_ID__c;
}
}
// Returns the bank branch to be rendered in the UI
get branch() {
if (this.payeeRecord) {
return this.payeeRecord.HSAAP_Bank_Account_Branch__c;
}
}
// Returns the bank account base number to be rendered in the UI
get account() {
if (this.payeeRecord) {
return this.payeeRecord.HSAAP_Bank_Account_Base_Number__c;
}
}
// Returns the bank suffix to be rendered in the UI
get suffix() {
if (this.payeeRecord) {
return this.payeeRecord.HSAAP_Bank_Account_Suffix__c;
}
}
// Captures the value of the bank account name from the UI input field
handleAccountNameChange(event) {
this.accountNameValue = event.target.value;
}
// Captures the value of the bank Id from the UI input field
handleBankChange(event) {
this.bankValue = event.target.value;
}
// Captures the value of the bank branch from the UI input field
handleBranchChange(event) {
this.branchValue = event.target.value;
}
// Captures the value of the bank account number from the UI input field
handleAccountChange(event) {
this.accountValue = event.target.value;
}
// Captures the value of the bank suffix from the UI input field
handleSuffixChange(event) {
this.suffixValue = event.target.value;
}
// Save field inputs on submission
handleSubmit(event) {
event.preventDefault();
// Assign each field the matching field value
const fields = event.detail.fields;
fields[ID_FIELD.fieldApiName] = this.recordId;
fields[BANK_FIELD.fieldApiName] = this.bankValue;
fields[BRANCH_FIELD.fieldApiName] = this.branchValue;
fields[ACCOUNT_FIELD.fieldApiName] = this.accountValue;
fields[SUFFIX_FIELD.fieldApiName] = this.suffixValue;
fields[ACCOUNT_NAME_FIELD.fieldApiName] = this.accountNameValue;
// If the input is valid then submit the form, close the quick action screen and navigate to the next flow screen,
// otherwise prevent the user from submitting and closing the screen
if (this.isInputValid()) {
this.template.querySelector('lightning-record-edit-form').submit(fields); // Submit fields by querying for record edit form in html
this.dispatchEvent(new FlowNavigationNextEvent());
this.dispatchEvent(new CloseActionScreenEvent());
} else {
event.preventDefault();
const evt = new ShowToastEvent({
title: 'Please review error messages.',
variant: 'error'
});
this.dispatchEvent(evt);
}
}
// Handles logic on success of form submission
handleSuccess() {
const evt = new ShowToastEvent({
title: 'Bank Account Details Saved Successfully',
variant: 'success'
});
this.dispatchEvent(evt);
// Refresh the wire adapter to update the bank account details in the UI
refreshApex(this.wiredRecordsResult);
}
// When an error is thrown on the form, show a toast with the error message and log an error
handleError(event) {
const logger = this.template.querySelector('c-logger');
logger.error(event.detail.detail).addTag('DmlException', 'LWCException');
logger.saveLog();
const evt = new ShowToastEvent({
title: event.detail.message,
message: event.detail.detail,
variant: 'error'
});
this.dispatchEvent(evt);
}
// Method that returns a boolean value based on if an input field is valid or not
isInputValid() {
let isValid = true;
let inputFields = this.template.querySelectorAll('lightning-input');
inputFields.forEach((inputField) => {
if (!inputField.checkValidity()) {
inputField.reportValidity();
isValid = false;
}
});
return isValid;
}
}
Any help would be much appreciated, as I’m stuck on how to debug this 🙂