Is there a difference between setting aria-hidden on an element in JavaScript using the ariaHidden property instead of the aria-hidden attribute?

Example:

myElement.ariaHidden = isOpen ? "false" : "true";

or…

myElement.setAttribute("aria-hidden", isOpen ? "false" : "true");

I haven’t seen a lot of use of the former example, usually it’s always the latter using the setAttribute() method. Is it just syntactic preference, or is there a performance consideration?

I have created a component(modalParent) having lightning modal(myModal) using SLDS.
When the modal is opened, ideally it should get auto focus but that is not happening.
The focus is on the background interactive items.

I want the focus to move to modal.
I have tried setting focus to heading inside modal using javascript focus in renderedCallback but that is also not working as nothing gets displayed when renderedCallback is called.

modalParent.html

<template>
    <div class="slds-form-element slds-form-element_stacked">
        <label class="slds-form-element__label">"Parent Modal"</label>

        <!-- Modal Component -->
        <template if:true={isModalOpen}>
            <c-my-modal onclose={handleModalClose} content={_value} class="parentFromModal"></c-my-modal>
        </template>

        <div class="slds-form-element__control odc-rich-text" disabled={disabled} title="edit">
            <!-- Editable when not disabled -->
            <template if:false={disabled}>
                <a href="javascript:void(0);"
                   class="slds-box odc-rich-text-action rich-text-container"
                   onclick={openModal}
                   aria-label={_ariaLabel}
                   role = "button"
                   title="Edit Rich Text Content">
                    <lightning-formatted-rich-text value={_value}></lightning-formatted-rich-text>
                </a>
            </template>
            <!-- Non-clickable view when disabled -->
            <template if:true={disabled}>
                <div class="slds-box odc-rich-text-action">
                    <lightning-formatted-rich-text value={_value}></lightning-formatted-rich-text>
                </div>
            </template>
        </div>
    </div>
</template>

modalParent.js

import { api, track, LightningElement } from 'lwc';

export default class ModalParent extends LightningElement {
    @api disabled;
    @api label;
    @api fieldLevelHelp;
    _value;
    @track isModalOpen = false;
    @api get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
    }

    disabled = false;
    label = "Instructions Label"

    renderedCallback() {
    }

    openModal() {
        this.isModalOpen = true;
    }

    handleModalClose(event) {
        const newValue = event.detail;
        if (newValue !== null && newValue !== undefined && newValue !== this._value) {
            this._value = newValue;
            this.dispatchEvent(new CustomEvent('change'));
        }
        this.isModalOpen = false;
    }
}

myModal.html

<template>
    <div class="slds-modal slds-fade-in-open odc_modal" role="dialog" aria-label="I am aria label" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" onkeydown={handleKeyDown} tabindex="0">
      <div class="slds-modal__container" tabindex="-1">
              <header class="slds-modal__header">
                  <h2 class="slds-text-heading_medium">My Modal</h2>
                  <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCancel}>
                      <lightning-icon icon-name="utility:close" alternative-text="Close" size="small"></lightning-icon>
                  </button>
              </header>
  
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <lightning-button onclick={handleOptionClick}>
                  ButtonLabel
              </lightning-button>
            </div>
  
              <footer class="slds-modal__footer">
                  <lightning-button label="Cancel" onclick={handleCancel}></lightning-button>
                  <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
              </footer>
          </div>
      </div>
      <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
    </div>
  </template>

myModal.js

import { LightningElement, api } from 'lwc';

export default class MyModal extends LightningElement {
    @api content = '';

    handleKeyDown(event) {
        event.stopPropagation();
        const cardElement = this.template.querySelector('.odc_modal');
        console.log("Printing the data");
        console.log(event.key);
        console.log(cardElement);
        console.log("Now printing event target");
        console.log(event.target);
        if (event.target === cardElement && event.key === 'Escape') {
            this.handleCancel();
        }
    }

    handleSave() {
        const tinyMceEditor = this.template.querySelector('builder_omnistudio_common-rich-text-editor');
        const content = tinyMceEditor.getContent();
        const saveEvent = new CustomEvent('close', {
            detail : content
        });
        this.dispatchEvent(saveEvent);
    }

    handleCancel() {
        this.dispatchEvent(new CustomEvent('close'));
    }
}

I’m trying to make a game of sorts, and it needs a time limit. I’m trying to achieve this through a timer that counts down from 2 minutes, but it isn’t working. I’m a new coder, just started in August, so my coding is likely not the most efficient, but my knowledge of JavaScript is limited. Can someone help?

This is what my code looks like:

const TIMER_MINUTES = 2;
const TIMER_SECONDS = 0;
function timer(){
    var timerMinutes = TIMER_MINUTES;
    var timerSeconds = TIMER_SECONDS;
    var timer = new Text(timerMinutes + ":0" + timerSeconds, "17pt Arial");
    timer.setPosition(CENTER_X - 21, 18);
    timer.setColor(Color.white);
    add(timer);
    while(true){
        if(timerSeconds == 0){
            if(timerMinutes == 0){
                gameOver();
                break;
            }
            timerMinutes -= 1;
            timerSeconds += 59;
        }else{
            timerSeconds -= 1;
        }
        if(timerSeconds < 10){
            setTimeout(function() { timer.setText(timerMinutes + ":0" + timerSeconds) }, 1000);
        }else{
            setTimeout(function() { timer.setText(timerMinutes + ":" + timerSeconds) }, 1000);
        }
    }
}

When I run the code, the text “2:00” successfully pops up, but then a second later it changes to “0:00” without counting down.

I can’t get the addEventListener working, because the console said that it “cannot read property of null”.
I knew it was (the object) either not declared before it was used, or it can’t find the object.

So how do I go about it?

const cell = document.querySelector("object");

 function changeColor() {
        cell.style.backgroundColor="black";
}
 cell.addEventListener("click",changeColor);

/* I intend to change the color of a certain cell in the grid upon clicking on it. */

I have a working example here.
https://jsfiddle.net/kdv5au7w/3/
as u can see it all works well it just looks like crap atm. As you can see once u click in message field all the data is populated to the marker div with listener.

and when i make it look nice it stops working
https://jsfiddle.net/orcam6zs/3/
when I use a flip card if gives this error

var jname = document.getElementById("name");
var jnameValue = jname.value;
document.getElementById("CxName").innerText = 'Phone: '+ jnameValue;
Uncaught TypeError: document.getElementById(...) is null

Now if you click previous button and click next again it will populate after the map div is shown using the script below. Can anyone help me fix the issue? Can anyone explain whats going on? Im assuming it has something to do with the map loading or something. I’ve tried removing the async. I’ve tried placing the code in different locations. Ive looked in the source and inspected and cant see the marker div info window until the map div is visible, so im assuming im loading the map wrong I have an alert that is set when initMap ran after a user clicks on the click map button and not when the page loads so it should work even tho its not visible right??
Can anyone look at my java script and help me?

document.getElementById("markerinfo").addEventListener("click", fillmark);
function fillmark() {

  
var jname = document.getElementById("name");
var jnameValue = jname.value;
document.getElementById("CxName").innerText = 'Name: '+ jnameValue;

var jphone = document.getElementById("phone");
var jphoneValue = jphone.value;
document.getElementById("CxPhone").innerText = 'Phone: '+ jphoneValue;


var jemail = document.getElementById("email");
var jemailValue = jemail.value;
document.getElementById("CxEmail").innerText = 'Email: '+ jemailValue;

var jloc = document.getElementById("location");
var jlocValue = jloc.value;
document.getElementById("CxLoc").innerText = 'Address: '+ jlocValue;

var jyear = document.getElementById("year");
var jyearValue = jyear.value;
document.getElementById("CxYear").innerText = 'Year: '+ jyearValue;

var jmake = document.getElementById("make");
var jmakeValue = jmake.value;
document.getElementById("CxMake").innerText = 'Make: '+ jmakeValue;

var jmodel = document.getElementById("model");
var jmodelValue = jyear.value;
document.getElementById("CxModel").innerText = 'Model: '+ jmodelValue;

if (document.getElementById('yes').checked) {
document.getElementById("CxIns").innerText = 'Insurance: Yes';

}
if (document.getElementById('no').checked) {
document.getElementById("CxIns").innerText = 'Insurance: No';
}

var jbill = document.getElementById("sloc");
var jbillValue = jbill.value;
document.getElementById("CXBill").innerText = 'Billing: '+ jbillValue; 

}

I’m working on a chrome extension where the service worker does all the heavy lifting (functionality, authentication, etc.), and the popup handles the UI. It basically works like this the popup script (popup.js) sends a message to the SW and depending on the response it shows a different screen (interface). Essentially the SW listens for 2 things, a message and/or webRequests. SW code below:

(async () => {
  //put id here
  id = await chrome.storage.sync.get("WFT-Scheduler Calendar ID");

  chrome.webRequest.onHeadersReceived.addListener(callback, filter, []);

  //accept message from popup asking for login status
  chrome.runtime.onMessage.addListener((req, _, sendResponse) => { ...
    })
  // accepts message from popup for other functionality
  chrome.runtime.onMessage.addListener((req, _, sendResponse) => { ...
  });
})();

PROBLEM OCCURS when no handler for the listeners is triggered soon enough and the SW goes inactive. When the popup is eventually opened the SW worker is still inactive and there is no one listening for the message from the popup. Is there a way I can reactivate the SW and check if it is currently active.

I am considering making a persistent service worker but that is not necessary as I only need it to be active when the popup is opened. This would be my last resort.

I am trying to create an e-commerce site with next.js. I want to use this application as a mobile app with capacitor.js. But there is a problem. When I add a new product or create a new category, my mobile application does not update. How can I solve this problem?

Thanks

I am a new to this stuff and have been working to solve a problem I was hoping someone could help me with.

I am looking to automatically delete rows in Column A of all sheets except one [‘Top Level Data’] based on whether the date in Column A is older than 1 week.

function weekOldDelete () {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var s = ss.getActiveSheet();
    var datarange = s.getDataRange();
    var lastrow = datarange.getLastRow();
    var values = datarange.getValues();
    var weekOld = new Date()
    weekOld = new Date(weekOld.getTime()-7*3600000*24)
    var excludes = ['Top Level Data'];
    if (excludes.indexOf(s.getName()) != -1) return;
    for (i=lastrow;i>=2;i--) {
        var tempDate = values[i-1][0];// 
        if (tempDate <= weekOld)
        {
          sheet.deleteRow(i);
        } 
        else {}
    }
}

TLDR: I want to call a function that exists in the .gs files, from an .html file, when I only have the function name as a string held by a variable.

Details:
I have a set of functions that retrieve specific output from a database. These exist in the .gs files. Assume for the sake of this question that the function just returns a list of values.

    function Retrieve_Some_DB_Table()
    {
      return ['option1', 'option2', 'option3'];
    }

I have another function in the .html files that dynamically generates drop down elements. This takes several potential inputs (lists, arrays, an SQL query, a named range in a google sheet, or a function name that returns an array). My issue is executing the last option, calling a function within the .gs files using the function name as a string.

There seems to be a bunch of options (this, eval, window, calling a new constructor, etc.), but all of these seem to have a scope limitations. Since the function is not within the html file, or an imported file, the above options do not connect to the proper function in the .gs files

Is there a way to solve this, without moving the function from the .gs files to the .html files (or duplicating them on both sides)? I have a bunch of routine DB calls that I need to make in the backend, so the functions need to exist there, and moving them would not be feasible.

    GenerateDropDownElementHTML()

    function GenerateDropDownElementHTML()
    {

    var settings = {
              contentList: 
              {                
                databaseQueryFunction: 'Retrieve_Some_DB_Table',
              },
            };

     google.script.run.withSuccessHandler((ret)=> 
     {
       ret.shift();  
       console.log("ret: " + ret)
     }).this[settings.contentList.databaseQueryFunction]()
    }

Here is my site
https://oscario-official.lstv.space/pages/index.html

In the code it works fine on my local file. X-Overflow is disabled. But when i visit the site X-Overflow is Enabled. Even though the code is the same

Site (local)

html

<!DOCTYPE html>
<link id="theme" rel="stylesheet" href="assets/css/dark.css" />
<script src="assets/js/menu.js"></script>
<script src="assets/js/dlswitch.js"></script>
<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
  rel="stylesheet"
/>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="Comingsoon.html">Your account</a>
  <a href="index.html">Home</a>
  <a href="Comingsoon.html">Music</a>
  <a href="Comingsoon.html">VProducts</a>
  <a href="credits.html">Credits</a>
  <a href="services.html">Services</a>
</div>
<head>
  <title>Home | OscarIO ~ Official</title>
  <!-- Use any element to open the sidenav -->
</head>
<span onclick="openNav()" class="material-symbols-outlined" id="sidna"
  >menu</span
>
<body>
  <div id="main">
    <div id="body">
      <div id="welcomebanner">
        <img
          src="assets/css/img/oiobanner.png"
          style="width: 1375px;height: auto; transform: translateX(-30px);"
        />
        <!--Parallax stars and shaders beneath text to look cool.-->
        <h1 class="welcomesign">Welcome to OscarIO ~ Official</h1>
        <p>
          Welcom to OscarIO ~ Official site! Here at OscarIO We pride ourselves
          in quality content made for YOU! We want to make things people want.
          everything from Operating systems. to animation models. And! Thanks to
          <strong>LSTV</strong> For AKENO Site hosting. Also my best friend(and
          owner of <strong>LSTV</strong>) <strong>Lukas / Lukáš</strong> For
          allowing me to host and teaching me everything i know (minus python)
        </p>
        <h1>Who are we?</h1>
        <p>
          We are a group of people wanting to create something BIG. Being apart
          of the <b>LSTV Group</b> and ran by <b>Landan Rivera</b>, We offer
          Quality content and a space to be YOU!
        </p>
        <h1>What is our mission?</h1>
        <p>
          We want to offer and create, Quality content and a space to be YOU!
          where you can learn and grow.
        </p>
        <h1>Who is <b>Landan</b>?</h1>
        <p>
          <strong>Landan Rivera / Skip / Skippynugget</strong> Is the founder of
          <b>OscarIO</b> He is a smalltown Developer Who plans to go into
          Computer Engineering and/or IT. He was inspired to code by minecraft
          and realized there was so much more coding he could do. after
          struggling since 2019 He met <b>Lukas</b> in 2022(i think?) and
          <b>Lukas</b> then helped kickstart his coding by teching him HTML, and
          some basic CSS. After losing contact with <b>Lukas</b> he trained his
          skills eventually learning python and getting better at HTML, and CSS.
          Now he designed this site.
        </p>
      </div>
    </div>
    <p
      class="beeperfontbig"
      style="transform: translateY(-100px) translateX(-50px);height: 1px;"
    >
      nnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnn
    </p>

    <h1>Services</h1>
    <p>
      We offer Multiple services! Including Website design. Hosting, and more!
      All for free!
    </p>
    <p
      class="beeperfontbig"
      style="transform: translateY(-100px) translateX(-50px); height: 1px;"
    >
      nnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnnaznnnnnnnnnnnnnn
    </p>
    <form onsubmit="">
      <label>Name (F & L)</label><br />
      <input type="text" /><br />
      <label>Email</label><br />
      <input type="email" /><br />
      <label>What you need!</label><br />
      <textarea id="desc"></textarea>
      <button type="submit">Start an email!</button>
    </form>
  </div>
  <div id="Overlay" class="stopper"></div>
</body>
<img
  src="assets/svg/settings_80dp_E8EAED_FILL0_wght400_GRAD0_opsz48.svg"
  class="load"
  style="image-rendering: crisp-edges; visibility: hidden;"
  alt="Loading..."
/>

Js

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("Overlay").style.display = "block";
  }
  /* Set the width of
  the side navigation to 0 and the left margin of the page content to 0, and the
  background color of body to white */ function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.getElementById("Overlay").style.display = "none";
  }
  //Only menu code as its the only script used in the code as of now (working on firebase auth)

Css

:root {
    --background: #242526;
    --font: antiquewhite;
    --accent: #333537;
    --accenthover: #56595b;
    overflow-x: hidden;
    overflow-x: hidden;
}

@font-face {
    font-family: "linefont";
    src: url('fonts/fonts/Linefont/Linefont-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: "barcode";
    src: url('fonts/fonts/Libre_Barcode_39_Extended_Text/LibreBarcode39ExtendedText-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "poxel-text";
    src: url('fonts/fonts/Tiny5/Tiny5-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "ubuntu-reg";
    src: url('fonts/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "ubuntu-bold";
    src: url('fonts/fonts/Ubuntu_Mono/UbuntuMono-Bold.ttf') format('truetype');
}

@font-face {
    font-family: "poxel-emojis";
    src: url('fonts/fonts/Yarndings_20/Yarndings20-Regular.ttf') format('truetype');
}

/*Main Panel for all things*/
h1,
h2,
h4,
h5,
h6,
b,
strong {
    color: var(--font);
    font-family: "ubuntu-bold";
}

p {
    color: var(--font);
    font-family: 'ubuntu-reg';
}

body {
    background-color: var(--background);
}


input[type="text"],
input[type="email"],
input[type="password"] {
    border-radius: 3px;
    background-color: var(--accent);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover {
    border-radius: 3px;
    background-color: var(--accenthover);
    cursor: text;
}

label {
    color: var(--font);
    font-family: "ubuntu-bold";
}

textarea {
    border-radius: 3px;
    background-color: var(--accent);
}

textarea:hover {
    border-radius: 3px;
    background-color: var(--accenthover);
    cursor: text;
}



#play-music-button {
    height: 60px;
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-position: center;
}

.play {
    background-color: aliceblue;
}

.pause {
    background: url("http://downloadicons.net/sites/default/files/pause-icon-14021.png") no-repeat;
}

.welcomesign {

    text-align: center;
}

.signin_up {

    left: 50%;
}

.LSTVButton {
    font-family: 'ubuntu-reg';
    color: #fff;
    background-color: #000;
    border-color: #fff1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    border-width: 3px;
}

.GoogleButton {
    font-family: 'ubuntu-reg';
    color: #000000;
    background-color: #dfdfdf;
    border-color: rgba(255, 0, 0, 0.067);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    border-width: 3px;
}

.GitHubButton {
    font-family: 'ubuntu-reg';
    color: #fff;
    background-color: #000;
    border-color: rgba(77, 255, 0, 0.067);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    border-width: 3px;
}


.welcomebanner {
    .bgImgCenter {
        background-image: url('img/oiobanner.png');
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
    }
}

.barcodefont {
    font-family: "barcode";
}

.beeperfont {
    /* A - Bottom line N - Center line Z - Top line */
    font-family: "linefont";
}

.beeperfontbig {
    /* A - Bottom line N - Center line Z - Top line */
    font-family: "linefont";
    font-size: 100px;
    transform: translateX(-20px);
}

.beeperfontbiganim {
    /* A - Bottom line N - Center line Z - Top line */
    font-family: "linefont";
    font-size: 100px;
    transform: translateX(-20px);
    animation: beeper 1s infinite;
}

.poxeltext {
    font-family: "poxel-font";
}

.poxelemojis {
    font-family: "poxel-emojis";
}

.ubuntu .noclick {
    color: crimson;
}

.load {
    animation: loadforward 4s infinite;
    border-radius: 10px;
    /*background-color: linear-gradient(
        to right,
        red 20%,
        orange 20% 40%,
        yellow 40% 60%,
        green 60% 80%,
        blue 80%
      );*/
    /*background-color: linear-gradient(to bottom right, #e66465, #9198e5);*/
    color: cornflowerblue;
    display: flex;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 45%;
    left: 45%;
}

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay
    in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    background-color: #111;
    /* Black*/
    overflow-x: hidden;
    /* Disable horizontal
    scroll */
    padding-top: 60px;
    /* Place content 60px from the top */
    transition:
        0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
}

/* The
    navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

}

/* When you mouse over the navigation links, change their
    color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close
    button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use
    this if you want to push the page content to the right when you open the side
    navigation */


#main {
    transition: margin-left .5s;
    padding: 20px;
    background-color: rgba(9, 49, 75, 0);
}

.stopper {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    z-index: 0;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    transition: 0.5s;
}

/* On
    smaller screens, where height is less than 450px, change the style of the
    sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }

}


/*animations and keyframes*/
@keyframes loadforward {
    0% {
        rotate: 0deg;
        color: cornflowerblue;
    }

    25% {
        rotate: 90deg;
        color: aqua;
    }

    50% {
        rotate: 180deg;
        color: aquamarine;
    }

    75% {
        rotate: 280deg;
        color: aqua;
    }

    100% {
        rotate: 0deg;
        color: cornflowerblue;
    }
}

@keyframes loadbackward {
    0% {
        rotate: 0deg;
        color: aqua;
    }

    25% {
        rotate: -90deg;
        color: cornflowerblue;
    }

    50% {
        rotate: -180deg;
        color: cadetblue;
    }

    75% {
        rotate: -280deg;
        color: cornflowerblue;
    }

    100% {
        rotate: -0deg;
        color: aqua;
    }
}

@keyframes beeper {
    0% {
        color: black;
    }

    50% {
        color: rgb(255, 0, 0);
    }

    100% {
        color: rgb(0, 0, 0);
    }
}

The site is the exact same on the server. any ideas????? Im at a loss here

SITE LOCAL
Local Site Image

SITE ONLINE
Online Site image

PLEASE NOTE AS I SAID CODE IS THE EXACT SAME> THE LINES THAT GO FARTHER THAN THE SCREEN ARE FOR THE LARGER SCREENS

i do think its the text. The issue? It doesnt matter. the local file works fine with it. i tried giveing the online files text a X-Overflow = hidden/none and it doesnt work

I have a wordpress plugin and i would like to insert a button in InspectorControls for blocks.

This is what i did but it doesn’t work, no errors in the console or wordpress error log.
The javascript file is attached and running, selectedBlock is ok, the elements are created but do not appear.

My colleague GPT didn’t know how to help me and i don’t see where i went wrong

add_action('enqueue_block_editor_assets', array('WP_UEA__main', 'add_js_functions'));


public static function add_js_functions()
    {
    wp_enqueue_script(
        'ea-custom-settings',
        plugin_dir_url(__FILE__) . '/js/ea-custom-settings.js',
        ['wp-block-editor', 'wp-components', 'wp-element', 'wp-data', 'wp-plugins'],
        false,
        true
        );
    }

JavaScript file

document.addEventListener('DOMContentLoaded', function () {
    const { registerPlugin } = wp.plugins;
    const { InspectorControls } = wp.blockEditor;
    const { PanelBody, Button } = wp.components;
    const { createElement } = wp.element;
    const { useSelect, dispatch } = wp.data;

    registerPlugin('ea-custom-settings', {
        render: function () {
            const selectedBlock = useSelect((select) =>
                select('core/block-editor').getSelectedBlock()
            );

            // Function to add a unique class to the block
            const addUniqueClass = function () {
                const uniqueClass = `ea-tag-${Date.now()}`;
                if (selectedBlock) {
                    const { clientId, attributes } = selectedBlock;
                    const existingClasses = attributes.className || '';
                    const updatedClasses = `${existingClasses} ${uniqueClass}`.trim();
                    dispatch('core/block-editor').updateBlockAttributes(clientId, {
                        className: updatedClasses,
                    });
                    alert('Class added: ' + uniqueClass);
                }
            };

            return (
                selectedBlock &&
                createElement(
                    InspectorControls,
                    {},
                    createElement(
                        PanelBody,
                        { title: 'EA Options' },
                        createElement(
                            Button,
                            {
                                isPrimary: true,
                                onClick: addUniqueClass,
                            },
                            'Add EA Tag'
                        )
                    )
                )
            );
        },
    });
});

How do I make an arm mechanism in matter.js. First I’d like to try a simplified version where a rectangle is connected to a main body with three constraints; one constraint being a revolute point constraint from where the arm section rotates. The other two constraints are long elastic constraints connecting to the main body, and the tips of the arm segment. The position of the arm would be determined by the stiffness of those constraints, so increasing the stiffness of the upper one and decreasing the stiffness of the lower one would raise the arm. The setup is shown in the figure below.

setup

In the figure, there are two squares to which the tendon constraints connect to. They are there to stop the arm section from rotating too much around the main body, since the arm and main body have the same group, so they don’t interact with each other physically. The stoppers are connected to the main body with pin constraints.

Here’s my attempt to implement this

import Matter from "matter-js";

export default function Player(x, y) {
    const T = 24;
    const group = Matter.Body.nextGroup(true);
    const base = Matter.Bodies.rectangle(x, y, 10 * T, 10 * T);
    const head = Matter.Bodies.rectangle(x, y - 10 * T, 8 * T, 10 * T, {});
    const longTopStop = Matter.Bodies.rectangle(
        x + (9 * T) / 2,
        y - (29 * T) / 2,
        T,
        T
    );
    const long = Matter.Bodies.rectangle(
        x + 11 * T,
        y - (21 * T) / 2,
        14 * T,
        3 * T,
        { collisionFilter: { group } }
    );
    const longBottomStop = Matter.Bodies.rectangle(
        x + (9 * T) / 2,
        y - (13 * T) / 2,
        T,
        T
    );
    const mainBody = Matter.Body.create({
        parts: [base, head],
        collisionFilter: { group },
    });

    const longTopTen = Matter.Constraint.create({
        bodyA: longTopStop,
        bodyB: long,
        pointA: { x: T / 2, y: 0 },
        pointB: { x: 7 * T, y: (-3 * T) / 2 },
        length: 8 * T,
        stiffness: 0.5,
    });
    const longBottTen = Matter.Constraint.create({
        bodyA: longBottomStop,
        bodyB: long,
        pointA: { x: T / 2, y: 0 },
        pointB: { x: 7 * T, y: (3 * T) / 2 },
        length: 10 * T,
        stiffness: 0.5,
    });

    const longTopTop = Matter.Constraint.create({
        bodyA: head,
        bodyB: longTopStop,
        pointA: { x: 4 * T, y: -5 * T },
        pointB: { x: -T / 2, y: -T / 2 },
        length: 0,
        stiffness: 1,
    });
    const longTopMiddle = Matter.Constraint.create({
        bodyA: head,
        bodyB: longTopStop,
        pointA: { x: 4 * T, y: (-9 * T) / 2 },
        pointB: { x: -T / 2, y: 0 },
        length: 0,
        stiffness: 1,
    });
    const longTopBott = Matter.Constraint.create({
        bodyA: head,
        bodyB: longTopStop,
        pointA: { x: 4 * T, y: -4 * T },
        pointB: { x: -T / 2, y: T / 2 },
        length: 0,
        stiffness: 1,
    });

    const longBottTop = Matter.Constraint.create({
        bodyA: head,
        bodyB: longBottomStop,
        pointA: { x: 4 * T, y: 3 * T },
        pointB: { x: -T / 2, y: -T / 2 },
        length: 0,
        stiffness: 1,
    });
    const longBottMiddle = Matter.Constraint.create({
        bodyA: head,
        bodyB: longBottomStop,
        pointA: { x: 4 * T, y: (7 * T) / 2 },
        pointB: { x: -T / 2, y: 0 },
        length: 0,
        stiffness: 1,
    });
    const longBottBott = Matter.Constraint.create({
        bodyA: head,
        bodyB: longBottomStop,
        pointA: { x: 4 * T, y: 4 * T },
        pointB: { x: -T / 2, y: T / 2 },
        length: 0,
        stiffness: 1,
    });

    const headLongJoint = Matter.Constraint.create({
        bodyA: head,
        bodyB: long,
        pointA: { x: 4 * T, y: -T / 2 },
        pointB: { x: -7 * T, y: 0 },
        length: 0,
        stiffness: 1,
    });

    this.parts = {
        mainBody,
        base,
        head,
        longTopStop,
        long,
        longBottomStop,
    };
    this.joints = [
        longTopTop,
        longTopMiddle,
        longTopBott,

        longTopTen,
        longBottTen,

        longBottTop,
        longBottMiddle,
        longBottBott,

        headLongJoint,
    ];
}

Player.prototype.add = function (world) {
    Matter.Composite.add(world, [
        this.parts.mainBody,
        this.parts.longTopStop,
        this.parts.long,
        this.parts.longBottomStop,
        ...this.joints,
    ]);
};

The stoppers are supposed to be firmly stuck to the main body, but would drift away with only one constraint, so I added three per stopper, but they still drift. The main body seems to be constantly pushed in the opposite direction of the arm. Here’s a video of how it looks like right now with the setup below

https://files.catbox.moe/arqf5l.mp4

function Block(x, y, width, height, fillStyle) {
    const options = { isStatic: true };
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.fillStyle = fillStyle;
    this.body = Matter.Bodies.rectangle(x, y, width, height, options);
}

Block.prototype.add = function (world) {
    Matter.Composite.add(world, this.body);
};


const engine = Matter.Engine.create({ gravity: { x: 0, y: 1 } });
const render = Matter.Render.create({
    element: document.body,
    engine: engine,
    options: { width: innerWidth, height: innerHeight, showAngleIndicator: true },
});
const runner = Matter.Runner.create();

Matter.Render.run(render);
Matter.Runner.run(runner, engine);

Matter.Render.lookAt(render, {
    min: { x: 0, y: 0 },
    max: { x: innerWidth, y: innerHeight },
});

const ground = new Block(
    innerWidth / 2,
    (innerHeight * 9) / 10,
    (innerWidth * 9) / 10,
    10,
    "gray"
);
const leftWall = new Block(
    innerWidth / 10,
    innerHeight / 2,
    10,
    (innerHeight * 9) / 10,
    "gray"
);
const rightWall = new Block(
    (innerWidth * 9) / 10,
    innerHeight / 2,
    10,
    (innerHeight * 9) / 10,
    "gray"
);
const walls = [ground, leftWall, rightWall];
const player = new Player(innerWidth / 3, innerHeight / 2);

player.add(engine.world);

walls.forEach((w) => w.add(engine.world));

How do I fix the bugs, or how do I implement an arm mechanism in matter.js by other means?

repost because I did not get a satisfactory answer on the last post that worked:

context of code is that I’ve been making a ‘posts’ page to store my personal writing, and to cut down on the length of the HTML i’ll be storing all of it in a JSON file and just fetching it based on an incremented variable so that the js is more readable for me if i’d like to make changes in the future.

the incrementing part hasn’t been working though, it creates 1 “post” based on the json post1.title data,, but nothing else seems to be happening, and nothing seems to be giving me an error in the neocities editor at the moment. the js:

window.onload = (event) => {
  var n = 0;
  for (let i = 0; i < 3; i++) {
      fetch('./posts.json')
        .then(response => response.json()) 
        .then(data => {
          let poster = document.createElement("post");
          n += 1;
          poster.textContent = "data.post${n}.title";  
          document.getElementById("postcontainer").append(poster); 
    })
  }
};

the HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>violet's site</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
    <script src='./post.js'>
    </script>
  </head>
  <body>
    <div class='posts' id='postcontainer'>
    </div>
  </body>
</html>

How can I mark part of pattern as constant using IMask?
Consider the following example:

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/imask"></script>
</head>

<body>

  <form>
    <input type="text" id="inputField" value="3455435345">
  </form>

  <script>
    var masked = IMask(
      document.getElementById('inputField'), {
        mask: '+{345}(000)000-00-00', // expected: +345(345)543-53-45 | actual: +345(543)534-5
        lazy: false
      }
    );
  </script>
</body>

</html>

When page loading the input field filled with value +345(543)534-5, but I expect +345(345)543-53-45.

How can I achieve this?

I am trying to solve the following challenge:

Description

Given an input string, count occurrences of a given emoji (encoded as :apple:) for each user after encountering their user name (encoded as <@User />). If a user does not have any of the given emoji, they inherit the count from the next user in the sequence. This process continues until all emoji occurrences are found, and those are then assigned to all users in the group that lack them.

The input string and the emoji (without the colons) are passed as argument to the function countEmoji(message, emoji). This function should return an object that has a key (lowercase) for each encoded user, and the corresponding number of apples found for that user.

Example

Input:

• message = '<@Kate />:apple: <@Max/>sometext<@alisa /> :like: received:apple::apple:'
• `emoji = ‘apple’

Expected output:

{
    kate: 1,
    max: 2,
    alisa: 2
}

Emoji valid pattern:

A valid emoji is a text (not case sensitive) delimited on both sides by a colon. For example :apple:

It should have no spaces. There is no sharing of colons between emoji. So :apple:apple: only has one valid emoji.

Examples:

• :apple: encodes 1 apple
• :aPPle::aPpLe: encodes 2 apples
• :apple:apple: encodes 1 apple
• :apple : encodes 0 apples
• : Apple : encodes 0 apples

Name pattern:

A valid name is encoded as <@Name /> without spaces, where the varying Name must consist of only English letters, and is not considered case sensitive. There can be spaces before the ending />. So <@namee /> is valid.

Requirements

• Use only 1 for loop, with all iteration in one loop
• Only use character codes for parsing
• Use 1 object to store the results (no additional arrays or objects are allowed)
• Use charCodeAt to identify necessary characters and fromCharCode to convert to lowercase
• Can’t use JavaScript methods other than those mentioned (No map, filter, …), and no for...in loop,

Main problem

I can keep track of the previous username, but how do I handle a long chain of usernames?
Using a for...in loop would make this easy, but I am restricted to only using a single for loop.

My code

function countEmoji(message, emoji) {
  const ASCII = {
    numFirstCharCode: 48,
    numLastCharCode: 57,
    openBracket: 60,
    closeBracket: 62,
    atSign: 64,
    slash: 47,
    toLowerOffest: 32,
    upperCaseStart: 65,
    upperCaseEnd: 90,
    lowerCaseStart: 97,
    lowerCaseEnd: 122,
    space: 32,
    colon: 58,
  };

  let result = {};

  let name = "";
  let isNameCreated = false;
  let nameCreationStage = 0;

  let emojiFounded = 0;
  let emojiStage = -1;

  function toLowerCase(char) {
    const isInUpperCase =
      ASCII.upperCaseStart <= char && char <= ASCII.upperCaseEnd;
    if (isInUpperCase) {
      return String.fromCharCode(char + ASCII.toLowerOffest);
    }
    return char;
  }

  for (let i = 0; i < message.length; i++) {
    const charCode = message.charAt(i).charCodeAt();
    const isInLowerCase =
      ASCII.lowerCaseStart <= charCode && charCode <= ASCII.lowerCaseEnd;
    const isInUpperCase =
      ASCII.upperCaseStart <= charCode && charCode <= ASCII.upperCaseEnd;

    if (!isNameCreated) {
      if (charCode === ASCII.openBracket && nameCreationStage === 0) {
        nameCreationStage++;
      } else if (charCode === ASCII.atSign && nameCreationStage === 1) {
        nameCreationStage++;
      } else if ((isInUpperCase || isInLowerCase) && nameCreationStage === 2) {
        if (isInLowerCase) {
          name += String.fromCharCode(charCode);
        } else if (isInUpperCase) {
          name += String.fromCharCode(charCode + ASCII.toLowerOffest);
        }
      } else if (name) {
        if (charCode === ASCII.space) {
          continue;
        } else if (charCode === ASCII.slash) {
          nameCreationStage++;
        } else if (charCode === ASCII.closeBracket && nameCreationStage === 3) {
          nameCreationStage = 0;
          isNameCreated = true;
        }
      }
      continue;
    }

    if (isNameCreated) {
      //search for pattern start - :
      if (charCode === ASCII.colon && emojiStage === -1) {
        emojiStage++;
        continue;
      }
      if (emojiStage - (emoji.length - 1) === 1) {
        if (charCode === ASCII.colon) {
          emojiFounded++;
          emojiStage = -1;
          continue;
        }
      }
      //start compering symbols
      if (charCode === toLowerCase(emoji.charAt(emojiStage).charCodeAt())) {
        emojiStage++;
        continue;
      } else {
        if (charCode === ASCII.openBracket && nameCreationStage === 0) {
          nameCreationStage++;
          isNameCreated = false;
          result = { ...result,
            [name]: emojiFounded
          };
          name = "";
          emojiFounded = 0;
        }
        emojiStage = -1;
      }
    }
  }
  result = { ...result,
    [name]: emojiFounded
  };
  return result;
}

const text = '<@Kate />:apple: <@Max/>sometext<@alisa /> :like: received:apple::apple:';
const emoji = "apple";

console.log(countEmoji(text, emoji));

My code returns {kate: 1, max: 0; alisa: 2}, but this has the wrong number for max. It should be 2.

How can I do this without an extra loop and within all the requirements?