Category: javascript

I’m making a call to an API and retrieving information in json format. I would like to use list.js for this data so I can implement pagination. I’m struggling to understand how to create a list and pass the json data as the values of this list.

I’ve been through the list.js documentation but I can’t find a clear answer that I’m able to understand.

I have a table with six tds and in it are approximately 7000 entries. The table is filtered by six input text boxes with
six javascript codes and each code containing the desired number of corresponding td such as (td = tr[i].getElementsByTagName(“td”)[0];),
(td = tr[i].getElementsByTagName(“td”)[1];), (td = tr[i].getElementsByTagName(“td”)[2];) etc etc. Due to presumeably many Script codes on the page,
the page becomes unresponsive and takes a longer time to become active. In order to avoid this problem, is it possible to filter the table
with only one input box instead of six input boxes but with an option box to enter the desired td number**[0]**, [1], [2], etc etc to filter the
data from the required td only. Thanks

<span style="Float:Left">Total/Searched:</span><div id="statistic" style="float: Left"></div>
<br><br><br>
 <input type="text" id="myInput" onkeyup="filterTable()"  onClick="filterTable()" placeholder="Search...">
    <table id="myTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Country</th>
          <th>City</th>
    <th>Street</th>
          <th>House No</th>
          <th>Neighbour</th>
        </tr>
      </thead>
      <tbody>
       <tr>

<td>Mario Resende</td>
<td>Argentina</td>
<td>Buenos Aires</td>
<td>Belgrano Calle</td>
<td>2:3</td>
<td>Cristina Rodriguez</td>
</tr>
<tr>

<td>Philips Douglas</td>
<td>United Kingdom</td>
<td>London</td>
<td>Oxford Avenue</td>
<td>17:25</td>
<td>Sophie Loren</td>
</tr>

<tr>

<td>Ramesh Bugatapa</td>
<td>India</td>
<td>New Delhi</td>
<td>Golochand road</td>
<td>1:2</td>
<td>Kiran Johr</td>
</tr>


</Table>


function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
   rowsFound =[];
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4];
    if (td) {
      txtValue = td.textContent || td.innerText;
      // EDIT Check for match at beginning of string
      // if (txtValue.toUpperCase().indexOf(filter) > -1) {
      if (txtValue.toUpperCase().indexOf(filter) == 0) {
        tr[i].style.display = "";
    rowsFound.push(1)
      } else {
        tr[i].style.display = "none";
      }
    }
  }

There is a task: add an animation file to a Vue3 web application and embed a variable in a specific place in the animation. The variable is a changing number that should be bound to a specific visual element of the animation during playback (in my case, it’s a 2D sign that moves and shakes for 5 seconds). The variable should be part of the animation itself and move according to the movement of the element in the animation. What options are possible?

For WebP animation, how to determine the coordinates of a moving element to bind a variable to the element’s coordinates?
Are there other ways to embed a variable in an animation? Other animation formats or libraries that allow using variables in animations?

What am I missing here?
I am just trying to see if a file exists

xhttp.open("GET", "/file.ext", true);
xhttp.send();   
if (xhttp.status!=404) {alert("file found");} else {alert("file not found");};

I also thought about trying

xhttp.open("GET", "/file.ext", true);
catch(err);
alert(err.message);

but nothing happens

Been working on this a while and it’s not just not going as planned – any help would be appreciated! I’m trying to create a 4-image slideshow where:

• On the last image, when the user clicks on the “next” arrow, the slideshow goes back to the first image. In this case, the first image should be treated as another “next” image rather than the slideshow going back through all the images backwards. Essentially, an “infinitely looping” slideshow.
• Little to no Javascript as it causes the slideshow to load much slower than the rest of the page
• Transition between images is smooth

Essentially, I want to recreate the below code but with as little Javascript as possible. It doesn’t have to be exactly the same but I want to stay similar. I have also tried Slick Slider but I’m having a hard time with that currently as I’m not the most advanced outside of HTML and CSS.

This is my code that contains Javascript:

CSS:

/*IMAGE SLIDESHOW*/
    .slideshow-container {
      position: relative;
      width: 100%;
      max-width:2000px;
      overflow: hidden;
margin-top:-200px;
visibility:hidden;
    }

.slideshow-container.ready { visibility: visible; }


    .slides-wrapper {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      width: 70%;
      margin: 0 15px;
      flex-shrink: 0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2.5rem;
      color: white;
      background: rgba(0, 0, 0, 0.5);
      padding: 0.4rem 0.8rem;
      cursor: pointer;
      user-select: none;
      z-index: 2;
      border-radius: 6px;
    }

    .arrow.left { left: 10px; }
    .arrow.right { right: 10px; }

HTML:

  <div class="slideshow-container">
    <div class="arrow left" onclick="prevSlide()">&#10094;</div>
    <div class="arrow right" onclick="nextSlide()">&#10095;</div>
    <div class="slides-wrapper" id="slides-wrapper">
      <!-- Slides will be inserted dynamically -->
    </div>
  </div>

Javascript:

    const imageUrls = [
      'https://picsum.photos/id/1015/800/400',
      'https://picsum.photos/id/1016/800/400',
      'https://picsum.photos/id/1018/800/400',
      'https://picsum.photos/id/1020/800/400'
    ];

    const wrapper = document.getElementById('slides-wrapper');
    let slides = [];
    let currentIndex = 1; // Start at 1 (first real slide after cloned last)
    let allowTransition = true;

    // Setup: Clone first and last for seamless loop
    function setupSlides() {
      const fullSlides = [imageUrls[imageUrls.length - 1], ...imageUrls, imageUrls[0]];
      fullSlides.forEach(url => {
        const slide = document.createElement('div');
        slide.className = 'slide';
        const img = document.createElement('img');
        img.src = url;
        img.alt = 'Slide';
        slide.appendChild(img);
        wrapper.appendChild(slide);
        slides.push(slide);
      });
    }

    // Center current slide
    function updateSlide(skipTransition = false) {
      const slideWidth = slides[0].offsetWidth + 30; // slide + margin
      const containerWidth = document.querySelector('.slideshow-container').offsetWidth;
      const offset = slideWidth * currentIndex;
      if (skipTransition) wrapper.style.transition = 'none';
      else wrapper.style.transition = 'transform 0.5s ease-in-out';
      wrapper.style.transform = `translateX(${containerWidth / 2 - offset - slideWidth / 2}px)`;
    }

    // Go to next
    function nextSlide() {
      if (!allowTransition) return;
      currentIndex++;
      updateSlide();
      allowTransition = false;
    }

    // Go to previous
    function prevSlide() {
      if (!allowTransition) return;
      currentIndex--;
      updateSlide();
      allowTransition = false;
    }

    // Handle infinite loop jump
    wrapper.addEventListener('transitionend', () => {
      if (currentIndex === 0) {
        currentIndex = imageUrls.length;
        updateSlide(true);

      } else if (currentIndex === imageUrls.length + 1) {
        currentIndex = 1;
        updateSlide(true);
      }
      allowTransition = true;
    });

    // Initialize
document.addEventListener('DOMContentLoaded', () => {
  setupSlides();
  updateSlide(true);
  document.querySelector('.slideshow-container').classList.add('ready');
});

    window.addEventListener('resize', () => {
      updateSlide(true);
    });

I am trying to implement responsive and dynamic grid design into my calculator. I know of a simple way of achieving this(explicitly create buttons and add classes), but I am trying to find out if there is more concise and “trendy” way of setting classes to the buttons(see below).

Here is what I got:

    import style from "./calculator.module.scss";

// interface CalcGridProps {
//   addition: () => void;
//   subtraction: () => void;
//   division: () => void;
//   multiplication: () => void;
// }

const CalcGrid: React.FC = (
  {
    //   addition,
    //   subtraction,
    //   division,
    //   multiplication,
  },
) => {
  const buttons = [
    ["AC", "+/-", "%", "/"],
    ["7", "8", "9", "*"],
    ["4", "5", "6", "-"],
    ["1", "2", "3", "+"],
    ["0", ",", "="],
  ];

  return (
    <div className={style.container}>
      <section className={style.screen}>
        <div>0</div>
      </section>
      <section className={style.grid}>
        {buttons.flat().map((label, i) => (
          <button
            key={i}
            //   className={style[areaMap[label]]}
            style={{ gridArea: areaMap[label] }}
          >
            {label}
          </button>
        ))}
      </section>
    </div>
  );
};

export default CalcGrid;

const areaMap: Record<string, string> = {
  AC: "ac",
  "+/-": "plusminus",
  "%": "percent",
  "/": "divide",

  "7": "seven",
  "8": "eight",
  "9": "nine",
  "*": "multiply",

  "4": "four",
  "5": "five",
  "6": "six",
  "-": "subtract",

  "1": "one",
  "2": "two",
  "3": "three",
  "+": "add",

  funcs: "funcs",
  "0": "zero",
  ",": "comma",
  "=": "equals",
};

With some assistance from AI, i tried a way it offered. It works, yes, but I would like to ask if the suggested approach is viable? And what needs to be changed for consistent result.

As part of solving this, I built a project called https://MyCodeShare.com
, where users can instantly share code, text, images, PDFs, and documents

What’s the best way to add instant file download (images, PDFs, docs) in a web app?
As part of solving this, I built a project called MyCodeShare
, where users can instantly share code, text, images, PDFs, and documents
I’m building a web app where users can share and instantly download different file types (images, PDFs, docs). I want to implement a simple and efficient way for files to be downloaded immediately when a user clicks a button, without opening in a new tab.

Example use case: A user uploads a PDF or image, and another user can directly download it.

What’s the best way to implement this in a web app? Should I use HTML attribute, JavaScript Blob/File API, or server-side headers like Content-Disposition: attachment?

Project Context: I tried implementing this in my own project MyCodeShare
, but I’d like to know the best practice from the community

I’m having issues with Deno, where I’m unable to make VSCode recognize import maps
my import maps look like this

{
  "imports": {
    "@types/": "./src/types/",
    "@std/assert": "jsr:@std/assert@1",
    "@std/dotenv": "jsr:@std/dotenv@^0.225.5"
  }
}

they’re being added into my environmnet through the deno.json file

{
  "tasks": {
    "dev": "deno run -A --watch ./src/main.ts",
    "lint": "deno lint"
  },
  "importMap": "./import_map.json"
}

the imports and the code all are working, and even navigating to the @types/user.ts for example using “right click + shift” works as well, but I can’t stop typescript linter from complaining about it
I keep on getting this error

Cannot import type declaration files. Consider importing 'user.ts' instead of '@types/user.ts'.deno-ts(6137)

Is there a way to resolve that? instead of just relying on the ignore commands to silence it’s complaints?

I stumbled upon the accessor keyword in TypeScript:

class Example {
  accessor value: number
}

What does it do? I don’t see any difference in usage of new Example().value.

globals.css is not working in my nextjs project , I am using tailwind v4 , but the tailwind css that is directly in the file is working but from globals.css ntg is working.
I have imported it in app/layout.js .

import './globals.css'

export const metadata = {
  title: '',
  description: 'Driving innovation through Software Solutions - Creative Digital Solutions for your business',
  icons: {
    icon: '/assets/img/logo.png',
  },
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </head>
      <body className="font-nunito">
        {children}
      </body>
    </html>
  )
}

this is my layout.js and below is the starting part of gobal.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Rubik:wght@400;500;600;700&display=swap');

@import "tailwindcss";

/* CSS Variables for Color Theme */
:root {
  --primary: #06A3DA;
  --secondary: #34AD54;
  --light: #EEF9FF;
  --dark: #091E3E;
  
  /* Tailwind v4 Custom Properties */
  --color-primary: #06A3DA;
  --color-secondary: #34AD54;
  --color-light: #EEF9FF;
  --color-dark-blue: #091E3E;
}

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

this is not for this project alone , i make 2 projects and bth r having same problem.

I tried making a new project , reinstalling node modules , clearing next

how do i get my globals.css working?

i’ve some <picture> balises in my website with several links inside them. In each <picture> balise, all these links are for the same img, my goal is to remove a specific string from all these links that you can find in:

• data-fallbackurl="..." in <Picture>
• srcset="..." in <source>
• src="..." in <img>

they’re a lot of answered questions to achieve this, but i tried to use the one i understood:

jquery find specific word on src and remove it

to build this jquery code who can certainly be written in one line:

$("picture").each(function(){ $(this).attr('data-fallbackurl', $(this).attr("data-fallbackurl").replace(/_optimized_[d]{4}/, '')); });


$("source").each(function(){ $(this).attr('srcset', $(this).attr("srcset").replace(/_optimized_[d]{4}/, '')); });


$("img").each(function(){ $(this).attr('src', $(this).attr("src").replace(/_optimized_[d]{4}/, '')); });

who works fine in jsfiddle only:

https://jsfiddle.net/kodjoe/yroqhsLn/1/

But not in my website. I only find the way to write something for links with 4 digits after _optimized_, but i don’t know how to write something who will remove _optimized_ and everything after it when links have 4 digits or more.

Here is a part of code that you can find in my website:

<picture class="w-picture ui-picture_2i5 w-db2bf8b46bc363bbed9387e157081d5f" data-wrapper-id="fdd3aa5f-9d73-49a5-9cf5-6aa8b08071cc" data-component="picture" data-imagetype="image" data-fallbackurl="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396" data-images="[]" data-was-processed="true">

<source media="(min-width: 768px) and (max-width: 991px)" srcset="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

<source media="(max-width: 767px)" srcset="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396">

<img alt="Illustration" aria-label="Illustration" data-fallback-url="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396" class="w-picture__image ui-image_3aJ w-ddcc310ab79db79b65faaa0013f426e1" src="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2_optimized_1396.webp">

</picture>

Here is a different part of code that you can find in my website:

<picture class="w-picture ui-picture_2i5 w-8b71973a70d539cfa14f5a5a046e8708" data-wrapper-id="ea5314ae-f5bd-43f5-a214-a959d01ba7b4" data-component="picture" data-imagetype="image" data-fallbackurl="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0" data-images="[]" data-was-processed="true">

<source media="(min-width: 768px) and (max-width: 991px)" srcset="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0">
    
<source media="(max-width: 767px)" srcset="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0">

<img alt="Illustration" aria-label="Illustration" data-fallback-url="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0" class="w-picture__image ui-image_3aJ w-215292e7bfbf1453d341625860450213" src="//res2.yourwebsite.life/res/5ef66852db29eb0022cd043d/68b32bf32f727a1f6982ea06_optimized_1520_c1520x855-0x0.webp">


</picture>

As you can see, each time i need to remove _optimized_ and everything after it. Sometime is only 4 digits, but sometime it could be more like _optimized_1520_c1520x855-0x0.webp

I’m building a sliding puzzle game in React using CSS transitions to animate tile movement. The tiles are absolutely positioned with top and left, and I apply a CSS transition on those properties.

Problem:
Moving a tile left, right, or up triggers a smooth transition. But moving a tile down causes it to instantly “jump” into place — no animation.

Rendering tiles

{map.map((tileValue, index) => {
        if (tileValue === map.length - 1) return null; // Skip empty tile
        
        // Calculate actual tile's current position
        const visualRow = Math.floor(index / puzzleCols);
        const visualCol = index % puzzleCols;

        const tileWidth = boardWidth / puzzleCols;
        const tileHeight = boardHeight / puzzleRows;

        // Original image slice position
        const imageRow = Math.floor(tileValue / puzzleCols);
        const imageCol = tileValue % puzzleCols;

        return (
          <div
            key={tileValue} 
            className="tile cursor-pointer flex justify-center items-center"
            style={{
              position: 'absolute',
              width: `${tileWidth}px`,
              height: `${tileHeight}px`,
              top: `${visualRow * tileHeight}px`,
              left: `${visualCol * tileWidth}px`,
              transition: 'top 0.3s ease, left 0.3s ease',
              backgroundImage: `url(${imageSrc})`,
              backgroundSize: `${boardWidth}px ${boardHeight}px`,
              backgroundPosition: `-${imageCol * tileWidth}px -${imageRow * tileHeight}px`,
              border: '1px dashed #fff',
              boxSizing: 'border-box',
              zIndex: 1,
            }}
            onClick={() => swapTiles(index)}
          />
        );
      })}

• The tiles are positioned based on their index in the map array.
• The empty tile is represented by the highest value (8 in 3×3).
• The map is updated using setMap() when a tile is clicked and is adjacent to the empty tile.

SwapTiles updates the state like this:

const swapTiles = (tileIndex) => {
    const emptyIndex = findEmptyTile(map);  // Get the index of the empty tile (last tile)
   
    // Calculate row and column of empty tile
    const emptyRow = Math.floor(emptyIndex / puzzleCols);
    const emptyCol = emptyIndex % puzzleCols;
   
    // Calculate row and column of clicked tile
    const row = Math.floor(tileIndex / puzzleCols);
    const col = tileIndex % puzzleCols;
    
    // Check if clicked tile is adjacent to the empty tile (left, right, up, down)
    const isAdjacent =
      (Math.abs(row - emptyRow) === 1 && col === emptyCol) || 
      (Math.abs(col - emptyCol) === 1 && row === emptyRow);

    if (isAdjacent) {
      // Swap the clicked tile with the empty space in the map
      const newMap = [...map];  // Copy the map
      newMap[emptyIndex] = map[tileIndex];  // Move clicked tile to empty space
      newMap[tileIndex] = map[emptyIndex];  // Move empty space to clicked tile position
    
      setMap(newMap);  // Update the map
    }
  };

What I have tried

• Verified that top value does change correctly (e.g. from 0px to
  300px).
• Used Chrome Animation Inspector — animations are detected for left, right, and up, but not down.
• Tried wrapping setMap(newMap) in requestAnimationFrame and setTimeout(…, 0) — no effect.

What could cause the transition to fail only when moving a tile downward?
Is React unmounting and re-rendering the tile in a way that prevents animation? How can I ensure the same DOM element is preserved and transitions are applied?

Demo
https://codesandbox.io/p/sandbox/6p5hyj

I’ve set up a front-end environment with Vue.js, Vite, and Vue Router.

When I navigate between pages, the scroll position is remembered, causing the new page to start at the previous location instead of the top. The expected behavior is for navigation (not using the back button) to always begin at the top of the new page. The back button functionality, where it remembers the previous scroll position, works correctly.

I’ve tried using the scrollBehavior option in Vue Router, but it doesn’t seem to be working as expected.

Here’s the code I’ve used for the router configuration:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // My routes here
  ],
  scrollBehavior(to, from, savedPosition) {
    // This is the part that doesn't seem to have any effect.
    // I want to always scroll to the top on new navigation.
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

I’ve also checked the documentation and other online resources, but I can’t figure out why this isn’t working.

My api call is Failed.

When I call my api from frontend side is shom me this error “GET http://localhost:3000/api/v1/dashboard 401 (Unauthorized)” this error. but When I call using Postman it run perfectly.

I alredy use cors in my backend. but it cannot fix.
This is my useFetch Hook:

import { useEffect, useState } from "react"

export const useFetch = (url, immediate = true) => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(immediate);
    const BASE_URL = "http://localhost:3000/"

    useEffect(() => {
        const controller = new AbortController();
        const signal = controller.signal;

        const fetchData = async () => {
            try {
                const res = await fetch(BASE_URL + url, { 
                    method: "GET",
                    credentials: "include",
                    signal
                });
                const json = await res.json();
                setData(json);
            } catch (err) {
                if (err.name !== 'AbortError') setError(err);
            } finally {
                setLoading(false);
            }
        };

        fetchData();

        // Proper cleanup function
        return () => controller.abort();
    }, [url]);


    return { data, loading, error };
}

and this is my backend server code:

import route from "./routes/UserRoute.js";
import cors from 'cors'
import { express, mongoose, fileURLToPath, path, auth, cookieParser } from "./utils/ImortExport.js";
// import serverless from 'serverless-http';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// DB Config
mongoose.connect(process.env.DB_URL)
    .then(() => console.log("✅ MongoDB connected"))
    .catch(err => console.error("❌ MongoDB error:", err.message));

const PORT = process.env.PORT || 3000;
const app = express();

app.use(cors({
    origin: 'http://localhost:5173', // your frontend URL
    credentials: true, // allow cookies
}));
app.use(express.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));

// ----- Route -----
// app.get('/', (req, res) => {
//     res.sendFile(path.join(__dirname, 'client', 'index.html'));
// })

app.use('/api/v1', route);
app.use('/url', route);
app.listen(process.env.PORT);

Currently I am a person who is studying I have coded websites with WebStorm but a person has asked me to do edits on their website. I have received admin access but I need to find a way to get the WordPress website into either Php Storm or WebStorm as those are the 2 I know best and know how to edit efficiently. I am unable to find any way to do this. Is anyone able to assist me.

I have tried plugins to download it as a zipfile.
I have tried to understand how it works but it seems all of them need me to have access to the local machine that the person has made the website from. I am unable to get access to it and I wont lie I am still a student who is still trying to understand these mechanics. I have also asked lecturers and they where unable to assist me in any way.