Category: javascript

I’m in my first month into Svelte and I’m having this strange error with this coding:

<script>
    let name = 'world'
</script>

<input bind:value={name}>

<h1>
    Helllo {name}!
</h1>

As you can see, I’m doing my first binding with input element and I got the next error message:

</script> attempted to close an element that was not open *svelte(invalid-closing-tag) [Ln 10, Col 1]*

I don’t even have a 10 line, the code only has 9 lines.

I also received the same error but with js instead of svelte, in the same code at the same time.

</script> attempted to close an element that was not open *js(-1) [Ln 10, Col 1]*

These are my errors.

Console errors

I want to utilise the interface with data returned from useMutation hooks in component, provided from RTK Query. how can I achive this.

Refer to code below:

In API Slice.

export const catsApi: any = createApi({
    reducerPath: 'catsApi',
    baseQuery: baseQueryWithReauth,
    endpoints: (builder) => ({
        fetchCats: builder.query<IGenericResponse<ICatResponse>, any>({
            query: () => ({
                url: `cats`,
                method: "GET",
            }),
        }),
    }),
});

In component

const { isLoading: catsLoading, data: cats} = useFetchCatsQuery();

useEffect(() => {
  const catName = cats.<here i need keys from my ICatResponse>
}, [someDependancy]);

In component

const { isLoading: catsLoading, data: cats} = useFetchCatsQuery();

I have used tokens as authentication approach of my App, and, I have defined a function as follows in my App:

<script>
const func1 = async ()=>{
  await fetch(api)  // a simple get request
}

const timer = ()=>{
  
  setinterval(async()=>{
     
     await func1() // invoking http request function
    

},10000)


timer()
}
</script>

When the timer invokes the function inside of the timer with proper interval, it might be failed due to the ending lifespan of access token.also, I have defined proper config in axios interceptors for handling errors due to the lifespan of access token, but just before updating of access token, the user recognize that the request failed.
How can handle it and preventing updating token before expiration of token?

I’ve a next js app built with version 13.4.15. And I want to upgrade to the latest stable version.

How do I perform the upgrade ? Official doc’s doesn’t have instructions for this.

I’m working an a code that takes a number input from a user and genrates numbers from 0 to whatever number the user provided as input.
I’ve written the code linking the html and js together, however it still does not perform the function that i want it to do

i created a button element in html and linked it in javscript using the id. each number generated is supposed to have a different background color based on if it is prime, even or odd.
So i have the input element for a number to be entered and a button that is suppose to generate numbers from 0 to whatever number that was entered. for e.g if 5 is entered, the button is to generate numbers 0-5 but the button is not working like that. it only generates the number 0 and stops and im not getting any errors in my console. Here is the javascript code:

const button = document.querySelector("button");

button.addEventListener("click", () => {
const num = document.querySelector("#number").textContent;
const userNum = parseInt(num, 10);
for (let i = 0; i <= num; i++) {
let container = document.createElement("div");
container.textContent = i;
// function to check if a number is a prime number
function isPrime(number) {
  if (number <= 1) return false;
  if (number <= 3) return true;

  if (number % 2 === 0 || number % 3 === 0) return false;

  for (let i = 5; i * i <= number; i += 6) {
    if (number % i === 0 || number % (i + 2) === 0) return false;
  }

  return true;
}

if (isPrime(i)) {
  container.style.backgroundColor = "red";
} else if (i % 2 === 0) {
  container.style.backgroundColor = "green";
} else if (i % 2 !== 0) {
  container.style.backgroundColor = "yellow";
}
let containerElement = document.querySelector("#numberContainer");
containerElement.appendChild(container);

}
});

Why this project is not working properly on searching result & by clicking on button.
here is html & javascript:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Table Project</title>
</head>

<body>
    <div class="search">
        <input type="search" name="" id="inpBar">
        <button type="search" name="" id="btnBar">Search Now</button>
    </div>
    <div class="table-container">
        <table class="custom-table">
            <h2>Top American Singers</h2>
            <tbody id="table-id">
                <tr>
                    <td>Ed Sheeran</td>
                    <td>Billie Eilish</td>
                    <td>Ariana Grande</td>
                    <td>The Weeknd </td>
                    <td>Taylor Swift</td>
                    <td>Adele Laurie</td>
                </tr>
                <tr>
                    <td>Justin Bieber</td>
                    <td>Dua Lipa</td>
                    <td>Beyonce</td>
                    <td>Lady Gaga</td>
                    <td>Bruno Mars</td>
                    <td>Celine Dion</td>
                </tr>
                <tr>
                    <td>Shawn Mendes</td>
                    <td>Rihanna</td>
                    <td>Charlie Puth</td>
                    <td>Sam Smith</td>
                    <td>Harry Styles</td>
                    <td>Miley Cyrus</td>
                </tr>
                <tr>
                    <td>Alicia Keys</td>
                    <td>Selena Gomez</td>
                    <td>Adam Levine</td>
                    <td>Joh Legend</td>
                    <td>Zayn Malik</td>
                    <td>Halsey</td>
                </tr>
                <tr>
                    <td>Jennifer Lopez</td>
                    <td>Katty Perry</td>
                    <td>Pink</td>
                    <td>Shakira</td>
                    <td>Demi Lovato</td>
                    <td>Cardi B</td>
                </tr>
            </tbody>
        </table>
        <p id="noResult">No Result Was Founded</p>
    </div>
    <script>
        const input = document.getElementById("inpBar");
        const button = document.getElementById("btnBar");
        const table = document.getElementById("table-id");
        const noResult = document.createElement("noResult");
        const rows = Array.from(document.querySelectorAll("table tbody tr"));
        document.addEventListener("DOMContentLoaded", () => {
            button.addEventListener("click", (implement) => {
                function implement() {
                    const get = input.value.toLowerCase();
                    const filtered = Array.from(rows.getElementsByTagName("td").map(cell.textContent.toLowerCase()));
                    return filtered.some(text => text.includes(get));
                    
                    table.innerHTML = "";
                    if (filtered.length > 0){
                        filtered.forEach(row => table.appendChild(row.cloneNode(true)));
                        noResult.style.display = "none";
                    }
                    else {
                        noResult.style.display = "block";
                    }
                }
            })
        })
    </script>
</body>

</html>

& here is quick css of this project:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.table-container {
    width: 100%;
    max-width: 800px;
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 1px 10px white;
}

.custom-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    justify-content: center;
    text-align: center;
}


.search {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    flex-direction: row;
}

button {
    background-color: rgb(182, 182, 182);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 5px;
}

#inpBar {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 5px;
}

h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 20px;
}

Expected result search & got nothing. project is not working at all. whenever I try to search content in input button, and on clicking button I get nothing. I think there is a problem with braces & function (might be). try by your self & then let me know….

If i have a string called Saturday and the character a is the point of start and end for the substring I want to get. So it should return aturda. Is this possible?

This shouldn’t tied to only a specific string. So if I pass on the string summer it would still work the same and for other strings.

Example photo

How can it be done in React JS Material UI that if I type in the last newline in the datagrid view, it shows another newline below it?

How can I do it in gridview in Material UI as shown in the above photo.

i want to use eslint but i dont want to have to configure it for every single project

here is what i did:

1. installed the eslint vscode extension
2. installed eslint globally via npm install -g eslint

i’ve restarted vscode and it still won’t show any errors in my js files

expecting it to show js errors

Every query, that I run in my application it is taking an extra overload of 250-300ms don’t know why! I have my mongodb and server both hosted on AWS. There are security groups monitoring the connection. Our both hosted ones are t2.medium. The query when I am running on Mongodb Compass, is taking 0ms, but the same query through application, 300ms.
Please help resolve it.

[Postman Api hit time](https://i.stack.imgur.com/HCkxi.png)
[Simple one query code](https://i.stack.imgur.com/BmgMz.png)
[Collection](https://i.stack.imgur.com/tGttq.png)

I’m new to vue.js and try to make my first application using vue.js. What I try to make is a simple login and registration form, I want to make a validation for the form, I used vee validate and yup scheme to back it up, but there is a problem when the error message is present the card will be bigger each time? does anyone knows what causing them to happen?

You can check out my code in:
https://github.com/ItsMeMan221/mock-repo

And here is the live preview:
https://jeff-letters-per-cat.trycloudflare.com

I’ve troubleshot these bot tons and now I’ve reached the problem where the code runs, the discord bot comes online in the discord server and I get the “bot is ready message”, but when the message is supposed to show the message content after a message is sent in a discord channel (Example: “someone says “hello” my terminal should say “Received Message: Hello”)

but it doesn’t.

it only says “received message:” and nothing after it no matter what.

I have discord.js v.12 downloaded and node.js downloaded, and the bot runs, but doesn’t work.
Did I do something wrong in my code?:

const { Client, Intents } = require(‘discord.js’);
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });

const TOKEN = ‘I’m not gonna show you my bot token silly’; // Replace with your bot’s token
const PREFIX = ‘!’; // You can change this to your preferred command prefix

client.once(‘ready’, () => {
console.log(Bot is ready!);
});

client.on(‘message’, (message) => { // Changed ‘messageCreate’ to ‘message’
console.log(Received message: ${message.content});
// Check if the message is from a bot or doesn’t start with the prefix
if (message.author.bot || !message.content.startsWith(PREFIX)) {
return; // Ignore the message
}

// Extract the command without the prefix
const command = message.content.slice(PREFIX.length);

// Check if the message has a number (you can customize this check)
const words = command.split(' ');
const number = words.find((word) => !isNaN(word));

// If a number is found, increment it and send the updated number
if (number !== undefined) {
  const parsedNumber = parseFloat(number);
  if (!isNaN(parsedNumber)) {
    const updatedNumber = parsedNumber + 1;
    message.channel.send(`Updated number: ${updatedNumber}`);
  }
}

});

client.login(TOKEN);

Debug showing “Received message:”

function convertAmountToWords(amount) {
  const words = [
    "Zero",
    "One",
    "Two",
    "Three",
    "Four",
    "Five",
    "Six",
    "Seven",
    "Eight",
    "Nine",
    "Ten",
    "Eleven",
    "Twelve",
    "Thirteen",
    "Fourteen",
    "Fifteen",
    "Sixteen",
    "Seventeen",
    "Eighteen",
    "Nineteen",
  ];

  const tensWords = [
    "",
    "",
    "Twenty",
    "Thirty",
    "Forty",
    "Fifty",
    "Sixty",
    "Seventy",
    "Eighty",
    "Ninety",
  ];

  const centsWords = [
    "",
    "One Cent",
    "Two Cents",
    "Three Cents",
    "Four Cents",
    "Five Cents",
    "Six Cents",
    "Seven Cents",
    "Eight Cents",
    "Nine Cents",
  ];

  const [dollars, cents] = amount.slice(1).split(".");
  const dollarWords =
    dollars === "0" ?
    "Zero" :
    dollars < 20 ?
    words[Number(dollars)] :
    tensWords[Math.floor(dollars / 10)] +
    (dollars % 10 === 0 ? "" : ` ${words[dollars % 10]}`);
  const centWords = cents ? centsWords[Number(cents)] : "";

  return `${dollarWords} Dollar and ${centWords}`;
}

const amountInWords = convertAmountToWords("$10.20");
console.log(amountInWords); // Output: "Ten Dollar and Twenty Cents"

In this code example that (.20) is undefined, I want to above example is ($10.20),
I want “Ten Dollar and Twenty Cents”.
How to recode above example.
Help me please.

My dist() function in my game project is not working for less than 130 or above and distance between character and collectible didn’t go less than 130 even when it,s on top. for example in my game project.

`distance = dist(
collectable.x_pos,
collectable.y_pos,
gameChar_x,
gameChar_y
);

if (distance < 130) {
collectable.isFound = true;
}if i set the statement to if(distance < 140) or if (distance < 120)` collectible will remain false.

I’ve tried changing gameChart_x and gameChart_y to mouseX and mouseY, distance didn,t go below 90
I’ve also tried to new collectible still same result.

i want the dist() between collectible and character(mouseX, mouseY) should get to zero has character get closer.

here is the code but with the character replaced with mouseX and MouseY

var gameChar_x;
var gameChar_y;
var floorPos_y;
var isLeft;
var isRight;
var isFalling;
var isPlummeting;
var distance;
var collectable;

function setup() {
  createCanvas(1024, 576);
  floorPos_y = (height * 3) / 4;
  gameChar_x = width / 2;
  gameChar_y = floorPos_y;

  isLeft = false;
  isRight = false;
  isFalling = false;
  isPlummeting = false;

  collectable = {
    x_pos: 400,
    y_pos: 310,
    size: 40,
    isFound: false,
  };

  canyon = {
    x_pos: 200,
    width: 100,
  };
}

function draw() {


  background(100, 155, 255); //fill the sky blue

  noStroke();
  fill(0, 155, 0);
  rect(0, floorPos_y, width, height - floorPos_y); //draw some green ground

  //draw the canyon

  fill(175, 238, 238);
  rect(canyon.x_pos + 20, 432, canyon.width, 300);
  fill(100, 155, 255);
  rect(canyon.x_pos + 20, 432, canyon.width, 100);
  fill(210, 105, 30);
  rect(canyon.x_pos + 20, 432, canyon.width - 90, 300);
  fill(240, 128, 128);
  rect(canyon.x_pos + 110, 432, canyon.width - 90, 300);

  if (gameChar_x > canyon.x_pos + 20 && gameChar_x < canyon.x_pos + 100) {
    isPlummeting = true;
  } else {
    isPlummeting = false;
  }

  if (
    (isPlummeting == true && gameChar_y >= floorPos_y) ||
    gameChar_y > floorPos_y
  ) {
    gameChar_y += 5;
  }

  //COLLECTIBLE

  if (collectable.isFound == false) {
    fill(255, 215, 0);
    ellipse(collectable.x_pos, collectable.y_pos + 100, collectable.size);
    fill(218, 165, 32);
    ellipse(collectable.x_pos, collectable.y_pos + 100, collectable.size - 10);
    fill(255, 215, 0);
    text("£", collectable.x_pos - 5, collectable.y_pos + 107);
    textSize(collectable.size - 20);
  }

////////////////////////The BUG///////////////////////////////////////////
  distance = dist(collectable.x_pos, collectable.y_pos, gameChar_x, gameChar_y);
  if (distance < collectable.size) {
    collectable.isFound = true;
  }

  ellipse(mouseX, mouseY, 20, 20);
  console.log(distance);
  console.log(dist(collectable.x_pos, collectable.y_pos, mouseX, mouseY));

  
  }

committing point is not reached when I ran the sqlloader shell script using Java program.but I can able to get insert the record when I ran directly in unix server

I tried the same shell script in unix server , it is working fine and sqlldr loaded the data to database correctly , but the same script which am running through Java, when hits the sqlldrpart, it went out without reaching the commit point in database table, so sqlldr can’t able to load the data..anyone can help on this issue