Category: javascript

I’m using Mermaid to create a simple flow diagram as shown below. I’d like to make the connecting lines to exact 90 degree but couldn’t able to find documentation anywhere .

Is it possible to make it exact 90 degrees ?

Actual Flow :

Expected Flow :

Mermaid Code :

flowchart TD
B[“fa:fa-twitter for peace”]
B–>C[fa:fa-ban forbidden]
B–>D(fa:fa-spinner);
B–>E(A fa:fa-camera-retro perhaps?);

These tests are passing but the process exits code 1. Not sure what the issue is.
Here is my github actions file and an image showing the tests passing with an exit coe

testpass

on:
  push:
    branches:
      - main
      - staging
      - dev
  pull_request:
    branches:
      - main
      - staging
      - dev

jobs:
  tests:
    name: Tests
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Read nvmrc
        id: nvmrc
        uses: browniebroke/read-nvmrc-action@v1

      - name: Set up node
        uses: actions/setup-node@v2
        with:
          node-version: '${{ steps.nvmrc.outputs.node_version }}'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run tests
        run: yarn test

I have a 3rd party script in which I have no control over the HTML and can only modify the basic CSS. I just wanted to know if it is possible to cut all the information from < script> until its closing </ script> without distinguishing between the elements inside?

Example :

<script src='http://localhost:8888/Sadem/wordpress/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.5.3'
    id='elementor-frontend-js'></script>

So for example here I would like to retrieve the whole line in string form to store it in an array.

    $document = new DOMDocument();
    libxml_use_internal_errors(true);

    $document->loadHTML($content);
    libxml_use_internal_errors(false);

    // An empty array to store all the 'srcs'
    $scripts_array = [];

    // Store every script's source inside the array
    foreach ($document->getElementsByTagName('script') as $script) {
        if ($script->hasAttribute('src')) {
            $scripts_array[] = $script->getAttribute('src');
        }
    }

So here is a piece of my code, for now I manage to retrieve the loaded document, browse the scripts but I only pull the “src” attribute; but I want to retrieve all the content without distinction.

Thank you for your answers ! 🙂

I would like to make 3 buttons wich each one make all the content div to display=”none” and depends on the button you have click one of the content div change to display=”block”. For example, If I click in the second button It will show only the second div content.

html

<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>

<div class="content">
<div id="1" className="content"><p>TEST1</p></div>
<div id="2" className="content"><p class="other">TEST2</p></div>
<div id="3" className="content "><p class="other">TEST3</p></div>
</div>

JS

function showPanel(id) {

    var elements = document.getElementsByClassName("content");

    for(let i = 0; i < elements.length() ; i++){
        document.getElementById(i).style.display="none";
    }
    
    document.getElementById(id).style.display="block";
  }

javascript scientifists!
How can I use JSON.stringify and JOSN.Parse in Local Storage sothat I dont have problems.
please give me an example!
I am a problem with my code where browsers are not updated I cant pass an array to local storage as value of my keys.

I am retrieving data from an API:

    const [url, setUrl] = useState(endpoints.lastPosition);
    const { data, loading, error } = useGet(`/api/ais?q=${url}`);

    console.log(data);
return (
<Layout>
{loading && <div>Loading...</div>}
            {error && <div>{error.message}</div>}
            {data && (
                <pre>
                    <code>{JSON.stringify(data, null, 2)}</code>
                </pre>
            )}
            )
        </Layout>

The API:

export default async function handler(req, res) {
    console.log(req.query);
    const { data } = await axios.get(`api.com/${req.query.q}`);

    res.status(200).json(data);
}

Now I want to display the data in a list:

{data.map((data, index) => {
                        <div key={index}>
                            {data.course}   
                            } </div>

There is always an error. Does anyone have any ideas?
Sorry for my Noob Question
Thank You !

1. How can I make the same animations of the appearance of pictures so that they appear every time I scroll

https://infraredmindbody.com/

2. And animation of bottle, which on this site – https://foodcomplianceinternational.com/

When I create a radial gradient on HTML Canvas, it doesn’t look totally smooth, you can see the visible circles (Firefox 96.0.3):

I want the gradient to be totally smooth (I wonder why that is not the default display for the gradient).

Here is the code I am using:

// HTML
<canvas width="1000" height="1000"></canvas>

// JS
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

var grd = ctx.createRadialGradient(500, 500, 0, 500, 500, 1000);
grd.addColorStop(0, '#444444');
grd.addColorStop(1, '#000000');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);

I found a solution here, but it has more than 200 lines of code, and I was wondering if a smoother radial gradient is possible with some in-built Canvas properties or methods.

Thanks for your opinions.

I am trying to export the value of a textarea

let text = document.getElementById("textarea").value

as a PDF. I am using jsPDF. My first try was:

function createPDF(){
let text = document.getElementById("textarea").value;
var doc = new jsPDF();
doc.text(20, 20, text);
doc.save('document.pdf');
}

However, even though with this method a pdf is created, the pdf is not created with a “scroll bar view”, it only prints 1 line basically.

My second try was:

function createPdf() {
let text = document.getElementById("textarea").value;
// let titolo = document.getElementById("input-fileName").value;
var doc = new jsPDF();
var splitText = doc.splitTextToSize(text, 250);
var pageHight = doc.internal.pageSize.hight;
doc.setFontSize(11);
var y = 20;
for(var i = 0; i < splitText.length; i++){
 if (y > 275){
     y = 20;
     doc.addPage();
    }
   doc.text(20, y, splitText[i]);
   y = y + 5
  }
doc.save(title + '.pdf');
}

However with this method a pdf is not even created 🙁

So I tried using html2pdf as following:

function createPdf(){
var element = document.getElementById('textarea');
element.style.width = '800px';
element.style.height = '1000px';
html2PDF().from(element).toPdf().save('ilmiopdf.pdf');
}

This method also produces no pdf.
Anyone have suggestions? Cause i’m going crazy.

I need to pass a parameter to the common function when my dom is loaded. I can’t use useEfect in my case. So I create a function for that. I need to check some parameters’ true and if it is true I return true or I return false.

export function validateUser(data) {
  if (data==='order/view'){
    return true
  }
    return false
  
}
export default validateUser();




return (
    <div hidden={()=>{validateUser('order/view')}}> Som Data </div>
)

If div returns ‘order/view’ I need to show my div and if it’s not, I need to hide my div in my react site. But My method can’t return the parameters that I send it to.
If anyone can help me with that question, It really helps.

Thank you in advance. I am new to reactjs

My states are like

const [firstName, setFirstName]=useState();
const [lastName, setLastName]=useState();

I want to pass both firstName and lastName to another component.

Html code
<input id="lon" type="number" > <input id="lat" type="number" > <button id="GoTo" onclick="GoTo()"> Zoom to</button>

The Javascript
` function GoTo() {

 var lat = document.getElementById("lat").value;
  var lon = document.getElementById("lon").value;
 map.getView().setCenter(lon,lat);
 map.getView().setZoom(9);

}`

I am making a discord bot which needs to track which user joined the server using which invite link. For that it needs to track discord invite link code generated by the user. Here is my code. I am able to get user id who invited the user, how many users have he already added and the id of the member who joined. What I am not able to get correctly is the invite code. Here is my code

const invites = {} // { guildId: { memberId: count } }
    let Array = [];
    const getInviteCounts = async (guild) => {
      return await new Promise((resolve) => {
        guild.fetchInvites().then((invites) => {
          const inviteCounter = {} // { memberId: count }
  
          invites.forEach((invite) => {
            const { uses, inviter,id } = invite
            const { username, discriminator } = inviter
            console.log("ID is ",invite.code);
            
            const name = `${username}#${discriminator}`
            Array[name] = [inviter,[invite.code]];
            inviteCounter[name] = (inviteCounter[name] || 0) + uses
          })
  
          resolve(inviteCounter)
        })
      })
    }
  
    client.guilds.cache.forEach(async (guild) => {
      invites[guild.id] = await getInviteCounts(guild)
    })
  
    client.on('guildMemberAdd', async (member) => {
      const { guild, id } = member
  
      const invitesBefore = invites[guild.id]
      const invitesAfter = await getInviteCounts(guild)
  
      console.log('BEFORE:', invitesBefore)
      console.log('AFTER:', invitesAfter)
  
      for (const inviter in invitesAfter) {
        if (invitesBefore[inviter] === invitesAfter[inviter] - 1) {
          const channelId = '937987923205304390'
          const channel = guild.channels.cache.get(channelId)
          const count = invitesAfter[inviter]
         let userID =  client.users.cache.find(u => u.tag === inviter).id;
         console.log("USERID",inviter.code); 
         channel.send(
            `Please welcome <@${id}> to the Discord! Invited by ${inviter} (${count} invites)`
          )
            
          invites[guild.id] = invitesAfter
          return
        }
      }
    }) 

I have the next postcss config

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        browsers: 'last 2 versions, IE 11, not dead',
        preserve: false,
        features: {
          'custom-media-queries': true,
          'custom-properties': true,
          'nesting-rules': true
        },
        importFrom: ['src/styles/variables.css']
      }
    ]
  ]
}

And this file with css variables

@custom-media --desktop screen and (min-width: 768px);
@custom-media --mobile screen and (max-width: 767px);

:root {
  ...some colors
}

After i built my project via next build && next export, colors are not displayed correctly. For example, color: var(–green), instead color: green. Has anybody idea what’s wrong?

I noticed that nuxtjs auth library has an option for Discord authentication.

At this link: https://auth.nuxtjs.org/providers/discord

The documentation says that you must provide your Discord Applications clientId and clientSecret. An example can be seen below:

auth: {
  strategies: {
    discord: {
      clientId: '...',
      clientSecret: '...'
    },
  }
}

As far as I know, both clientId and clientSecret are not pieces of information that you want public. On the backend, you would simply keep these pieces of data in a .env file and as long as your server or application isn’t compromised you’re safe. How does Nuxt Auth keep the clientId and clientSecret safe as a frontend framework?