Category: javascript

issues with <v-data-table and <td. New at this and trying to learn but not finding much help. I saw there is <v-virtual-scroll but that throws td off and gives an error saying no end. I can’t give much more than this unfortunately

    <v-col cols=""
     <div class= *code*</div>
     <div class=*code*</div>
     <v-divider></v-divider>
     <v-data-table
         *code*
      <template v-slot:[`item`] = *code*
       <tr :class=isSelected ? *code*
        <td class=""
         <v-row no gutters>
          <v-col cols="">
          <span>

This should be quick, I have identified the issue but don’t know how to fix it, here’s the code:

class Character {
         constructor(min, max, name, lastname){
                this.name = name;
                this.lastname = lastname;

                this.x = getRandomArbitrary(min, max);      
                this.incert = 0.167*Math.E**(0.0109*this.x)
                this.AveParam1 = -37.973*Math.log(this.x)+259.73;
                this.AveParam1 = this.AveParam1.toFixed(2)
                this.AveParam2 = 0.6904*Math.log(this.x)-2.5279;
                this.AveParam3 = 12.197*Math.log(this.x)-57.259;
                this.AveParam4 = 12.658*Math.log(this.x)-59.645;
                this.AveParam5 = 12.428*Math.log(this.x)-40.302;
                let y = this.incert * (-1)
        
                this.Param2 = this.AveParam2 + getRandomArbitrary(y, this.incert);      
...

It seems like the issue is in the last line, how I define this.Param2 seems to be the issue. I tried removing getRandomArbitrary(y, this.incert) but that doesn’t fix it. Maybe I should be using a keyword I’m not aware of? honestly don’t know what’s wrong, I’m self taught.

I designed a vector loader animation composed of 3 separate SVG elements using SVGator’s GUI. I exported each as SVG+Javascript, and chose to separate the elements because each uses a different loading/playing function.

When I copied the code into CodePen and my website, all 3 elements loaded perfectly on desktop. But when testing on mobile (iOS15 Chrome & Safari), the #battery and #cells elements load perfectly, but the #rings element fails to load no matter what.

I’ve even tried uploading the #rings file to my CMS to use as an html object’s data source, but the same thing happened: worked on desktop, failed on mobile. Also occurs when you go to the file on my domain.

Code for the #rings SVG is pasted below, but more easily readable on the CodePen link (also linked above).

<svg id="rings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><defs><filter id="rings-outerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-outerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="25,25"/><feOffset id="rings-outerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-0-flood" flood-color="rgba(0,25,249,0.93)"/><feComposite id="rings-outerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-outerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-outerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-outerring-filter-drop-shadow-1-flood" flood-color="#0019f9"/><feComposite id="rings-outerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-outerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-outerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-outerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-outerring-stroke-0" offset="65%" stop-color="rgba(0,11,255,0)"/><stop id="rings-outerring-stroke-1" offset="100%" stop-color="rgba(0,5,255,0.89)"/></radialGradient><filter id="rings-innerring-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="rings-innerring-filter-drop-shadow-0-blur" in="SourceAlpha" stdDeviation="15.75,15.75"/><feOffset id="rings-innerring-filter-drop-shadow-0-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-0-flood" flood-color="rgba(0,124,208,0.86)"/><feComposite id="rings-innerring-filter-drop-shadow-0-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-0-merge"><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-0-merge-node-2" in="SourceGraphic"/></feMerge><feGaussianBlur id="rings-innerring-filter-drop-shadow-1-blur" in="result" stdDeviation="0,0"/><feOffset id="rings-innerring-filter-drop-shadow-1-offset" dx="0" dy="0" result="tmp"/><feFlood id="rings-innerring-filter-drop-shadow-1-flood" flood-color="#007cd0"/><feComposite id="rings-innerring-filter-drop-shadow-1-composite" operator="in" in2="tmp"/><feMerge id="rings-innerring-filter-drop-shadow-1-merge" result="result"><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-1"/><feMergeNode id="rings-innerring-filter-drop-shadow-1-merge-node-2" in="result"/></feMerge></filter><radialGradient id="rings-innerring-stroke" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)"><stop id="rings-innerring-stroke-0" offset="58%" stop-color="rgba(9,0,255,0)"/><stop id="rings-innerring-stroke-1" offset="100%" stop-color="rgba(0,163,255,0.75)"/></radialGradient></defs><g id="rings-ringsnull" transform="translate(.000004-.499999)"><g id="rings-outernull" transform="matrix(1.33 0 0 1.33-175.300928-73.656168)"><ellipse id="rings-outerring" rx="152.5" ry="152.5" transform="matrix(-.75 0 0 0.75 319.614966 243.797835)" paint-order="stroke fill markers" filter="url(#rings-outerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-outerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="958.19" stroke-dashoffset="958" stroke-dasharray="958.19"/></g><g id="rings-innernull" transform="matrix(1.33 0 0 1.33-175.660519-73.294673)"><ellipse id="rings-innerring" rx="152.321205" ry="152.321205" transform="matrix(.63 0 0 0.63 319.749057 243.663741)" paint-order="stroke fill markers" filter="url(#rings-innerring-filter)" fill="none" fill-rule="evenodd" stroke="url(#rings-innerring-stroke)" stroke-width="20" stroke-linecap="round" stroke-miterlimit="957.06" stroke-dashoffset="957" stroke-dasharray="957.06"/></g></g><script><![CDATA[(function(s,i,u,o,c,w,d,t,n,x,e,p){w[o]=w[o]||{};w[o][s]=w[o][s]||[];w[o][s].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s','?','v','=',c].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s'].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{"root":"rings","animations":[{"elements":{"rings-outernull":{"transform":{"data":{"o":{"x":249.786969,"y":250.594965,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.61496,"y":-243.797844}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1200,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4800,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-outerring":{"stroke-dashoffset":[{"t":0,"v":958,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":958}]},"rings-innernull":{"transform":{"data":{"o":{"x":249.605733,"y":250.778104,"type":"corner"},"s":{"x":1.33,"y":1.33},"t":{"x":-319.749062,"y":-243.663742}},"keys":{"r":[{"t":0,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":1500,"v":90,"e":[0.445,0.05,0.55,0.95]},{"t":3000,"v":180,"e":[0.445,0.05,0.55,0.95]},{"t":4500,"v":270,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":0}]}}},"rings-innerring":{"stroke-dashoffset":[{"t":0,"v":957,"e":[0.445,0.05,0.55,0.95]},{"t":2950,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":3050,"v":0,"e":[0.445,0.05,0.55,0.95]},{"t":6000,"v":957}]}},"s":"MDNA1M2E4TTRmOUTFhMjlmOGVhAMTk2OWM5YjRNmNjc2MzVkNWWQ1ZDU5QjRmOOTE5NjlmOTJRDOTBYYTE5NjlVjOWI0ZkU2NzTVhNWU1OTRmOJTZhMTkyOWY4XZWExOTY5YzlHiYTA0ZjY3NWPQ1OUk0ZjkzOTTY5OTk5NGY2JNzVlNTk0ZjhKlOTlhMTkyOWWZNOWI4ZVdhMVTkyNGZLNjdhNMTlmYTI5MjUX5NGZhMDlkOTEI5MjkxNGY2NTzVlYWE/"}],"options":"MDAAxMDg4MmZEODDA4MTZlN2Y4WMUwyZjQ3MmYF3OTdjNmU3MTGJmOGE/"},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__','2021-10-11',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')]]></script></svg>

I’ve been getting a certification in JS on Codecademy but can’t seem to figure this out, and I’ve been trying for two days straight.

hi everyone i need help :

i save my discord bot ping in json file and i want to show the ping from the json file in my web server HTML iam using express.js

this enter image description here here is pic of the data but its not getting update when it change in json file

The Codes :

this in my express project

app.get('/', function(req, res){
    const pingsBots = require('./Database/BotPing.json')

    const pingofbot = pingsBots.thepingofbot.botping

    let file = fs.readFileSync(path.join(__dirname, './html/', 'main.html'), { encoding: 'utf-8' })
    file = file.replace("$$theping$$", pingofbot)

    
    res.sendFile(path.join(__dirname, './html/', 'main.html'))
    res.send(file)
    
})

And this in ready method in my bot :

setInterval(function(){
        let Pusher = JSON.parse(fs.readFileSync('./Database/BotsPing.json', 'utf8'));
        Pusher["thepingofbot"] = {
            botping: `${client.ws.ping}`
        }
        async function SavePingData(path, JSONdata){
            fs.writeFileSync(path, JSON.stringify(JSONdata, null, 2))
        }
        SavePingData('./Database/BotsPing.json', Pusher)
    }, 1000)

BTW : express project not with the bot project

I’ve inherited a Node project that is supposed to be a reusable client library that uses gRPC to communicate with a server. This project is meant to be imported by other node applications. Disclaimer: I am relatively new to gRPC as well as server side JavaScript (Node), though well versed on the client side.

I’ve Googled a lot of an answer but the docs on using gRPC with Node seem sparse compared to other languages.

What would be the best way to deploy/package such a project, especially in regards to handling the .proto files? What would be the best way to keep the client’s .proto files in sync with the server’s?

i need to get the eCharts tooltip on the line with the pointer like this:
pic1

but so far my tooltip is “floating” in the chart with no pointer:
pic2

my config in a PHP page:

'tooltip' => [
    'trigger' => 'axis',
    'axisPointer' => [ 'type' => 'cross' ],
    'axis' => 'x',
    'backgroundColor' => 'rgba(250,250,250,1)',
    'borderColor' => '#5d00f3',
    'confine' => TRUE,
     
    'textStyle' => [
        'fontWeight' => 'bold',
        'fontSize'=> '17',
        'color' => '#000', 
    ],
],

how can i create a pointer to follow the line, the doc is not very clear to me:
https://echarts.apache.org/en/option.html#grid.tooltip.position

I’m a begginer in bable js. I found the problem is in babel js. But don’t know how to change it. I’m trying new things in babel js. Please help me. I want the animation to start with full window height and width. Thanks in advance. The canvas initially starts with height=”0″, width=”0″. That’s why when I reload I can’t see the animation. If I resize the window then the animation shows. The code is given below:

**HTML**

<div class="crowd">
      <canvas id="crowd-simulator"></canvas>
    </div>

**CSS**

.crowd{
    height: 100%;
    z-index: -999;
}
#crowd-simulator {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -999;
  }

**Babel Js**

    const config = {
      src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/open-peeps-sheet.png',
      rows: 15,
      cols: 7
    }

    // UTILS

    const randomRange = (min, max) => min + Math.random() * (max - min)

    const randomIndex = (array) => randomRange(0, array.length) | 0

    const removeFromArray = (array, i) => array.splice(i, 1)[0]

    const removeItemFromArray = (array, item) => removeFromArray(array, array.indexOf(item))

    const removeRandomFromArray = (array) => removeFromArray(array, randomIndex(array))

    const getRandomFromArray = (array) => (
      array[randomIndex(array) | 0]
    )

    // TWEEN FACTORIES

    const resetPeep = ({ stage, peep }) => {
      const direction = Math.random() > 0.5 ? 1 : -1
      // using an ease function to skew random to lower values to help hide that peeps have no legs
      const offsetY = 100 - 250 * gsap.parseEase('power2.in')(Math.random())
      const startY = stage.height - peep.height + offsetY
      let startX
      let endX

      if (direction === 1) {
        startX = -peep.width
        endX = stage.width
        peep.scaleX = 1
      } else {
        startX = stage.width + peep.width
        endX = 0
        peep.scaleX = -1
      }

      peep.x = startX
      peep.y = startY
      peep.anchorY = startY

      return {
        startX,
        startY,
        endX
      }
    }

    const normalWalk = ({ peep, props }) => {
      const {
        startX,
        startY,
        endX
      } = props

      const xDuration = 10
      const yDuration = 0.25

      const tl = gsap.timeline()
      tl.timeScale(randomRange(0.5, 1.5))
      tl.to(peep, {
        duration: xDuration,
        x: endX,
        ease: 'none'
      }, 0)
      tl.to(peep, {
        duration: yDuration,
        repeat: xDuration / yDuration,
        yoyo: true,
        y: startY - 10
      }, 0)

      return tl
    }

    const walks = [
      normalWalk,
    ]

    // CLASSES

    class Peep {
      constructor({
        image,
        rect,
      }) {
        this.image = image
        this.setRect(rect)

        this.x = 0
        this.y = 0
        this.anchorY = 0
        this.scaleX = 1
        this.walk = null
      }

      setRect(rect) {
        this.rect = rect
        this.width = rect[2]
        this.height = rect[3]

        this.drawArgs = [
          this.image,
          ...rect,
          0, 0, this.width, this.height
        ]
      }

      render(ctx) {
        ctx.save()
        ctx.translate(this.x, this.y)
        ctx.scale(this.scaleX, 1)
        ctx.drawImage(...this.drawArgs)
        ctx.restore()
      }
    }

    // MAIN

    const img = document.createElement('img')
    img.onload = init
    img.src = config.src

    const canvas = document.querySelector('#crowd-simulator')
    const ctx = canvas.getContext('2d')

    const stage = {
      width: 0,
      height: 0,
    }

    const allPeeps = []
    const availablePeeps = []
    const crowd = []

    function init() {
      createPeeps()

      // resize also (re)populates the stage
      resize()

      gsap.ticker.add(render)
      window.addEventListener('resize', resize)
    }

    function createPeeps() {
      const {
        rows,
        cols
      } = config
      const {
        naturalWidth: width,
        naturalHeight: height
      } = img
      const total = rows * cols
      const rectWidth = width / rows
      const rectHeight = height / cols

      for (let i = 0; i < total; i++) {
        allPeeps.push(new Peep({
          image: img,
          rect: [
            (i % rows) * rectWidth,
            (i / rows | 0) * rectHeight,
            rectWidth,
            rectHeight,
          ]
        }))
      }
    }

    function resize() {
      stage.width = canvas.clientWidth
      stage.height = canvas.clientHeight
      canvas.width = stage.width * devicePixelRatio
      canvas.height = stage.height * devicePixelRatio

      crowd.forEach((peep) => {
        peep.walk.kill()
      })

      crowd.length = 0
      availablePeeps.length = 0
      availablePeeps.push(...allPeeps)

      initCrowd()
    }

    function initCrowd() {
      while (availablePeeps.length) {
        // setting random tween progress spreads the peeps out
        addPeepToCrowd().walk.progress(Math.random())
      }
    }

    function addPeepToCrowd() {
      const peep = removeRandomFromArray(availablePeeps)
      const walk = getRandomFromArray(walks)({
        peep,
        props: resetPeep({
          peep,
          stage,
        })
      }).eventCallback('onComplete', () => {
        removePeepFromCrowd(peep)
        addPeepToCrowd()
      })

      peep.walk = walk

      crowd.push(peep)
      crowd.sort((a, b) => a.anchorY - b.anchorY)

      return peep
    }

    function removePeepFromCrowd(peep) {
      removeItemFromArray(crowd, peep)
      availablePeeps.push(peep)
    }

    function render() {
      canvas.width = canvas.width
      ctx.save()
      ctx.scale(devicePixelRatio, devicePixelRatio)

      crowd.forEach((peep) => {
        peep.render(ctx)
      })

      ctx.restore()
    }

I already know that you simply have to put emailAddress for textContentType as seen from the react native docs.

But when I do this, it doesn’t seem to suggest my email. My email is definitely apart of my Apple account, and it has no problem autofilling my first and last name.

I found this stackoverflow question, but my problem is that I’m using expo and not Xcode to build my project.

Does anyone have any ideas or a lead I can go off on? Or a similar solution to the stackoverflow question that applies to expo?

Here’s the code if you’re curious:

<TextInput
  id="email"
  placeholder="Email (optional)"
  returnKeyType="done"
  textContentType="emailAddress"
  keyboardType="email-address"
  autoFocus={true}
  maxLength={25}
  blurOnSubmit={false}
  autoCapitalize={"none"}
  onInputChange={inputChangeHandler}
  onSubmitEditing={() => {
    dispatch(setProgress(0));
    props.navigation.navigate("ReadyToBuild");
  }}
  initialValue=""
  value={inputState.value}
  placeholder={props.placeholder ? props.placeholder : "type here..."}
  placeholderTextColor={"grey"}
  onChangeText={textChangeHandler}
  onBlur={lostFocusHandler}
  ref={props.inputRef}
  styleInput={{
    fontSize: 28,
    fontWeight: "300",
    backgroundColor: "#ffffff",
    marginHorizontal: "5%",
  }}
/>

Question: Are there known issues with Drag and Drop on Android Chrome or am I using the Drag and Drop API incorrectly? (if neither, I’m going to assume it’s a bug and submit a report to Chrome).

Issue: I’m implementing a simple Drag and Drop interface that seems to be working fine, but is behaving strangely on 1 of 3 device/browser combinations that I’m testing. I’ve determined that the problem is in the specification of a custom MIME type 'text/x-custom-id' that I set on the dragstart event of the draggable element, but nothing I’m reading in the Living Standard or on MDN is leading me to believe that this should be a problem.

It works fine on Chrome on my desktop (Windows 10, Chrome 97.0.4692.71) and the iPhone I’m testing (iPhone 8, iOS 15.0, Chrome 94.0.4606.76), but fails on Chrome on my Galaxy S20 (Android 11, Chrome 96.0.4664.104). As soon as I revert the MIME type in draggable.setData(...) from text/x-custom-id to text/plain, all interfaces work as expected, but I’d like to have a custom ID if possible, and I haven’t found anything online that would lead me to believe that I can’t do that.

Why do I care?: I want an understanding of what’s happening most of all, but the reason for trying to use a custom MIME type at all is to bail out of the various drag... handlers on container (with an e.dataTransfer.types.includes('text/x-custom-id') check) for any other draggable interactions that may incidentally cross paths with my interface (eg: dragging a file from the OS into the browser on my page or dragging a link/URL across container).

Code (stripped as much as possible for minimal demonstration of issue):

<body>
  <div id="container">I have CSS that gives me dimensions, I promise</div>
  <div id="draggable-tester" draggable="true">I do, too!</div>

  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const myFirstMimeType = 'text/x-custom-id';

      // Initialize draggable element.
      const draggable = document.getElementById('draggable-tester');
      draggable.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData(myFirstMimeType, `Hey there, good lookin'`);
        console.log('dragstart event fired');
      });
      draggable.addEventListener('dragend', () => {
        console.log('dragend event fired');
      });

      // Initialize drag container and drop zone.
      const dragContainer = document.getElementById('container');
      dragContainer.addEventListener('dragenter', (e) => {
        console.log(`dragenter w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
      });
      dragContainer.addEventListener('dragover', (e) => {
        console.log(`dragover w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
      });
      dragContainer.addEventListener('dragleave', (e) => {
        console.log(`dragleave w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
      });
      dragContainer.addEventListener('drop', (e) => {
        console.log(`drop w/ data: '${e.dataTransfer.getData(myFirstMimeType)}'`);
      });
    });
  </script>
</body>

Results: On desktop and iPhone, the above gives me the expected results as I execute the various drag actions on the drag container and drop the draggable element, but on Android it only logs the dragstart message (it doesn’t even log the dragend registered on draggable). As soon as I modify myFirstMimeType to be 'text/plain', it works on all devices as expected.

I would like the input box to get autofocus on getting mounted.Its working fine in android but not in IOS.

I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <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>intern.local</title>
    <link rel="stylesheet"><link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>
<body>
<div class="outer"> 
    <div class="inner one" 
        id="box_one">
        <h1 class="main">
            Welcome to intern.local
        </h1>
        <h3 id='login_1'>
            Enter details and login to continue.
        </h3>
    </div>
    <div class="inner two" 
        id="box_two">
        <div class="head">
            <h1> Welcome</h1>
            <h2>Please Login</h2>
            <div class="error">
                    Please Enter valid Password.
            </div>
            <div id="login" 
                class="login">
                
                <form class="login_form" onsubmit="validate()">
                    
                    <input type="text"
                            pattern="^w+([.-]?w+)*@docquity.com"
                            id="uname" 
                            class="inp uname" 
                            name="uname"
                            placeholder="Username" required><br>
                    <input type="password" 
                            minlength="6"
                            id="pass" 
                            class="inp pwd" 
                            name="pass"
                            placeholder="Password" required>
                    <small id="pass_error"></small>
                    <input type="submit" 
                            id="smt" 
                            value="Submit"
                            class="btn sbmt">
                </form>
                
            </div>
        </div>
    </div>
</div>    
</body>
</html>

css code

body {
    margin:0px;
    height:100%;
    border: none;
    padding:0px;
  }

.inner{
    float:left;
    width: 50%;
    height: 100vh;

}
.one {
    background-color:cornsilk;
}
.two{
    /*background: rgb(63,94,251);*/
    background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
    padding: 0%;
    border: 0%;
    margin: 0%;
    color: cornsilk;
}
.head{
    height: auto;
    padding-top: 15%;
}
.head h1 {
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 40px;
}
.head h2{
    text-align: center;

}
form {
    margin: 0 auto;
}
.login {
    text-align: center;
}
.inp {
    border: none;
    background: none;
    box-shadow: 0px 2px 0px 0px white;
    width: 50%;
    color:blanchedalmond;
    font-size: 25px;
    outline: none;
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 5%;
    padding-left: 2%;
}
.inp:focus:invalid{
    box-shadow: 0px 2px 0px 0px red;
}
small {
    color: red;
    font-weight: bold;
}
.pwd {
    margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
    color: blanchedalmond;
}
.btn {
    align-items: center;
    background-color: #fff;
    border-radius: 24px;
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    color: #000102;
    display: inline-flex;   
    height: 48px;
    justify-content: center;
    padding: 2px 24px;   
    width: 30%;
    font-size: 25px;
    
    
}
.sbmt:hover{
    background-color: darkslategray;
    color: floralwhite;
}

.main {
    margin-top: 20%;
    text-align: center;
    font-size: 60px;
    background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.one h3 {
    text-align: center;
    color:darkslategray;
}

.error_message{
    background-color: red;
    margin-left: 25%;
    margin-right: 25%;
    text-align: center;
}

.error {
    display: none;
}

javascript code

function mail_velidate(mail){
  var mail_pattern = /^w+([.-]?w+)*@docquity.com/;
  if(mail.match(mail_pattern))
  {
    return true;
  }
  else{
    return false;
  }
}

function password_check(pass){
  var pass_regex = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
  if (pass.match(pass_regex)){
    return true;
  }
  else{
    return false;
  }
}
const mail = document.getElementById("uname");

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByClassName("uname");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Give valid docquity mail id");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

function validate(){
  var user = document.getElementById("uname").value;
  var pass = document.getElementById("pass").value;

  if(password_check(pass)){
      document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
      document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
      document.getElementById('box_two').style.display = 'none';
      document.getElementById('box_one').style.width = '100%';
  }
  else{
    document.getElementsByClassName("error")[0].className = "error_message";
  }
}

the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.

I have created a list of objects and each list item has input within:

{flowers_data?.map((flower) => {
   return (
      <>
         <div className={classes.Nested_Flower_Container} key={flower.id}>
            <div className={classes.Nested_Flower_Name}>
               {flower.name}
            </div>
         <div className={classes.Nested_Flower_Input} style={{ marginRight: '0.2em' }}>
            <TextField
              id="Amount"
              label="Amount"
              variant="outlined"
              size="small"
              type="number"
              onChange={(e) => {
                 setAmount(e.target.value);
                 handleAddList(e.target.value, flower);
              }}
              className={classes_2.root}
            />
         </div>
      </div>
  </>)
})}

How can I add an object that has a value in input to an array? I tried to do this using a function that I created, but each time I change one element’s target.value and move on to the next item to change its input value, there is only one element in the array with the latest target.value. And after modifying the inputs, when I try to output the values outside that function with e.g. a button, the add_flowers_tab array is empty.

handleAddList function:

let temp_flower: Flower;
let add_flowers_tab: Flower[] = [];

    const handleAddList = (targetValue: string, flower: Flower) => {

        temp_flower = {
            "id": flower.id,
            "name": flower.name,
            "price": flower.price,
            "amount": Number(targetValue),
            "creation_date": flower.creation_date
        }

        if (targetValue === '') {
            /* Delete flower when input is empty */
            add_flowers_tab.forEach(tabFlower => {
                if (tabFlower.id === temp_flower.id) {
                    const indexOfDelete = add_flowers_tab.indexOf(tabFlower);
                    add_flowers_tab.splice(indexOfDelete, 1);
                }
            })
        }
        if (targetValue !== '') {
            /* Add flower to tab when input has value */
            if (add_flowers_tab.length > 0) {
                /* When input changes, delete flower with old input value and add the new one */
                add_flowers_tab.forEach(tabFlower => {
                    if (tabFlower.id === temp_flower.id) {
                        const indexOfDelete = add_flowers_tab.indexOf(tabFlower);
                        add_flowers_tab.splice(indexOfDelete, 1);
                        add_flowers_tab.push(temp_flower);
                    }
                })
            }
            else {
                /* Add new flower as a first element in the array */
                add_flowers_tab.push(temp_flower);
            }

            /* 
               Displays an array with only the most recently added temp_flower, even though 
               several inputs in list have values
            */

            console.log(add_flowers_tab);
        }
    }

hi, i’m writing a application under NodeJS but got the following error:

throw new TypeError(‘Router.use() requires a middleware function but got a ‘ + gettype(fn))
^

TypeError: Router.use() requires a middleware function but got a Object
at Function.use (C:Usersdecopiaporestserver1221node_modulesexpresslibrouterindex.js:458:13)
at Function. (C:Usersdecopiaporestserver1221node_modulesexpresslibapplication.js:220:21)
at Array.forEach ()
at Function.use (C:Usersdecopiaporestserver1221node_modulesexpresslibapplication.js:217:7)
at Server.routes (C:Usersdecopiaporestserver1221modelsserver.js:58:14)
at new Server (C:Usersdecopiaporestserver1221modelsserver.js:19:14)
at Object. (C:Usersdecopiaporestserver1221app.js:3:16)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
[nodemon] app crashed – waiting for file changes before starting…

The Code is:

const {Router} = require(‘express’);

const { check } = require(‘express-validator’);

const { login} = require(‘../controllers/auth’);

const { validatefields } = require(‘../middlewares/validate-fields’);

const router = Router();

router.post(‘/login’, [

check(’email’, ‘Email is mandatory’).isEmail(),

check(‘password’, ‘The Password is mandatory’).not().isEmpty(),

validatefields

],

login);

module.exports = {
router
}

….

note

If i change “module.exports = { router }” for “module.exports = router” the problem disappears, but what if i want to export a constant or other function?

example:

const {Router} = require(‘express’);

const { check } = require(‘express-validator’);

const { login} = require(‘../controllers/auth’);

const { validatefields } = require(‘../middlewares/validate-fields’);

const myvar = ‘12321@as’;

const router = Router();

router.post(‘/login’, [

check(’email’, ‘Email is mandatory’).isEmail(),

check(‘password’, ‘The Password is mandatory’).not().isEmpty(),

validatefields

],

login);

module.exports = {
router,
myvar
}

the error appears again…

throw new TypeError(‘Router.use() requires a middleware function but got a ‘ + gettype(fn))
^

TypeError: Router.use() requires a middleware function but got a Object
at Function.use

How i can solve this problem. Any Ideas?

Node Version: v16.11.1 –
Express Version : 4.17.1

I have a form structured as so.

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/">
   <div class="form-group">
      <label for="id_email_address" class="d-none">Email Address</label>
      <input type="email" id="id_email_address" class="form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
      <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
      <input type="hidden" name="event_slug" value="subscribe" />
   </div>
</form>

I also have a script at the bottom of the file. The point of the script will be to verify a recaptcha before submitting the form. Here is my script.

<script>
    document.getElementById('email_subscription_form').addEventListener('submit', verifyRecaptcha);
    
    function verifyRecaptcha(e) {
        e.preventDefault()
        return false
    }
</script>

I was thinking, based on some research, that the function returning false would stop the form from submitting. However, the form still submits and hits the endpoint.

I have also tried this:

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">

and

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsbubmit="return false">

but the form still submits.

What can I do to stop the form from submitting until verified? This is a Django project, so the template is a Django template.

I’m newbie to JS modules and Import Map, now I’m using Ruby on Rails 7 and I couldn’t find a way to get this working:

Js Module (proposals.js):

function openProposalMirror() ...

application.js

import * as Proposal from "./proposals.js"

On the view:

onclick="Proposal.openProposalMirror()"

error: Uncaught ReferenceError: Proposal is not defined

How could I accesse openProposalMirror() function on the view?