Remove space in chart.js

I am making line chart using chart js and here I would like to have a line alone without grid lines, axes lines and labels.

I have removed everything using the configurations but I am getting more space at the bottom of the chart.

Also the left side and top of points has been cut (only half circle is visible) and not displayed correctly.

var ctx = document.getElementById('myChart').getContext('2d');

var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#80b6f4');
gradientStroke.addColorStop(1, '#f49080');

var gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, 'rgba(128, 182, 244, 0.6)');
gradientFill.addColorStop(1, 'rgba(244, 144, 128, 0.6)');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL'],
    datasets: [
      {
        label: 'Data',
        borderColor: gradientStroke,
        pointBorderColor: gradientStroke,
        pointBackgroundColor: gradientStroke,
        pointHoverBackgroundColor: gradientStroke,
        pointHoverBorderColor: gradientStroke,
        pointBorderWidth: 10,
        pointHoverRadius: 10,
        pointHoverBorderWidth: 1,
        pointRadius: 3,
        fill: false,
        backgroundColor: gradientFill,
        borderWidth: 4,
        data: [100, 120, 150],
      },
    ],
  },
  options: {
    legend: {
      display: false,
    },
    plugins: {
      datalabels: {
        display: false,
      },
    },
    layout: {
      padding: {
        bottom: -20,
      },
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: 'rgba(0,0,0,0.5)',
            fontStyle: 'bold',
            beginAtZero: true,
            maxTicksLimit: 5,
            display: false,
          },
          gridLines: {
            drawTicks: false,
            display: false,
            tickMarkLength: 0,
          },
          display: false,
        },
      ],
      xAxes: [
        {
          gridLines: {
            zeroLineColor: 'transparent',
            display: false,
            tickMarkLength: 0,
          },
          ticks: {
            fontColor: 'rgba(0,0,0,0.5)',
            fontStyle: 'bold',
            display: false,
          },
          display: false,
        },
      ],
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>


<div class="chart-container">
 <canvas id="myChart"></canvas>
</div>

Could you please help me to resolve,

-> Removing of space at the bottom

-> Make the graph to fit in a size so that the left , top edges are visible in proper.

Thanks in advance.

how to add script code for thumb slide in slider for mobile

<script>
var slideIndex = 0;
showSlides();
var slides,dots;

function showSlides() {
    var i;
    slides = document.getElementsByClassName("mySlides");
    dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 6000); // Change image every 6 seconds
}

function plusSlides(position) {
    slideIndex +=position;
    if (slideIndex> slides.length) {slideIndex = 1}
    else if(slideIndex<1){slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
}

function currentSlide(index) {
    if (index> slides.length) {index = 1}
    else if(index<1){index = slides.length}
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[index-1].style.display = "block";  
    dots[index-1].className += " active";
}
</script>

I have a slider which is scroll with right and left arrow that is working fine for desktop but I need arrow as well as thumb slider in mobile view when someone can slide with thumb in mobile left and right I have added script. thanks in advance.

Does Kendo Grid support cell merge or not?

My Grid has the following structure

 $("#grid").kendoGrid({
   dataSource: {
       data: data,
       type: 'json'
       },
       pageable: true,
       columns: [
           { field: "SubServiceTypeName", title: "Sub Type" },
           { field: "PrepaidMonthName", title: "Gói dịch vụ" },
           { field: "DeviceName", title: "Tên thiết bị" },
           { field: "DeviceStatusName", title: "Tình rạng" },
           { field: "IsDeployName", title: "Triển khai" },
           { field: "PriceStatementName", title: "CL giá" }
       ]             
 });

Result: enter image description here

I want to merge rows with same value of column [PrepaidMonthName] (call as “Gói dịch vụ”). I don’t know if kendo supports merge cells or not yet?
What I expect:

enter image description here

Or is there another solution for me to do this?

Can npm devDependencies be used in production?

One of our products at work is a JS SDK that our clients can install and use with npm install .... I was going through the package.json file and found that a package, socket.io-client was installed as a devDependency. But the SDK is using socket.io for an integral part of its working, and it obviously it’s working for our clients. So, why is it working? Since, going by the documentation, devDependencies should not be installed when using npm install.

Error when attempting to call smart contract with javascript

I am trying to write a piece of javascript that calls a smart contract. The smart contract has been deployed to a local test net with truffle and ganache and the javascript is producing the following error:

Promise { <pending> }
/Users/user/node_modules/web3-core-helpers/lib/errors.js:43
        return new Error(message);
               ^

Error: Invalid JSON RPC response: ""
    at Object.InvalidResponse (/Users/user/node_modules/web3-core-helpers/lib/errors.js:43:16)
    at XMLHttpRequest.request.onreadystatechange (/Users/user/node_modules/web3-providers-http/lib/index.js:95:32)
    at XMLHttpRequestEventTarget.dispatchEvent (/Users/user/node_modules/xhr2-cookies/dist/xml-http-request-event-target.js:34:22)
    at XMLHttpRequest._setReadyState (/Users/user/node_modules/xhr2-cookies/dist/xml-http-request.js:208:14)
    at XMLHttpRequest._onHttpRequestError (/Users/user/node_modules/xhr2-cookies/dist/xml-http-request.js:349:14)
    at ClientRequest.<anonymous> (/Users/user/node_modules/xhr2-cookies/dist/xml-http-request.js:252:61)
    at ClientRequest.emit (node:events:390:28)
    at Socket.socketErrorListener (node:_http_client:442:9)
    at Socket.emit (node:events:390:28)
    at emitErrorNT (node:internal/streams/destroy:164:8)
    at emitErrorCloseNT (node:internal/streams/destroy:129:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

Node.js v17.3.0

Javascript code:

onst Web3 = require('web3');

const web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

const contract_abi = [
   {
      "inputs":[

      ],
      "name":"getName",
      "outputs":[
         {
            "internalType":"string",
            "name":"",
            "type":"string"
         }
      ],
      "stateMutability":"view",
      "type":"function"
   },
   {
      "inputs":[
         {
            "internalType":"string",
            "name":"newName",
            "type":"string"
         }
      ],
      "name":"setName",
      "outputs":[

      ],
      "stateMutability":"nonpayable",
      "type":"function"
   }
]


const contract_address = "0x6C1750bfDD9D1327AE8c5dBD1Af75dc73C138Fd7";
var Contract = new web3.eth.Contract(contract_abi, contract_address);

console.log(Contract.methods.getName().call());

Solidity code:

pragma solidity >=0.4.24;

contract NameContract {

    string private name = "This is working!";

    function getName() public view returns (string memory)
    {
        return name;
    }

    function setName(string memory newName) public
    {
        name = newName;
    }
}

I am not sure if the issue is coming from me not handling the async request properly, the JSON abi being malformed or the smart contract response not being handled correctly.

Any help would be greatly appreciated.

How I can change the format of the numbers on jquery count-to? [duplicate]

Hi and thanks for reading me. I am using a Jquery function to count numbers but I would like to add commas to the numbers (in addition to a prefix), but I can’t find a way to do it so far. I tried using formatter: function (value, options) {return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g,","); but it doesn’t work yet. 🙁

My code is the following:

Main.js file:

$('.count-item').each(function(i) {
            $(this).appear(function() {
                var number = $(this).find('.count-to').data('countto');
                $(this).find('.count-to').countTo({from: 0, to: number, speed: 1500, refreshInterval: 10, formatter: function (value, options) {
           return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g, ",");
        }
                    
                });
            });
        });

plugins.js file:

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 500,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
        formatter: function (value, options) {
           return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g, ",");
        }
    };
})(jQuery);

Index.html file:

<div class="count-item mb-sm-40">
                  <div class="count-icon"><span class="icon-piechart"></span></div>
                  <h3 class="count-to font-alt" data-countto=100></h3>
                  <h5 class="count-title font-serif">Siniestralidad (%)</h5>
                </div>

Anyone know what I could do about it or if there is a solution? I can’t find anything until now

Thanks for the help

I am new to node js and I have some problem with post using postman

I am new to node.js and learning it for quite few days and now I’m stuck with this app.post which is not working for me. If possible please let me know how to do app.update so it might be a big help in my learning process.
Kindly waiting for reply.

const mysql = require('mysql');
const express = require('express');
var app = express();
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}));
app.use(bodyparser.json());
app.listen(8000);
var mysqlconnection = mysql.createConnection(
    {
        host: 'localhost',
        user: 'Naveen',
        password: '',
        database: 'employeedb',
        multipleStatements: true
    }
);

mysqlconnection.connect((err)=>{
    if(!err)
    console.log("DB connection successfull");
    else
    console.log('DB connection failed n Error : '+ JSON.stringify(err, undefined, 2) );
});
app.post('/employee' ,function (req, res, next) {
    Name = req.query.Name, 
    Empcode = req.query.Empcode,
    Salary = req.query.Salary 
    let sql = "INSERT INTO employee (Name, Empcode, Salary) VALUES (? , ?, ?)";  
    mysqlconnection.query('sql, (Name, Empcode, Salary) ', (err, rows, fields) => {
        if (!err)
            res.send("Insert succeed");
        else
            console.log(err);
        });
    });    
    ```
and then I get these error messages:

**PS C:xampphtdocsfirst app> node index.js DB connection successfull Error: ER_PARSE_ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'sql, (Name, Empcode, Salary)' at line 1
   (C:xampphtdocsfirst appnode_modulesexpresslibrouterindex.js:275:10) {   code: 'ER_PARSE_ERROR',   errno: 1064,   sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'sql, (Name, Empcode, Salary)' at line 1",   sqlState: '42000',   index: 0,   sql: 'sql, (Name, Empcode, Salary) ' }**

Multiple reference queries with export functions to assign specific badges to Wix members

I’ve got series of automations made in the backend of Wix which I’m trying to cross-reference within an onClick function which will automatically assign member badges to members based on specific criteria from a dataset pulled from Google Sheets API and stored in Wix in the collection “Members”.

This is an export function which is triggered by a button on a custom Admin Dashboard. Once a member joins the site, their email address from PrivateMembersData is cross-referenced with the “Members” to find their “type” (name of the badge to be assigned) and push their memberId to an array. It then runs the assignMembers backend function in Wix which is expecting (badgeId, memberIds). Most members have multiple badges to be assigned, and they are all entered as individual rows in the “Members” collection.

The problem I am having is that it seems to be only assigning certain badges and not others, and specifically getting console errors which are telling me memeberIds is in an invalid format. I’m new to js and navigating Wix’s backend and wondering if I’m missing an obvious step. Please help! Thanks in advance.

import wixData from 'wix-data'
import { assignBadge, removeBadge } from 'backend/badges.jsw';
import { assignMembersBackendFunction } from 'backend/badges';
let Badge_A = "b2e41432-xxx-585a28c34da5"
let Badge_B = "8b77b069-xxx-1b9fc066d370"
let Badge_C = "9759af91-xxx-cdb2a9b32dc0"
let Badge_D = "2e598b2d-xxx-de48ff644c9f"
let Badge_E = "f272734e-xxx-e33443395ae8"

export function assignAllBadgeButton_click() {
    let badge = "";
    let BA = [""]
    let BB = [""]
    let BC = [""]
    let BD = [""]
     wixData.query("Members")
        .find()
        .then((results) => {
            results.items.forEach(item => {
                let type = item.type
                wixData.query("Members/PrivateMembersData")
                    .eq("loginEmail", item.email)
                    .find()
                    .then((result) => {
                        let member = result.items[0]
                        console.log(member)
                        // clearBadges(member)

                        if (type == "Badge A Name") {
                            BA.push(member._id)
                            doSomething(BA, Badge_A)

                        }
                        else if (type == "Badge B Name") {

                            BB.push(member._id)
                            doSomething(BB, Badge_B)

                        }
                        else if (type == "Badge C Name") {
                            BC.push(member._id)
                            doSomething(BC, Badge_C)
                        }
                        else if (type == "Badge D Name") {
                            BD.push(member._id)
                            doSomething(BC, Badge_D)

                        } else {
                            console.log("no match")
                        }

                        doSomething(BA, Badge_A);
                        doSomething(BB, Badge_B);
                        doSomething(BC, Badge_C);
                        doSomething(BD, Badge_D)
                        
                    })
            })

        })

}

export function doSomething(userIDs, badge) {
    let results = userIDs
    for (let i = 0; i < userIDs.length; i++) {

        assignMembersBackendFunction(badge, [results[i]])
            .then((assignedMembers) => {
                console.log(assignedMembers)

                return assignedMembers;
            })

    }

}

export function clearBadges(member) {

    removeBadge(Badge_A, member)
        .then(() => {
            removeBadge(Badge_B, member)
                .then(() => {
                    removeBadge(Badge_C, member)
                        .then(() => {
                            removeBadge(Badge_D, member)
                                .then(() => {
                                   console.log("deleted")
                                        })
                                })
                        })
                })
        })
}

/// IN WIX BACKEND MODULE ///:

import { badges } from 'wix-users-backend';

export function assignBadge(badgeID, userIDs) {
 return badges.assignMembers(badgeID, userIDs);
}

//remove a badge from a list of users
export function removeBadge(badgeID, userIDs) {
 return badges.removeMembers(badgeID, userIDs);
}

export function assignMembersBackendFunction(badgeId, memberIds) {
  return badges.assignMembers(badgeId, memberIds);

Using json.prase to seprating each column javascript

on javascript im coding a scraper for my and for my search is in json and i wanna seprate each column that have value and data but i tried so many methods
it turns out like this

    searchMangaFromElement(element) {
        var obj = JSON.parse(element.text())
        var name = obj.suggestions.map(user => user.value);
        var url = obj.suggestions.map(user => user.data);
        var thumbnail = `${this.baseUrl}/uploads/manga/${url}/cover/cover_250x350.jpg`
        var rank = '0';
        return super.manga(name,url,thumbnail,rank);
    }
{
  "mangas": [
    {
      "name": [
        "The Boxer",
        "I'm the Grim Reaper",
        "The Girl Downstairs",
        "The Beginning After the End",
        "The God of High School",
        "The Gamer",
        "The Red King",
        "Boyfriend of the Dead",
        "The Tutorial is Too Hard",
        "Mook-Hyang The Origin",
        "I'm a Martial Art Villainess, but I'm the Strongest!",
        "The Tutorial Tower of the Advanced Player",
        "My Level's the Best",
        "The Throne",
        "The Legendary Mechanic",
        "The Newlywed Life of a Witch and a Dragon",
        "The Player that can't Level Up",
        "Return of the Frozen Player",
        "Capture the Golem and Escape Poverty",
        "The Thorn That Pierces Me",
        "The First Night With the Duke",
        "A Way to Protect the Lovable You",
        "Return of the Female Knight",
        "The Strongest Florist",
        "Return of the Mount Hua Sect",
        "The Villainess is a Marionette",
        "The Princess Imprints a Traitor",
        "Overnight With The Emperor",
        "Kill the Villainess",
        "The Constellation That Returned From Hell",
        "The Pampered Regent of the Richest Woman",
        "The Four of Them",
        "The Kiss Bet",
        "The Lord’s Coins Aren’t Decreasing?!",
        "The Sword Of Dawn",
        "The Hip Guy",
        "Rise From The Rubble",
        "The Supreme Dantian",
        "The Remarried Empress",
        "Reformation of the Deadbeat Noble",
        "The Build Up",
        "Taming The Lady",
        "I Became the Tyrant’s Secretary",
        "Men of the Harem",
        "How The Knight Lives As A Lady",
        "So I Married the Anti-Fan",
        "The Game That I Came From",
        "The Heavenly Demon Can’t Live a Normal Life",
        "The Dexter Attack",
        "Nevertheless",
        "Reincarnation of the Suicidal Battle God",
        "The Makeup Remover",
        "Nevertheless, I love you.",
        "My Path to Killing Gods in Another World",
        "The Blade of Evolution Walking Alone In The Dungeon",
        "The Strongest Warrior Goes to School",
        "The King Of Bugs",
        "The Dark Magician Transmigrates After 66666 Years",
        "Return of the 8th class Magician",
        "The Max Level Hero has Returned!",
        "The Supreme Dantian",
        "The Book of Lagier",
        "The Ancient Sovereign of Eternity",
        "The Heavenly Demon Destroys the Lich King’s Murim",
        "Throne of the Dragon King",
        "There Must Be Happy Endings",
        "The Return of the Crazy Demon",
        "I Reincarnated As The Crazed Heir",
        "Tricked into Becoming the Heroine's Stepmother",
        "I Become a Doting Father",
        "Long Way of the Warrior",
        "Record of the Mightiest Lord",
        "The Earth Savior Selection",
        "Leveling With The Gods",
        "The Double Agent",
        "I’m the Only One Loved by the Constellations!",
        "The Blood of the Butterfly",
        "Don’t Get Me Wrong, I’m The Real Victim!",
        "My Younger Brother's Friend",
        "The Witch and The Bull",
        "The Male Lead's Girl Friend",
        "This is the Law",
        "The Fantasie of a Stepmother",
        "The Lone Necromancer",
        "The Challenger",
        "The Great Mage that Returned after 4000 Years",
        "The Tomb of Famed Swords",
        "Protect the Knight",
        "Foreigner on the Periphery",
        "Return of the Legendary Spear Knight",
        "Return of the Legend",
        "The S-Classes That I Raised",
        "The Time of the Terminally ill Extra",
        "Return of the Broken Constellation",
        "I Am the Fated Villain",
        "The Frenzy Of Evolution",
        "The Strongest Player"
      ],
      "url": [
        "th3-b0xer",
        "7854-im-the-grim-reaper",
        "th3-girl-d0wnstairs",
        "th3-beginning-aft3r-the-end",
        "the-g0d-of-high-sch00l",
        "th3-gam3r",
        "the-red-king",
        "414-boyfriend-of-the-dead",
        "2-the-tutorial-is-too-hard",
        "4742-the-origin",
        "im-a-martial-art-villainess-but-im-the-strongest",
        "85-the-tutorial-tower-of-the-advanced-player",
        "12-my-levels-the-best",
        "74-the-thr0ne",
        "54-the-legendary-mechanic",
        "th3-newlywed-life-of-a-witch-and-a-drag0n",
        "the-player-that-cant-level-up",
        "0-return-of-the-frozen-player",
        "capture-the-golem-and-escape-poverty",
        "44-the-th0rn-that-pierces-me",
        "th3-first-night-with-the-duk3",
        "474-a-way-to-protect-the-lovable-you",
        "44-return-of-the-female-knight",
        "477-the-strongest-fl0rist",
        "return-0f-the-mount-hua-sect",
        "554-the-villainess-is-a-mari0nette",
        "the-princess-imprints-a-traitor",
        "0vernight-with-the-emper0r",
        "85-kill-the-villainess",
        "the-c0nstellation-that-returned-from-hell",
        "the-pampered-regent-of-the-richest-woman",
        "th3-f0ur-0f-them",
        "th3-kiss-b3t",
        "the-lords-coins-arent-decreasing",
        "the-sword-of-dawn",
        "558-the-hip-guy",
        "rise-from-the-rubble",
        "747-the-supreme-dantian",
        "44-th3-remarried-empress",
        "98-reformation-of-the-deadbeat-noble",
        "th3-build-up4",
        "taming-the-lady",
        "i-became-the-tyrants-secretary",
        "men-of-the-harem",
        "how-the-knight-lives-as-a-lady",
        "87-so-i-married-the-antifan",
        "the-game-that-i-came-from",
        "the-heavenly-demon-cant-live-a-normal-life",
        "the-dexter-attack",
        "n3verthel3ss",
        "reincarnation-of-the-suicidal-battle-god",
        "the-makeup-remover",
        "nevertheless-i-love-you",
        "my-path-to-killing-gods-in-another-world",
        "the-blade-of-evolution-walking-alone-in-the-dungeon",
        "the-strongest-warrior-goes-to-school",
        "the-king-of-bugs",
        "the-dark-magician-transmigrates-after-66666-years",
        "return-of-the-8th-class-magician",
        "the-max-level-hero-has-returned",
        "the-supreme-dantian",
        "the-book-of-lagier",
        "the-ancient-sovereign-of-eternity",
        "the-heavenly-demon-destroys-the-lich-kings-murim",
        "throne-of-the-dragon-king",
        "there-must-be-happy-endings",
        "the-return-of-the-crazy-demon",
        "i-reincarnated-as-the-crazed-heir",
        "tricked-into-becoming-the-heroines-stepmother",
        "i-become-a-doting-father",
        "long-way-of-the-warrior",
        "record-of-the-mightiest-lord",
        "the-earth-savior-selection",
        "leveling-with-the-gods",
        "the-double-agent",
        "im-the-only-one-loved-by-the-constellations",
        "the-blood-of-the-butterfly",
        "dont-get-me-wrong-im-the-real-victim",
        "my-younger-brothers-friend",
        "the-witch-and-the-bull",
        "the-male-leads-girl-friend",
        "this-is-the-law",
        "the-fantasie-of-a-stepmother",
        "the-lone-necromancer",
        "the-challenger",
        "the-great-mage-that-returned-after-4000-years",
        "the-tomb-of-famed-swords",
        "protect-the-knight",
        "foreigner-on-the-periphery",
        "return-of-the-legendary-spear-knight",
        "return-of-the-legend",
        "the-sclasses-that-i-raised",
        "the-time-of-the-terminally-ill-extra",
        "return-of-the-broken-constellation",
        "i-am-the-fated-villain",
        "the-frenzy-of-evolution",
        "the-strongest-player"
      ],
      "thumbnail": "https://zahard.xyz/uploads/manga/th3-b0xer,7854-im-the-grim-reaper,th3-girl-d0wnstairs,th3-beginning-aft3r-the-end,the-g0d-of-high-sch00l,th3-gam3r,the-red-king,414-boyfriend-of-the-dead,2-the-tutorial-is-too-hard,4742-the-origin,im-a-martial-art-villainess-but-im-the-strongest,85-the-tutorial-tower-of-the-advanced-player,12-my-levels-the-best,74-the-thr0ne,54-the-legendary-mechanic,th3-newlywed-life-of-a-witch-and-a-drag0n,the-player-that-cant-level-up,0-return-of-the-frozen-player,capture-the-golem-and-escape-poverty,44-the-th0rn-that-pierces-me,th3-first-night-with-the-duk3,474-a-way-to-protect-the-lovable-you,44-return-of-the-female-knight,477-the-strongest-fl0rist,return-0f-the-mount-hua-sect,554-the-villainess-is-a-mari0nette,the-princess-imprints-a-traitor,0vernight-with-the-emper0r,85-kill-the-villainess,the-c0nstellation-that-returned-from-hell,the-pampered-regent-of-the-richest-woman,th3-f0ur-0f-them,th3-kiss-b3t,the-lords-coins-arent-decreasing,the-sword-of-dawn,558-the-hip-guy,rise-from-the-rubble,747-the-supreme-dantian,44-th3-remarried-empress,98-reformation-of-the-deadbeat-noble,th3-build-up4,taming-the-lady,i-became-the-tyrants-secretary,men-of-the-harem,how-the-knight-lives-as-a-lady,87-so-i-married-the-antifan,the-game-that-i-came-from,the-heavenly-demon-cant-live-a-normal-life,the-dexter-attack,n3verthel3ss,reincarnation-of-the-suicidal-battle-god,the-makeup-remover,nevertheless-i-love-you,my-path-to-killing-gods-in-another-world,the-blade-of-evolution-walking-alone-in-the-dungeon,the-strongest-warrior-goes-to-school,the-king-of-bugs,the-dark-magician-transmigrates-after-66666-years,return-of-the-8th-class-magician,the-max-level-hero-has-returned,the-supreme-dantian,the-book-of-lagier,the-ancient-sovereign-of-eternity,the-heavenly-demon-destroys-the-lich-kings-murim,throne-of-the-dragon-king,there-must-be-happy-endings,the-return-of-the-crazy-demon,i-reincarnated-as-the-crazed-heir,tricked-into-becoming-the-heroines-stepmother,i-become-a-doting-father,long-way-of-the-warrior,record-of-the-mightiest-lord,the-earth-savior-selection,leveling-with-the-gods,the-double-agent,im-the-only-one-loved-by-the-constellations,the-blood-of-the-butterfly,dont-get-me-wrong-im-the-real-victim,my-younger-brothers-friend,the-witch-and-the-bull,the-male-leads-girl-friend,this-is-the-law,the-fantasie-of-a-stepmother,the-lone-necromancer,the-challenger,the-great-mage-that-returned-after-4000-years,the-tomb-of-famed-swords,protect-the-knight,foreigner-on-the-periphery,return-of-the-legendary-spear-knight,return-of-the-legend,the-sclasses-that-i-raised,the-time-of-the-terminally-ill-extra,return-of-the-broken-constellation,i-am-the-fated-villain,the-frenzy-of-evolution,the-strongest-player/cover/cover_250x350.jpg",
      "rank": "0"
    }
  ],
  "hasNextPage": 1,
  "nextPage": 1,
  "results": 1
}

I tried it doing it like that same thing but now prints one thing from it

    searchMangaFromElement(element) {
        var obj = JSON.parse(element.text())
        for (var vals in obj. suggestions) {
        var url = obj.suggestions[vals].data;
        var name = obj.suggestions[vals].value;
        var thumbnail = `${this.baseUrl}/uploads/manga/${url}/cover/cover_250x350.jpg`
        var rank = '0';
        return super.manga (name, url, thumbnail,rank);
        }
    }
{
  "mangas": [
    {
      "name": "The Boxer",
      "url": "th3-b0xer",
      "thumbnail": "https://zahard.xyz/uploads/manga/th3-b0xer/cover/cover_250x350.jpg",
      "rank": "0"
    }
  ],
  "hasNextPage": 1,
  "nextPage": 1,
  "results": 1
}

the default was using cheerio to find specific things and it prints like that

{
  "mangas": [
    {
      "name": "10 Years in the Friend Zone",
      "url": "/manga/2053/10-years-in-the-friend-zone",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5faa0b5f66d2cb714b2b2df9.png?1640316529137?",
      "rank": "0"
    },
    {
      "name": "10th - You and I Fell in Love With the Same Person.",
      "url": "/manga/2107/10th-you-and-i-fell-in-love-with-the-same-person",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fab17b842e2937121a252de.jpg?1640316299796?",
      "rank": "0"
    },
    {
      "name": "11 Eyes - Tsumi to Batsu to Aganai no Shoujo",
      "url": "/manga/1517/11-eyes-tsumi-to-batsu-to-aganai-no-shoujo",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f97927ab5ef1960d7b17505.jpg?1640315012618?",
      "rank": "0"
    },
    {
      "name": "25-ji no Ghost Writer",
      "url": "/manga/2153/25-ji-no-ghost-writer",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fab6a8925d77b716a370f7b.jpg?1640316101771?",
      "rank": "0"
    },
    {
      "name": "2ban-me no Alpha",
      "url": "/manga/2343/2ban-me-no-alpha",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fe26d358d9b52437f740e69.jpg?1640316826822?",
      "rank": "0"
    },
    {
      "name": "30-sai, Shojo OL",
      "url": "/manga/852/30-sai-shojo-ol",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f7a5fbb9c50b229a3c2a156.jpg?1640308964416?",
      "rank": "0"
    },
    {
      "name": "5Toubun no Hanayome",
      "url": "/manga/739/5toubun-no-hanayome",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f78e1e428b7864469d947b7.jpg?1640316701098?",
      "rank": "0"
    },
    {
      "name": "666 Satan",
      "url": "/manga/934/666-satan",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f7b9fb2fd59c26384219b17.jpg?1640315727785?",
      "rank": "0"
    },
    {
      "name": "A Deal With the Devil",
      "url": "/manga/2351/a-deal-with-the-devil",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fe45e578264bc2beea65a16.jpg?1640312615522?",
      "rank": "0"
    },
    {
      "name": "A Maid With Special Circumstances and the Young Miss Who Wants to Get Along",
      "url": "/manga/1903/a-maid-with-special-circumstances-and-the-young-miss-who-wants-to-get-along",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fa600806d472b71ce0aebd5.jpg?1640305967164?",
      "rank": "0"
    },
    {
      "name": "A Story About Confessing Before the End of the World",
      "url": "/manga/992/a-story-about-confessing-before-the-end-of-the-world",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f7bdefefd59c2638421bb15.jpg?1640316238461?",
      "rank": "0"
    },
    {
      "name": "A Story About a Grandpa and Grandma Who Returned Back to Their Youth",
      "url": "/manga/1686/a-story-about-a-grandpa-and-grandma-who-returned-back-to-their-youth",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fa0b0ae468a6c1ea40b221c.jpg?1640307533358?",
      "rank": "0"
    },
    {
      "name": "A Tender Heart: The Story of How I Became a Duke's Maid",
      "url": "/manga/2477/a-tender-heart-the-story-of-how-i-became-a-duke-s-maid",
      "thumbnail": "https://cdn.mangaworld.in/mangas/6086262598a5c33b63211285.jpg?1640316531952?",
      "rank": "0"
    },
    {
      "name": "A Trace of You",
      "url": "/manga/2021/a-trace-of-you",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5fa9c8d46af12c711b4702a7.jpg?1640314754722?",
      "rank": "0"
    },
    {
      "name": "Adamasu no Majotachi",
      "url": "/manga/1642/adamasu-no-majotachi",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f9cc2de7b46fd1e2d722356.jpg?1640316533446?",
      "rank": "0"
    },
    {
      "name": "Ageha o Ou Monotachi",
      "url": "/manga/551/ageha-o-ou-monotachi",
      "thumbnail": "https://cdn.mangaworld.in/mangas/5f7663ba191ebd03ee7f23b9.jpg?1640315024255?",
      "rank": "0"
    }
  ],
  "hasNextPage": true,
  "nextPage": 2,
  "results": 16
}

Fetch data from Strava API and return data to table

I’ve tried quite a few things and read a lot of examples of using the data returned by Fetch as an object to put into a table or similar but I can’t seem to get it. The following code authorises the Strava user to use my test App and then gets the Users last 30 activities. Once data is returned as a Promise I can view it in the console, but not use it. I’m a bit of a novice so just need some direction on how to use this data in table.

//my code is below


<script>

    //reAuthorize Click
    function Authorize() {
            document.location.href = "https://www.strava.com/oauth/authorize?client_id=73630&redirect_uri=https://localhost:44370/strava/index&response_type=code&scope=activity:read_all"
    }

    const codeExchangeLink = `https://www.strava.com/api/v3/oauth/token`
    function codeExchange() {


        fetch(codeExchangeLink, {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
            },

            body: JSON.stringify({
                client_id: '@ViewBag.cId',
                client_secret: '@ViewBag.cSec',
                code: '@ViewBag.code',
                //need to do this to get a new refresh token that 'reads all' and issues a new Access Token - refer to comments below
                grant_type: 'authorization_code'
            })
        })
            .then(res => res.json())
            .then(res => getActivities(res))
 
    }

    //  getActivities
    const auth_link = "https://www.strava.com/oauth/token"

    function getActivities(res) {

        var obj;
        const activities_link = `https://www.strava.com/api/v3/athlete/activities?access_token=${res.access_token}`
        fetch(activities_link)
            .then((res) => console.log(res.json()))

    }

</script>


<form asp-action="Index" method="get">
    <input type="text" id="cId" value="@ViewBag.cId" />
    <input type="text" id="cSec" value="@ViewBag.cSec" />
    <input type="text" id="rT" value="@ViewBag.rT" />
    <input type="text" id="code" value="@ViewBag.code" />
    <input type="text" id="test" />
</form>
<input type="button" onclick="Authorize()" value="ReAuthorise" />
<input type="button" onclick="codeExchange()" value="Get Activities" />

enter image description here

How to return value of form to WASM when button clicked

I need to have a function that returns the value of a form to my WASM code when a button is clicked.

I tried

let formText = ''
      //import init, {greet} from "./pkg/hello_wasm.js";
      Element.prototype.remove = function() {
       this.parentElement.removeChild(this);
      }
      function getFormText(){
       formText = document.getElementById('tField').value
      }
      function readDom(){
        document.write('<input type="text" id="tField"><button type="button" id="submit" onClick = "getFormText()">Submit</button>')
        while(formText == ''){
                  
        } 
        let bufText = formText
        document.getElementById('tField').remove
        document.getElementById('submit').remove
        formText = ''
        return bufText
      }
      document.write(readDom())
      /*init()
        .then(() => {
          greet("WebAssembly")
        });*/

but it just froze my browser.
I looked up “wait for button click” and stuff like that on DuckDuckGo but the results I got didn’t do what I needed.

Putting the document.write in the callback won’t work because the function is meant to be called from WASM/return to WASM I just have the WASM commented out so I don’t have to recompile my code just to test changes to a JS function.

How to make a Canvas boundary

I am trying to make a canvas boundary for my mini-game. I have already created the canvas with a character that can move with the arrows. I used a switch statement to do this, the next step is to create a boundary and I am not sure how to go about that? This is how the Javascript Code looks at the moment:

function place(id,x_pos, y_pos)
{
  let element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos + 'px';
  element.style.top = y_pos + 'px';


}

setInterval(update,1);

function update()
{
  document.addEventListener('keydown', keyPress);
}

function keyPress(e)
{
  let x = e.keyCode;

  let character = document.getElementById("character").getBoundingClientRect();
  let canvasWidth = document.getElementById("canvas").getBoundingClientRect();
  let left = parseInt(character.left,10);
  let top = parseInt(character.top,10)

  switch (x) {

      //left
    case 37:
        place('character', left-15, top);
      break;
      //right
    case 39:
        place('character', left+15, top);
      break;
      //up
    case 38:
        place('character', left, top-15);
      break;
      //down
    case 40:
        place('character', left, top+15);
      break;
  }
  console.log(x)
  return x
}
update()

Checkbox onchange function is always undefined in React component class

My onchange function on my checkbox is always undefined. I made a sandbox to simplify my issue. I’ve tried changing it back and forth between an arrow and a regular function, and leaving the binding as its default state vs tying it to its binding in the constructor.

import "./styles.css";
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    this.renderCheckboxes = this.renderCheckboxes.bind(this);
    this.checkboxChange = this.checkboxChange.bind(this);
  }

  checkboxChange = (event) => {
    console.log("CHANGED");
  }

  renderCheckboxes(checkboxes) {
    return checkboxes.map(function (obj, idx) {
      return (
        <div>
          <label>{obj.name}</label>
          <input type="checkbox" onChange={this.checkboxChange} />
        </div>
      );
    });
  }

  render() {
    const cbList = [
      { name: "A", mood: "Happy" },
      { name: "B", mood: "Sad" },
      { name: "C", mood: "Mad" }
    ];

    return <>{this.renderCheckboxes(cbList)}</>;
  }
}

export default App;

My Sandbox

Wrapping the arguments or result of an anonymous function

I want to reassign an anonymous function to add to what it does. I’m basically looking the below functionality.

let f1 = (x: number) => x + 100;
// f1 = (x: number) => f1(x) + 20; // becomes recursive -> stack overflow, not what I want
f1(3) // 123

The two options I see are either 1. wrapping the argument or 2. somehow wrapping the result. The first option seems easier but I’m not sure how to accomplish it (or if what I’m asking for is impossible).