This code runs for grid=12. Can anyone explain why this happens?

Basically the title. I have read every line many times and still can’t find my mistake.
I am just trying to put squares on a grid by calling a recursive function which creates the object and then calls itself again. I have checked that recursion is not infinite and there’s a simple exit condition. Please help.

let grid = 11;
let sqr = [];
function setup() {
  createCanvas(grid * grid, grid * grid);
  noFill();
  colorMode(HSB);
  noLoop();
  let maxs = floor(grid / 3);
  let ratio = 2 * maxs * maxs;
  makegrid(maxs, ratio);
}
function draw() {
  background(0);
  for (let sq of sqr) sq.show();
}
function makegrid(m, r) {
  if (!m) return;
  if (m == floor(grid / 3)) {
    for (let i = 0; i < 2; i++) sqr.push(new sqrs(m, r));
    m--;
    makegrid(m, r);
  } else {
    let j = r / (m * m);
    for (let k = 0; k < j; k++) sqr.push(new sqrs(m, r));
    m--;
    makegrid(m, r);
  }
}

class sqrs {
  constructor(m, r) {
    let flag = true;
    this.s = (m * width) / grid;
    while (flag) {
      flag = false;
      this.x = (width / grid) * floor((grid + 1 - m) * random());
      this.y = (height / grid) * floor((grid + 1 - m) * random());
      if (!sqr.length) flag = false;
      else {
        for (let sq of sqr) {
          let d = (this.x - sq.x) ** 2 + (this.y - sq.y) ** 2;
          if (d < this.s ** 2 || d < sq.s ** 2) {
            flag = true;
            break;
          }
        }
      }
    }
  }

  show() {
    stroke(random(340), 80, 80);
    square(this.x, this.y, this.s);
  }
}

How to seed/upload images in KeystoneJS 6?

Using the example here, if I then add an image field to Post:

// schema.ts
import { list } from '@keystone-6/core';
import { select, relationship, text, timestamp } from '@keystone-6/core/fields';

export const lists = {
  Post: list({
    fields: {
       featureImage: image(),
    }),
    /* ... */
  },
  /* ... */
});

How can I then adjust the seed/index.ts file to upload an image form the local drive?

// seed/index.ts
await context.query.Post.createOne({
    data: {
        ...postData,
        featureImage: { /* ??? What goes here ??? */ }
    },
    query: 'id',
});

Or otherwise, how can I programmatically add images so that keystonejs is aware of them?

I have this logic to loop over my value passed as argument and print them one letter per second

let sequenceI = 0;

function sequence(arr){
  document.getElementsByTagName('P')[0].innerHTML += arr[sequenceI];
  ++sequenceI;  
  setTimeout(() => sequence(arr), 150);
  if (sequenceI > arr.length) {
    document.getElementsByTagName('P')[0].innerHTML ="";
    sequenceI = 0;
  } 
}

sequence('Software Developer');

I have this logic to loop over my value passed as argument and print them one letter per second. Why does this not return undefined when the sequenceI becomes 18? But it rather starts the loop again

closePath() Moving Polygon

The following code below is what is needed to make a simple triangle. I want to keep the triangle in that exact position and add this to my canvas.

can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();

If you run the code below, the triangle is there for a split second and then disappears. I need it to stay there along with the three equations. I created the function path(); in effort to keep the triangle positioned in the upper left corner. I am not sure how to keep the triangle there and do all of this.

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> 3+3=<input type="text" id="q1" />
    </div>
  <div id="eqn2"> 3+2=<input type="text" id="q2" />
    </div>
  <div id="eqn3"> 5+2=<input type="text" id="q3" />
    </div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">

var m=1;

  var stage = new createjs.Stage("gameCanvas");
  var obj=[];
 
can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
function startGame() {
   
    obj[1] = new createjs.DOMElement(document.getElementById(`eqn${1}`));
    obj[2] = new createjs.DOMElement(document.getElementById(`eqn${2}`));
    stage.addChild(obj[1]);
    stage.addChild(obj[2]);
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setFPS(60);
    function handleTick(event){
    drop(1);
    drop(2);
    path();
    stage.update();
    }
}
 function drop(i){
      obj[1].x =40;
      obj[1].y =50;
      obj[2].x =300;
      obj[2].y =50;
 }
function path(){
ctx.x=1;
ctx.y=1;
}
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
</html>

JavaScript: group array of objects by property in an object

if I have a js array like below, is there a simple way to re-group the array values by age? I tried to reduce it to an array but it did not help. it’s re-grouped with age or name’s

let employees = [
 {
  firstName:"Zion",
  lastName: "Rosy",
  age: 25,
  joinedDate:"January 24, 2020",
 },

 {
  firstName: "Ana",
  lastName: "Rosy",
  age: 25,
  joinedDate: "January 15, 2019",
 },

 {
  firstName: "Zion",
  lastName:"Albert",
  age: 30,
  joinedDate:"February 15, 2011",
 },
];

To re-group by age like this:

let organizedByAge =
 {
  25: [
 {
  firstName:"Zion",
  lastName: "Rosy",
  age: 25,
  joinedDate:"January 24, 2020",
 },
 {
  firstName: "Ana",
  lastName: "Rosy",
  age: 25,
  joinedDate: "January 15, 2019",
 },
  ],

  30: [
   {
    firstName:"Zion",
    lastName:"Albert",
    age: 30,
    joinedDate:"February 15, 2011",
   },
  ],
 };

How to display data from api on map from mapbox

I am trying to display data from an api https://spotternetwork.docs.apiary.io/#reference/spotter-positions/get-positions/get-spotters’-positions. That display a marker for each person on the map but im not sure how to do it or would like to know if im missing some code.

index.js code from the api

var request = new XMLHttpRequest();

request.open("POST", "https://www.spotternetwork.org/positions");

request.setRequestHeader("Content-Type", "application/json");

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log("Status:", this.status);
    console.log("Headers:", this.getAllResponseHeaders());
    console.log("Body:", this.responseText);
    document.getElementById("myData").innerHTML = this.responseText;
  }
};

var body = {
  id: "APPLICATION-ID"
};

request.send(JSON.stringify(body));

map.js

mapboxgl.accessToken =
  "pk.eyJ1Ijoiam9leWNyZWF0b3IiLCJhIjoiY2t5MXR4Z3p2MDZoMzJwcWt0eXN2a2N2NyJ9.8YrcNEDK812L6d-DrFbrtg";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/dark-v10",
  center: [-96.052335, 39.159882],
  zoom: 2.5
});

map.on("load", () => {
  map.addSource("spcday1", {
    type: "geojson",
    data: "https://www.spc.noaa.gov/products/outlook/day1otlk_cat.nolyr.geojson"
  });

  map.addLayer({
    id: "spcday1",
    type: "fill",
    source: "spcday1",
    paint: {
      "fill-color": ["get", "fill"],
      "fill-outline-color": ["get", "stroke"],
      "fill-opacity": 0.5
    }
  });
});

map.on("load", function () {
  $.ajax({
    url: "https://www.spotternetwork.org/positions",
    type: "POST",
    proccessData: false,
    dataType: "JSON",
    success: function (json) {
      map.addSource("chasers", {
        type: "geojson",
        data: json
      });

      map.addLayer({
        id: "chasers",
        type: "marker",
        source: "chasers",
        paint: {
          "circle-color": "#4264fb",
          "circle-radius": 8,
          "circle-stroke-width": 2,
          "circle-stroke-color": "#ffffff"
        }
      });
    },
    error: function (xhr, status, error) {
      var errorMessage = xhr.status + ": " + xhr.statusText;
      alert("Error - " + errorMessage);
    }
  });
});
//  mapbox marker

new mapboxgl.Marker({}).setLngLat([0, 0]).addTo(map);

Why is it telling me that api_url is not a function?

`enter code here`<!DOCTYPE html>

enter code here
enter code here
enter code here
enter code here<meta name=”viewport” enter code herecontent=”width=device-width, initial-scale=1″>
enter code here<meta http-equiv=”X-UA-Compatible” enter code herecontent=”ie=edge” />
enter code hereFetch Json
enter code here
enter code here
enter code here
enter code hereconst api_url = enter code here‘https://api.sportsdata.io/api/nba/odds/json/Standings/%7enter code hereB2022%7D?enter code herekey=2c956842d33145bb9ec172d5e3f67cf6′
enter code hereasync function getstands() {
enter code hereconst response = await fetch(api_url)
enter code hereconst data = await response.json();
enter code hereconsole.log(data);
enter code here}
enter code heregetstands();
enter code hereconst itemNames = api_url.map((item) enter code here=> {
enter code herereturn item.name
enter code here})
enter code here
enter code here
enter code here

Making this carousel move automatically

I’m trying to get the following codepen to move automatically. Perhaps switching to the next card every 2-3seconds. The manual control is fine to stay as well, but I am unsure how to make this move automatically and look natural and smooth in the process.

<section id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <label for="s1" id="slide1"></label>
  <label for="s2" id="slide2"></label>
  <label for="s3" id="slide3"></label>
  <label for="s4" id="slide4"></label>
  <label for="s5" id="slide5"></label>
</section>
[type=radio] {
  display: none;
}

#slider {
  height: 30rem;
  position: relative;
  perspective: 1500px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 20rem;
  height: 80%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(-30%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-15%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(15%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(30%,0,-200px);
}

#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }

https://codepen.io/mihacreanest/pen/QxKVZQ

How can I use web scraping to import sale data from StockX into a Google Sheet?

I’m trying to import the “last sale” data from StockX into my Google Sheet so that it can constantly update without me having to check it repeatedly. I’ve been trying to use the IMPORTXML function from Google, but I get an error. For example, when trying to get the “last sale” data for the Air Jordan 13 “Court Purple” (GS) in size 6.5Y, I get the error, Could not fetch url: https://stockx.com/air-jordan-13-retro-court-purple-gs. The function I am using is =IMPORTXML("https://stockx.com/air-jordan-13-retro-court-purple-gs", "//*[@id='main-content']/div/section[1]/div[8]/div[2]/div[3]/div[1]/p[2]"), and I can’t seem to figure out why it’s not working. The first parameter is the URL and the second parameter is the XPath that I copied directly from the Chrome Dev Tools window, which I opened using the “Inspect” function.

Possible to put component in array and render them?

I want to create a component and put that component in an array to render it later. I don’t want to take the data from the component, pass it, then reconstruct it. Is this possible?

What I am trying to do is currently not working and gives the error The "data" option should be a function that returns a per-instance value in component definitions but I don’t know if that is referring to this part of the code.

Code to create TodoItem component and add it to array

    addTodo() {
      if (!this.isTodoItemSet()) {
        this.throwError("You must input a todo!");
        return;
      }

      this.clearError();
      const todoItem = this.createTodoItem();
      this.addItem(todoItem);
    },

    createTodoItem() {
      const todoItem = <TodoItem id="this.newItemId" title="this.todoItem" />;
      this.newItemId += 1;
      return todoItem;
    },

    addItem(todoItem) {
      this.$props.todoItems.push(todoItem);
      console.log(this.$props.todoItems);
    },

Attempting to render the components from the array

<template lang="">
  <div>
    <li v-for="item in this.$props.todoItems" :key="item.id">
      <component v-bind:is="item"></component>
    </li>
  </div>
</template>
<script>
import TodoItem from "./TodoItem.vue";

export default {
  components: {
    TodoItem,
  },

  props: {
    todoItems: [],
  },
};
</script>
<style lang=""></style>

ER_ACCESS_DENIED_ERROR in MYSQL but data are correct

I started getting this error practically overnight without having moved or done anything with MySQL

Error: ER_ACCESS_DENIED_ERROR: Access denied for user ''@'localhost' (using password: NO)

This is the code with which I connect to the database, which used to work but suddenly it stopped working

const mysql = require("mysql");
const { promisify } = require("util");
const { database } = require("./keys.js");

const pool = mysql.createPool(database);

pool.getConnection((err, conn) => {
    if (err) {
        if (err.code === "PROTOCOL_CONNECTION_LOST") {
            console.error("closed")
        }
        if (err.code === "ER_CON_COUNT_ERROR") {
            console.error("to much")
        }
        if (err.code === "ECONNREFUSED") {
            console.error("refused")
        }
    };

    if (conn) conn.release();
    console.log("success");
    return;
});

pool.query = promisify(pool.query);

module.exports = pool;

The data with which I connect to the database are correct and I even use them daily to connect to the database from bash.

// keys.js
module.exports = {
    database: {
        host: process.env.MYSQL_HOST,
        user: process.env.MYSQL_USER,
        password: process.env.MYSQL_PASS,
        database: process.env.MYSQL_DATABASE
    }
}

minesweeper game logic problem (fetching another components props from a component)

I’m new to React and I’m trying to grasp the broad strokes by building a simple minesweeper game. I’m able to render a 10×10 board (Grid), and reveal squares (Square). However, I’ve hit a wall with the step in which multiple squares are revealed with a single click.

The way I’ve written it (I think) requires a square component to know if the surrounding square components have a mine. How should I go about this? Or am I writing it in a way that isn’t really consistent with React’s intended use?

Code:

----------
Grid.js
----------

import React from 'react';
import Square from './Square';

export default function Grid(props) {
    const grid = new Array(10);
    for (let i = 0; i < 10; i++) {
        grid[i] = new Array(10).fill(null);
    }
    return (
        <div>
            {
                grid.map((row, x) => {
                    return (
                        <div key={x}>
                            {
                                row.map((col, y) => {
                                    const randInt = Math.floor(Math.random() * 5);
                                    return (
                                        <Square
                                            row={x}
                                            col={y}
                                            id={`square-${x}-${y}`}
                                            key={`square-${x}-${y}`}
                                            hasMine={randInt === 0}
                                        />
                                    )
                                })
                            }
                        </div>
                    )
                })
            }
        </div>
    )
}

---------
Square.js
---------

export default function Square(props) {
    function uncover(e) {
        if (!props.hasMine && e.target.className !== 'white-square') {
            e.target.className = 'white-square';
            let right = document.getElementById(`square-${props.row}-${props.col + 1}`);
            let bottomRight = document.getElementById(`square-${props.row + 1}-${props.col + 1}`);
            let bottom = document.getElementById(`square-${props.row + 1}-${props.col}`);
            let bottomLeft = document.getElementById(`square-${props.row + 1}-${props.col - 1}`);
            let left = document.getElementById(`square-${props.row}-${props.col - 1}`);
            let topLeft = document.getElementById(`square-${props.row - 1}-${props.col - 1}`);
            let top = document.getElementById(`square-${props.row - 1}-${props.col}`);
            let topRight = document.getElementById(`square-${props.row - 1}-${props.col + 1}`);
            if (right) {
                right.click();
            }
            if (bottomRight) {
                bottomRight.click();
            }
            if (bottom) {
                bottom.click();
            }
            if (bottomLeft) {
                bottomLeft.click()
            }
            if (left) {
                left.click()
            }
            if (topLeft) {
                topLeft.click()
            }
            if (top) {
                top.click()
            }
            if (topRight) {
                topRight.click()
            }
        }
    }
    return (
        <div
            className={props.hasMine ? 'red-square' : 'grey-square'}
            id={props.id}
            onClick={uncover}
        />
    )
}

Get JSON from URL, return array and count instances

I’m trying to map the JSON from the URL to an array but I think my mapping of the data isn’t correct. I want to find every value inside of attributes and count how many instances of each value there are in the JSON file/ array.

[
  {
    name: "1",
    attributes: [
      {
        trait_type: "hat",
        value: "blue"
      },
      {
        trait_type: "hair",
        value: "red"
      }
    ]
  } 
];

$.getJSON(
  "https://jsonware.com/api/v1/json/3c53cbcd-5351-4fba-8b89-5f1fb009e857",
  function (data) {
    var items = $.map(data.attributes, function (i) {
      return i.value;
      const result = data.reduce(
        (acc, curr) => ((acc[curr] = (acc[curr] || 0) + 1), acc),
        {}
      );
      console.log(result);
      console.log(items);
    });
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

ASP.NET Web Form Page in new window opened via javascript window.open()

I’ve an ASP.NET page already published, and I open it from a third party application widget using a script window.open().

The script is working fine and also the page, but my problem is when I stay for a while not doing anything (for example 5 min) on the opened window the page stopped working, I tried to click a link button in that page but it’s not working. Then I close the window and open it again then everything goes fine.

This problem makes many issues for me because it should affect on the third party system.

I think maybe there is some period of time for that window but I cannot catch the problem.

Is there any solution for this case ?

NOTE: The link button should hide an asp panel and show another one in code behind.

CKeditor Uncaught TypeError: Cannot read properties of undefined (reading ‘p_Ack’)?

I want to send data to the database with Ckeditor, but I get the error “Cannot read properties of undefined (reading ‘p_Ack’)”. The editor I’m using is ckeditor’s document bundle editor where exactly am I going wrong?

<div class="card card-custom">
<div class="card-body">
<div id="kt-ckeditor-3-toolbar"></div>
<div id="p_Ack">
</div>
</div>
</div>
<script>

var KTCkeditorDocument = function () {
   var demos = function () {
       DecoupledEditor
         .create(document.querySelector('#p_Ack'))
         .then(editor => {
 const toolbarContainer = document.querySelector('#kt-ckeditor-3-toolbar');
 toolbarContainer.appendChild(editor.ui.view.toolbar.element);
})
 }

 return {
 // public functions
     init: function () {
     demos();
     }
 };
        }();
        // Initialization
        jQuery(document).ready(function () {
            KTCkeditorDocument.init();
        });
</script>
'Desc': KTCkeditorDocument.instances['p_Ack'].getData(),