Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
This problem only happening in Salesforce. Alphabet “i” and “j” are converting to different character when we are typing.
In my automation script, I am typing a lower case letter “i”. But, when I run the automation script, it changes the lower case letter i to a different character. It happens in both Chrome and Edge. The application works fine when I test it manually.
I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn’t filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.
applyFilter(): void {
console.log('mockData************', this.mockData);
if (!this.mockData || this.mockData.length === 0) {
console.error('No Data to Filter');
return;
}
let filteredData = this.mockData; // Start with the full data
if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
filteredData = this.filterByIdentityCheckbox(filteredData);
}
console.log('Filtered Data ', filteredData);
if (this.dataSource) {
this.dataSource.data = filteredData;
this.dataSource.paginator = this.paginator; // Assign paginator here
}
if (this.dataSource && this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
filterByIdentityCheckbox(data: any[]): any[] {
console.log(
'******Applying filter by identifierFilterValue:',
this.identifierFilterValue
);
if (
!this.identifierFilterValue ||
this.identifierFilterValue.length === 0
) {
console.log('No Identifier Filters are selected return full data');
return [...data];
}
return data.filter((item) => {
console.log('Checking item identifier:', item.identifier);
if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
console.log('Matched identifier:', item.identifier);
return true;
} else {
console.log('Identifier not matched', item.identifier);
return false;
}
});
}
}
I have a parent component, filter component, and view table component.
Here is my stackblitz
I am working on an Electron/React/Tailwind project. I have a component, ItemSlot.jsx. I want to style certain divs dynamically based on the value of the image_path property of the HelmetItem object. However, this doesn’t work (I’m assuming TailwindCSS does not support this).
I’ve noticed that when I pass a variable to bg-[url(${helmetItem.image_path})], Output.css does not change. I have also tried adding a conditional in-line style attribute that will handle only the background image when the isHelmetSelected is true, this also does not work.
// ItemSlot.jsx
import React from 'react';
const SlotsMenu = ({itemObjects, slotTypes, handleSlotClick}) => {
const isHelmetSlotSelected = slotTypes.includes('Helmet');
const isTorsoSlotSelected = slotTypes.includes('Torso');
const isArmsSlotSelected = slotTypes.includes('Arms');
const isShoulderSlotSelected = slotTypes.includes('Shoulders');
const isLegsSlotSelected = slotTypes.includes('Legs');
const isHandsSlotSelected = slotTypes.includes('Hands');
const isWeaponSlotSelected = slotTypes.includes('weapon');
const isFoodSlotSelected = slotTypes.includes('food');
const isBoosterSlotSelected = slotTypes.includes('booster');
const isMedSlotSelected = slotTypes.includes('med');
// Item slot tooltip logic
const helmetItem = itemObjects.find((item) => item.slot === 'Helmet');
const helmetItemName = helmetItem ? helmetItem.armor_name : undefined;
const torsoItem = itemObjects.find((item) => item.slot === 'Torso');
const torsoItemName = torsoItem ? torsoItem.armor_name : undefined;
const armsItem = itemObjects.find((item) => item.slot === 'Arms');
const armsItemName = armsItem ? armsItem.armor_name : undefined;
const legsItem = itemObjects.find((item) => item.slot === 'Legs');
const legsItemName = legsItem ? legsItem.armor_name || legsItem.implant_name : undefined;
const shouldersItem = itemObjects.find((item) => item.slot === 'Shoulders');
const shoulderItemName = shouldersItem ? shouldersItem.armor_name : undefined;
const handsItem = itemObjects.find((item) => item.slot === 'Hands');
const handsItemName = handsItem ? handsItem.armor_name : undefined;
const weaponItem = itemObjects.find((item) => item.slot === 'weapon');
const weaponItemName = weaponItem ? weaponItem.weapon_name : undefined;
const foodItem = itemObjects.find((item) => item.slot === 'food');
const foodItemName = foodItem ? foodItem.food_name : undefined;
const medItem = itemObjects.find((item) => item.slot === 'med');
const medItemName = medItem ? medItem.med_name : undefined;
const boosterItem = itemObjects.find((item) => item.slot === 'booster');
const boosterItemName = boosterItem ? boosterItem.booster_name : undefined;
// Logic for determining leg pads or implant in leg slot
const legsItemKeys = legsItem ? Object.keys(legsItem) : undefined;
const legsItemType = legsItem ? legsItemKeys[1] : undefined
return (
<>
{/* Item Slots */}
<div className="item-slots flex flex-col w-full h-full items-center">
<h1 className='text-white'>Armor</h1>
{/* Armor Slots Layout */}
<div className='armor-slots flex flex-col w-full h-1/6 bg-[url(asset/grid.jpg)] lg:mb-20'>
<div className='HTS-slots flex flex-row justify-center p-2'>
<div className={isHelmetSlotSelected
? `text-center bg-[url(assets/${helmetItem.image_path})] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/helmetSelectedLG.png)] cursor-pointer`
: 'text-center bg-[url(assets/headSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/headSlotLG.png)]'
}
title={helmetItemName}
onClick={isHelmetSlotSelected ? () => handleSlotClick('Helmet') : undefined}>
</div>
<div className={isTorsoSlotSelected
? 'text-center bg-[url(assets/torsoSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/torsoSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/torsoSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/torsoSlotLG.png)]'
}
title={torsoItemName}
onClick={isTorsoSlotSelected ? () => handleSlotClick('Torso') : undefined}>
</div>
<div className={isArmsSlotSelected
? 'text-center bg-[url(assets/armsSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/armsSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/armSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/armSlotLG.png)]'
}
title={armsItemName}
onClick={isArmsSlotSelected ? () => handleSlotClick('Arms') : undefined}>
</div>
</div>
<div className='LSH-slots flex flex-row justify-between p-2 '>
<div className={isLegsSlotSelected
? legsItemType === 'armor_name'
? 'text-center bg-[url(assets/legPadSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/legPadSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/resAmp.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/resAmpLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/legSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/legSlotLG.png)]'
}
title={legsItemName}
onClick={isLegsSlotSelected ? () => handleSlotClick('Legs') : undefined}>
</div>
<div className={isShoulderSlotSelected
? 'text-center bg-[url(assets/shouldersSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/shouldersSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/shouldersSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/shouldersSlotLG.png)]'
}
title={shoulderItemName}
onClick={isShoulderSlotSelected ? () => handleSlotClick('Shoulders') : undefined}>
</div>
<div className={isHandsSlotSelected
? 'text-center bg-[url(assets/handsSelected.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/handsSelectedLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/handSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/handSlotLG.png)]'
}
title={handsItemName}
onClick={isHandsSlotSelected ? () => handleSlotClick('Hands') : undefined}>
</div>
</div>
</div>
{/* Weapon Slot */}
<div className= {
isWeaponSlotSelected
? 'weapon-slot w-full h-full mt-30 mb-10 p-2 bg-[#1f2533]/50 rounded-xl lg:h-80 lg:mb-20 cursor-pointer'
: 'weapon-slot w-full h-full mt-30 mb-10 p-2 bg-[#1f2533] opacity-50 rounded-xl lg:h-80 lg:mb-20'
}>
<div id='weaponSlot' className={
isWeaponSlotSelected
? 'text-center bg-[url(assets/PP7xs.png)] w-full h-full mx-2 lg:w-full lg:h-full lg:bg-[url(assets/pp7XL.png)]'
: 'text-center w-full h-full bg-[url(assets/pp7Silx.png)] lg:bg-[url(assets/pp7SilxLG.png)]'
}
title={weaponItemName}
onClick={isWeaponSlotSelected ? () => handleSlotClick('weapon') : undefined}>
</div>
</div>
{/* Food, booster, med slots */}
<h1 className='text-white'>Misc. Slots</h1>
<div className='misc-slots flex flex-row w-full justify-center mb-5 p-2 lg:mb-0 lg:mt-5'>
<div className={isFoodSlotSelected
? 'text-center bg-[url(assets/pizza1x.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/pizza1xLG.png)] cursor-pointer'
: 'text-center bg-[url(assets/miscSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/miscSlotLG.png)]'
}
title={foodItemName}
onClick={isFoodSlotSelected ? () => handleSlotClick('food') : undefined}>
</div>
<div className={isMedSlotSelected
? 'text-center bg-[url(assets/XL1.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/XL1LG.png)] cursor-pointer'
: 'text-center bg-[url(assets/miscSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/miscSlotLG.png)]'
}
title={medItemName}
onClick={isMedSlotSelected ? () => handleSlotClick('med') : undefined}>
</div>
<div className={isBoosterSlotSelected
? 'text-center bg-[url(assets/fakeCoca1.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/fakeCoca1LG.png)] cursor-pointer'
: 'text-center bg-[url(assets/miscSlot.png)] w-16 h-16 mx-2 lg:w-32 lg:h-32 lg:bg-[url(assets/miscSlotLG.png)]'
}
title={boosterItemName}
onClick={isBoosterSlotSelected ? () => handleSlotClick('booster') : undefined}>
</div>
</div>
</div>
</>
)
}
export default SlotsMenu;I’ve been trying for days to come up with elegant solution to this problem, but so far nothing has worked. Any input is appreciated.
I’m building a spelling bee app where a user can view a table displaying the history of words they’ve spelled. I’m trying to filter the data to be shown based on values they select with checkboxes (easy, medium, hard).
In my code, I am able to filter the array and console.log() it inside the useEffect just fine, but the problem occurs when I take the new array and use it to update my state. I’m also using Tanstack Table if that matters.
Here is the useEffect()
const ProgressTable = ({ data, isLoading, error }) => {
console.log(data)
const [globalFilter, setGlobalFilter] = useState('')
const [selectedDifficulties, setSelectedDifficulties] = useState([])
const [filteredData, setFilteredData] = useState(data)
useEffect(() => {
if (selectedDifficulties.length) {
let newData = filteredData.filter((row) => {
return selectedDifficulties.includes(row.level)
})
console.log('new', newData)
setFilteredData(newData)
} else {
console.log('old', data)
setFilteredData(data)
}
}, [selectedDifficulties])
Here is how I’m updating the “difficulty” level state
const toggleDifficulty = (level) => {
setSelectedDifficulties((prev) => {
console.log(prev)
return prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
})
}
Which is called on an onChange event for checkboxes.
I’ll also include the rest of the file because apparently this has something to do with early returns, but I’m not seeing anything like that.
import React, { useMemo, useState, useCallback, useEffect } from 'react'
import {
useReactTable,
getCoreRowModel,
getSortedRowModel,
getFilteredRowModel,
getPaginationRowModel,
flexRender,
} from '@tanstack/react-table'
const ProgressTable = ({ data, isLoading, error }) => {
console.log(data)
const [globalFilter, setGlobalFilter] = useState('')
const [selectedDifficulties, setSelectedDifficulties] = useState([])
const [filteredData, setFilteredData] = useState(data)
useEffect(() => {
if (selectedDifficulties.length) {
let newData = filteredData.filter((row) => {
return selectedDifficulties.includes(row.level)
})
console.log('new', newData)
setFilteredData(newData)
} else {
console.log('old', data)
setFilteredData(data)
}
}, [selectedDifficulties])
const columns = useMemo(
() => [
{ accessorKey: 'created_at', header: 'Date' },
{
accessorKey: 'word',
header: 'Word',
cell: ({ row }) => (
<div>
{row.original.level} {row.original.word}
</div>
),
},
{ accessorKey: 'is_correct', header: 'Result' },
{
accessorKey: 'acceptance',
header: 'Acceptance',
cell: ({ row }) => <div>{row.original.acceptance + '%'}</div>,
},
{
accessorKey: 'level',
header: 'Difficulty',
},
],
[],
)
const table = useMemo(
() =>
useReactTable({
data: filteredData || [],
columns,
state: {
globalFilter,
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onGlobalFilterChange: setGlobalFilter,
}),
[data, columns, globalFilter, selectedDifficulties],
)
const toggleDifficulty = (level) => {
setSelectedDifficulties((prev) => {
return prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
})
}
return (
<div className='p-4'>
<div>
<h3>Difficulty</h3>
<label>
<input
type='checkbox'
onChange={() => toggleDifficulty('easy')}
/>
Easy
</label>
<label>
<input
type='checkbox'
onChange={() => toggleDifficulty('medium')}
/>
Medium
</label>
<label>
<input
type='checkbox'
onChange={() => toggleDifficulty('hard')}
/>
Hard
</label>
</div>
<input
placeholder='Search words...'
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
className='mb-4'
/>
<table className='w-full border-collapse border'>
<thead className='bg-gray-200'>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} className='p-2 border cursor-pointer'>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className='border'>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className='p-2 border'>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className='mt-4 flex justify-between'>
<button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
Previous
</button>
<span>
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
</span>
<button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
Next
</button>
</div>
</div>
)
}
export default ProgressTable
I just noticed that in addition to exports package.json has an imports property as well.
And in this question it is referenced and the author mentions that if the imports are declared then the package author does not have to specify the package name when doing local imports.
I thought that type of behavior was always the default?
In what context would we use imports in package.json?
I am trying to implement pagination in HTML. I could show the content in two columns but unable to implement pagination. How do I implement pagination on scroll? That is, when I scroll down, it moves to next the page and when I scroll up, it should move to previous page.
If it can not be achieved in HTML, it would be better if suggest how to do in ReactJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Storybook Scroll</title>
<style>
body {
font-family: serif;
margin: 0;
padding: 20px;
background-color: #f5f5dc;
overflow-x: hidden;
}
.book-container {
max-width: 800px;
height:300px;
margin: auto;
padding: 20px;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
column-count: 2;
column-gap: 40px;
column-fill: auto;
font-size: clamp(14px, 2vw, 18px);
line-height: 1.6;
text-align: justify;
}
.loading {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="book-container" id="book">
<p id="content">
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
Once upon a time in a faraway land, there was a small village surrounded by towering mountains and vast forests. The people of the village lived in harmony with nature, drawing their strength from the land and the wisdom of their ancestors. One day, a young traveler arrived, bringing stories of distant kingdoms and unseen wonders. The villagers gathered around to listen, their imaginations soaring beyond the boundaries of their familiar world. As days passed, the traveler shared tales of bravery, love, and adventure. Inspired by these stories, a young girl from the village decided to embark on her own journey. With a heart full of dreams, she set off into the unknown, eager to carve her own legend.
</p>
</div>
<div class="loading" id="loading">Loading next page...</div>
<script>
const contentElement = document.getElementById("content");
const loadingElement = document.getElementById("loading");
let pageIndex = 0;
function loadNextPage() {
if (pageIndex < storyPages.length) {
contentElement.innerHTML += " " + storyPages[pageIndex];
pageIndex++;
} else {
loadingElement.innerText = "The End";
}
}
const observer = new IntersectionObserver((entries) => {
const lastEntry = entries[0];
if (lastEntry.isIntersecting) {
loadNextPage();
}
});
observer.observe(loadingElement);
</script>
</body>
</html>
I would like to know if it’s possible and how can I achieve inverted spherical effect of custom texture in pure CSS, without using any 3rd party like three min js. I have created basic render for my idea here:
I have tried using canvas, classic transform or SVG Displacement map as someone else falsely recommended, but it can’t be made via this.
let pitch = 0, yaw = 0;
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') pitch -= 5;
if (event.key === 'ArrowDown') pitch += 5;
if (event.key === 'ArrowLeft') yaw -= 5;
if (event.key === 'ArrowRight') yaw += 5;
document.getElementById('navball').style.transform = `rotateX(${pitch}deg) rotateY(${yaw}deg)`;
}); body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
}
.navball-container {
width: 300px;
height: 300px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
}
.navball {
width: 100%;
height: 100%;
background: url('https://spacedock.info/content/SqueakyB_141746/KSP2_Pre-Alpha_Style_NavBall/KSP2_Pre-Alpha_Style_NavBall-1729683637.png');
background-size: 150%;
background-position: center;
border-radius: 50%;
transform-style: preserve-3d;
mask-image: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
-webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%);
} <div class="navball-container">
<div class="navball" id="navball"></div>
</div>Source of example texture can be found here: https://spacedock.info/content/SqueakyB_141746/KSP2_Pre-Alpha_Style_NavBall/KSP2_Pre-Alpha_Style_NavBall-1729683637.png
I have a complex ag-grid table with several layers of group column headers. The ag-grid documentation shows how to set the height of group column headers with the groupHeaderHeight property. However, that sets the height of all group headers, not just a single row of group headers. When I set the groupHeaderHeight property to height of the tallest content, I get a table like this one:
We use a function to find the tallest header height and set the groupHeaderHeight to that value. As you can see, there is barely any room for the actual data because all group column header heights are driven by the tallest one.
How can I set up group headers of different heights so we can show more of the data in the table?
I have a date string formatted as:
20250330230300-0400
I am trying to get that string into the format of:
3/30/2025 11:03
What I was originally doing was something like this:
var formattedDateTime = dateString.substring(4,6) + '/' + dateString.substring(6,8) + '/' + dateString.substring(0,4) + ' ' + dateString.substring(8,10) + ':' + dateString.substring(10,12)
//Remove leading 0s from day and month
formattedDateTime = formattedDateTime .replace(/0(d)/0?(d)/g, '$1/$2')
What my code does not account for is the 23 military time being 11:03 instead of 23:02. Can someone point me to either how to do this or a more efficient way of doing this?
I would like to know if it’s possible and how can I achieve inverted spherical effect of custom texture in pure CSS, without using any 3rd party like three min js. I have created basic render for my illustration
Source of example texture can be found here: https://spacedock.info/content/SqueakyB_141746/KSP2_Pre-Alpha_Style_NavBall/KSP2_Pre-Alpha_Style_NavBall-1729683637.png
Given an ESM Node.js project (package.json contains "type":"module"), I want to require a file, then delete its cache, and require it again so that its source runs again.
I tried this:
mod.js
console.log('in mod.ts')
testcase.js
import { createRequire } from 'module'
const require = createRequire(import.meta.url)
require('./mod.js')
const key = Object.keys(require.cache)[0]
delete require.cache[key]
require('./mod.js')
There are ways to do this in a CJS project such as this answer, but I can’t figure out how to do it in an ESM project.
I expected to see the console log printed twice, but it only prints once.
Is there a way to successfully uncache a module and reload its body in this test case?
I’m creating a Next.js component library with Storybook for use in my Next.js project and enabling partial pre-rendering. However, when I install Storybook version 15.2.4, it shows an error stating that it is not supported. Additionally, partial pre-rendering is only supported in the canary version of Next.js. How can I resolve this issue?
I’m encountering an issue where if you click or slide enough on a range slider in Chrome, it will eventually stop working and give this error, an error 2 (network error):
PIPELINE_ERROR_READ: FFmpegDemuxer: demuxer seek failed
If I google this error, I only find the Chrome source code:
Line 1749 of Chrome source code
First, this issue only happens in Chrome, not Firefox. Second, I can only get it to happen with an encrypted file from AWS, which I can’t get into a sandbox, so the sandbox I made will never encounter that error with the random audio file I used.
The only difference I can find between this code and the failing code is the source of the audio file (AWS).
I’m trying to write a Chrome Extension that simply replaces some text on a website I don’t control. (There is actually a remote lookup, etc – but let’s leave that out for simplicity.)
It works fine on my local test site. When I try to use it on the remote site; the HTML does not get changed.
I’ve searched and see everything from timing issues, to using TreeWalker, etc. I don’t think these apply as I can find the element with document.elevate(xpath…) and alert(element.textContent) works just fine.
What am I missing?
Thanks!
I have created a JavaScript simple calculator using the ‘readline-sync’ library for Node.js to handle terminal input/output. The calculator asks the user which operation they would like to perform (+, -, *, /). After they have selected an operation, it asks for two numbers. It performs the calculation and displays the result e.g. 45+9 = 54. After it displays the result, it should ask if the user wants to perform another calculation. How do I add a loop to allow the user to continue using the calculator until they choose to exit?
Here’s my code so far:
const calculator = require('readline-sync');
let operations = ['+', '-', '*', '/'];
let index = null;
let operator = null;
let firstNumber = 0;
let secondNumber = 0;
// Gets the operation question and the options
function operationQuestion(){
operator = calculator.question("What operation would you like to perform?"
+'nOptions:'
+'nAddition ('+ operations[0]+')'
+'nSubtraction ('+ operations[1]+')'
+'nMultiplication ('+ operations[2]+')'
+'nDivision ('+ operations[3]+')n'
);
if (!operations.includes(operator)) {
console.log("That is not a valid operation");
operationQuestion();
}
// Gets the first and second number
firstNumber = calculator.questionInt("Type the first number: ");
secondNumber = calculator.questionInt("Type the second number: ");
// 4 of the operations
switch(operator) {
case '+':
console.log("The result of "+firstNumber + operator +secondNumber+" = "+ (firstNumber + secondNumber));
break;
case '-':
console.log("The result of "+firstNumber + operator +secondNumber+" = "+ (firstNumber - secondNumber));
break;
case '*':
console.log("The result of "+firstNumber + operator +secondNumber+" = "+ (firstNumber * secondNumber));
break;
case '/':
console.log("The result of "+firstNumber + operator +secondNumber+" = "+ (firstNumber / secondNumber));
break;
default:
console.log("Something went wrong :(");
}
}
// Logic
operationQuestion();
input = calculator.question("Do you want to perform another calculation?")