Category: javascript

I have a node server that sends an mp4 video stream and a front-end that consumes this video through an xmlhttprequestto load the video buffer, but this solution became slower on lower internet connections compared to normal method of the tag (which makes a few-byte ‘media’ request in the network tab). Is there any way to improve the loading of videos without using the internal element of ?

New date does not overwrite executionContext date retrived.

Hi!
I have a javascript that’s calculating the end date based off the start date. The function triggers onChange for the start date field. But also before that, sets a default time for both start- and end date. This only happens when it is a create form.

The issue here is that when opening a create form, I retrieve the start and end date from the executionContext and sets the default time for both fields. Afterwards the onChange function runs, where we once again retrieves the start and end date fields from executionContext, calculates the new end date based off the retrieved start date, and makes sure that the previous end date time is set on the new end date. The time that I get is the first one caught by the executionContext and not the default time that I updated it to.

Is there some way for me to get the new value (the default time) and fetch that in the onChange function via the executionContext, without having to create a new separate js? When is the executionContext updated, because the form does get the default end time for a millisecond before getting the onChange value.

if (typeof (FA) == "undefined") { FA = {}; }

FA.Event = {
    formContext: null,
    OnLoad: function (executionContext) {
        this.formContext = executionContext.getFormContext();

        // Run on Create form
        if (this.formContext.ui.getFormType() === 1) {
            if (this.formContext.getAttribute("course_id").getValue() != null) {
                FA.Event.SetEndDate(executionContext);
            }
            if (this.formContext.getAttribute("startdate").getValue() != null) {
                FA.Event.SetDefaultStartTime(executionContext);
            } else {
                alert("startdate was null");
            }

            if (this.formContext.getAttribute("enddate").getValue() != null) {
                FA.Event.SetDefaultEndTime(executionContext);
            } else {
                alert("enddate was null");
            }
        }

        // Activates onchange events
        this.formContext.getAttribute("startdate").addOnChange(FA.Event.SetEndDate);
        this.formContext.getAttribute("course_id").addOnChange(FA.Event.SetEndDate);
    },
    SetDefaultStartTime: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var startDate = formContext.getAttribute("startdate").getValue();

        startDate.setHours(9, 30, 0);

        formContext.getAttribute("startdate").setValue(startDate);
    },
    SetDefaultEndTime: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var endDate = formContext.getAttribute("enddate").getValue();

        endDate.setHours(17, 0, 0);

        formContext.getAttribute("enddate").setValue(endDate);
    },
    SetEndDate: function (executionContext) {
        var formContext = executionContext.getFormContext();
        var startDate = formContext.getAttribute("startdate").getValue();
        var endDate = formContext.getAttribute("enddate").getValue();

        if (formContext.getAttribute("course_id").getValue() != null) {

            // Get course
            var courseId = formContext.getAttribute("course_id").getValue()[0].id;

            // Get days
            Xrm.WebApi.retrieveRecord("course", courseId, "?$select=days").then(
                function success(result) {
                    console.log("Retrieved values: Days: " + result.days);

                    // Round days up
                    var days = Math.ceil(result.days * Math.pow(10, 0)) / Math.pow(10, 0);
                    console.log("Days rounded up where decimal result: " + days)

                    var newEndDate = new Date(startDate);

                    newEndDate.setHours(endDate.getHours(), endDate.getMinutes(), 0);
                    newEndDate = addDays(newEndDate, farDays);

                    alert("newenddate: " + newEndDate);

                    //sets enddate
                    formContext.getAttribute("enddate").setValue(newEndDate);
                },
                function (error) {
                    console.log(error.message);
                    // handle error conditions
                }
            );
        }
        else {
            console.log("End date was not calculated.");
        }

        function addDays(date, days) {
            var newDate = new Date(date);
            newDate.setDate(date.getDate() + days);
            return newDate;
        }
    }
}

Ok, I’m relatively new to js modules, I tried to find an answer to this question but till now I didn’t. I was used to pack all the dependencies in one big js file, shared between several pages. I then loaded another page-specific js file after the shared ‘bundle’.

all-pages: shared.js // browser-cached

page-1: page-1-specific.js, loaded after shared.js, uses libraries in shared.js
page-2: page-2-specific.js, loaded after shared.js, uses libraries in shared.js
etc..

Now with modules, if I try to pack several libraries this way, they won’t be available to other js files, since anything inside a module can’t be ‘global’ to the page. Ok.

So I should import dependency libraries on any page-specific js. But this way I would have libraries loaded in every page instead of taking advantage of broeser caching.

So what exactly is the way of doing this with es modules nowadays?

let newProjectForm = document.getElementById("newProjectForm");
projectTitle.textContent = "project";

<div>
    <h1 id="projectTitle">Title</h1>


</div>

I have a website that has multiple pages (all of them are .php). I have a selector in my javascript that selects based on element id and replaces the text but it says in the console that it cannot retrieve the value of null. I used the syntax document.getElementById("projectTitle"). Is there a different way to target the page I want to get the element from or is there something else I’m missing?
Also, the header with the links to the .css and .js files are in a separate .php file that is included at the start. The css works.
I added a snippet of the code but the issue is not clear as it works perfectly in the snippet. My pages are, however, .php and about 7 of them in the entire website.

so I know I can use useMemo() or shouldComponentUpdate() to stop unnecessary re-renders in React, but I’m unsure as to why things aren’t working well in my case. I very much appreciate any help

To keep it short and sweet, I have a list that I want to render out, and am pushing child components into that list that I’m slicing to paginate. I do not want the child components (Member) to update when I paginate the entire list, but I do want the list to still be sliceable in order to paginate through the different team members. Currently, when I try to paginate while using the existing setup below, it does not work. However, if I remove shouldComponentUpdate(), it will paginate, but also trigger a re-render of the child components. I simply want the slice targets to change and render difference indices of the list without causing re-renders of each Member.

Sorry if that was confusing to understand- totally makes sense in my head, but probably not on paper.

Below is only the necessary code:

const BuildTeams = ({team}) => {

const [currentIndex, setCurrentIndex] = useState(0)

const teamLength = team?.members.length
const teamList = []

for (var i = 0; i < teamLength; i++) {
teamList.push(
        <div className="teamMember>
            <Member data={team}/>
        </div>
   );
 }

// Function used to change state/paginate
function handleChangeIndex(targetInd) {
const target = currentIndex + targetInd;
if (target >= teamList.length) {
    setCurrentIndex(0)
} else setCurrentIndex(target)
}

return <div className="teamCtr>
{teamList.slice(currentIndex,currentIndex+1)}
{teamLength > 1 && <button id="arrow" onClick={()=>{handleChangeIndex(1)}}>VIEW MORE <BiRightArrowAlt style={{fill:'white', transform: 'translateY(2px)'}}/></button>}
</div>;
};

export default BuildTeams;

The child component:

class Member extends Component {

shouldComponentUpdate() {
  // Hacky way to refuse updating once the state is creating in order to stop image from re- 
   rendering.
  return false;
}

render() {
 return (
   <div className="member">
     <h2>{this.props.data.name}</h2>
     <img src={`/images/img_${Math.floor(Math.random() * 30) + 1}.jpg`}/>
   </div>
 )
}

export default Member;

I am working on a translate google chrome extension using Vue 3 right now. I define the translate UI as a public independent component that could reuse in many places. This is part of the public component code looks like(the translate UI was defined in the template.html):

import '../fontello/css/selection-translator.css';
import './style.scss';
import { defineComponent } from 'vue';
import widgetMixin from './vue-st';
import chromeCall from 'chrome-call';
import locales from '../locales';
import template from './template.html';
// const request = require('superagent');


const translateLocales = [];

locales.forEach( locale => {
  const {localeId} = locale;

  if ( !localeId.includes( '-' ) || ( localeId === 'zh-CN' || localeId == 'zh-TW' || localeId == 'zh-HK' ) ) {
    translateLocales.push( locale );
  }
} );

const resolvedEmptyPromise = Promise.resolve() ,
  noop = ()=> {};

export const BaseTranslation = defineComponent( {
  template ,
  data : ()=>({
    access_token: '',
    locales : translateLocales ,
    showForm : false ,
    query : {
      text : '' ,
      from : '' ,
      to : '' ,
      api : ''
    } ,
    result : {
      error : '' ,
      phonetic : '' ,
      dict : [] ,
      result : [] ,
      link : '',
    }
  }) ,
  created() {
    this.$options.client.on( 'disconnect' , ()=> {
      alert("disconnect");
      this.result = {
        error : 'index连接到翻译引擎时发生了错误，请刷新网页或重启浏览器后再试。'
      }
    } );
  } ,
  computed : {
    apiName() {
      return {
        YouDao: '有道翻译',
        Google: '谷歌翻译',
        GoogleCN: '谷歌翻译（国内）',
        BaiDu: '百度翻译',
        Reddwarf: '红矮星翻译'
      }[this.query.api] || ''
    }
  },
  methods : {

    /**
     * 翻译快捷键：Ctrl + Enter
     * @param event
     */
    ctrlEnter( event ) {
      if ( event.ctrlKey ) {
        this.safeTranslate();
      }
    } ,

    /**
     * 仅当有文本时才翻译
     */
    safeTranslate() {
      if ( this.query.text.trim() ) {
        this.translate();
      }
    } ,

    /**
     * 从后台网页获取查询结果
     * @returns {Promise}
     */
    getResult() {
      if ( this.$options.client.disconnected ) {
        alert("disconnectedddd");
        return resolvedEmptyPromise;
      }
      return this.$options.client
        .send( 'get translate result' , this.query , true )
        .then( resultObj => {
          debugger;
          if ("200" !==resultObj.response.statusCode||"200" !== resultObj.response.resultCode) {
            let errMsg = {
              NETWORK_ERROR: '网络错误，请检查你的网络设置。',
              API_SERVER_ERROR: '接口返回了错误的数据，请稍候重试。',
              UNSUPPORTED_LANG: '不支持的语种，请使用谷歌翻译重试。',
              NETWORK_TIMEOUT: '查询超时：5 秒内没有查询到翻译结果，已中断查询。'
            }[resultObj.code]
            if (resultObj.error) {
              errMsg += resultObj.error
            }
            this.result = {error: errMsg}
          } else {
            const {phonetic} = resultObj;
            this.result = resultObj;
            this.result.error = '';
            this.result.phonetic = resultObj.response.result.translation;
          }
        } , noop );
      // 只有在一种特殊情况下才会走进 catch 分支:
      // 消息发送出去后但还没得到响应时就被后台断开了连接.
      // 不过出现这种情况的可能性极低.
    } ,

    /**
     * 交换源语种与目标语种
     */
    exchangeLocale() {
      const {to,from} = this.query;
      this.query.to = from;
      this.query.from = to;
    } ,

    /**
     * 打开设置页
     */
    openOptions() {
      this.$options.client.send( 'open options' );
    } ,

    /**
     * 复制文本
     * @param {String|String[]} textOrTextArray
     * @param {MouseEvent} event
     */
    copy( textOrTextArray , event ) {
      if ( Array.isArray( textOrTextArray ) ) {
        textOrTextArray = textOrTextArray.join( 'n' );
      }
      this.$options.client.send( 'copy' , textOrTextArray );

      const {target} = event ,
        original = target.textContent;
      target.textContent = '已复制';
      setTimeout( ()=> target.textContent = original , 2000 );
    } ,
    /**
     * 添加单词
     * @param {String|String[]} textOrTextArray
     * @param {MouseEvent} event
     */
    addWord(text, event) {
      chromeCall('storage.local.get', ['access_token'])
        .then((res) => {
          if (res.access_token) {
            this.access_token = res.access_token;
            this.queryWord(text, event);
          } else {
            alert('未绑定扇贝账号，请授权绑定')
            this.gotoAccessToken();
          }
        });
    },
    /**
     * 添加单词
     * @param {String|String[]} textOrTextArray
     * @param {MouseEvent} event
     */
     addGlossary(text, event) {
      chromeCall('storage.local.get', ['reddwarf_access_token'])
        .then((res) => {
          if (res.access_token) {
            this.access_token = res.access_token;
            this.queryWord(text, event);
          } else {
            alert('未绑定红矮星账号，请授权绑定')
            this.gotoReddwarfAccessToken();
          }
        });
    },
    gotoAccessToken() {
      chrome.runtime.sendMessage({ action: 'shanbay_authorize' })
    },
    gotoReddwarfAccessToken() {
      chrome.runtime.sendMessage({ action: 'reddwarf_authorize' })
    },
    queryWord(text, event) {
      let params = { word: text, access_token: this.access_token }
      request.get('https://api.shanbay.com/bdc/search/')
        .query(params)
        .end((err, res) => {
          switch (res.status) {
            case 200:
              let info = res.body
              if (info.status_code == 0) {
                this.realAddWord(info.data.id, event);
              } else {
                alert(`查词错误, ${info.msg}`)
              }
              break;
            case 401:
              alert('token 失效，请重新授权')
              this.gotoAccessToken()
              break;
            case 429:
              alert('今日请求次数过多')
              break;
            default:
              alert(`未知错误, ${err}`)
              break;
          }
        })
    },

    realAddWord(id, event) {
      let params = { id: id, access_token: this.access_token }
      request.post('https://api.shanbay.com/bdc/learning/')
        .type('form')
        .send(params)
        .end((err, res) => {
          switch (res.status) {
            case 200:
              let info = res.body
              if (info.status_code == 0) {
                const { target } = event;
                let original = target.textContent;
                target.textContent = '已添加';
                setTimeout(() => target.textContent = original, 2000);
              } else {
                alert(`添加单词发生错误, ${info.msg}`)
              }
              break;
            default:
              alert(`添加单词发生错误, ${err}`)
              break;
          }
        })
    },

    /**
     * 播放语音
     * @param {String|String[]} textOrTextArray
     * @param {String} [lang] - 文本的语种
     */
    play( textOrTextArray , lang ) {
      if ( Array.isArray( textOrTextArray ) ) {
        textOrTextArray = textOrTextArray.join( 'n' );
      }
      this.$options.client.send( 'play' , {
        text : textOrTextArray ,
        api : this.query.api ,
        from : lang
      } );
    }
  } ,
  mixins : [ widgetMixin ]
} );

what I am trying to do is that reuse the component in the google chrome popup UI. when user click the extension, shows the public component that define the translation UI. this is the component that popup page would load when clicked:

import client from './client';
import getOptions from '../public/default-options';
import {read} from '../public/clipboard';
import { defineComponent,h } from 'vue';
import BaseTranslation from '../public/widget/index';


export default defineComponent( { 
  client ,
  async compiled() {
    this.inline = true;
    this.showForm = true;
    const {defaultApi , autoClipboard} = await getOptions( [ 'defaultApi' , 'autoClipboard' ] );

    this.query.api = defaultApi;
    if ( autoClipboard ) {
      this.query.text = read();
      this.safeTranslate();
    }
  } ,
  ready() {
    setTimeout( ()=> this.$els.textarea.focus() , 200 );
  },
  render() {
    return BaseTranslation;
  }
});

as you can see, I am tried to return the public BaseTranslation component which was import from the base component I am previously defined. seems did not work, I did not know how to resue the public component right now. what should I do to return the public component. In Vue 2, it could use the Vue.extend, I Vue 3, what is the right way to reuse this component in the render function?

Given this, im getting this output…

import { Client } from '@twilio/conversations';

... crap....

this.client = new Client(this.token);
      this.client.on('stateChanged', state => {
        if (state === 'initialized') {
          this.ready = true;
          this.emitter.emit('ready');

... more stuff....

browser.js?edd1:6945 Uncaught (in promise) TypeError: twilsock.InitRegistration is not a constructor
at new Client (browser.js?edd1:6945:1)
at _class._createSuperInternal (browser.js?7253:148:1)
at new _class (browser.js?7253:239:1)
at eval (TwilioProvider.js?d6b9:149:1)
at new Promise (<anonymous>)
at TwilioProvider.start (TwilioProvider.js?d6b9:135:1)
at eval (start.js?e8a3:39:1)
at Object.eval [as dispatch] (index.js?4dd3:11:1)
at dispatch (<anonymous>:10607:80)
at eval (redux.js?a67e:483:1)

I’ve stopped the debugger at that line and this is the value of twilsock on that line… any suggestions?

I’ve written some basic JS to set the value of a field if the conditions have been met but I’m finding that the first two lines work i.e. the value sets as I expect but condition 3 and 4 default to conditions 1 and 2 respectively.

So, if all the conditions of the first line are met then the field ‘le_queue’ is set to Office 1 – Cash but if all the conditions of line 3 are met then then value of the ‘le_queue’ is not set to Office 1 – Client Cash but instead set to the value stated in line 1

if ('sel_paybasis',label === 'Section 12'&&'sel_paymethod',label === 'Cash'&&'sel_payoffice',label === 'Office 1') 
    {
        KDF.setVal('le_queue','Office 1 - Cash');
    }
    else if ('sel_paybasis',label === 'Section 17a'&&'sel_paymethod',label === 'Cash'&&'sel_payoffice',label === 'Office 2') 
    {
        KDF.setVal('le_queue','Office 2 - Cash');
    }
    else if ('sel_paybasis',label === 'Corporate Appointee'&&'sel_paymethod',label === 'Cash'&&'sel_payoffice',label === 'Office 1) 
    {
        KDF.setVal('le_queue','Office 1 - Client Cash');
    }
    else if ('sel_paybasis',label === 'Corporate Appointee'&&'sel_paymethod',label === 'Cash'&&'sel_payoffice',label === 'Office 2') 
    {
        KDF.setVal('le_queue','Office 2 - Client Cash');
    }
    else 
        KDF.setVal('le_queue','');

I’m stuck on solving this.

On my database I have a field of start time and end time, some goes overnight so it would look like 20:00 – 05:00 and some are 01:00 – 13 :00

Are there any built in function on this on jquery?
I’ve been having problems with nested ifs on this one.

So I have a profile page and there is an edit button, when I click the edit button you can edit the information on the page, the thing is the second event listener won’t work, when I click the button done which is appeared after clicking the edit button, nothing changes

editButton.addEventListener('click', e => {
  textBox.removeAttribute('readonly');
  textArea.removeAttribute('readonly');
  textBox.style.borderBottom = '1px gray solid';
  pwbox.style.display = "flex";
  doneButton.style.display = "block";
  editButton.style.display = 'none';
  dateBox.style.display = "none";
});

doneButton.addEventListener('click', e => {
  textBox.setAttribute("readonly");
  textBox.style.removeProperty('background color');
  textBox.style.removeProperty('border-bottom');
  pwbox.style.display = "none";
  doneButton.style.display = "none";
  editButton.style.display = 'block';
  dateBox.style.display = "flex";
});

<div class="infobox">
  <input type="text" name="uname" class="uname txt-box" value="<?php echo $usersName ?>" readonly autocomplete="off">
  <input type="text" name="email" class='email' value="<?php echo $usersEmail ?>" readonly>
  <div class="pw-box">
    <label for="password">Password</label>
    <input type="password" name="password" class="password">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" name="conf-password" class="conf-password">
  </div>
  <div class=" date-joined">
    <small>Date Joined</small>
    <div>01/01/01</div>
  </div>

</div>
<div class="description-box">

  <textarea name="description" class="description" cols="30" rows="10" placeholder="Let me describe you!" readonly></textarea>
  <button class='edit-btn'>Edit</button>
  <button class="done-btn">Done</button>

</div>

So, I ran into a weird bug in javascript.

const obj1 = await chartService.callAPIConversion({ unix_timestamp: Math.floor(activity[0].createdAt.getTime() / 1000) })

console.log(obj1.usd_price);
//THIS WORKS -> returns proper value

console.log(await (chartService.callAPIConversion({ unix_timestamp: Math.floor(activity[0].createdAt.getTime() / 1000) })).usd_rate);
//THIS DOESNOT WORK -> returns undefined

Why am I not able to get the key without using a variable?

I have a carousel, currently Keen Slider JS – open to changing if what I’m after is easier to achieve with another plugin or simple/custom JS.

Basically I want a simple fading carousel that autoplays and loops (might add left/right arrows later), has a caption for each slide and numbered fraction pagination. For example “1 / 5” to indicate what slide we’re on.

Due to my layout (see CodePen) I thought might be best achieved using a data attribute as I want to display the caption and pagination outside/way from the carousel. Ideally the text fading slightly as it changes.

Open to other solutions but this is the only way I could think of it working with the caption outside of the slider/plugin?

I have added my code into the post but it doesn’t display very well so it might be best checking the CodePen: https://codepen.io/moy/pen/KKywKXN

Also, if you spot my really high value of 5000000 for the duration of the fade …it doesn’t seem to do anything no matter what value I add? Any idea why?

Thanks in advance!

var slider = new KeenSlider("#my-keen-slider", {
   loop: true,
   defaultAnimation: {
      duration: 500000
   },
   detailsChanged: (s) => {
      s.slides.forEach((element, idx) => {
         element.style.opacity = s.track.details.slides[idx].portion
      })
   },
   renderMode: "custom"
})

html {
  background: white;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: white;
  -webkit-text-size-adjust: 100%;
}

/**
 * Base `body` styling.
 */
 
body {
  background-color: transparent;
  color: black;
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 3.6rem;
  font-weight: inherit;
  line-height: 1;
  margin: 0 0 24px;
  padding: 0;
}

p {
  margin: 0 0 24px;
  padding: 0;
}

img {
  border: 2px solid black;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
}

.gallery {
  box-sizing: border-box;
}

.grid__item-footer {
  display: flex;
  margin-top: auto;
}
.grid__item-footer p {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
}

.grid__item-footer .align-right {
  justify-content: flex-end;
}

@media only screen and (min-width: 1000px) {
  .grid {
    background-color: black;
    display: grid;
    grid-column-gap: 2px;
    grid-template-columns: repeat(12, 1fr);
    height: 100vh;
    margin: 0 64px;
  }

  .grid__item {
    background-color: white;
    display: flex;
    flex-direction: column;
    grid-column: span 6;
    height: 100vh;
  }

  .grid__item-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 24px;
    overflow: hidden;
    width: 100%;
  }

  .grid__item-main--gallery {
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
    align-self: center;
    justify-self: center;
    text-align: center;
    overflow: hidden;
  }

  .gallery {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  .gallery__inner {
    box-sizing: border-box;
    height: 100%;
    width: auto;
  }

  .grid__item-footer {
    border-bottom: 2px solid black;
    box-sizing: border-box;
    height: 64px;
    padding: 0 24px;
    position: fixed;
    bottom: -64px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
  }
  .grid__item-footer p {
    margin-bottom: 0;
  }

  .grid__item--gallery {
    padding: 24px;
  }
  .grid__item--gallery .grid__item-main {
    height: 100%;
    margin-bottom: 0;
  }
  .grid__item--gallery .gallery {
    height: 100%;
  }
  .grid__item--gallery .grid__item-footer {
    left: auto;
    right: 0;
    transform: rotate(90deg);
    transform-origin: top right;
  }

  img {
    box-sizing: border-box;
    height: auto;
    max-height: 100%;
    width: auto;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: unset;
  }
}
/* Carousel CSS */
.fader {
  height: 50vw;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .fader {
    height: 300px;
  }
}
.fader__slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}

.fader img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

<script src="https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.js"></script>

<div class="grid grid--alt aspect">

  <div class="grid__item">

    <div class="grid__item-main">
      <h1 class="brand-name">Brand Name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

    <div class="grid__item-footer">
      <p class="contrast"><span class="contrast__switch"></span>Contrast</p>
    </div>

  </div>

  <div class="grid__item grid__item--gallery">

    <div class="grid__item-main">

      <div class="gallery">

        <div id="my-keen-slider">
          <div class="fader__slide keen-slider__slide" data-caption="product name 1" data-slide="1">
            <img src="https://www.fillmurray.com/900/1200" data-caption="product name 1" data-slide="1" />
          </div>
          <div class="fader__slide keen-slider__slide">
            <img src="https://www.fillmurray.com/g/900/1200" data-caption="product name 2" data-slide="2" />
          </div>
        </div>

        <div class="grid__item-footer">
          <p>Name of Project</p>
          <p class="gallery-count align-right"><span class="current">1</span>&nbsp;/&nbsp;2</p>
        </div>

      </div>

I am currently building a tool that should extract the Core Web Vitals metrics of a URL.

With the API i can receive a JSON object wich i can access with JSONPath.

I would like to use a forEach loop to input the data into the HTML-fields.

Now my question is, how can i access child nodes of a JSON without using their names.

document.querySelectorAll('[data-section^="cww"]').forEach((nodes, index) => {
    console.log(values.body.record.metrics);
});

{
    "key": {
        "origin": "https://developer.mozilla.org"
    },
    "metrics": {
        "cumulative_layout_shift": {
            "histogram": [
                {
                    "start": "0.00",
                    "end": "0.10",
                    "density": 0.9377813344003197
                },
                {
                    "start": "0.10",
                    "end": "0.25",
                    "density": 0.039611883565069506
                },
                {
                    "start": "0.25",
                    "density": 0.022606782034610366
                }
            ],
            "percentiles": {
                "p75": "0.01"
            }
        },
        "first_contentful_paint": {
            "histogram": [
                {
                    "start": 0,
                    "end": 1800,
                    "density": 0.9419767907162874
                },
                {
                    "start": 1800,
                    "end": 3000,
                    "density": 0.03741496598639458
                },
                {
                    "start": 3000,
                    "density": 0.02060824329731889
                }
            ],
            "percentiles": {
                "p75": 841
            }
        },
        "first_input_delay": {
            "histogram": [
                {
                    "start": 0,
                    "end": 100,
                    "density": 0.9863863863863849
                },
                {
                    "start": 100,
                    "end": 300,
                    "density": 0.008308308308308296
                },
                {
                    "start": 300,
                    "density": 0.0053053053053052955
                }
            ],
            "percentiles": {
                "p75": 5
            }
        },
        "largest_contentful_paint": {
            "histogram": [
                {
                    "start": 0,
                    "end": 2500,
                    "density": 0.9460068054443531
                },
                {
                    "start": 2500,
                    "end": 4000,
                    "density": 0.03467774219375491
                },
                {
                    "start": 4000,
                    "density": 0.019315452361889692
                }
            ],
            "percentiles": {
                "p75": 1135
            }
        }
    }
}

Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self'”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-Zddhh56x44NMbPzNMovPr5UnNjRCyKyQNh0SJiuYnsw=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Failed to load resource: the server responded with a status of 500 (Internal Server Error) /favicon.ico:1

[index.html page][1]

I would like to change the font color and the box width in my chart but it doesn’t work.
I tried it a lot of way but cant solve it.

Also it must be better solution to edit borderColor, pointRadius, etc. then set it in every label.

Sorry for my stupid question, i am beginner.

Here is my chart component:

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'ChanceChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false,
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

And here is my app:

<template>
    <div id="chart">
      <ChanceChart :chartData="chartData" />
    </div>
</template>

<script>
import ChanceChart from "../components/ChanceChart.vue";

export default {
  components: {
    ChanceChart
  },

  computed: {
    chartData() {
      return {
        labels: this.enemysCards.map((x, index) => index + 1),
        datasets: [
          {
            label: "Enemy's Chance",
            borderColor: "#1161ed",
            borderWidth: 2,
            pointRadius: 0,
            color: "#fff",
            data: this.enemysCards,
            defaultFontColor: "#fff",
          },
          {
            label: "My Chance",
            borderColor: "#f87979",
            borderWidth: 2,
            pointRadius: 0,
            data: this.myCardsFilled,
          },
          {
            label: "Enemy's Avarage",
            borderColor: "rgb(238, 255, 0)",
            borderWidth: 2,
            pointRadius: 0,
            data: this.avgArray,
          },
          {
            label: "Enemy's Median",
            borderColor: "rgb(255, 0, 191)",
            borderWidth: 2,
            pointRadius: 0,
            data: this.medianArray,
          },
          {
            label: "Standard Deviation",
            borderColor: "#fff",
            borderWidth: 2,
            pointRadius: 0,
            data: this.upDev,
          },
          {
            label: "Standard Deviation",
            borderColor: "#fff",
            borderWidth: 2,
            pointRadius: 0,
            data: this.downDev,
          },
        ],
        options: {
          plugins: {
            legend: {
              labels: {
                boxWidth: 0,
                font: {
                  color: "#fff",
                },
              },
            },
          },
        },
      };
    },
  },

Can anyone help me?