Category: javascript

Category Added in a WPeMatico Campaign

Is WebGL fast than Canvas API for drawing a bunch of 2D objects❓❓

sorry if this is a dumb question.

I was trying to build a whiteboard as a side project using HTML canvas, and was wondering what’s the best technology for doing that.

My goal is to build a Miro like whiteboard that can draw/zoom/insert image etc.

Currently, I’m considering either using WebGL or using Canvas API. My understanding is that WebGL performs better for 3D rendering because it used GPU to do matrix multiplication, which is fast than CPU. However, in my case the whiteboard contains only 2D objects, would it still be faster to use WebGL (would it help to make Zoom in/out, drag and drop smoother)?

Thanks!

Enter number in reverse order in text field

I have a TextInput in react-native , I want to enter a number in order as 0.00 => 0.01 => 0.12 => 1.23 => 12.34 => 123.45 like this on each change text . CSS Direction “rtl” is not working . Looking for an algorithm to apply in my JS file for react-native textInput on

onChangeText={(amount) => this.onChangeText(amount)}

 onChangeText = (amount) => {
    //. Logic for reverse goes here

    this.setState({
      amount: newAmount,
      amountError: false,
    });
  };

How to work on lazy load(async loading) Vue without vue-cli or node?

I am very new to vue. I know that this one is easy with vue-cli but I need to learn this first without using the node.
I was making many template files and pages in different js files. Suddenly it hit my mind that what if a lot of file is requested and downloaded?
What I am trying to do is I am trying to fuse route and async component loading together for loading different pages when they are called.
Is there a way to do this? This is the code that I tried for my initial project.

 <html>
 <head>
 
      <script src="vue.js"></script>
  <script src="vue-route.js"></script>
    <script src="axios.min.js"></script>

 </head>
 <body>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <router-view></router-view>
</div>
 <script>
 //axios.get("https://shohanlab.com")

const Home = { template: '<div>Home</div>' }
const AsyncComp =
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: About
      })
    })
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: AsyncComp },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // short for `routes: routes`
})

const app =Vue.createApp({})
app.use(router)
app.mount('#app')
  </script>
 </body>
</html>

As we can see in the code that The About.js is called even before I call it. In this way the page size will be very big.

How to call function from external js file?

I am trying to increment a button on click from an external js file. When i click on the button i am having an error message telling me that my function increment is undefined. How to reach a function for an external js file in html? Thanks in advance.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>webpack starterkit</title>
</head>
<body>
  <div id="app">
    <h1>People entered:</h1>
    <h2 id="count-el">0</h2>
  </div>
  <button id="increment-btn" onclick="increment()">Increment</button>
  <script type="text/javascript" src="scripts/index.js"></script>

</body>
</html>

index.js

let count = 0;
let countEl = document.getElementById("count-el");
console.log(countEl);
 document.getElementById("count-el").innerText = count;

function increment() {
  count = count + 1;
  countEl.innerText = count;

}
increment();

Reactjs Props not working and not showing in browser

import { Modal } from "react-bootstrap";
import { ButtonStyled } from "../..";

const ModalCom = (props) => {
 const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

return (
  <>
  <ButtonStyled onClick={handleShow}>{props.buttonName}</ButtonStyled>
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>{props.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <img src={props.image} alt='wallet' />
        <p>{props}</p>
      </Modal.Body>
    </Modal>
  </>
);
}

export default ModalCom;

 import { ButtonStyled, ModalCom } from '../../Components';

const Donate = () =>{
    return (
        <div>
            <ModalCom 
                buttonName='Ethereum'
                title='Ethereum Wallet'
                image=""
                p='23189189234923jn25890bdfs89fjnk245890'
             />
        </div>
    )
}

export default Donate;

import styled from 'styled-components'

const ButtonStyled = styled.button`
    background-color = ${({ bg }) => bg};
    color : ${({color}) => color};
    border-radius: 50px;
    padding: 10px 50px;
    border: none;
    box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 20px;
    margin-top: 30px;
    &:hover{
        color: white;
        background-color: #62D3FC;
    }

`;
export default ButtonStyled;

why are my props not working? for the Modal file position it is in the modal component and Donate is in Pages Donate I want to send the name of the button, title, image, paragraph sent via props but in the browser it doesn’t appear what I want or even the data is not sent or Show in Browser
This I want showing but i can multiple modal

Syntax error: Unterminated string constant on Next.js fetch

Im having an error on my fetch api that is link to an outside URL , it is all working last week but now it is showing this error:

./pages/test.tsx:45:33

Syntax error: Unterminated string constant.

43 |
44 | var formdata = new FormData(e.target);

45 | const response = await fetch(“https:

This is my code:

   const response = await fetch("https://mistop.com/grow", {method: "POST",body: formdata,});

Error Image: Image

Anychart wordWrap

I a using AnyChart in a React project. I would like to use wordWrap on my legend.
Here is the JSON configuration for my legend:

  legend: {
    enabled: true,
    fontSize:10,
    itemsLayout: 'vertical-expandable',
    position:'right', 
    "width":60,
    "wordWrap": "break-word",
    "wordBreak":"break-all",
  },

Each item in the legend has the text “lah blah blah” but as you can see in the picture, the text just gets cut off.
Does anyone know why the text is not going to the next line. Any help is greatly appreciated.
enter image description here

How to change Javascript hitboxes for images that dont take up the full width of the object

I am pretty new to HTML canvas, and I am trying to make a flappy bird clone.
I have the bird and the pipes on screen, but the images do not take up the full width of the area I have assigned for the objects on the screen because there are invisible pixels. This is due to me having to remove a background and make it transparent. Does anyone know how to make the hitbox of the pipes take up the same amount of space as the image of the pipes even with the invisible pixels? Thank you.

const canvas = document.getElementById("canvas");
const c = canvas.getContext("2d");
const backgroundImage = document.getElementById("image")
const flappyBirdImage = document.getElementById("flappy-bird-image");
const topPipeImage = document.getElementById("top-pipe-image");
const bottomPipeImage = document.getElementById("bottom-pipe-image")
let controlsKeyDown = {up: false, right: false, down: false, left: false};
let dx = 2;
let dy = 2;

canvas.width = innerWidth;
canvas.height = innerHeight;




class Bird {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    
    draw() {
        c.beginPath();
        c.fillStyle = 'blue';
        c.strokeStyle = 'lightBlue';
        c.drawImage(flappyBirdImage, this.x, this.y, this.width, this.height)
        c.fill()
        c.stroke();
        c.closePath();
    }
    
}



class Pipe {
    constructor(x, y, height, width, color, image) {
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
        this.color = color;
        this.image = image;
    }
    
    draw() {
        c.beginPath();
        c.drawImage(bottomPipeImage, this.x, this.y, this.width, this.height)
        c.fill();
        
    }

    drawtop() {
        c.beginPath();
        c.drawImage(topPipeImage, this.x, this.y, this.width, this.height);
        c.closePath()
    }
}

const topPipe = new Pipe(400, 200, 100, 200, 'black')

const bottomPipe = new Pipe(500, 200, 100, 200, 'black')

const myBird = new Bird(200, 200, 40, 40)

function birdControlsKeyDown(Event) {
    if(Event.key === 'ArrowUp') {
        controlsKeyDown.up = true;
    }
    if(Event.key === 'ArrowRight') {
        controlsKeyDown.right = true;
    }
    
    if(Event.key === 'ArrowLeft') {
        controlsKeyDown.left = true;
    }
    
    if(Event.key === "ArrowDown") {
        controlsKeyDown.down = true;
    }
}
function birdControlsKeyUp(Event) {
    if(Event.key === 'ArrowUp') {
        controlsKeyDown.up = false;
    }
    
    if(Event.key === 'ArrowRight') {
        controlsKeyDown.right = false;
    }
    
    if(Event.key === 'ArrowLeft') {
        controlsKeyDown.left = false;
    }
    
    if(Event.key === 'ArrowDown') {
        controlsKeyDown.down = false;
    }
}

//Bird  With Edge Collision Detection

function birdCollisionDetection() {
    // Bird Hits Bottom Of Screen
    if(myBird.y + myBird.height >= canvas.height){
        myBird.y -= dy;
    }
    
    // Bird Hits Top Of Screen
    if(myBird.y <= 0) {
        myBird.y += dy;
    } 
    
    // Bird Hits Left Of Screen
    if(myBird.x<= 0) {
        myBird.x += dx;
    }
    
    // Bird Hits Right Of Screen
    if(myBird.x + myBird.height >= canvas.width) {
        myBird.x -= dx;
    }
    
    // Bird With Pipe Collision Detection
    
}
function birdWithPipeCollisionDetection(a,b) {
    
    if(a.x + a.width >= b.x && a.x <= b.x + b.width && a.y  <= b.y + b.height && a.y + a.height >= b.y){
        console.log('test');
        a.x -= dx;
        
    }
}
function draw() {
    c.drawImage(backgroundImage, 0,0,canvas.width,canvas.height)
    myBird.draw() 
    topPipe.drawtop()
    bottomPipe.draw()
  
   
    
    // Bird Controls
    
    addEventListener('keydown', birdControlsKeyDown)
    
    addEventListener('keyup', birdControlsKeyUp)
    
    
    if(controlsKeyDown.up) {
        myBird.y -= dy;
    }
    if(controlsKeyDown.right) {
        myBird.x += dx;
    } 
    
    if(controlsKeyDown.left) {
        myBird.x -= dx;
    }

    if(controlsKeyDown.down) {
        myBird.y += dy;
    }

    birdCollisionDetection();


    birdWithPipeCollisionDetection(myBird, topPipe);

    birdWithPipeCollisionDetection(myBird, bottomPipe);



    requestAnimationFrame(draw)
}
console.log(myBird)


draw()
html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

canvas {
    overflow: hidden;
}

image {
    background: transparent;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" type="image/png" href="./Flappy Bird Pictures and Animations/Flappy Bird Icon.png" type="icon">
    <script src="Flappy Bird.js" defer></script>
    <link rel="stylesheet" href="Flappy Bird.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <img src="./Flappy Bird Pictures and Animations/background image.png" id="image">
    <img src="./Flappy Bird Pictures and Animations/The Flappy Bird.png" id="flappy-bird-image">
    <img src="./Flappy Bird Pictures and Animations/Bottom Pipe.png" id="bottom-pipe-image">
    <img src="./Flappy Bird Pictures and Animations/Top Pipe.png" id="top-pipe-image">
</body>
</html>

Select the table according to the category, topic and microtopic using just one model Node.Js

I have several tables that have the same structure, they all have a title, description, topic and microtopic but they have different content. I want to display the table information according to the page I am using a single Model.

On this site I will have a page with several categories such as: Movies, music and series. Each category will have a topic, for example, Movies will have: Action, horror, adventure. And each topic will have a microtopic, for example the Film category that has the Action topic will have the following microtopics: Old, current, future releases. And within each microtopic you will have a list containing movies with their title, description, topic and microtopic corresponding to that search.

I would like to know how I could carry out this process. I have here an example of a model that I created and what I imagined would be to change the tableName according to the url but I didn’t find a way to do that.

I leave here the example of the model I created:

import {Model, DataTypes} from 'sequelize';
import {sequelize} from '../instances/mysql';

export interface ContentInstance extends Model{
    id: number,
    title: string,
    description: string,
    topic: string,
    microtopic: string,
};

export const Content= sequelize.define<ContentInstance>("Content", {
    id:{
        primaryKey: true,
        autoIncrement: true,
        type: DataTypes.INTEGER
    },
    title:{
        type: DataTypes.STRING,
    }, 
    description:{
        type: DataTypes.STRING,
    },
    topic:{
        type: DataTypes.STRING
    },
    microtopic:{
        type: DataTypes.STRING
    }   

}, {
    tableName: 'actionold', //I imagined something like concatenating topic + microtopic but dinamically
    timestamps: false
});

I’m new to backend and Node.Js (and I’m using mySQL)

Fill a div with repeated images without cutting the last image

I have been trying to repeat images without cutting the last images, i have tried the ordinary background-image style to repeat the image but u can’t always get the perfect results.
I have set the background image in a position absolute span inside li the span has 86% of the li so i can see a little of the last letter.

background-image: url(https://source.unsplash.com/jTSf1xnsoCs);
background-size: auto 51px;

In the first example the images fit the 86% of the li cause there is enough space, but in the second one the image is cutted. as i said i have used the background-image style.

enter image description here

Is there a way to fit the 86% or even 100% of li with completed images using javascript

Here is an example https://jsfiddle.net/4cfjd10a/