Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
For example, my localForage is using IndexedDB for data access, and I am using the default configuration or I have modified the name and storeName of my driver. The function localforage.clear() is the corresponding table of the corresponding database in the configuration. Do you want to perform an empty operation? or the entire database.
The official docs are vague about this.
I used swiperjs in my project.
Define the scenario:
The swiper takes up half the screen.
I want slidesPerView: 1.5 in the initial definition of the swiper.
from position: absolute; for .swiper and from width: 400px !important; for .swiper slide I have used it so that the slider is removed from the container and connected to the right wall.
Then, when the user scrolls and reaches the slider range, during a simple animation, the title should be deleted and the slider will take the whole page and the number of slidesPerView: 3
Now the problem is that:
when the user scrolls swiperShowCase.passedParams.slidesPerView = 3 does not work.
Can you help me, why slidesPerView does not equal 3 when the user reaches the slider range.
// Swiper ShowCase
var swiperShowCase = new Swiper(".SwiperShowCase", {
slidesPerView: 1.5,
spaceBetween: 15,
loop: true,
keyboard: {
enabled: true,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
const target = document.getElementById("showCase");
window.onscroll = function() {
const scrollPosition =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
if (scrollPosition >= target.offsetTop) {
target.classList.add("active");
swiperShowCase.passedParams.slidesPerView = 3;
}
};/* container */
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr 1320px 1fr;
grid-template-areas: ". content .";
}
.container>* {
grid-area: content;
}
@media screen and (min-width: 2560px) {
.container {
grid-template-columns: 1fr 2300px 1fr;
}
}
@media screen and (min-width: 1920px) and (max-width: 2559px) {
.container {
grid-template-columns: 1fr 1820px 1fr;
}
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
.container {
grid-template-columns: 1fr 1330px 1fr;
}
}
@media screen and (min-width: 1320px) and (max-width: 1439px) {
.container {
grid-template-columns: 1fr 1310px 1fr;
}
}
/* container */
.section1{
height: 500px;
width: 100%;
border: 3px solid green;
margin-bottom: 5rem;
}
.showCase {
border-bottom: 1px solid rgba(17, 17, 17, 0.1);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.showCase--content {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
height: 1000px;
border: 1px solid red;
}
.showCase--content::after {
position: absolute;
content: "";
width: 1px;
height: 100%;
bottom: 0;
left: 0;
background-color: rgba(17, 17, 17, 0.1);
}
.showCase--content::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
bottom: 0;
left: 50%;
background-color: rgba(17, 17, 17, 0.1);
}
.showCase--content .title {
width: 35%;
margin-inline-start: 14px;
}
.showCase--slider {
width: 50%;
height: 100%;
position: relative;
color: black;
}
.showCase .showCase--slider .swiper {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
margin-right: 0;
margin-left: auto;
}
.showCase .swiper-slide {
width: 400px !important;
padding: 1.5rem;
border-radius: 16px;
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid blue;
}
.showCase .swiper-slide>div {
position: relative;
overflow: hidden;
}
.showCase .swiper-slide>div>img.indicatorImage {
height: 300px;
width: 100%;
object-fit: cover;
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: all 0.5s;
}
.showCase .swiper-slide>div:hover img.indicatorImage {
-webkit-filter: grayscale(0);
filter: grayscale(0);
-webkit-transform: scale(1);
transform: scale(1);
}
.showCase .swiper-slide>p {
font-size: var(--txt18);
line-height: var(--line-height140);
color: var(--third-color);
}
/* showCase animation */
@keyframes fadeIn-top {
0%{
opacity: 1;
}
100% {
transform: translateY(-500%);
opacity: 0;
}
}
@-webkit-keyframes fadeIn-top {
0%{
opacity: 1;
}
100% {
transform: translateY(-500%);
opacity: 0;
}
}
.showCase.active .showCase--content .title {
width: 0;
animation: fadeIn-top 3s forwards;
}
.showCase.active .showCase--content .showCase--slider {
width: 100%;
transition: width 2s;
}<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" rel="stylesheet"/>
<section class="section1" ></section>
<section class="showCase" id="showCase">
<div class="container">
<div>
<div class="showCase--content">
<div class="title">
<h3> Showcases</h3>
</div>
<div class="showCase--slider">
<div class="swiper SwiperShowCase">
<div class="swiper-wrapper">
<div class="swiper-slide">
1
<div>
<img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png" alt="" class="indicatorImage" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="swiper-slide">
2
<div>
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="" class="indicatorImage" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="swiper-slide">
3
<div>
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="" class="indicatorImage" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="swiper-slide">
4
<div>
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg" alt="" class="indicatorImage" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="swiper-slide">
5
<div>
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg" alt="" class="indicatorImage" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</section>I have an issue with Promise and an API rate limit.
I want to read a CSV file and call an API for each line of this CSV.
Here is what I did:
fs.createReadStream("./input.csv")
.pipe(parse({ delimiter: ",", from_line: 1 }))
.on("data", async (row) => {
promises.push(processData(row, data));
await timeout();
})
.on("end", async () => {
await Promise.all(promises);
stringify(data, (err, output) => {
fs.writeFileSync("output.csv", output);
});
resolve();
})
.on("error", function (error) {
console.log(error.message);
});
});
with processData being:
async function processData(row, data) {
const firstName = row[0];
const infos = await callAPI(firstName);
await timeout();
const newRow = [
firstName,
infos
];
data.push(newRow);
return data;
}
and the timeout function:
function timeout() {
return new Promise((resolve) =>
setTimeout(resolve, randomIntFromInterval(3000, 39990))
);
}
It doesn’t work, all the promise start at the same time and the API is flooded. I tried to put the timeout() before the promises.push() but it doesn’t work either…
What did I miss?
I was trying to use an ‘addEventHandler’ in javascript so I could make a button alert ‘Clicked’ after I click the button. I was using, or trying to use, the ‘click’ event and used a callback function called clickHandler. I’m using Vscode btw.
So first I used document.querySelector('.js-button') to grab the html tag called button with the class js-button and gave the tag a variable in javascript called $button. So, const $button = document.querySelector('.js-button');. I then used the addEventListener('click', clickHandler) with the clickHandler being a function to make it alert on click. So, function clickHandler(event) { alert('Clicked'); }. After I clicked the button it didn’t alert anything. It gave an error in the chrome inspector sources tab which was “Error = Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”. Also it says $button = null when I typed $button in the inspector console. Does anyone see what’s going on here? Help would be much appreciated!
The HTML
<!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>
<h1>Event Handling</h1>
<script src="./event.js"></script>
<button class="js-button">Click Me!</button>
</body>
</html>
The Javascript
const $button = document.querySelector('.js-button');
function clickHandler(event) {
alert('Clicked');
}
$button.addEventListener('click', clickHandler);
I am trying to create a simple drag and drop using React-DND.
In the DragDrop Component there are 4 blocks created onload as default state.
I am trying to drag these to 2 boards and also remove the element from the blockList.
My issue is that it seems to be using the items index rather than the id property.
When I drag item 1 and then drag item 2 it drops item 1 again because the index has shifted. I want to drop the item I am dragging not the index of that item.
I am passing the id to the drag component
const [{ collected, isDragging }, drag] = useDrag(() => ({
type: ItemTypes.BLOCK,
item: {
id: id
},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
})
}))
Also accessing it in the drop hook
const [{ isOver }, drop] = useDrop(() => ({
accept: ItemTypes.BLOCK,
drop: (item) => addBlockToBoard(item.id, item.name),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
})
}))
//console.log("isOver: ", isOver);
const addBlockToBoard = (id, name) => {
const currentBlock = blockList.find(block => block.id === id);
//console.log("Current: ", currentBlock);
setBoard((board) => [...board, currentBlock]);
setAbove((board) => [...board, currentBlock]);
updateBlockList(currentBlock);
//setBlocklist((blockList) => [...remainingBlocks])
}
I have a sandbox of the full code here:
https://codesandbox.io/s/jolly-napier-ipyg86?file=/src/BelowBoard.js
After mapping the items to the blockList how does react dnd know what the data is for the draggable object?
Thanks in advance. Any help is appreciated.
I encountered an error while attempting to build and install the app using the ‘yarn android’ command. The error message and relevant details are as follows:
I am new to open souce like I am trying to do open source
I cloned Rocket.Chat.ReactNative https://github.com/RocketChat/Rocket.Chat.ReactNative.git
then did yarn install
and then yarn andoid and encountered this error
———————————–*******************************************************——————————————————
Error: Command failed: gradlew.bat app:installExperimentalPlayDebug -PreactNativeDevServerPort=8081
CMake Deprecation Warning at CMakeLists.txt:42 (cmake_policy):
The OLD behavior for policy CMP0026 will be removed from a future version
of CMake.
The cmake-policies(7) manual explains that the OLD behaviors of all
policies are deprecated and that a policy should be set to OLD only under
specific short-term circumstances. Projects should be ported to the NEW
behavior and not rely on setting a policy to OLD.
CMake Error at CMakeLists.txt:64 (project):
Running
‘nmake’ ‘-?’
failed with:
The system cannot find the file specified
CMake Error: CMAKE_C_COMPILER not set, after EnableLanguage
CMake Error: CMAKE_CXX_COMPILER not set, after EnableLanguage
FAILURE: Build failed with an exception.
Process ‘command ‘cmd” finished with non-zero exit value 1
Run with –stacktrace option to get the stack trace.
Run with –info or –debug option to get more log output.
Run with –scan to get full insights.
BUILD FAILED in 29m 47s
at makeError (C:UsersHpDesktopOpen Source ProjectsRocket.Chat.ReactNativenode_modulesexecaindex.js:174:9)
at C:UsersHpDesktopOpen Source ProjectsRocket.Chat.ReactNativenode_modulesexecaindex.js:278:16
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async runOnAllDevices (C:UsersHpDesktopOpen Source ProjectsRocket.Chat.ReactNativenode_modules@react-native-communitycli-platform-androidbuildcommandsrunAndroidrunOnAllDevices.js:82:7s:82:7)
at async Command.handleAction (C:UsersHpDesktopOpen Source ProjectsRocket.Chat.ReactNativentivenode_modules@react-native-communityclibuildindex.js:108:9)
info Run CLI with –verbose flag for more details.
———————————–*******************************************************——————————————————
I have ensured that I have the Android development environment set up following the instructions provided in the React Native documentation. However, the build process encountered the following issues:
Deprecation warning related to policy CMP0026 in CMakeLists.txt.
CMake errors related to ‘nmake’ and missing compiler settings (CMAKE_C_COMPILER and CMAKE_CXX_COMPILER).
Failure during the task ‘:react-native:ReactAndroid:hermes-engine:configureBuildForHermes’ with a non-zero exit value.
I have tried running the command with additional options such as ‘–stacktrace’, ‘–info’, and ‘–debug’, but the error persists.
I would appreciate any assistance in resolving this build error and successfully installing the app. Thank you for your help.
Operating system: 64-bit operating system, x64-based processor
Node.js version: v18.16.0
Yarn version: 1.22.19
React Native version: 0.71.7
I tried downloading latest version of cmake downloaded gcc g++ tried deleting node_modules and reinstalling the project
I’m trying to allow jpg files only, and when you dragenter/dragover, if at least one file being dragged over isn’t a jpg then I want to show the error message, otherwise just show active dropzone. I can’t get the proper syntax for checking for jpg files only…I just keep getting my error message triggered even when the file time is a jpg (Whatever I’m doing wrong is also causing some buggy behavior with the dropzone, so if you want to actually drop a jpg file into it, you have to release quickly.)
Here’s what I have (same code for dragover)
container.addEventListener(
"dragover",
(e) => {
e.preventDefault();
e.stopPropagation();
const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
if (img) container.classList.add("active");
else {} error.innerHTML = "Error HTML removed for readability";
error.classList.remove("hideit");
},
false
);
let uploadButton = document.getElementById("upload-button");
let chosenImage = document.getElementById("chosen-image");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".drag-area");
let submit = document.getElementById("submit");
let sub2 = document.getElementById("sub2");
let error = document.getElementById("error");
let imageDisplay = document.getElementById("image-display");
const fileHandler2 = (file, name, type) => {
if (type.split("/")[1] !== "jpeg") {
//File Type Error
container.classList.remove("dropped");
submit.classList.remove("hideit");
error.innerHTML = "<span class="error-m">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
error.classList.remove("hideit");
setTimeout(function(){
error.innerHTML="";
error.classList.add("hideit");
},90000);
return false;
}
error.innerText = "";
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = () => {
//image and file name
let imageContainer = document.createElement("figure");
let img = document.createElement("img");
img.src = reader.result;
imageContainer.appendChild(img);
imageContainer.innerHTML += `<div id="caption">${name}</div>`;
imageDisplay.appendChild(imageContainer);
};
};
//Upload Button
uploadButton.addEventListener("change", () => {
imageDisplay.innerHTML = "";
container.classList.add("dropped");
submit.classList.add("hideit");
Array.from(uploadButton.files).forEach((file) => {
fileHandler2(file, file.name, file.type);
});
});
container.addEventListener(
"dragenter",
(e) => {
e.preventDefault();
e.stopPropagation();
const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
if (img) container.classList.add("active");
else {} error.innerHTML = "<span class="error-m">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
error.classList.remove("hideit");
},
false
);
container.addEventListener(
"dragleave",
(e) => {
e.preventDefault();
e.stopPropagation();
container.classList.remove("active");
},
false
);
container.addEventListener(
"dragover",
(e) => {
e.preventDefault();
e.stopPropagation();
const img = Array.from(e.dataTransfer.items).find(e => e.type.match('image/jpeg'))
if (img) container.classList.add("active");
else {} error.innerHTML = "<span class="error-m">One or more of the selected files are invalid. Files must be .jpg/.jpeg</span>";
error.classList.remove("hideit");
},
false
);
container.addEventListener(
"drop",
(e) => {
e.preventDefault();
e.stopPropagation();
container.classList.remove("active");
container.classList.add("dropped");
submit.classList.add("hideit");
error.classList.add("hideit");
let draggedData = e.dataTransfer;
let files = draggedData.files;
imageDisplay.innerHTML = "";
Array.from(files).forEach((file) => {
fileHandler2(file, file.name, file.type);
});
},
false
);
window.onload = () => {
error.innerText = "";
};* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img, video {
height: auto;
max-width: 100%;
}
body {
background-color: #FCFCFC;
}
.mglass {
width: 34px;
margin-left: auto;
margin-right: 10px;
opacity: 0.343;
}
.dd-t2 {
font-size: 13px;
color: #9e9e9e;
}
.hideit {
display: none !important;
}
.upl-top {
margin-bottom: 16px;
width: 80%;
display: inline-block;
}
.upl-top-right {
width: 19%;
display: inline-block;
}
.u-left {
border-radius: 3px;
}
.up-head {
font-size: 18px;
color: #2b2b2b;
font-weight: 500;
}
.container-ck {
background-color: #ffffff;
width: 768px;
min-width: 37.5em;
padding: 3.12em 1.87em;
/* position: absolute; */
/* transform: translateX(-50%); */
left: 50%;
top: 1em;
box-shadow: 0 1.25em 3.43em rgba(0, 0, 0, 0.08);
border-radius: 0.5em;
margin: auto;
margin-top: 65px;
}
.ck-btn {
padding-top: 6px;
}
input[type="file"] {
display: none;
}
label {
display: block;
position: relative;
background-color: #025bee;
color: #ffffff;
font-size: 1.1em;
text-align: center;
width: 11em;
padding: 1em 0;
border-radius: 0.3em;
margin: 0 auto 1em auto;
cursor: pointer;
}
#image-display {
position: relative;
width: 98%;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
gap: 21px;
flex-wrap: wrap;
}
#image-display figure {
width: 48%;
}
#image-display img {
width: auto;
height: auto;
}
#image-display figcaption {
font-size: 0.8em;
text-align: center;
color: #5a5861;
}
#error {
text-align: center;
color: #ff9191;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: #ffffffa8;
z-index: 9999;
backdrop-filter: blur(3px);
cursor: default;
}
.container22 {
max-width: 440px;
background: #fff;
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin: auto;
max-width: 780px;
padding: 17px;
margin-top: 20px;
}
.overflow-x-hidden {
overflow:visible;
width: 640px;
margin: auto;
margin-top: 90px;
}
.i-right {
height: 29px !important;
}
.dd-t {
font-size: 14px;
}
.t2-line {
line-height: 19px;
}
html {
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
line-height:1.5
}
.container22{
max-width: 594px;
}
.drag-area {
min-height: 285px;
border: 2px dashed #e0eafc;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
padding: 17px;
border-width: 2px;
border-radius: 8px;
border-color: #656fd0;
border-style: dashed;
background-color: rgb(250, 250, 250);
color: rgb(189, 189, 189);
outline: none;
cursor: pointer;
position: relative;
}
h3 {
margin-bottom: 20px;
font-weight: 500;
}
.drag-area .icon {
font-size: 50px;
color: #1683ff;
}
.InlineSVG {
display: inline;
}
.flex {
display: flex;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.drag-area .button {
padding-top: 5px;
padding-bottom: 0px;
}
input {
height: 34px;
border: 1px solid #d2d4de;
padding-left: 13px;
border-radius: 4px;
font-size: 14px;
}
.justify-center {
justify-content: center;
}
.drag-area .header {
font-size: 20px;
font-weight: 500;
color: #34495e;
}
.drag-area .support {
font-size: 13px;
color: #a3a3a3;
margin: 10px 0 15px 0;
font-weight: 300;
}
.top-out {
width: 100%;
border-bottom: 1px solid #e2e2e2;
margin-bottom: 18px;
}
.icon-outer1 {
justify-content: center;
margin-bottom: 4px;
}
#sub2 {
margin-left: 2px;
}
#submit {
margin-top: -1px;
text-align: center;
}
.drag-area .button {
font-size: 13px;
font-weight: 400 !important;;
color: #fafafa;
cursor: pointer;
background: #656fd0 !important;
border-radius: 5px;
margin-top: 20px;
margin-bottom: 7px;
min-height: 33px;
}
.hideit {
display: none !important;
}
.dropped {
padding: 0;
margin: 0;
border: none;
background: transparent;
}
.drag-area.active {
border-color: #656fd0;
border-style: solid;
opacity: 1;
}
.drag-area img {
width: 100%;
height: 100%;
object-fit: cover;
}
.download {
background-color:#4CAF50;
border: none;
color: white;
padding: 6px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 3px 1px;
border-radius: 12px;
cursor: pointer;
width: 100%;
}
.uploader-svg {
height: 26px !important;
opacity: .2;
width: auto !important;
margin: 9px;
}<body>
<div class="container22">
<div class="drag-area">
<div id="error" class="hideit"></div>
<div id="image-display"></div>
<div id="submit">
<div class="flex icon-outer1"><svg class="icon faded uploader-svg" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 91.27"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>picture</title><path class="cls-1" d="M87.29,16.88A11.35,11.35,0,1,1,75.94,28.23,11.35,11.35,0,0,1,87.29,16.88Zm27.33,74.39H8.26a8.27,8.27,0,0,1-5.83-2.44h0A8.24,8.24,0,0,1,0,83V8.26A8.26,8.26,0,0,1,2.42,2.42h0A8.26,8.26,0,0,1,8.26,0H114.62a8.26,8.26,0,0,1,5.83,2.43h0a8.26,8.26,0,0,1,2.42,5.84V83a8.24,8.24,0,0,1-2.42,5.83h0a8.27,8.27,0,0,1-5.83,2.44Zm-7.35-9.43L87.6,50.46a4.52,4.52,0,0,0-7.65,0L70.66,65.39,80.77,81.84H76.62l-27.57-44c-2.54-3.39-6.61-3.13-8.88,0l-27,44H9.42V9.42h104V81.84Z"/></svg><div class="ms-2 me-2" style="height: 44px; border-left: 1px solid rgb(203, 203, 203);"></div><svg class="icon faded uploader-svg i-right" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 98.27"><title>photos</title><path d="M4.84,27.31H90.76a4.77,4.77,0,0,1,3.4,1.41,4.84,4.84,0,0,1,1.41,3.4V93.47a4.75,4.75,0,0,1-1.41,3.39,1.36,1.36,0,0,1-.25.22,4.67,4.67,0,0,1-3.18,1.19H4.81A4.81,4.81,0,0,1,0,93.47V32.12a4.77,4.77,0,0,1,1.41-3.4,4.83,4.83,0,0,1,3.4-1.41ZM32.15,0h85.92a4.77,4.77,0,0,1,3.4,1.41,4.84,4.84,0,0,1,1.41,3.4V66.16a4.75,4.75,0,0,1-1.41,3.39,1.09,1.09,0,0,1-.25.22A4.67,4.67,0,0,1,118,71h-5.38V65.22h4.51V5.71H33.06v4.2H27.31V4.81a4.77,4.77,0,0,1,1.41-3.4A4.84,4.84,0,0,1,32.12,0ZM18.5,13.66h85.92a4.75,4.75,0,0,1,3.39,1.41,4.8,4.8,0,0,1,1.41,3.39V79.81a4.77,4.77,0,0,1-1.41,3.4,1.4,1.4,0,0,1-.25.22,4.67,4.67,0,0,1-3.18,1.19H99V78.88h4.51V19.37H19.4v4.2H13.65V18.46a4.81,4.81,0,0,1,4.81-4.8ZM24.68,44a6.9,6.9,0,1,1-6.89,6.89A6.89,6.89,0,0,1,24.68,44Zm29,29.59L67.49,49.71,82.14,86.77H13.77V82.18l5.74-.29,5.75-14.08,2.87,10.06h8.62l7.47-19.25L53.7,73.56ZM89.86,33H5.75V92.53H89.86V33Z"/></svg></div>
<div class="2-line-top t2-line"><span class="dd-t">Drag & drop <u>or</u> </span> </div> <div class="2-line-bottom t2-line"> <span class="dd-t">browse for photo(s)</span> </div><input type="file" id="upload-button" multiple accept="image/*" />
<label class="ck-btn flex self-end justify-center px-4 py-2 mt-5 text-sm font-medium text-white transition duration-150 ease-in-out border border-transparent rounded-md bg-wave-600 hover:bg-wave-500 focus:outline-none focus:border-wave-700 focus:shadow-outline-wave active:bg-wave-700 button" for="upload-button"><i class="fa-solid fa-upload"></i>Browse files
</label>
<div id="sub2"><span class="support">Supports: JPEG, JPG</span></div>
</div>
</div>
</div>
</body>The conversation exceeded the original scope, so asking the expanded question here.
Given this data:
{
"tabs-3": {
"Collection A": {
"Level 2": {
"Data A": {
"tab3graph25": {
"30/04": 21750,
"31/03": 19428,
"29/05": 20955
}
}
}
}
"Collection B": {
"Level 2": {
"Data A": {
"tab3graph33": {
"30/04": 56863,
"31/03": 62298,
"29/05": 56044
}
}
}
}
"Collection C": {
"Level 2": {
"Data A": {
"tab3graph40": {
"30/04": 56044,
"31/03": 62298,
"29/05": 56863
}
}
}
}
}
}
What would a function look like that would take as it’s input the holding object to search, in this case, “tabs-3”, and a key set to look for, e.g., var searchList = [Collection B, Level 2, Data A] and then return “tab3graph33:{…values…}
The original starting function I have is here for reference ,
function searchObjectForValues(obj, searchList) {
var matchingObjects = {};
function recursiveSearch(currentObj, path) {
if (typeof currentObj === 'object' && currentObj !== null) {
for (var key in currentObj) {
if (currentObj.hasOwnProperty(key)) {
var value = currentObj[key];
var currentPath = path.concat(key);
if (searchList.includes(key)) {
matchingObjects[key] = currentObj[key];
}
recursiveSearch(value, currentPath);
}
}
}
}
recursiveSearch(obj, []);
return matchingObjects;
}
Although the answers in the original question are much more elegant than mine.
After using the commands commands: localStorage.setItem(‘message’, ‘hi’); console.log(localStorage.getItem(‘message’)); , the console says me “null” i think i did the command right, but it does not work work. How can i fix it?
I tried a lot of things starting off on the syntax rule, then i checked if the position was right and also the command by itself, but it always gave me “null” as a result, i’m following a youtube tutorial and they are getting it right but i don’t.
How get 404 status code with error message instead of getting CORS error while call the ajax method in RXJS Libray.
I’m uisng RxJS “version”: “7.8.0”,
method.js
import merge from 'lodash/fp/merge'
const createXHR = () => new XMLHttpRequest()
export const DEFAULT_REQUEST_OPTIONS = {
createXHR,
method: 'POST',
timeout: 200000
}
export default merge(DEFAULT_REQUEST_OPTIONS)
request.js
import getOptions from '../../../../../services/utils/get-options'
const API_HOST = 'https://testurl.com/userIds'
export default (app, body) => getOptions({
method: 'GET',
url: `${API_HOST}/request/getmyrequest?userId=5`
})
apiResonse.js
import { ajax } from 'rxjs/ajax'
import { map, pluck, shareReplay, switchMap } from 'rxjs/operators'
import env$ from '../../../../services/env'
import request from './request'
export default args => env$.pipe(
map(env => request(env, args)),
switchMap(req => ajax(req)),
pluck('response'),
shareReplay(1)
)
I want to shorten given string into an array of phrases with by max length of n characters:
Note : we don’t want to cut the words.
const sentence =`Wake has three meanings as a noun, and, yes, just about as many meanings as a verb! So get set. To wake is come out of sleep, a verb you'll recognize from "Wake up! You're asleep at the wheel!" You can wake feelings, as well as the people who are having them. The wake before the funeral caused Mike to wake from his depression and decide to live life to the fullest. His first act was to water ski; he eventually mastered staying upright while crossing the wake of the boat that was towing him.`
// shorten with max characters of 10
console.log(shorten(sentence, 10));
function shorten(str, maxLen) {
if(str.length <= maxLen) return [str];
let max, min = 0, i = 1;
const result = [];
while (maxLen * i < str.length) {
max = str.lastIndexOf(' ', maxLen * i);
result.push(str.substr(min, max));
min = max + 1;
i++;
}
return result;
}The issue is my code dos’t work correctly as you see.
I have the following code (scaled down) that simulates the races a karting driver takes place in.
I initially start with a two dimensional array for each Driver.
Each driver then has an Object array attached to it that has the rounds competed in.
How can I search through the “round” object array and return both the index of the driver and the index of the round.
This is a scaled down version but by the end their will be a lot more data added so hesitating using a for/next loop;
For example:
I want to search each .round object array and return an array containing both the index for the driver and the index of the .round object if they has raced in round 10;
In this case driver[0][1] would return the values [[1][4]]; driver [[0][3]] would return the values[[3][3]] and driver[5] would return the values [[5][1]] in a new array;
`
driver = [];
driver[0] = [];
for(n=0; n<=5; n++){
driver[0][n] = new Object();
driver[0][n].id = "Driver: "+n;
driver[0][n].round = new Array();
}
driver[0][0].round = [0];
driver[0][1].round = [1,3,5,7,10];
driver[0][2].round = [1,2,4];
driver[0][3].round = [5,7,8,10,12,14];
driver[0][4].round = [6,11,12];
driver[0][5].round = [4,10,11,12];
`
Thanks in advance.
I can achieve this with a for/next loop but potentially the driver array will become quite large so wanting to know if there is a quicker better way to achieve this.
I’d like to define a interface that has some known variables and some other dynamic.
Let’s assume this definition of interface:
export interface ApplicationData {
applicant?: ApplicantData;
application_unit?: ApplicationUnit;
interested_people_count?: number | undefined;
}
How would I define that in this interface could also be:
interested_person_1: InterestedPerson;
interested_person_3: InterestedPerson;
expenses_1q_2023: Expenses;
expenses_3q_2022: Expenses;
So I do not know in advance how many these variables will be there, only what I know is that if it starts with ‘interested_person_’ then it is InterestedPerson interface and if it starts with ‘expenses_’ then it is Expenses interface.
I am loading an excel file with several sheets. A lot of these cells have formulae depending on cells either in the same sheet, or other sheets.
I am currently loading in the model using exceljs, parsing the formulae using fast-formula-parser, then iterating over every sheet -> row -> cell to determine dependencies and add them to a JS Map, where keys are the coordinates (${sheet}-${row}-${column}) of the cell and values are the object form of this { sheet, row, column }.
I am not happy with the performance of this, so have been exploring possible improvements for several months now. I can accross graphlib (https://github.com/dagrejs/graphlib), which I thought might solve my issues, but I am finding a 3x performance descrease with this approach!
This is a very broad question, but what is the most performant way to caclulate these dependencies for later use? For understanding of the size of the data in question, an example file has 16292 and 2099216 edges, which is a lot!
I’m tring to select points programmatically with plotly. I’m able to draw the selection box with the following code, where the selections_boxes object is assigned to layout.selection:
function randomArray() {
var output = new Array(N);
for (var i = 0; i < N; i++) {
output[i] = Math.random();
}
return output;
}
var myPlot = document.getElementById("plotly-graph");.
var N = 100;
var x = randomArray();
var y = randomArray();
var settings = [
{
mode: "markers",
x: x,
y: y
}
];
var selections_boxes = [
{
type: "rect",
x0: 0.1,
x1: 0.2,
xref: "x",
y0: 0.1,
y1: 0.2,
yref: "y"
}
];
var layout = {
selections: selections_boxes
};
var config = {
};
Plotly.react(myPlot, settings, layout, config);
But until the plotly_selected event is not fired, also if the selection boxes are drawn on the chart, the selected points array is empty, and I can’t find any way to trigger this event programmatically, any hint on how to solve this? Thanks!