Category: javascript

import React from "react"

export default function App() {
    const [messages, setMessages] = React.useState(["a", "b"])
    /**
     * Challenge:
     * - Only display the <h1> below if there are unread messages
     */
    return (
        <div>
            <h1>You have _ unread messages!</h1>
        </div>
    )
}

this is the code and the challenge commented out, i have no idea what to do please help

i tried setting up a second state with integer 0 as default, then i tried to insert with curlybrackets into the jsx markup but it didnt truly work

I’ve got a problem with simple popup newsletter in homepage…
Basically after I close the popup, if I refresh homepage, popup appears for about one second then disappear.

This is the code:

  function popup(){
    $('.jsclosepoup').on('click', function() {
      $('.jsengo_popup').addClass('d-none');

    });
  }

<section class="popup jsengo_popup">
    <div class="modal-window">
      <div class="window-window">
        <div class="window-content clearfix">
          <a class="close_edit jsclosepoup" title="Close" href="javascript:void(0)">ù
              Something useful for Newsletter...
          </a>
        </div>
      </div> 
    </div>
</section>

It seems that class “d-none” be applied only after all html loaded.
I would like to prevent newsletter appears for a second if I already close it….

it is necessary for the status to be updated without reloading the page, it is impossible to iterate over the pipeline-status values, I cannot get the id for each pipeline

I tried iterating through the pipeline ids using each

function updateAllPipelineStatus() {      
        $('.pipeline-status').each(function() {
            var pipelineId = $(this).attr('id').split('_')[1];

            updatePipelineStatus(pipelineId);
        });
}

for

<div th:each="pipeline : ${pipelines}" class="pipelines-card">
        <div class="pipeline-info">
            <div class="pipeline-name">
                <a th:text="${pipeline.name}"></a>
            </div>
            <div class="pipeline-build" th:text="${pipeline.buildSystem}"></div>
            <div th:each="stage : ${pipeline.stages}" class="pipelines-stages">
                <span th:text="${stage}"></span>
            </div>
            <div class="pipeline-status" id="pipelineStatus_${pipeline.id}" th:text="${pipeline.status}" th:class="${pipeline.status}"> </div>
        </div>
        <!-- Кнопки редактирования и удаления -->
        <div class="pipeline-actions">
            <button class="editPipelineButton btn btn-primary" th:attr="data-id=${pipeline.id}">Edit</button>
            <button class="deletePipelineButton btn btn-danger" th:attr="onclick='deletePipeline('' + ${pipeline.id} + '')'">Delete</button>
        </div>
    </div>

What should be if I create passkey on apple device on safari with webauthn navigator.credentials.create(). Then I see a one passkey on device. If I clear cache in safari and try again. It force me to create another passkey again. And after that i Have two passkeys on device. Should be like this ?why?

I tried to log with passkey after I clear the safari cache on apple device

I am writing a code to identify which third party cookies might get affected after chrome third party cookie phaseout.

Is there a way to get the third party cookies in javascript?
What and all attributes should I consider to say that cookie will be affected by chrome third party cookie phaseout??

I might probably have to consider sameSite attribute and what else?

I’m using Quill (v.2.0.0) with quill-better-table (v.1.2.10) in my Angular 13 project.

I’m trying to add a custom attribute to the table tag, something like

<table class="quill-better-table" custom-attribute="test" style="width: 100px;">

Everything seems ok and the correct string corresponding to the inner html of quill is saved in my database, and also includes my custom attribute in the table tag. However, when I reload the content (reading, therefore), Quill cuts or moves my attribute to the col tag, whatever the Scope I set:

<table class="quill-better-table" style="width: 100px;">
        <colgroup>
            <col width="100" custom-attribute="test">
        </colgroup>
...

There is my Quill configuration:

const Parchment = Quill.import('parchment');
const customAttribute = new Parchment.Attributor('custom-attribute', 'custom-attribute', {
    scope: Parchment.Scope.BLOCK,
    whitelist: ['test']
});
Quill.register(customAttribute);
Quill.register({
    'modules/better-table': QuillBetterTable
}, true);
this.quill = new Quill('#editor-container', {
    readOnly: this.editDisabled,
    modules: {
      toolbar: '#toolbar',
      table: false,
      'better-table': {},
      keyboard: {
        bindings: QuillBetterTable.keyboardBindings
      }
    },
    theme: 'snow'
});

Here I add the table and attribute to it:

let tableModule: any = this.quill.getModule('better-table');
tableModule.insertTable(2, 2);
let table = tableModule.getTable();
table[0].domNode.setAttribute('custom-attribute', 'test');

I expect Quill to read the attribute correctly, without cutting or moving it

I have a databse with different gym exercises, im trying to make a leaderboard for each one, and i want something like a checkbox form that takes all the exercises from my databse and adds them as check buttons, and as you check them, i want them to apear the the navbar as options to click.

I´m doing it manually but i wat it to be dynamic and i have no idea how to do it
I´m using bootstrap5 and this is what i have now, I´d be thankful for any tips or sugestions

 <div class="collapse navbar-collapse justify-content-center" id="navbarCategories">
                                <ul class="navbar-nav" id="navbar">
                                    <li class="nav-item"><a href="#squats" class="nav-link" style="color: #c5c6c8;">Squats</a></li>
                                    <li class="nav-item"><a href="#deadlifts" class="nav-link" style="color: #c5c6c8;">Deadlifts</a></li>
                                    <li class="nav-item"><a href="#benchpress" class="nav-link" style="color: #c5c6c8;">Bench Press</a></li>
                                    <li class="nav-item"><a href="#overheadpress" class="nav-link" style="color: #c5c6c8;">Overhead Press</a></li>
                                    <div class="dropdown">
                                        <button class="nav-link btn btn-primry dropdown-toggle"data-bs-toggle="dropdown" style="color: #c5c6c8;">Add favorite</button></li>
                                        <ul class="dropdown-menu">
                                        <form id="checkform">
                                            <input type="checkbox" id="benchpress" name="benchpress" value="Bench Press">
                                            <label for="benchpress">Bench Press</label><br>
                                            <input type="checkbox" id="deadlift" name="deadlift" value="Deadlifts">
                                            <label for="deadlift">Deadlifts</label><br>
                                            <input type="checkbox" id="overheadpress" name="overheadpress" value="Overhead Press">
                                            <label for="overheadpress">Overhead Press</label><br><br>
                                            <input type="submit" value="Submit">
                                        </form>
                                        </ul>       
                                    </div>
                                </ul>
                            </div>

I am having issues implementing the style jsx global property with the new the Next.js. In the previous ones you needed to add it into the _app.js file but since this doesn’t exist anymore, I figured it is meant to be added in to the layout.tsx file that represents each page but when I do it, I get the following error

'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.

This is my code

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <style jsx global>
        {`
                    :root {
                        --title: ${header.style.fontFamily};
                        --content: ${paragraph.style.fontFamily};
                        --primary: ${colors.primary};
                        --primary-dark: ${colors.primaryDark};
                        --secondary: ${colors.secondary};
                        --secondary-dark: ${colors.secondaryDark};
            --background: ${colors.background};
            --paragraph: ${colors.paragraph};
                `}
      </style>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  );
}

I am using JavaScript with react and I am trying to upload files and folders.

  const [files, setFiles] = useState([]);

  const handleDropFile = (event) => {
    event.preventDefault();
    const items = event.dataTransfer.items;
    const fileList = [];
    for (let i = 0; i < items.length; i++) {
      const entry = items[i].webkitGetAsEntry();
      if (entry.isFile) {
        fileList.push(new Promise((resolve) => entry.file(resolve)));
      } else if (entry.isDirectory) {
        fileList.push(traverseDirectory(entry, entry.name + "/"));
      }
    }
    Promise.all(fileList).then((files) => {
      console.log(files, files.flat())
      setFiles(files.flat());
    });
  };
  const traverseDirectory = (directory, currentPath) => {
    return new Promise((resolve) => {
      const reader = directory.createReader();
      const fileList = [];
      const readEntries = () => {
        reader.readEntries((entries) => {
          entries.forEach((entry) => {
            if (entry.isFile) {
              fileList.push(
                new Promise((resolve) =>
                  entry.file((file) => {
                    // Modify the file name here before resolving
                    const modifiedFile = new File(
                      [file],
                      currentPath + file.name,
                      { type: file.type }
                    );
                    resolve(modifiedFile);
                  })
                )
              );
            } else if (entry.isDirectory) {
              fileList.push(
                traverseDirectory(entry, currentPath + "/" + entry.name)
              );
            }
          });
          if (entries.length > 0) {
            readEntries();
          } else {
            resolve(Promise.all(fileList));
          }
        });
      };

<div onDrop={handleDropFile} >

However for folders that hold other folders I am I have encountered this error:
The files array will have arrays of files when it should only have file objects even tough I have called flat on it.

This is what console.log(files, files.flat()) prints:

[File, Array(2), Array(2), File]
[File, File, File, Array(1), File, File]

I suspect the problem comes from deeply nested promises but I am a beginner and I cannot solve the issue.

I have a problem with @if in the Angular template flow syntax.

A value is available in an RxJs Observable. So the async pipe helps and the value is assigned to a variable.

@if (currentPageNumber$ | async; as currentPageNumber) {
// currentPageNumber is number

For value 0 the if statement is not valid. So I exclude only null values… but now the value of currentPageNumber is boolean.

@if ((currentPageNumber$ | async) !== null; as currentPageNumber) {
// currentPageNumber is boolean

How can I check against null but keep my variable with the value of the stream?

I am working on a project which is built on top of React MUI component and the issue I am facing is the datepicker field. This input field is an input with type=’tel’, MUI by default sets this for Datepicker fields. Our team of developers tried to change the input to input type=’text’ but MUI somehow overwrites it. I am writing UI automation tests in Selenium Python and I am facing an issue with filling this input with send_keys(method).

• I have tried every workaround in the web, but I couldn’t understand why its not working.
• I have tried to click and then insert, use Datepicker calendar to click by date, month, year and its not possible to perform click operation because in headless mode datepicker icon is not shown.
• I have tried using Javascript to set the value of the input and it didnt work as well.
• I have tried adding all necessary chrome arguments and a custom user agent:

  chrome_options.add_argument('--enable-javascript')
  chrome_options.add_argument(f"--window-position={2000},{0}")
  chrome_options.add_argument('--enable-javascript')
  chrome_options.add_argument("--nogpu")
  chrome_options.add_argument("--incognito")
  chrome_options.add_argument("--no-sandbox")
  chrome_options.add_argument('--disable-gpu')
  chrome_options.add_argument('--window-size=1920,1080')
  chrome_options.add_argument('--start-maximized')
  chrome_options.add_experimental_option("excludeSwitches", ["enable-automation"])
  chrome_options.add_experimental_option("useAutomationExtension", False)
  chrome_options.add_argument('--disable-blink-features=AutomationControlled')
  chrome_options.add_argument('--headless')
  

I ran out of options, as I don’t know what to do next

i found this source code for caeser cipher wheel online. it is written in js and css. i want it in flutter. who can help?!

https://github.com/rheh/HTML5-canvas-projects/tree/master/caesar_cipher

change(javascript css html) to flutter dart.

Please help!
I succeeded in running it as is(javascript) however i need it to write it in flutter to include it in my mobile app development project.

I have a web app where I need to convert two integers into a float number. The user is requested two integer tags (WordOne and WordTwo). I have created a javascript function and what I have tried so far is:

function WordsToReal (WordOne, WordTwo) {

var w1=0, w2=0, hex1, hex2, ascii1, ascii2, ascii12;
let str;
w1 = $getTag(WordOne); //here I get the value for tag WordOne
w2 = $getTag(WordTwo); //here I get the value for tag WordTwo

//conversion words from int to hex:
hex1=w1.toString(16);
hex2=w2.toString(16);

//conversion from hex to ascii
ascii1=Buffer.from('' + hex1, 'hex');
ascii2=Buffer.from('' + hex2, 'hex');

//concatenate ascii values
str = '' + ascii1 + ascii2;

//conversion from string to int and then to float
return Number(str)/10;
console.log("Number(str): " + Number(str)/10);
}

If, for example, w1=12337 (in hex:3031) and w2=14641 (in hex: 3931). 30 in ascii is 0, 31 in ascii is 1, 39 in ascii is 9 and 31 in ascii is 1. The result I get is 19.1 which is correct.

My problem is that for greater w1 and w2 values, I get other result instead of what should I get.

For example, w1=17358 (in hex: 43CE) and w2=63971 (in hex: F9E3). 43 in ascii is C, the other hex values (CE, F( and E3) converted in ascii are some symbols. The float number for these two integers should be 239.4 or something very similar.

My question is if there’s another method of converting two integers into float or my method could be changed to get what I want?

I have a web server written in Node.js and I would like to launch with a specific folder. I’m not sure how to access arguments in JavaScript. I’m running node like this:

$ node server.js folder

here server.js is my server code. Node.js help says this is possible:

$ node -h
Usage: node [options] script.js [arguments]

How would I access those arguments in JavaScript? Somehow I was not able to find this information on the web.

i actually want to display a video on loop which also case the issue the video was not start auto in iphone so i tried gif for just iphone devices. but the gif also case a problem when someone click over the gif it open them in a full screen i want prevent this click i create a overlay on the gif but it also does not work.

here is the code

import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import { useRouter } from "next/router";
import trans from '../trans';
import Image from 'next/image';
import { LoadingOutlined } from '@ant-design/icons';

const DecaHeroSection = () => {
    const { locale } = useRouter();

    const {
        section1HeadingLine1,
        section1HeadingLine2,
        section1HeadingLine3,
        section2Subheading,
        section1paragraph,
        learnMore
    } = trans[locale];
    let sliderRef = useRef(null);
    const router = useRouter();
    const [Loading, setLoading] = useState(true);
    const [IsIphone, setIsIphone] = useState(false);

    const handleContextMenu = (event) => {
        event.preventDefault(); // Prevent the default context menu
    };
    useEffect(() => {
        const userAgent = window.navigator.userAgent.toLowerCase();

        if (userAgent.includes('iphone') | userAgent.includes('ipad')) {
            setIsIphone(true);

        }
        setTimeout(() => {
            setLoading(false)
        }, 1000);
    }, []);
    const preventFullScreen = (e) => {
        e.preventDefault();
    };

    return (
        <>
            <section className="heroSection relative">
                <div className="wrapHero container mx-auto flex flex-col-reverse sm:flex-row           sm:items-center sm:justify-between ">
                   
                    <div className="sm:w-[45%]  lg:w-[55%] min-h-[285px] overflow-hidden -z-10 relative">
                        {Loading ? <LoadingOutlined className='absolute top-1/2 bottom-1/2 left-1/2 right-1/2' /> : 
                        !IsIphone ? 
                        <video className="" playsinline autoplay="autoplay" loop="true" muted onContextMenu={handleContextMenu} onclick="this.play()">
                            <source src="/decaVideoWB.mp4" type="video/mp4" />
                            Your browser does not support the video tag
                        </video> :
                            <div className='-z-20 absolute top-0 bottom-1 left-0 right-0'>
                                <img src="/decaVideoWB.gif" className='-z-20 object-cover' draggable="false" style={{ touchAction: 'none' }} onClick={preventFullScreen} onContextMenu={handleContextMenu} />
                            </div>
                        }
                        <div className='absolute top-0 bottom-0 left-0 right-0 bg-transparent pointer-events-none'></div>

                    </div>
                </div>
            </section>
        </>
    );
}

export default DecaHeroSection;