Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I’m downloading some code from Rosebud AI, and when I start with their link or an external link, it works. However, when I try to use my own local storage to play the assets, it’s not working.
this.load.audio("buttonSound", "assets/Button.mp3");
this.load.audio("backgroundMusic", "assets/bg.mp3");
this.load.audio("stoneDropSound", "assets/StoneDrop.mp3");
My Folder Structure
Folder Structure
How To Load it Just it is
this is my form:
<form id="inventoryForm" action="/ManderalMatrix/AddManderalInventory" class="reactiveToButton">
<div class="row" style="margin-top: 18px">
<div class="col-md-3">
<div class="form-group">
<label>
Size of punch (mm)
<span style="color:red">*</span>
</label>
<input name="PunchSize" id="PunchSize" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Shape
<span style="color:red">*</span>
</label>
<select name="ProductConfigId" id="ProductConfigId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Radius of punch (mm)
<span style="color:red">*</span>
</label>
<input name="PunchRadius" id="PunchRadius" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Code
<span style="color:red">*</span>
</label>
<input name="ManderalMatrixCode" id="ManderalMatrixCode" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of upper punch
<span style="color:red">*</span>
</label>
<input name="UpperPunchQuantity" id="UpperPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of die
<span style="color:red">*</span>
</label>
<input name="DieQuantity" id="DieQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Quantity of lower punch
<span style="color:red">*</span>
</label>
<input name="LowerPunchQuantity" id="LowerPunchQuantity" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Supplier
<span style="color:red">*</span>
</label>
<input name="Supplier" id="Supplier" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Manufacturer code
<span style="color:red">*</span>
</label>
<input name="ManufacturerCode" id="ManufacturerCode" type="text" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Type of die
<span style="color:red">*</span>
</label>
<select name="DieType" id="DieType" class="form-control objectInput">
<option value="1">B</option>
<option value="2">D</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Location</label>
<select name="PlanConfigId" id="PlanConfigId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Machine name</label>
<select name="MachineId" id="MachineId" class="form-control objectInput">
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Large diameter
<span style="color:red">*</span>
</label>
<input name="LargeDiameter" id="LargeDiameter" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>
Small diameter
<span style="color:red">*</span>
</label>
<input name="SmallDiameter" id="SmallDiameter" type="number" class="form-control inventoryInput objectInput" />
</div>
</div>
</div>
</form>
I set the class ‘objectInput’ for all inputs and selects to controlling them.
I used ajax to get an object from the server and get data.
I want to check if the name of the properties of ‘data’ that returned is equal to the id of the inputs, put the value of data’s property on the input’s value
I tried this but I dont know the rest:
function UpdateInventory(id) {
$.get("/ManderalMatrix/GetTheInventory?id=" + id, function (data) {
$('.objectInput').each(function () {
})
})
}
I am creating a google extension, and I need to save booleans as a settings feature. The program unable to load the local storage after saving the values.
if ((localStorage.getItem(lightMode) === null) || (localStorage.getItem(compactMode) === null) || (localStorage.getItem(borderMode)) || (localStorage.getItem(temeplatesMode))) {
console.log("No data found");
var lightMode = false;
var compactMode = true;
var borderMode = false;
var templatesMode = false;
} else {
console.log("Data found!");
var lightMode = localStorage.getItem(lightMode);
var compactMode = localStorage.getItem(compactMode);
var borderMode = localStorage.getItem(borderMode);
var templatesMode = localStorage.getItem(templatesMode);
}
const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', save);
function save() {
localStorage.setItem("lightMode", lightMode);
localStorage.setItem("compactMode", compactMode);
localStorage.setItem("borderMode", borderMode);
localStorage.setItem("templatesMode", templatesMode);
console.log("lightMode:", localStorage.getItem("lightMode"));
console.log("compactMode:", localStorage.getItem("compactMode"));
console.log("borderMode:", localStorage.getItem("borderMode"));
console.log("templatesMode:", localStorage.getItem("templatesMode"));
alert("Options Saved!");
}
I tried creating a save function to set my variables in local storage, but I was unable to load the variables. Is there another solution to save my variables in local storage?
I need to add each <span> of a group into an array which contains their specific className – For example: All spans which have className === class-A1 – into the array or object let spansA1: []/{};.
Basically each <span> will need to be added an additional class depending on the class-A${i} (class index-number) it already has – For example: span[0].className === class-A${0} would get the class with: A${0}-Enter.
I actually tried to write such function but got the error: “Not a function” – see in the code.
After that I tried using indexOf() which didn’t work either.
There obviously is a way to create that but I’m not really sure how would a professional programmer would have done it.
In the JS code I did manage to sort all spans of each paragraph into an array – as well as getting their class-names.
But the problem as I said is adding each span a specific class depending on the class-index-number it already has.
You can see in the HTML code that each span inside a paragraph has text which specifies its intended color – as well as its class-name. For example: <span class="color-A2">GREEN TOPIC</span>.
Thank you very much.
const spanBlocks = [...document.getElementsByClassName('highlight')];
console.log(`const 'spanBlocks' equals:`);
console.log(spanBlocks);
console.log('---- ---- ---- ----');
const Colors = [
"color-A0", "color-A1", "color-A2", "color-A3",
"color-A4", "color-A5", "color-A6", "color-A7",
];
const Entries = [
"A0-enter", "A1-enter", "A2-enter", "A3-enter",
"A4-enter", "A5-enter", "A6-enter", "A7-enter",
];
const Leaves = [
"A0-leave", "A1-leave", "A2-leave", "A3-leave",
"A4-leave", "A5-leave", "A6-leave", "A7-leave",
];
for (let i = 0; i < spanBlocks.length; i++) {
const block = [...document.querySelectorAll(`span[id *= block-A${i}] span[class *= color-A]`)];
for (let each of block) {
each.onmouseover = (e) => {
let currentBlock = e.target.parentNode;
let spanGroup = [...currentBlock.querySelectorAll(`span[class *= color-A]`)];
console.log(`const 'spanGroup [${i}]' equals:`);
console.log(spanGroup);
console.log('---- ---- ---- ----');
let spanColors = spanGroup.filter(span => (span.className === `color-A${i}`)); // Thought it'd work for all spans one by one;
console.log(`const 'spanColors' equals:`);
console.log(spanColors);
console.log('---- ---- ---- ----');
for (let a = 0; a < spanGroup.length; a++) {
let spanClassNames = [spanGroup[a].className];
console.log(`const 'spanClassNames [${a}]' equals:`);
console.log(spanClassNames);
console.log('---- ---- ---- ----');
// for (let all of spanClassNames) {
// let spanIndex = all.indexOf(a);
// console.log(`const 'spanIndex [${a}]' equals:`);
// console.log(spanIndex);
// console.log('---- ---- ---- ----');
// };
};
for (let all of spanGroup) {
all.classList.remove(`${Leaves[i]}`);
all.classList.add(`${Entries[i]}`);
};
};
each.onmouseout = () => {
for (let all of block) {
all.classList.remove(`${Entries[i]}`);
all.classList.add(`${Leaves[i]}`);
};
};
};
};
function sortClasses(span) {
for (let i = 0; i < Colors.length; i++) {
if (span.className === Colors[i]) {
span[i].classList.add(`A${i}-enter`);
};
};
}; // Tried to call that as a function but it says: "Is not a function";#container {
cursor: none;
}
/* DIVIDER */
.A0-enter {
animation: A0-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A0-enter {
0% {
background-color: red;
color: black;
}
100% {
background-color: red;
color: white;
}
}
.A0-leave {
animation: A0-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A0-leave {
0% {
color: white;
background-color: red;
}
100% {
color: unset;
background-color: unset;
}
}
/* DIVIDER */
.A1-enter {
animation: A1-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A1-enter {
0% {
background-color: blue;
color: black;
}
100% {
background-color: blue;
color: white;
}
}
.A1-leave {
animation: A1-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A1-leave {
0% {
color: white;
background-color: blue;
}
100% {
color: unset;
background-color: unset;
}
}
/* DIVIDER */
.A2-enter {
animation: A2-enter 0.4s ease 0s 1 normal forwards;
}
@keyframes A2-enter {
0% {
background-color: green;
color: black;
}
100% {
background-color: green;
color: white;
}
}
.A2-leave {
animation: A2-leave 0.4s ease 0s 1 normal forwards;
}
@keyframes A2-leave {
0% {
color: white;
background-color: green;
}
100% {
color: unset;
background-color: unset;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
padding-top: 10%;
font-size: 40px;
}
</style>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div id="container">
<span id="block-A0" ; class="highlight">
<p>
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
</p>
</span>
<span id="block-A1" ; class="highlight">
<p>
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
</p>
</span>
<span id="block-A2" ; class="highlight">
<p>
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
-
<span class="color-A0">RED TOPIC</span>
-
<span class="color-A2">GREEN TOPIC</span>
-
<span class="color-A1">BLUE TOPIC</span>
</p>
</span>
</div>
<script src="a.js"></script>
</body>
</html>Im trying to get rid of the <div><br></div> thats added to a contenteditable element after ‘enter’ is pressed on android.
I learned that if i added css white-space: pre or display: inline-block or white-space: pre-wrap to the element it would get rid of it, which it did, but not on android. Everything works just as expected on chrome windows, but on chrome android it doesn’t work at all. The <div><br></div> is still added, and what’s even weirder is that it adds two of them.
Because its on android, i have to use input events and not key events so when i tried simply replacing the added elements with n it would do even stranger things.
Does anyone have a solution to this? Ive been trying to find to a solution for literally days, and have tried what feels like everything.
I am developing a chrome extension to provide time stamps to all youtube videos, and it keeps giving me this error – “Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.”, I have just started building it,
here’s my background.js file
chrome.tabs.onUpdated.addListener((tabId, tab) => {
if (tab.url && tab.url.includes("youtube.com/watch")) {
const queryParameters = tab.url.split("?")[1];
const urlParameters = new URLSearchParams(queryParameters);
chrome.tabs.sendMessage(tabId, {
type: "NEW",
videoId: urlParameters.get("v"),
});
}
});
and here’s my contentScript.js
(() => {
let youtubeLeftControls, youtubePlayer;
let currentVideo = "";
chrome.runtime.onMessage.addListener((obj, sender, response) => {
const {type, value, videoId} = obj;
if(type === "NEW")
{
currentVideo = videoId;
newVideoLoaded();
}
});
}) ();
and lastly my manifest.json
{
"name": "YT Saver",
"version": "0.1.0",
"description": "Saving timestamps in YT videos",
"permissions": ["storage", "tabs"],
"host_permissions": ["https://*.youtube.com/*"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.youtube.com/*"],
"js": ["contentScript.js"]
}
],
"web_accessible_resources": [
{
"resources": [
"assets/bookmark.png",
"assets/play.png",
"assets/delete.png",
"assets/save.png"
],
"matches": ["https://*.youtube.com/*"]
}
],
"action": {
"default_icon": {
"16": "assets/ext-icon.png",
"24": "assets/ext-icon.png",
"32": "assets/ext-icon.png"
},
"default_title": "YT Saver",
"default_popup": "popup.html"
},
"manifest_version": 3
}
I tried to make sure I was linking my content scripts correctly in manifest.json file, I reloaded the chrome extension page and the files, I have tried deleting the entire package, reloading it. It did not make a difference yet. I have tried approaches from other posts, but none have worked yet. Any suggestions would be helpful thanks!
I am trying to load API from the routes using loader, params, and useLoaderData hook.
I used loader params in my existing routing structure and useLoaderData hook in my component but it didn’t work.
I checked other questions, but they primarily work on single component routing structure, but for me routing for all components are already done. How can I modify my router accordingly?
<BrowserRouter>
<Header />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/services' element={<Services />} >
<Route element={<WebServices />} index />
<Route path='web' element={<WebServices />} />
<Route path='app' element={<AppServices />} />
<Route path='cloud' element={<CloudServices />} />
</Route>
<Route path='/blog' element={<Blog />} loader={fetchPosts} />
<Route path='*' element={<Page404 />} />
</Routes>
</BrowserRouter>
function Blog(props) {
const list = useLoaderData();
return (
<div className='blog-container'>
<div className='container'>
<h1>Your Blog comes here</h1>
</div>
<div className='blog-post-container'>
{list && list.length > 0
? list.map((item, index) => {
return (
<div className='blog-card'></div>
)
}) : <p>No post found</p>
}
</div>
</div>
)
}
I am building a typing test webapp with ReactJS and currently I am stuck on implementing auto scroll.
In my react code, I have a state variable named ‘typedText’ which contains the currently typed text by the user. The full text to be typed is stored in a state array ‘allTexts’ which contains all paragraphs and the current paragraph is located with a ‘currentTextIndex’
const [allTexts, setAllTexts] = useState([
{title: 'Demo', text: "One of you must come here"}
])
const [currentTextIndex,setCurrentTextIndex] = useState(0);
const [typedText, setTypedText] = useState('');
const [invalidKeys, setInvalidKeys] = useState(['Shift','Control','Alt','CapsLock','Backspace','Tab'])
function keyDownHandler(e){ //This function updated the typed text
e.preventDefault();
if(!startTime && !(invalidKeys.includes(e.key))){ //Starting the timer if the user has pressed a valid key and the timer is not already started
let dtObj = new Date();
setStartTime(dtObj.getTime());
}
if(invalidKeys.includes(e.key)){ //If user types invalid key, then check if it is backspace,
//and perform backspace operation if it is allowed in configuration
if(e.key === 'Backspace' && config.backspaceAllowed && startTime && typedText.length>0){
let typedTextCopy = typedText.slice(0,typedText.length-1);
setTypedText(typedTextCopy);
}
} else { //Otherwise, simply append the typed key into the typedText
let typedTextCopy = typedText + e.key;
setTypedText(typedTextCopy);
}
The text on the screen is displayed in a simple div and not in a HTML Input as below –
import React from 'react'
export default function TextDisplay({givenText,typedText}) {
let typedArray = typedText.split('');
let givenArray = givenText.split('');
return (
<div className='text-justify w-4/5 sm:w-3/5 text-base sm:text-lg md:text-xl lg:text-2xl h-full overflow-y-auto p-1'>
{givenArray.map((val, ind) => {
if (val == typedArray[ind] && ind < typedArray.length) { //Characters which are correctly been typed
//spans cannot be used dur to certain problems with them, so we will use divs with inline display to animate the cursor border properly
return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 text-purple-700`}>{val}</div>
} else if(val !== typedArray[ind] && ind < typedArray.length){ //Characters which have been typed incorrectly
return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 ${val===' '?'underline decoration-red-500':'text-red-500'}`}>{val}</div>
} else { //Characters not typed yet
return <div key={ind} className={`${ind === typedArray.length - 1 ? 'border-r-2' : ''} ${typedArray.length === 0 && ind === 0? 'border-l-2' : ''} character inline border-purple-500 text-slate-400`}>{val}</div>
}
})}
</div>
)
}
Here is the url of website – https://shubhamsharma64337.github.io/simpletype/
Link to repo – https://github.com/ShubhamSharma64337/simpletype
How do I implement auto scroll such that when the paragraph is large, and the user reaches the end of the visible text, the div is scrolled automatically?
I tried to think of splitting the paragraph into multiple parts of smaller length which does not need to be scrolled, and simply replacing the current part with next part once the user finishes one part by checking the length of text typed by the user and comparing it with the length of the part. But I think that there must be a better way to do this.
I’m trying to call two middlewares in chain. The first one will passa a parameter to controller and second one doesn’t require it.
Following is my code –
routes.js
module.exports = (app) => {
app.get('/printrajesh',
AuthController.checkauthorization('xyz'),
RmController.printrajesh
)
}
The Authcontroller
module.exports = {
async checkauthorization (role){
console.log("Check Authorization is called")
console.log(role)
return function(req, res, next){
if(role != 'xyz'){
res.status(400).send({
error: 'You are not Authorized'
})
}else{
next()
}
}
}
}
The error I’m getting is –
Server is Up and Running...
Check Authorization is called
xyz
/home/tanmay/gmphbackend/node_modules/express/lib/router/route.js:211
throw new Error(msg);
^
Error: Route.get() requires a callback function but got a [object Promise]
at Route.<computed> [as get] (/home/tanmay/gmphbackend/node_modules/express/lib/router/route.js:211:15)
at app.<computed> [as get] (/home/tanmay/gmphbackend/node_modules/express/lib/application.js:499:19)
at module.exports (/home/tanmay/gmphbackend/src/routes.js:19:9)
at Object.<anonymous> (/home/tanmay/gmphbackend/src/app.js:14:20)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
Node.js v18.16.1
Not Sure what I am doing wrong here. Please help. Thanks
What is the fastest way to do row clicking then show some data below it. Its like a accordion.
Please see the image below.
I am trying some JS just appending the another row with the data below the clicked row.
Is that the most effective way?
I am finding an image box: preview and small preview list under the preview.
The html is as follow :
<!--image list-->
<div class="image-list-container d-flex">
<div class="image-list-item cursor-pointer image-highlight">
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://5.imimg.com/data5/NR/TP/MY-9295383/hcl-desktop-500x500.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://tiimg.tistatic.com/fp/1/007/341/shock-proof-black-color-medium-size-acer-desktop-computer--825.jpg" alt="" /></div>
</div>
</div>
<div class="image-list-item cursor-pointer" >
<div id="" class="">
<div class="hv-centered"><!----><img class="show-img img-fluid" src="https://cdn.britannica.com/97/155497-050-4C5BFFFC/laptop-computer.jpg" alt="" /></div>
</div>
</div>
<!---->
<div class="image-list-item cursor-pointer add-image-section add-download-img p-0">
<div id="ember519" class="dropdown btn-group h-100">
<button class="btn file-upload add-download-img-btn" type="button">
<input id="add-images-btn" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon align-text-top action-icons icon-xlg fill-dropdown-blue">
<path d="M256 15C122.9 15 15 122.9 15 256s107.9 241 241 241 241-107.9 241-241S389.1 15 256 15zm122 263H278v100c0 12.2-9.8 22-22 22s-22-9.8-22-22V278H134c-12.2 0-22-9.8-22-22s9.8-22 22-22h100V134c0-12.2 9.8-22 22-22s22 9.8 22 22v100h100c12.2 0 22 9.8 22 22s-9.8 22-22 22z"></path>
<path fill="#FFF" d="M378 234H278V134c0-12.2-9.8-22-22-22s-22 9.8-22 22v100H134c-12.2 0-22 9.8-22 22s9.8 22 22 22h100v100c0 12.2 9.8 22 22 22s22-9.8 22-22V278h100c12.2 0 22-9.8 22-22s-9.8-22-22-22z"></path>
</svg>
</button>
<button id="ember521" class="dropdown-toggle btn btn-secondary rounded-start-0 add-download-img-btn no-border" type="button"></button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item file-upload">
<input id="ember522" title="" multiple="" accept="image/gif,image/jpeg,image/png,image/bmp,image/jpg" class="upload form-control cursor-pointer" type="file" />
Add More Images
</button>
<button class="dropdown-item" data-ember-action="" data-ember-action-523="523">Download As ZIP</button>
</div>
</div>
</div>
</div>
<!--/-->
I am still learning js in how to have the scenario, when each item list is clicked it will previewed in the box above. as well when the primary text is clicked.
the code is here text
Thank you for you help.
I recently started learning RTK Query and I’m now studying how to work with caching. Could someone please suggest the best way to send the Cache-Control header in a request? I’ve seen the following approach in the web, and I’d like to know if it’s correct.
const exampleApi = createApi({
reducerPath: 'exampleApi',
baseQuery: fetchBaseQuery({
baseUrl: '/api',
}),
endpoints: (builder) => ({
getExample: builder.query({
query: () => ({
url: '/example',
headers: {
'Cache-Control': 'no-cache',
},
}),
}),
}),
})
I haven’t tried many options yet, I only found this one, I’m not entirely sure it’s the right one.
Description: I’m working on a PHP script that should automatically click an email link using JavaScript. The code works fine in a separate test.php file, but in process.php, the JavaScript doesn’t execute. Below is the relevant code:
<?php
include_once 'libs/load.php';
if (isset($_POST['command'])) {
$command = trim($_POST['command']);
handleCommand($command);
}
function handleCommand($command)
{
switch ($command) {
case 'email':
$email = "[email protected]";
echo "<html><body>";
echo "<a id="emailLink" href="mailto:$email" style="color: rgb(5, 206, 145);">$email</a>";
echo "<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
console.log('JavaScript is running');
alert('JavaScript is running');
document.getElementById('emailLink').click();
});
</script>";
echo "</body></html>";
break;
default:
echo "---n";
echo "Unknown command: $commandn";
echo "---";
break;
}
}
?>
I’m new to programming and would appreciate help from someone patient, because my I’m trying to improve my knowledge. I can easily learn by comparing code I wrote with an improved version, where I can see exactly where changes were made.
I create two divs (audiodescription-text and options-wrapper). I want to toggle their visibility independently. In other words, the visibility of one div doesn’t affect another one’s visibility. That’s why I created 2 buttons, one for each div.
However, with the following code, when you click in any button, the same div is hidden or shown.
(I posted the full code here, because it’s easier for testing, instead of posting a fragment of code that cannot generate a working webpage).
Can someone help me with the parts of the code that need to be changed for the divs to be shown or hidden independently?
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sketchfab Configurator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<body>
<div id="audiodescription-instructions">
<button_audiodescription id="button_audiodescription" onclick="showHideButtonAudiodescription()">Exibir audiodescrição</button_audiodescription>
<div style="display:none"; id="audiodescription-text"><p>
[AUDIODESCRIÇÃO: representação tridimensional colorida de uma célula eucariótica seccionada, ou seja, cortada ao meio para mostrar as principais estruturas constituintes.<br><br>
Para facilitar a compreensão e considerando a posição inicial em que o modelo tridimensional é carregado, a apresentação e a descrição das estruturas são feitas da esquerda para a direita e de fora para dentro, ou seja, as mais externas primeiro e em seguida as mais internas. Inicialmente são descritas as estruturas em primeiro plano, para depois serem descritas as estruturas em planos mais ao fundo.<br><br>
A célula eucariótica apresenta formato irregular, mais próximo do arredondado, sendo delimitada pela membrana plasmática com superfície é lisa. Internamente, apresenta citoplasma e organelas.<br><br>
Em uma célula real as organelas não possuem posição fixa, podendo variar de localização. Neste modelo tridimensional, em primeiro plano e à esquerda, encontram-se lisossomos, pequenas organelas de formato arredondado. Mais à direita está o Complexo de Golgi formado por sacos achatados e empilhados, interconectados por vesículas. Um pouco mais atrás, e à esquerda do lisossomo, encontra-se um endossomo, com formato arredondado similar aos lisossomos, porém de maior diâmetro. Segue-se o retículo endoplasmático rugoso, rede de cisternas e túbulos interconectados que possuem ribossomos aderidos à sua face externa, os quais estão representados como pequenos grânulos arredondados. À direita do retículo endoplasmático rugoso, está uma mitocôndria, de formato alongado e cilíndrico e com cristas mitocondriais de formato ondulado em seu interior. Logo atrás está um proteassomo, estrutura pequena, de formato cilíndrico, cujas extremidades apresentam projeções. Do lado direito do proteassomo está o retículo endoplasmático liso, formado por tubos alongados interconectados. Do lado direito do retículo endoplasmático liso está o núcleo, grande esfera com superfície lisa, dotada de poros circulares. O núcleo está seccionado de forma a mostrar, em sua região central, o nucléolo de formato também esférico. Finalmente, ao fundo, no extremo esquerdo, encontram-se dois centríolos de formato cilíndrico e dispostos perpendicularmente um ao outro, e no extremo direito, dois peroxissomos, organelas de formato circular semelhante ao endossomo e ao lisossomo.<br><br>
FIM DA AUDIODESCRIÇÃO.]</p>
</div>
</div>
<div class="sketchfab-container">
<iframe
src=""
id="api-frame"
allow="autoplay; fullscreen; xr-spatial-tracking"
xr-spatial-tracking
execution-while-out-of-viewport
execution-while-not-rendered
web-share
allowfullscreen
mozallowfullscreen="true"
webkitallowfullscreen="true"
height="1000"
width="100%"
></iframe>
<div id="model-instructions">
<p>Selecione a cor desejada para cada estrutura:</p>
<button_model id="button_model" onclick="showHideButtonModel()">Exibir opções de cores</button_model>
<div style="display:none"; id="options-wrapper">
<div class="options" id="color-picker">
</div>
</div>
</body>
<script>
var div = document.getElementById('audiodescription-text');
var display = 1;
function showHideButtonAudiodescription()
{
if (display == 0)
{
div.style.display = 'none';
display = 1;
document.querySelector("button_audiodescription").innerHTML = "Exibir audiodescrição";
}
else
{
div.style.display = 'inherit';
display = 0;
document.querySelector("button_audiodescription").innerHTML = "Ocultar audiodescrição";
}
}
</script>
<script>
var div = document.getElementById('options-wrapper');
var display = 1;
function showHideButtonModel()
{
if (display == 0)
{
div.style.display = 'none';
display = 1;
document.querySelector("button_model").innerHTML = "Exibir audiodescrição";
}
else
{
div.style.display = 'inherit';
display = 0;
document.querySelector("button_model").innerHTML = "Ocultar audiodescrição";
}
}
</script>
<script type="text/javascript" src="./assets/js/sketchfab-viewer-1.3.2.js"></script>
<script type="text/javascript" src="./assets/js/SketchfabConfigurator-1.0.6.js"></script>
<script type="text/javascript">
var config = {
"model": "066fa44695014754ad13f0e69ddda1c3",
"params": {
"camera": 0,
"autoplay": 0,
"preload": 1,
"ui_controls": 0,
"ui_infos": 0,
"ui_watermark": 0
},
"config": [
{
"name": "01. Parede Celular",
"type": "color",
"material": "Parede",
"default": "#b27e00",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313518707
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313518707
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313518707
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313518707
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313518707
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313518707
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313518707
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313518707
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313518707
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313518707
}
]
},
{
"name": "02. Cílios",
"type": "color",
"material": "Cilios",
"default": "#a9821b",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313690276
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313690276
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313690276
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313690276
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313690276
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313690276
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313690276
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313690276
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313690276
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313690276
}
]
},
{
"name": "03. Membrana Plasmática",
"type": "color",
"material": "Membrana",
"default": "#e7710c",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313830703
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313830703
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313830703
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313830703
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313830703
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313830703
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313830703
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313830703
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313830703
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313830703
}
]
},
{
"name": "04.Citoplasma",
"type": "color",
"material": "Citoplasma",
"default": "#e7e7e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688313956926
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688313956926
},
{
"name": "Branco",
"color": "#ffffff",
"id": 1688313956926
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688313956926
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688313956926
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688313956926
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688313956926
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688313956926
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688313956926
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688313956926
}
]
},
{
"name": "05. Ribossomos",
"type": "color",
"material": "Ribossomos",
"default": "#e300e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314141902
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314141902
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314141902
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314141902
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314141902
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314141902
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314141902
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314141902
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314141902
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314141902
}
]
},
{
"name": "06. Material Genético",
"type": "color",
"material": "Material Genetico",
"default": "#00c8e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314249006
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314249006
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314249006
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314249006
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314249006
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314249006
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314249006
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314249006
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314249006
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314249006
}
]
},
{
"name": "07. Plasmídio",
"type": "color",
"material": "Plasmidio",
"default": "#0011e7",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314352195
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314352195
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314352195
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314352195
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314352195
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314352195
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314352195
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314352195
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314352195
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314352195
}
]
},
{
"name": "08. Flagelo",
"type": "color",
"material": "Flagelo",
"default": "#834520",
"options": [
{
"name": "Preto",
"color": "#000000",
"id": 1688314449619
},
{
"name": "Cinza",
"color": "#b3b3b3",
"id": 1688314449619
},
{
"name": "Branco",
"color": "#FFFFFF",
"id": 1688314449619
},
{
"name": "Vermelho",
"color": "#db2828",
"id": 1688314449619
},
{
"name": "Laranja",
"color": "#f2711c",
"id": 1688314449619
},
{
"name": "Amarelo",
"color": "#fbbd08",
"id": 1688314449619
},
{
"name": "Verde",
"color": "#21ba45",
"id": 1688314449619
},
{
"name": "Azul",
"color": "#2185d0",
"id": 1688314449619
},
{
"name": "Roxo",
"color": "#a333c8",
"id": 1688314449619
},
{
"name": "Rosa",
"color": "#e03997",
"id": 1688314449619
}
]
}
].map((e) => {
return {
...e,
options: e.options.map((f) => ({
color: f.color,
id: f.id,
})),
};
})
};
var iframeEl = document.getElementById('api-frame');
var optionsEl = document.querySelector('.options');
var configurator = new SketchfabConfigurator.Configurator(iframeEl, optionsEl, config);
</script>
Here is the styles.css
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Quicksand', sans-serif; /* Altere aqui a fonte e o tamanho da fonte */
box-sizing: border-box;
font-size: 12px;
}
#audiodescription-instructions {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_audiodescription{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_audiodescription:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#audiodescription-text {/* Criar aqui uma classe para conter a interface de seleção de cores */
margin: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.12px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
}
.sketchfab-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 900px;
overflow: hidden; /* Oculte aqui a barra de rolagem */
}
iframe {
width: 100%;
height: 70%;
margin-bottom: 0px; /* Oculte aqui a borda */
border: none;
}
#model-instructions { /* Criar aqui uma classe para exibir texto com instrução de seleção de cores. Este será o elemento-pai */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_model{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_model:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#options-wrapper {/* Criar aqui uma classe para conter a interface de seleção de cores */
width: 100%;
display: flex;
flex-direction:row;
justify-content: center;
margin: 20px
}
.options {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0 50px;
}
.option {
display: flex;
flex-direction: column;
gap: 4px; /* Altere aqui o espaçamento entre o nome da estrutura e os quadrados de cores. O espaçamento original é 8px */
padding: 12px 0; /* Altere aqui o espaçamento geral entre as linhas. O espaçamento original é 16px */
}
.color {
display: flex;
align-items: center;
padding: 1px 0; /* Altere aqui o espaçamento entre as linhas no menu de seleção de cores. O espaçamento original é 4px */
}
.color input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option__control {
display: flex; /* Altere aqui o espaçamento horizontal entre os quadrados de cores. O espaçamento original é 8px */
gap: 3px;
}
.color__swatch {
display: inline-block;
width: 24px;
height: 24px; /* Altere aqui a curvatura da borda do quadrado de cores. A curvatura orginal é 8px */
border-radius: 4px; /* Altere aqui o tamanho do quadrado de cores. O tamanho original é 25px */
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin-right: 4px;
}
.color input:checked + .color__swatch { /* Altere aqui a borda da cor atualmente atribuída a determinada estrutura. A cor original é #000 */
box-shadow: 0 0 0 2px #fff;
}
.color:hover .color__swatch {
box-shadow: 0 0 0 2px #999;
}
.texture {
display: block;
position: relative;
margin-bottom: 10px;
}
.texture input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.texture__preview {
display: block;
}
.texture__preview img {
display: block;
max-width: 100%;
height: auto;
}
.texture input:checked + .texture__preview > img {
box-shadow: 0 0 0 2px #000;
}
.texture__name {
display: block;
margin-top: 4px;
} /* Aqui termina o conteúdo do arquvo styles.css */
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Quicksand', sans-serif; /* Altere aqui a fonte e o tamanho da fonte */
box-sizing: border-box;
font-size: 12px;
}
#audiodescription-instructions {
width: 100%;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_audiodescription{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_audiodescription:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#audiodescription-text {/* Criar aqui uma classe para conter a interface de seleção de cores */
margin: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.12px;
border-width: 1px;
border-style: solid;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
}
.sketchfab-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 900px;
overflow: hidden; /* Oculte aqui a barra de rolagem */
}
iframe {
width: 100%;
height: 70%;
margin-bottom: 0px; /* Oculte aqui a borda */
border: none;
}
#model-instructions { /* Criar aqui uma classe para exibir texto com instrução de seleção de cores. Este será o elemento-pai */
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding-top: 10px;
}
button_model{ /* Altere aqui as configurações visuais do botão em estado normal*/
padding: 6px 24px;
text-align: center;
font-family: 'Quicksand', sans-serif;
color: #0d6efd;
font-size: 14px;
border: solid;
border-width: 1px;
border-color: #0d6efd;
border-radius: 8px;
cursor: pointer;
}
button_model:hover{ /* Altere aqui as configurações visuais do botão em estado normal*/
color: white;
background-color: #0d6efd;
}
#options-wrapper {/* Criar aqui uma classe para conter a interface de seleção de cores */
width: 100%;
display: flex;
flex-direction:row;
justify-content: center;
margin: 20px
}
.options {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0 50px;
}
.option {
display: flex;
flex-direction: column;
gap: 4px; /* Altere aqui o espaçamento entre o nome da estrutura e os quadrados de cores. O espaçamento original é 8px */
padding: 12px 0; /* Altere aqui o espaçamento geral entre as linhas. O espaçamento original é 16px */
}
.color {
display: flex;
align-items: center;
padding: 1px 0; /* Altere aqui o espaçamento entre as linhas no menu de seleção de cores. O espaçamento original é 4px */
}
.color input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option__control {
display: flex; /* Altere aqui o espaçamento horizontal entre os quadrados de cores. O espaçamento original é 8px */
gap: 3px;
}
.color__swatch {
display: inline-block;
width: 24px;
height: 24px; /* Altere aqui a curvatura da borda do quadrado de cores. A curvatura orginal é 8px */
border-radius: 4px; /* Altere aqui o tamanho do quadrado de cores. O tamanho original é 25px */
width: 20px;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.5);
margin-right: 4px;
}
.color input:checked + .color__swatch { /* Altere aqui a borda da cor atualmente atribuída a determinada estrutura. A cor original é #000 */
box-shadow: 0 0 0 2px #fff;
}
.color:hover .color__swatch {
box-shadow: 0 0 0 2px #999;
}
.texture {
display: block;
position: relative;
margin-bottom: 10px;
}
.texture input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.texture__preview {
display: block;
}
.texture__preview img {
display: block;
max-width: 100%;
height: auto;
}
.texture input:checked + .texture__preview > img {
box-shadow: 0 0 0 2px #000;
}
.texture__name {
display: block;
margin-top: 4px;
} /* Aqui termina o conteúdo do arquvo styles.css */
I’m using a function made in JavaScript in a platform called voiceflow. It has an input variable known as range which only fetches a specified sheet name data. I want to modify the function to fetch data from all sheets in the Google spreadsheet.
export default async function main(args) {
const { google_sheets_api_key, spreadsheet_link, range } =
args.inputVars;
if (!google_sheets_api_key || !spreadsheet_link || !range) {
return {
next: { path: 'error' },
trace: [{ type: "debug", payload: { message: "Missing required input variables for Google Sheets API function" } }]
};
}
const spreadsheetIdRegex = //d/([a-zA-Z0-9-_]+)/;
const match = spreadsheetIdRegex.exec(spreadsheet_link);
if (!match) {
return {
next: { path: 'error' },
trace: [{ type: "debug", payload: { message: "Invalid Google Sheets URL" } }]
};
}
const spreadsheet_id = match[1];
const url = `https://sheets.googleapis.com/v4/spreadsheets/${spreadsheet_id}/values/${range}?key=${google_sheets_api_key}`;
try {
const response = await fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json' } });
const responseBody = response.json;
if (!responseBody || typeof responseBody !== 'object') {
return {
next: { path: 'error' },
trace: [{ type: "debug", payload: { message: "Invalid or missing response body from Google Sheets API" } }]
};
}
// Simplifying the return object for testing
return {
outputVars: { sheetData: JSON.stringify(responseBody) }, // Temporarily return the response as a string
next: { path: 'success' },
trace: [{ type: "debug", payload: { message: "Response Body: " + JSON.stringify(responseBody) } }]
};
} catch (error) {
return {
next: { path: 'error' },
trace: [{ type: "debug", payload: { message: "Error fetching data from Google Sheets: " + error.message } }]
};
}
}
I have tried the app script, but it truncates the data due to large data output. I need help to modify the function to fetch data from all the sheets present in the spreadsheet.
I have tried a lot of different modified functions but all of them have the same error which response.json is not a function.