Category: javascript

Hi so for example this image https://e7.pngegg.com/pngimages/433/468/png-clipart-white-heart-shape-illustration-heart-outline-wedding-hearts-love-angle.png

Is it possible to remove the transparent part of the image using CANVAS and JS? And by removing I mean the it’ll cut or crop image so the transparent part will be removed to the image? I haven’t a sample code to share, I tried to look it online, but I really got any answers from the search results I made.

Here is my debounce function:

function debounce(fn, wait = 1500) {
  let timeout;
  return function (...args) {
    if (timeout) clearTimeout(timeout);
    let context = this;
    timeout = setTimeout(function () {
      fn.apply(context, ...args);
    }, wait);
  };
}

Here is my method in the component:

methods: {
    onKeyUp() {
      if(this.q.length) this.isLoading = true; // show loading spinner
      return debounce(() => this.querySearch())()
    },

So I have to execute the debounce call with an extra set of () which makes sense, because debounce returns a function. Now, if I change it to this:

methods: {
    onKeyUp: debounce(function() { 
       this.querySearch()
    })

I don’t understand why this works – debounce returns a function. I would expect when onKeyUp is triggered, it would run debounce – which just returns a function, without ever executing it. Does it implicitly execute the returned function with this syntax? Why?

Also, why does it need to be a non-arrow function in the second example? I know in the first example you want an arrow fn because you want this to point to the component context, but im unclear why using this key-value syntax breaks that down here.

I ran across some code this week that has me very confused. Can someone break down for me exactly what’s going on, line-by-line?

new Date(
  (d => d.setMonth(d.getMonth() - 6))(
    new Date()
  )
)

I understand it’s creating the current date minus six months (which I didn’t expect to work in all cases, but that is an aside). In particular, I don’t understand two things:

a) The variable d. Does this represent the new Date that’s being created on line 1?

b) The second new Date() on line 3. Is d.setMonth() returning a function and new Date() is the parameter?

Thanks in advance!

My code:

async function main(collection, token, symbol) {
  await collection.deleteMany({});
  const priceHistory = await makePriceHistoryRequest(token, symbol, slow*2);
  await insertPriceHistory(collection,priceHistory);
  const res = await priceQuote(token,symbol);
  await insertQuote(collection,res,symbol);
  return await avgFastSlow(fast,slow,collection);
}

My code makes request to 2 endpoints and update MongoDB collection. The last code:

return await avgFastSlow(fast,slow,collection);

takes the updated collection from the two endpoints to calculate fast and slow average. Problem is that it is not waiting before moving onto the this last line of code. Isn’t the point of async function to make it “wait?”

Mystified here. Thanks for the help

Excel Data

Date    Percentage
04-03-22 (H)    80
05-03-22 (H)    55
06-03-22 (H)    20
07-03-22 (H)    49
08-03-22 (H)    61
09-03-22 (H)    73
TODAY (P)   23
11-03-22 (P)    64

Controller code

datavCenterSpacePredictionModelData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[3]]); 

Passing this object to view

await res.render('dashboard', { vCenterSpace:datavCenterSpacePredictionModelData})

In my view I am not able to parse/loop through this data so that it can be passed on to chartjs object.
Chart object need labels and data

const zschart = new Chart(document.getElementById("chartjs-0"), {
                                    "type": "line",
                                    "data": {
                                        "labels": ["04-03-22 (H)","05-03-22 (H)","06-03-22 (H)","07-03-22 (H)","08-03-22 (H)","09-03-22 (H)","TODAY (P)","11-03-22 (P)","12-03-22 (P)","13-03-22 (P)","14-03-22 (P)","15-03-22 (P)"],
                                        "datasets": [{
                                            "label": "Usage in %",
                                            "data": [80,55,20,49,61,73,23,64,60,91,70,95],
                                            "fill": false,
                                            "borderColor": "rgb(75, 192, 192)",
                                            "lineTension": 0.1
                                        }]
                                    },
                                    "options": {}
                                });

when I am trying to get this value, is returning me object. I am checking type of object it is returning me string

var vCenterSpace = ('<%=vCenterSpace%>') //value of node js object into JS
alert(typeof(vCenterSpace ))

I want to dynamically pass these value as below.
These are hardcoded values

"labels": ["04-03-22 (H)","05-03-22 (H)","06-03-22 (H)","07-03-22 (H)",
"data": [80,55,20,49,61,73,23,64,60,91,70,95],

Its all getting messed up, not able to understand how this resolve this.

I have an element that displays a tooltip when hovered over, but when the element is on the edge of the screen, the tooltip gets cut off instead of moving to stay in the div.

What it looks like (Tooltip Clipping)

What I want it to look like

Here’s some of my code:

<div class="image">
    <img src="/images/image_name.png" style="left: 100%">
    <span class="tooltiptext">Marker</span>
</div>

.image {
  position: absolute;
  width: 13px;
  height: 13px;
  user-select: none;
  pointer-events: auto;
  transform: translateX(-50%);
}

.image .tooltiptext {
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms;

  min-width: 90px;
  background-color: #000000e0;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  position: absolute;
  z-index: 2;
  bottom: 100%;
  left: 50%;
  transform: translate(-90%, -5px);
}

.image:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Let me know if there’s a way to fix this!
Thanks!

I have created a REST API for the backend of this project and am using React to make the client side of the app. I have been getting this error when I am trying to login to my app.

Access to XMLHttpRequest at ‘https://studioghiblidb.herokuapp.com/login’ from origin ‘http://localhost:1234’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I was advised to include the local host as a proxy which I did in my client side package.json like this

"devDependencies": {
    "@parcel/transformer-sass": "^2.3.2",
    "process": "^0.11.10"
  },
  "proxy" : "http://localhost:1234/"

On the server side I was instructed to use this code to keep from cross site forgery issues. I have included the essentials as accepted origins

const cors = require('cors');

 let allowedOrigins = [
'http://localhost:8080', 
'http://testsite.com',
'http://localhost',
'http://localhost:1234',
'https://studioghiblidb.herokuapp.com/'
];

app.use(cors({
  origin: (origin, callback) => {
    if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
       let message = 'The CORS policy for this application does not allow found on the list of allowed origin' + origin;
       return callback(new Error(message), false);
  }
  return callback(null, true);
}
}));

I am at a complete loss as to what is causing the CORS error to keep from giving a JWT token and logging in. I have tested in Postman and the users are there and working

I am working on a react project. I am getting data from openWeather API in a file. I want to use that response data on different locations in different components. Experts, please help me to solve the issue.

I’m starting and one of the first things I’m trying on my own is how to add multiple sources to this promise:

    const getTodos = async () =>{
const response = await fetch('todos/resource.json');
if(response.status !== 200){
    throw new Error('Cannot fetch data');
}
const data = await response.json();
return data;
};
getTodos()
    .then(data => console.log ('Resolved: ', data))
    .catch(err => console.log ('Rejected', err.message);

I tried making different variables and using .then after to print them but that didn’t work.

    const getTodos = async () =>{
    const response = await fetch('todos/resource1.json');
    if(response.status !== 200){
        throw new Error('Cannot fetch data'); // Error from the source
    }
    const data = await response.json();
    return data;
    const response2 = await fetch('todos/resource2.json');
    if(response2.status !== 200){
        throw new Error('Cannot fetch data'); // Error from the source
    }
    const data2 = await response2.json();
    return data2;
};

getTodos()
    .then(data => console.log ('Resolved: ', data))
    .then(data2 => console.log ('Resolved: ', data2))
    .catch(err => console.log ('Rejected', err.message)) // Error for json file
    ;

any tips?

Okay so i have a huge problem with a deadline. Im in my final year and i had to do a final year project to graduate. The thing is i could have done it myself, but with all the secondary assignments and projects to also give us to do, i gave a remote developer to do it for me in nodejs. i understand nodejs alot, but ive never encountered this problem. He just gave me back the system and the database. i checked the database and got the email for the admin superuser and tried logging in, but its not working. its saying “email doesnt exist”, so its not that the password is incorrect, the email doesnt exist according to the database. but its the same database i got the admin email. so my question is that how can i be accessing the same database that my system uses and trying the same admin email of the system inside the database but its telling me that the email doesnt exist. is it a problem with my laptop or something else? its a superuser so obviously it is only one so how can it not be existing? im working on a deadline so fast answers would be appreciated.

I have a small page. Divas in the form of circles are created here every certain time.
They spawn in random places

As can be seen even on the buttons and slightly outside the page

The question is. Is it possible to make a box that does not touch the buttons, and that the circles are created within this box?

This should be done as a border with a certain extension, but specifying everything in pixels is not an option, it will be bad for different screens

//timer

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

//create circle

var widthHeight = 65;
var margin = 25;
var delta = widthHeight + margin;

let clicks = 0;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.borderColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.borderColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop + "px";
  div.style.left = limitedLeft + "px";
  
  const nodes = document.querySelectorAll('.animation');
  for(let i = 0; i < nodes.length; i++) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
  }
  
  $(div).click(function() {
    $('#clicks').text(++clicks);            
    $(this).fadeOut();
  });
  
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 600;

setInterval(() => {
  i += 1;
  createDiv(`circle${i}`);
}, oneSecond);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0f0f0f;
}

.back {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  word-spacing: 2px;
  color: #ffffff;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  font-weight: 700;
  text-decoration: none;
  font-style: italic;
  font-variant: normal;
  text-transform: lowercase;
  position: absolute;
  top: 25%;
  left: 2%;
  user-select: none;
  z-index: 999;
}

.panel {
  color: #0f0f0f;
  font-size: 40px;
  z-index: 999;
  position: absolute;
  cursor: default;
  user-select: none;
  color: #0f0f0f;
}

.score {
  border: 1px solid #ffffff;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 40px 10px;
}

.time {
  border: 1px solid #ffffff;
  padding: 5px;
  background-color: #ffffff;
  border-radius: 40px 10px;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: #0f0f0f;
  border: 3px solid #000;
  margin: 20px;
  position: absolute;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="panel">
<span class="score">Score: <a id="clicks">0</a></span>
<span class="time">Time: <label id="minutes">00</label>:<label id="seconds">00</label></span>
</span>
<a href="" class="back">back</a>

I have a page with multiple dropzones each set up for one image. When the user submits the form, all the images attached to the dropzones are resized and then appended to the rest of the form fields.

When this is done I send the form data via fetch. I need to wait for the all the images to be resized and appended and then send the form. How can I do this?

Current code:

  dropzones.forEach((dropzone, key, dropzones) => {
    let { paramName }  = dropzone.options
    let { resizeWidth }  = dropzone.options
    if (dropzone.files.length > 0){
      dropzone.resizeImage(dropzone.files[0], resizeWidth, null, 'contain', resizeDone, paramName); // note: resizeImage() in dropzone.js has been edited to add paramName
    }
    if (Object.is(dropzones.length - 1, key)) { // this is the final iteration
      console.log('last one') // output before resizing complete
    }
  })

  function resizeDone(newfile, paramName){
    console.log(newfile);
    console.log(paramName);  
    form.append(paramName, newfile);    
  }

Somehow I need to detect the final image has been resized and appended before calling fetch();

I am new to Reactjs and Thank you in advance.
I am creating a website and I want to add TextEditor like Draft.js and React Quill. The main scenario is I want to add as much as TextEditor as I am on a button click and save the data of the TextEditor differently for each TextEditor.

So, I want to make a comment section on my webpage and I’m using JS, JQUERY and HTML but I do not know enough to change my code so please give me the code I need instead of saying just do this. example of what not to do: Oh, you need a database (I already know that). Ok let’s get to the point. When I open the .html file on a different device, the comments are gone, and this is because I am using JS localStorage which stores the comments on the device it was written on so now let’s get to the real point I need a database. But I do not know how to make one. This is what I’m using or think I need to make the database: Xampp. Here is my code:

    function render(data) {
    var html = "<div class='commentBox'><div class='rightPanel'><span class='uu'>"+data.name+"</span><div class='date'>"+data.date+"</div><p class='ww'>"+data.body+"</p><div class='clear'></div></div></div><br>";
    $('#container').append(html);
    
    
} 


$(document).ready(function() {
var comment = [];

if(!localStorage.commentData3) {
    localStorage.commentData3 = [];
} else {
    comment = JSON.parse(localStorage.commentData3);
}

//var Talk1 =  localStorage.commentData3;

for(var i=0; i<comment.length; i++){
    render(comment[i]);
}

$('#addComment').click(function() {
    var addObj = {
        "name": $('#name').val(),
        "date": $('#date').val(),
        "body": $('#bodyText').val()
    };
    
    //console.log(addObj);
    comment.push(addObj);
    localStorage.commentData3 = JSON.stringify(comment);
    render(addObj);
    $('#name').val('');
    $('#date').val('');
    $('#bodyText').val('');
});

});

    body {
      background-image: url("background.jpg");
      font-family: "Comic Sans MS";
    }
    
    .middle {
      width: 50%;
      margin: auto;
      background: white;
      border: 1px solid white;
      padding: 2rem;
      border: 2px solid #636363;
    }
    
    a { color: #cd90b0; }
    a:hover { color: #dfc3d2; }

.form {
  border: 1px solid #000000;
  text-align: center;
  padding: 2.5rem;
  background-color: #dfc3d2;
}

.hw {
  text-align: center;
  color: #cd90b0;
}

.hideIt { #visibility: hidden; }

.leftPanelImg img {
  border-radius: 100%;
}

.jj {
  background-color: #eeeeee;
  padding: 1rem;
}

.hh {
  background-color: #eeeeee;
  padding: 1rem;
}

.mm {
  background-color: #f3f6f4;
  padding: 1rem;
}

.commentBox {
  border-bottom: 1px solid #796f6f;
  border-top: 1px solid #796f6f;
  background-color: #e2e2e2;
  padding: 1rem;
}

.uu {
  padding-left: 1rem;
  padding-right: 1rem;
  #background-color: #ffffff;
}

.ww {
  background-color: #efecec;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  border: 1.5px solid #dfc3d2;
}

.date {
  padding-left: 1rem;
  padding-right: 1rem;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="middle">
    <div class="hideIt">
    <div class="hw"><h4>Comment Below:<h4></div>
    <div id="container">
      
    </div>
    <br>
    <br>
    <br>
    <div class="form">
    <form action="post-comment.php">
      <input type="text" id="name" placeholder="Name..."></input><br />
      <input type="date" id="date" placeholder="Date..."></input><br />
      <textarea rows="5" col="30" id="bodyText" placeholder="Type your body here..."></textarea><br />
      <input type="button" id="addComment" value="Add Comment">
      </form>
    </div>
    </div>
    <br><br><br><br>
    </div>

please tell me the code for what database I need




                                          thanks!

I am working in node js to create API it’s function as follow
This API will be used to send images from Images folder then store the image name which has been sent to the images_thumb folder
after resizing the image with Sharp
if the server got request for any image which has been sent before the API shall send the image from Images_thumb folder
—-Proplem
When ever I open the browser to http://localhost:3000/?name=6 (6 is an image name not exists in the images folder for example)
the image name is added to visited array and i donot know how to send res.send(“file not found”)

const express = require("express");
const sharp = require("sharp");


const app = express();
let visited = []; // This array is used to sore file names for comparison later
let found; // Boolean to be true if the file name exists in Visited Array

 app.get("/", (req, res) => {
 if (visited.length == 0 ) { // is the server just started 
console.log(typeof res.statusCode);
sharp(__dirname + "\images\" + req.query.name + ".jpg") // sharp is used to resize the image 
 and save the resized version in the Images_thumb folder
    .resize(200,200)
    .toFile(__dirname + "\images_thumb\" + req.query.name + ".jpg")
    .then(console.log("done")).catch((err)=>{
      res.send('Not found');
      console.log(err);
    })
res.sendFile(__dirname + "\images\" + req.query.name + ".jpg");
visited.push(req.query.name);
console.log("initial length 0");

} else if (visited.length > 0) {
for (let index = 0; index <= visited.length; index++) { // used to chek if file name existis
in the array Visited
const element = visited[index];
console.log(index + “loop”);
if (element === req.query.name && res.statusCode==200) {

    res.sendFile(__dirname + "\images_thumb\" + req.query.name + ".jpg");
    console.log(index + "break");
    found = true;
    //res.send(index+"break")
    break;
  } else {
   
    console.log("false");
    found = false;
  }
}

} else {
}

if (visited.length > 0 && found == false ) { // used if file name not in Array visited and Array
length >0
sharp(__dirname + “images” + req.query.name + “.jpg”)
.resize(200,200)
.toFile(__dirname + “images_thumb” + req.query.name + “.jpg”)
.then(console.log(“done”)).catch((err)=>{
res.send(‘Not found’);
console.log(err);
});

      res.sendFile(__dirname + "\images\" + req.query.name + ".jpg");
      visited.push(req.query.name);
      console.log(visited);
   

};

 // res.sendFile(__dirname + "\images_thumb\" + req.query.name + ".jpg");
});

app.listen(3000, function () {
   console.log("running");
});

the file structiure as follow
main folder inside is images and images_thumb folder with server.js