Category: javascript

I’m trying to avoid the annoying “consent to cookies” thing on my website. There’s no cookies at all except the one when you’re logged in.

I know that GDPR is not only about cookies but more widely about storing and sharing user data.

Currently what I’m about to do is to not insert GA javascript on my website but instead make a post request on the GA API collect endpoint. In this post request I set the aip argument (anonymize IP) and I’m using a totally random and anonymous client-side generated GUID as cid argument.

In order to not create a new GUID each time the same user come to my site, I store their GUID in the browser (localstorage).

I know that localstorage is also under GDPR laws, but since I’m using a totally random GUID and sending the pageview event directly without inserting any JS and using IP anonymization, I wonder if it’s mandatory to ask consent or even alert the user when they come on my website.

I mean actually there is no way for GA to know who’s the user and track them outside of my website, and I have no way to connect GUIDs with my user ids to know which of my users appear in GA reports. Users are totally anonymized.

Am I right or should I put at least a message to warn my users?

Thanks!

I’m trying to check if reaction was added in specific channel, but this don’t work. Any advice?

client.on('messageReactionAdd', (reaction, user) => {
    if(reaction.channel.id !== '799395901533588438') return console.log('wrong channel');
    console.log('right channel')
})

I have this:

<label for="eventendtime">Event End Time</label>

              <% var enddate =  data[i].ENDDATE.split(' ') %>
              <input type="time" name="eventendtime" id="eventendtime" value="<%= enddate[0] %>">

basically, the enddate[0] returns:

1:30

but when I put it as either value like you can see above, or placeholder, it still always forces it to go to 12:30, which is super strange! I can’t figure out how to do this. how can i fix it?

I’m trying to filter a nested object into two parts, then return the parent (and siblings) object back if there are any matching siblings to return.

I’ve been looking at this SO thread as reference.

I think I am close, but not quite sure what I’m doing wrong.

I have an order that looks like this:

{
    "name": "Name",
    "email": "[email protected]",
    "createdAt": "2021-12-01T21:19:29.682Z",
    "purchasables": [
        {
            "type": "FOO",
            ...
        },
        {
            "type": "BAR",
            ...
        }
    ]
}

Any given order can have multiple things within (purchasable). I am trying to filter the order date order.createdAt and then filter the purchasable type.

// vue.js

data() {
    return {
      items: [],
      day: dayjs()
    };
},

props: {
    orders: {
      type: Array,
      required: false,
      default: () => [],
    },
},

methods: {
   filterPurchasables() {
      this.items = this.orders.filter((order) => {
        order.purchasables.every((purchasable) => {
          console.log('type: ', purchasable.type); // FOO
          
          return purchasable.type === 'FOO';
        });

        return dayjs(order.createdAt).isSame(this.day, "date");
      });
    },
},

If I only filter on the order’s createdAt date, things seem to work well.

this.items = this.orders.filter((order) => {
    return dayjs(order.createdAt).isSame(this.day, "date");
});

In the end, what I’m trying to get back is this:

{
    "name": "Name",
    "email": "[email protected]",
    "createdAt": "2021-12-01T21:19:29.682Z",
    "purchasables": [
        {
            "type": "FOO",
            ...
        }
    ]
}

• The order is only returned if the dates match
• Only the proper purchasables are returned that match (e.g FOO)

Currently, I am always getting both purchasables back. I had tried using .some() but was getting the same result.

Thank you for any suggestions!

below is my project in Vue JS and i’m using An API to view data .. my problem is: i have an API to view single data which is called building in my case, and when i try to console.log(this.Building.floors) it gives me all the array items from 0 to 21 and i want to view those numbers from 0 to 21 in a table but i couldn’t figure it out

<template>
    <b-card no-body class="bg-default shadow">
        <b-card-header class="bg-transparent border-0">
            <h3 class="mb-0 text-white">Details</h3>
        </b-card-header>

        <el-table class="table-responsive table table-dark"
                  header-row-class-name="thead-dark"
                  :data="projects">
            <el-table-column label="Project"
                             min-width="310px"
                             prop="name">
                <template v-slot="{row}">
                    <b-media no-body class="align-items-center">
                        <a href="#" class="mr-3">
                            <b-img class="avatar" rounded="circle" alt="Image placeholder" :src="row.img" />
                        </a>
                        <b-media-body>
                            <span class="font-weight-600 name mb-0 text-sm"   v-for="(building, index) in Building.floors"
              :key="index">{{Building.floors}}</span> // i wanted to get the numbers from 0 to 21 but it didn't work
                        </b-media-body>
                    </b-media>
                </template>
            </el-table-column>
            <el-table-column label="Budget"
                             prop="budget"
                             min-width="140px">
            </el-table-column>

            <el-table-column label="Status"
                             min-width="170px"
                             prop="status">
                <template v-slot="{row}">
                    <badge class="badge-dot mr-4">
                        <i :class="`bg-${row.statusType}`"></i>
                        <span class="status" :class="`text-${row.statusType}`">{{row.status}}</span>
                    </badge>
                </template>
            </el-table-column>

            <el-table-column label="Users" min-width="190px">
                <div class="avatar-group">
                    <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
                       data-original-title="Ryan Tompson">
                        <img alt="Image placeholder" src="img/theme/team-1.jpg">
                    </a>
                    <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
                       data-original-title="Romina Hadid">
                        <img alt="Image placeholder" src="img/theme/team-2.jpg">
                    </a>
                    <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
                       data-original-title="Alexander Smith">
                        <img alt="Image placeholder" src="img/theme/team-3.jpg">
                    </a>
                    <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip"
                       data-original-title="Jessica Doe">
                        <img alt="Image placeholder" src="img/theme/team-4.jpg">
                    </a>
                </div>
            </el-table-column>

            <el-table-column label="Completion"
                             prop="completion"
                             min-width="240px">
                <template v-slot="{row}">
                    <div class="d-flex align-items-center">
                        <span class="completion mr-2">{{row.completion}}%</span>
                        <div>
                            <base-progress :type="row.statusType" :value="row.completion"/>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>

    </b-card>
</template>
<script>
  import projects from './../projects'
  import { Table, TableColumn} from 'element-ui'
  import BuildingsService from "@/services/ApiService"
  export default {
    name: 'light-table',
    components: {
      [Table.name]: Table,
      [TableColumn.name]: TableColumn
    },
    data() {
      return {
          Flats:[],
          Floors:[],
          Building:[],
      
        projects,
        currentPage: 1
      };
    },
       mounted: function(){
      
      
      BuildingsService.getOneBuilding(`${this.$route.params.id}`).then((response) => {
      this.Building = response.data.response;
     
console.log(this.Building.floors,"single");

    });



    });
    
    }
  }
</script>

My Css looks like this, for .mySlides i tried every display still its not working………………………………………………………………………………………………………………………………………………………………………………..

.mySlides {
  display: flex;
}

.slideshow-container {
  max-width: 100%;
  height: 450px;
  position: cover;
  margin: auto;
  margin-top: 100px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  margin-top: 1.5%;
  margin-left: 1%;
}

.active {
  background-color: #3b3b3b;
}

span {
  color: black;
  /* background-color: white; */
}

*** This is my javascript code ***

var slideIndex = 0;
showSlides ();

function showSlides () {
  var i;
  var slides = document.getElementsByClassName ('mySlides');
  var 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, 2000); // Change image every 2 seconds
}
showSlides ();

This is my html code i have not made use of w3-animate style idk how to use that

<div class="slideshow-container">
        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/7/53ae79ec-df56-4877-b133-b92f4cfd8c7f1638892785287-EORS-Prebuzz-Banner-DK.gif"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/073805e4-f274-4d37-b5e3-8ef4766a19531639241779767-K_Winterwear_Dk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/b96ded76-646c-4baf-9422-7727cbf2b0a11639241779745-Kurtas_Dk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/12/11/314e5e3a-0ce4-4ab3-90a3-7d02d335dbb21639241779725-Casual-Wear_Desk.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides w3-animate-right">
          <img
            src="https://assets.myntassets.com/f_webp,w_980,c_limit,fl_progressive,dpr_2.0/assets/images/2021/11/16/11cc5325-37c6-4490-9adb-6f09ccb2a0781637049244895-luxe-banner.jpg"
            style="width: 100%"
          />
        </div>
      </div>
      <div style="text-align: center">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>

Usually, classes in JavaScript are presented like this:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    return this.calcArea();
  }
  calcArea() {
    return this.height * this.width;
  }
}

As a fan of functional programming and as someone who want to make code scalable, I am tempted to have like this for the whole app instead:

calcArea({height, width}) {
    return height * width;
  }

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    return calcArea(this);
  }
}

Basically transform classes into structures and make all methods with related functions abstracted. This way I can easily export the calcArea function
Does this make sense, I would like to hear some thoughts on this, are there good articles about these architectures approaches?
Thank you

I have built an autocomplete in React using Chakra UI for styling.

When I fill in the form using the Autocomplete however, React-Hook-Form seems to think I haven’t filled in the fields because they throw the validation error to console.

I pass the ref along to the input which should be all it takes to register these fields.

The form code is:

const test: AutoCompleteSuggestions[] = [
    {key: "US", value: "USA"},
    {key: "UK", value: "United Kingdom"},
]
function onSubmit(values: QueryFormParams) {
    console.log('V'); //Never gets called
}
return (

                <form onSubmit={handleSubmit(onSubmit)}>
                    <FormControl isInvalid={errors.name}>
                                <AutoComplete
                                    {...register('selectedDeparture', {
                                        required: 'Select a departure',
                                    })}
                                    placeholder={'Departure country...'}
                                    isValid={v => setIsItemSelected(v)}
                                    suggestions={test}
                                />
                    </FormControl>
              </form>
)

The autocomplete code is as follows:

import React, {Ref, useState} from 'react';
import {Input, Table, Tbody, Td, Tr, VStack} from '@chakra-ui/react';

type AutoCompleteProps = {
    suggestions: AutoCompleteSuggestions[]
    isValid: (b: boolean) => void
    placeholder: string
}

export type AutoCompleteSuggestions = {
    key: string,
    value: string
}

// eslint-disable-next-line react/display-name
export const AutoComplete = React.forwardRef(({suggestions, isValid, placeholder}: AutoCompleteProps, ref: Ref<HTMLInputElement>) => {
    
    const [filteredSuggestions, setFilteredSuggestions] = useState<AutoCompleteSuggestions[]>();
    const [showSuggestions, setShowSuggestions] = useState<boolean>(false);
    const [userInput, setUserInput] = useState<string>('');

    function onChange(e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) {
        console.log('Changing', userInput, e.currentTarget.value);
        const newUserInput = e.currentTarget.value;
        if (!newUserInput) {
            //setActiveSuggestion(-1);
            setFilteredSuggestions([]);
            setShowSuggestions(false);
            isValid(true);
            setUserInput(e.currentTarget.value);
        }
        const filteredSuggestions = suggestions.filter(suggestion => suggestion.value.toLowerCase().startsWith(userInput.toLowerCase()));
        //setActiveSuggestion(e.target.innerText);
        setFilteredSuggestions(filteredSuggestions);
        setShowSuggestions(true);
        isValid(false);
        setUserInput(e.currentTarget.value);
    }

    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    function onClick(e: MouseEvent<HTMLLIElement, MouseEvent>) {
        console.log('Clicked', e.target.innerText);
        setFilteredSuggestions([]);
        setShowSuggestions(false);
        isValid(true);
        setUserInput(e.target.innerText);
    }

    let suggestionsListComponent;

    if (showSuggestions && userInput) {
        if (filteredSuggestions?.length) {
            suggestionsListComponent = (
                <Table className={'suggestions'} position={'absolute'} top={10} left={0} right={0} variant='simple' zIndex={999}>
                    <Tbody>
                        {filteredSuggestions?.map((suggestion, index) => {
                            return (
                                <Tr key={index}
                                    _hover={{
                                        background: 'gray.200',
                                        color: 'green',
                                    }}
                                    onClick={onClick}>
                                    <Td>
                                        <span className={'selectedText'}>{suggestion.value}</span>
                                    </Td>
                                </Tr>
                            );
                        })}
                    </Tbody>
                </Table>
            );
        } else {
            suggestionsListComponent = (
                <div className="no-suggestions">
                    <em>No countries found for that input!</em>
                </div>
            );
        }
    }

    return (
        <>
            <VStack position={'relative'}>
                <Input
                    ref={ref}
                    type="text"
                    onChange={onChange}
                    value={userInput}
                    placeholder={placeholder}
                />
                {suggestionsListComponent}
            </VStack>
        </>
    );
});

export default AutoComplete;

I’m trying to make a loop to my game and I found this solution, but I’m struggling with making the function to cancel the loop. Here is my class where I’m getting the animation frame and I have function like “start”, which I’m calling when I want to start the game loop.

class Engine {
  static renderFrame = getRequestAnimationFrame();

  tick() {
    console.log("test");
    Engine.renderFrame(() => {
      this.tick();
    });
  }
  
  start() {
    // Start the game ticking
    Engine.renderFrame(() => {
      this.tick();
    });
  }
}

Here is the “getRequestAnimationFrame” function, which I’m calling.

export const getRequestAnimationFrame = () => {
  const fallback = callback => setTimeout(callback, 1000 / 30);
  return (requestAnimationFrame || fallback).bind(window);
};

This is the function I’m trying to make, which should stop the game loop and also when I’ll call again “start” function it should be looping again, but nothing I tried worked (it probably isn’t even close).

end() {
  (Engine.renderFrame).unbind(window);
}

Some time ago I started trying to develop a music BOT for discord, but along the way I had several failures and I can’t run the script. The same goes on giving the errors below:

throw new RangeError(‘BITFIELD_INVALID’, bit);
^

RangeError [BITFIELD_INVALID]: Invalid bitfield flag or number: WEBHOOKS_UPDATE.
at Function.resolve (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:152:11)
at C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:147:54
at Array.map ()
at Function.resolve (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcutilBitField.js:147:40)
at Client._validateOptions (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcclientClient.js:546:33)
at new Client (C:UserssantoÁrea de TrabalhoBot Música HCKnode_modulesdiscord.jssrcclientClient.js:73:10)
at Object. (C:UserssantoÁrea de TrabalhoBot Música HCKmusicBot.js:2:13)
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) {
[Symbol(code)]: ‘BITFIELD_INVALID’
}

How do websites know that the same computer is using 2 different accounts.. for example to avail a free trial period. I used up the free trial in one account and made another.. but they detected that I already used it up. Is my IP stored, if so can vpn bypass it?

are there any difference in script tag defer attribute placement? before src or after src?.

https://i.stack.imgur.com/6T42V.png

Hi I want to create a web page which takes a number as input then Even or ODD background color changes depending upon the number for eg if I enter 2 then Odd background color becomes gray and even background color becomes Green, I hope u understand what I want to do, the thing is I want to place the input field in the middle like in the picture, Can anyone help me how to do that? it would be very helpful for future purposes also, Thank you!!!!

I’m building an Edge extension. I’m trying to get the exact same element as this question asks, but I want to use JS, not Selenium.
Element

I’m running the JS through my extension’s background script. In the future, I would like the popup to have a button and that button to read the syllable on screen.

The provided solution is in Selenium and I’d like to transpile it into JS.
driver.switch_to_frame(driver.find_element_by_xpath("//div[@class='game']/iframe[contains(@src,'jklm.fun')]"))

If none of this works, I guess I’ll have to use optical text recognition.

Here’s manifest.json

{
    "name": "myName",
    "description": "myDescription",
    "version": "1.0.0",
    "manifest_version": 3,
    "icons": {
        "128": "myIcon.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://jklm.fun/*"
            ],
            "js": [
                "js/myScript.js"
            ]
        }
    ]
}

Inside js folder, here’s myScript.js

console.log('myscript is running')

const syllableHandler = () => { 
    const iframe = document.getElementsByTagName("iframe")
    console.log(iframe?.[0]?.contentWindow)
}

document.addEventListener('keydown', syllableHandler)

i have this code. I need to add an IF condition at the end so that it adds a “mr.” if they check the male gender and “miss.” if check female.

<%@ LANGUAGE="Javascript" %>
<HTML>
    <HEAD>
        <META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <TITLE>Main Page</TITLE>
    </HEAD>

    <BODY TopMargin="0" Leftmargin="0">
        <form action="./ask.asp" method="post">
            Student name: <input type="text" name="name" size="20"><br><br>

            Sex:
            <input type="radio" name="choice" value="Male" id="choice-Male">
            <label for="choice-Male">Male</label><br>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

            <input type="radio" name="choice" value="Female" id="choice-Female">
            <label for="choice-Female">Female</label><br><br>       
            
            <input type="submit" value="Submit Form"><br>
        </form>

        <%
            Response.Write("Thanks " + Request.Form("name"))
        %>      
    </BODY>
</HTML>