Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
var fs = require('fs');
fs.readFile('TestFile.txt', function (err, data) {
if (err) throw err;
console.log(data);
});
//TestFile.txt This is test file to test fs module of Node.js
I have this json file:
[
{
"id": "1",
"name": "Hello world",
"shape": "rect",
"fill": "pink"
}
]
And I also have this javascript file:
const svg = d3.select('svg')
var stringToHTML = function (str) {
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
return doc.body;
};
d3.json("tree.json").then(data => {
const elements = svg.selectAll('*')
.data(data);
elements.enter()
.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 100)
.attr("height", 100)
.attr("fill", d => d.fill)
elements.enter()
.append('text')
.attr("x", 50)
.attr("y", 60)
.html("text", d => {d.name})
})
and this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="600" height="600">
</svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Now the output is:
but when I switch "rect" with d => d.shape it doesn’t behave as before.
d3.json("tree.json").then(data => {
const elements = svg.selectAll('*')
.data(data);
elements.enter()
.append(d => d.)
.attr("x", 20)
.attr("y", 20)
.attr("width", 100)
.attr("height", 100)
.attr("fill", d => d.fill)
But how is it different than the previous one? I also tried outputting d.shape, and it prints string. Then how can I make something that will create a shape according to the shape data?
I have an XHR post request as follows:
const xhr = new XMLHttpRequest();
const formData = new FormData();
const inpFile = document.getElementById("inpFile");
var numFiles = inpFile.files.length;
for (let i = 0; i < numFiles; i++) {
formData.append("file", inpFile.files[i]);
}
xhr.open("POST", "https://submit.com.xz");
xhr.send(formData);
Once I post the form data to the server, or in this instance, a cloud function, I’d like to decode the file, store it as inpFile and send another very similar XMLHttpRequest.
Would appreciate some advice on how to do this as I’m having difficulty extracting the file from the original XMLHttpRequest.
I have an Electron app, And in Electron’s rendering process it has
it’s storage like (localStorage, sessionStorage), I also have a simple extension to install when the my Electron application starts.
The problem I have to log in again in this extension in order to meet my needs, because I assume that Electron has a different (localStorage, sessionStorage) for the installed extensions.
Is there a way to make Firebase persist the login state in custom storage like electron-store? So I don’t need to log in again in the extension rendering process as well.
I have already added the script to index.html but can’t access it inside code of any component of my angular Project.
It is however accessible from the index.html.
The Script:
I want this to be accessible in all of my routes of my Angular project.
I managed to type the object currentProps so TS knows which properties it haves AND each property has its individual type (not an union of all possible types).
So far so good.
Then I have this generic function overrideForIndex which gets one of the possible properties, and should return its value. But it can’t be assigned, because its return-type is a union, and not the specific type.
Now I could just cast it as any and call it a day, but I am curious if there is a way to handle this properly without casting to any.
Here is the “simplified” example:
(open in TS playground)
export type MyProps = {
id?: number;
title?: string;
}
const props: Record<keyof MyProps, any> = {
id: 123,
title: 'foo'
}
export const propNames = Object.keys(props) as Array<keyof MyProps>;
const data: Record<number, MyProps> = { 0: { id: 123, title: 'foo' }};
const buildLatestProps = (): { [P in keyof Required<MyProps>]: MyProps[P] } => {
const getLatest = <T extends keyof MyProps>(propName: T) => data[0][propName];
return Object.fromEntries(propNames.map(n => [n, getLatest(n)])) as any;
};
const currentProps = buildLatestProps();
const overrideForIndex = <T extends keyof MyProps>(propName: T, index: number): MyProps[T] =>
data[index][propName];
propNames.forEach(n => (currentProps[n] = overrideForIndex(n, 0) /* as any */)); // ERR: Type 'string | number | undefined' is not assignable to type 'undefined'.
hello I am making a project in React js in which I want to get the help that how can I achieve this task
In a dashboard, there is an option in which users paste their public google drive folder link and in this folder, there will be images
once the user paste their google drive link and click on the upload button all images from the folder will start display on dashboard
I have 3 different test files
1- testfile-1.js
2- testfile-2.js
3- testfiles-3.js
i can change the test file running order using testfiles feature in cypress.config file but i want to change the order runtime not hard coded.
looking for the solution
Regards
I wrote a program that adds or subtracts a unit to count by pressing the up and down keys on the keyboard.
The problem is that the program does not work properly. When you press the key, look at the console, which runs several times, while each time you press the key, it only has to run once.
This is a problem that crashes after pressing the up or down buttons a few times, please help
import React, { useState } from "react";
export default function Example() {
const [count, setCount] = useState(0);
document.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 38:
setCount(count + 1);
console.log(count);
break;
case 40:
setCount(count - 1);
console.log(count);
break;
}
});
return (
<div>
<p>You clicked {count} times</p>
</div>
);
}
I do some options in this code.
first, get Attribute by getAttribute() this called ‘src’.
second, use 'searchParams.set()' to change resize in this URL.
third, setAttribute() to accepte last change of size.
this is my code:
<!DOCTYPE html>
<html>
<head>
<style>
#twoposition {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 50px;
}
</style>
<title></title>
</head>
<body>
<select onchange="check()" id="selectbox" name="">
<option hidden value="empty"></option>
<option value="firstSize">1</option>
<option value="secondSize">2</option>
</select>
<div id="two">
<div id="de6854">
<div style="width: 100%;height: 100%">
<iframe id="4526d" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100">
</iframe>
<iframe id="3ad34" src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=200,100">
</iframe>
</div>
</div>
</div>
</body>
<script>
function check() {
var val = document.getElementById("selectbox").value
var pic = document.querySelectorAll("#two iframe")
var aa = pic.getAttribute('src')
var url = new URL(aa);
var url0 = url.searchParams.set('resize', '500,300');
var url2 = url.searchParams.set('resize', '400,200');
if(val === "firstSize") {
pic.setAttribute('src',url0)
}
else if(val === "secondSize") {
pic.setAttribute('src',url2)
}
}
</script>
</html>
I try this code but not working.
I want if I select the check 1 has value firstSize change the attribute to url0.
and if I select the check 2 has value secondSize change the attribute to url2.
Can someone please explain me how this works: Converts the sentence string to an array of words
Thank you very much!
I’m making a checkbox where every user presses the checkbox, then the contents of the checkbox will appear in the list section :
as shown here
the problem is the checkbox that works is only the first checkbox in the list and every time the user presses the checkbox, the content that shown in the list is only the last data in the database.
here is my code :
@foreach($users as $user)
<ol class="list-group" >
<div class="card">
<li class="list-group-item group-containers">
<div class="row">
<input onclick="checkBox(this)" class="form-check-input" type="checkbox" id="approver">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
<label for="" class="text-secondary">{{ $user->email }}</label>
</div>
</div>
</input>
</li>
</div>
</ol>
@endforeach
Here is the code that shows the selected checkbox content :
<ol id="list" class="list-group" style="display:none">
<div class="card">
<li class="list-group-item">
<div class="row">
<div class="col-1 c-avatar mr-3">
<img class="c-avatar-img" src="{{ url('/assets/img/avatars/3.png') }}">
</div>
<div class="col-8">
<div class="">{{ $user->name }}</div>
</div>
</li>
</div>
</ol>
and here is the javascript code :
<script>
function checkBox(){
// console.log(e)
var cb = document.getElementById("approver");
var text = document.getElementById("list");
if(cb.checked==true){
text.style.display="block";
} else {
text.style.display="none";
}
}
</script>
any solutions?
I use @nivo/pie with "gatsby": "^3.13.0".
But I got an error when I gatsby build.
WebpackError: ReferenceError: ResizeObserver is not defined
I have no idea to solve it. I would be appreciate if you could give me some advice.
And here is the React code using nivo’s pie chart.
PieChart.tsx
import React from 'react'
import { ResponsivePie } from '@nivo/pie'
const PieChart: React.FC = ({ data }) => {
return (
<>
<div>
<ResponsivePie
data={data}
margin={{ top: 30, right: 80, bottom: 70, left: 80 }}
borderColor={{
from: 'color',
modifiers: [
[
'darker',
0.2,
],
],
}}
arcLabelsTextColor={{
from: 'color',
modifiers: [
[
'darker',
2,
],
],
}}
fill={[
{
match: {
id: 'ruby',
},
id: 'dots',
},
]}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 0,
translateY: -1,
},
]}
/>
</div>
</>
)
}
export default PieChart
Thank you.
how can we stop initialize below code many times after succesffully logged in via help of javascript?
connect.core.initCCP(containerDiv, {
ccpUrl: instanceURL, // REQUIRED
loginPopup: true, // optional, defaults to `true`
region: "eu-central-1", // REQUIRED for `CHAT`, optional otherwise
softphone: { // optional, defaults below apply if not provided
allowFramedSoftphone: true, // optional, defaults to false
}
need quick help on this.!
How can I perform a search with ‘AND’ operator via RavenDB?
Based on the docs it’s written that I need to add the operator enum (“AND” “OR”) as the third parameter of the search function.
https://ravendb.net/docs/article-page/4.0/nodejs/client-api/session/querying/how-to-use-search
From some reason the AND operator does not work and it gives me OR results by default.
Example:
Users collection:
users/1-A: {
firstName: 'Joe',
lastName: 'Allen'
}
users/2-A: {
firstName: 'Joe',
lastName: 'Biden'
}
The call to raven:
session.query({ collection: 'Users' })
.search('firstName', 'Joe', 'AND') // search with AND operator
.search('lastName', 'Biden')
.all()
The call above returns back both documents.
What should be the appropriate syntax for that?
Thanks