Category: javascript

why is this giving me an error?

var scriptSrc = 'nft.js';
var scriptTag = document.createElement('script');
scriptTag.src = scriptSrc;
document.body.appendChild(scriptTag);

It says

properties of null (reading 'appendChild')
    at main.js:395:15

I appreciate the help

The project concerned is onedrive-vercel-index.

I wished to use environment variables instead of editing confg/site.config.js

confg/site.config.js consists of variables and arrays. The variables were easy to deal with. process.env.VARIABLE || default-key worked fine for all the variables and is reflected by this commit

For the next part, the arrays, I referred to this stackoverflow question

The arrays concerned were googleFontLinks, protectedRoutes and links.

JSON.parse didn’t work, however .split() worked for “googleFontLinks” and “protectedRoutes”
for googleFontLinks I used process.env.WEBSITE_GOOGLE_FONT_LINKS?.split(', ') and for protectedRoutes I used process.env.WEBSITE_PROTECTED_ROUTES?.split(', ')

According to the stackoverflow question I referred to above, these work when I export the variables as follows:
export WEBSITE_PROTECTED_ROUTES="/Private, /safe/verysafe, /confidential"
export WEBSITE_GOOGLE_FONT_LINKS="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&display=swap"

It only works with this particular syntax.
The only array that remains is “links”. process.env.LINKS?.split('}, ') doesn’t seem to work. Instead it throws the following error:

Type 'string' is not assignable to type '{ name: string; link: string; }'.
The export I used was export LINKS="{name:'GitHub',link:'https://github.com/spencerwooo/onedrive-vercel-index'}, {name:'GitLab',link:'https://gitlab.com/Box-boi'}"

This error appears regardless of whether $LINKS is set or not. In the case of googleFontLinks and protectedRoutes, if the respective environment variables are not set, then the default variables are used (reference).

Here, in the case of links, it doesn’t matter if the $LINKS environment variable is set or not. I always get the same error.

The full error is:

./src/components/Navbar.tsx:93:34
Type error: Argument of type '(l: {    name: string;    link: string;}) => JSX.Element' is not assignable to parameter of type '(value: string, index: number, array: string[]) => Element'.
  Types of parameters 'l' and 'value' are incompatible.
    Type 'string' is not assignable to type '{ name: string; link: string; }'.

  91 | 
  92 |           {siteConfig.links.length !== 0 &&
> 93 |             siteConfig.links.map((l: { name: string; link: string }) => (
     |                                  ^
  94 |               <a
  95 |                 key={l.name}
  96 |                 href={l.link}
 ELIFECYCLE  Command failed with exit code 1.

I tried all the solutions mentioned in Defining an array as an environment variable in node.js

I tried process.env.LINKS?.split(', ') but to no avail.

I have tried exporting export LINKS="{name:'GitHub',link:'link1'}, {name:'GitLab',link:'link2'}" but the error still persists, despite the syntax being similar to that of protectedRoutes

 const axios = (props) =>
  Axios({
    baseURL: 'https://example.com.ng/api',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Token  ${API_KEY}`,
    },
    ...props,
  });


 const response = await axios({
        url: '/data',
        method: 'POST',
        data: {
          network: network_id,
          Ported_number: true,
          ...rest,
        },
      });

I’m sending this request to an external API but instead of creating new data for DB, I’m actually retrieving the already created data.
I don’t know where I’m going wrong. Any kind of help will be highly appreciated.

PS: I tried making a POST request to MOCK API and it works as expected. when I contacted the owner of the API I’m trying to work with, they said, there are many clients using their API and none of the complaint has been reported.

So basically, i am coding Sea Quest, and i need to make the shark and the diver moove at the sime time, except i’ve been using Set Interval for both of the function which work perfectely fine when they are alone

Shark function :

function initAlien() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    const alienY = Math.floor(Math.random() * (10 - 3 + 1) + 3); // generate a random row for the aliens (limited to rows 3-10)
    var RandVersDroite = Math.round(Math.random())
    posAlienY = alienY;
    if(RandVersDroite == 0)
    {
        vaVersLaDroite = false;
        posAlienX = 19
        plateau[posAlienY][posAlienX].style.backgroundImage = "url('./img/aliengauche.png')";
    }
    else
    {
        vaVersLaDroite = true;
        posAlienX = 0;
        plateau[posAlienY][posAlienX].style.backgroundImage = "url('./img/alien.png')";
    }
    
    
    
    plateau[posAlienY][posAlienX].name = "alien";
    intervalId = setInterval(parcoursGrille, 200);
}

Diver function :

function initPlongeur() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    const PlongeurY = Math.floor(Math.random() * (10 - 3 + 1) + 3); // generate a random row for the  Plongeurs (limited to rows 3-10)
    var NageurVersDroite = Math.round(Math.random())
    posPlongeurY =  PlongeurY;
    if(NageurVersDroite == 0)
    {
        NageurVersLaDroite = false;
        posPlongeurX = 19
        plateau[posPlongeurY][posPlongeurX].style.backgroundImage = "url('./img/nadador2.png')";
    }
    else
    {
        NageurVersLaDroite = true;
        posPlongeurX = 0;
        plateau[posPlongeurY][posPlongeurX].style.backgroundImage = "url('./img/nadador2.png')";
    }
    
    
    
    plateau[posPlongeurY][posPlongeurX].name = " Plongeur";
    intervalId = setInterval(parcoursGrillePlongeur, 200);
}

And then, i call them like this in another Js file :

initAlien();
initPlongeur();

I want the shark and the diver to work both at the same time but it only make the last one moove (if initAlien(); is after initPlongeur(); then the shark is mooving but not the diver

I tried looking for asynchronous function, or changed my code a little but it won’t work

I want to display the time in the user local timezone with the following format

hh:mm AM/PM timezone-name

eg: 11:00 PM CEST, 11:00 PM ICT

I have tried 2 options

// 11:00 PM Indochina Time
new Date().toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
        timeZoneName: "long"
})

// 11:00 PM GMT +7
new Date().toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
        timeZoneName: "short"
})

However, I don’t want to show the time in GMT and the long version displays a really long text. I would like more shortcut text like

11:00 PM ICT (not Indochina Time)
11:00 PM CEST (not Central European Summer Time)

I had a function

async function getAccessToken() {
    const response = await fetch(url).then((response) => response.json())
    token = await response["token"]
    return token
}

token = getAccessToken()
console.log(token)

I got a Promise object instead of a string(token)

Promise { <pending> }

What if I want to use token in somewhere else, how can I directly get the string format of the return of getAccessToken?

I’m using Highlight JS for my code on a documentation website. I want to add in vertical rulers to show the tab/indentation levels, like so:

The while lines on the code. Is it possible to pull this off in any way? Thanks for any help.

Im currently working on a website that generates a random password. One part of it shows the safety of the current password. Until now i was only able to make the safety-indicator dependent on the current length of the password. I want to also include the current count of checked checkboxes in the safety indicator.

I tried this function to update the the count of checked checkboxes with “onchange”:

function updateSafetyIndicator() {

    const checks = document.querySelector(".checks");
    const checkedCount = 0;

    for (var i = 0; i < checks.length; i++) {
        if (checks[i].checked) {
            checkedCount++;
        }
    }

    console.log(checkedCount)

    if (checkedCount <= 1) {
        passwordSafetyIndicator.id = "veryweak";
    }

    else if (checkedCount <= 2) {
        passwordSafetyIndicator.id = "weak";
    }

    else if (checkedCount <= 3) {
        passwordSafetyIndicator.id = "medium";
    }

    else if (checkedCount <= 4) {
        passwordSafetyIndicator.id = "strong";
    }
}

I am using useRef to keep variable avoiding re-render.
(useState automatically re-render the item).

Howeber now I want to have callback like useState() for example

const tempRef = useRef(1)

useEffect(() => {
// I want callback when tempRef.current is changed.
},[tempRef.current]);

Is there any good way??

I’m expecting to filter an array with a date attribute, and even though I’m getting the same equal values the new array isn’t created.

let array = [...]

state.newArray = array.filter((f) => { 
  let newDepartDate = new Date(f.depart_date); 
  console.log( newDepartDate.getDate());   // returns 17 
  console.log( data.getDate());   // returns 17 
  newDepartDate.getDate() === data.getDate(); 
});

I’m facing an issue with applying styling to a specific element on my web page. The element has the class name .intro-name in my HTML code. I’ve tried to style it by changing the color using CSS, but the styling doesn’t seem to have any effect when I view the page in my browser (Chrome). I also tried to style it directly in my HTML and it still does not work.

I’ve inspected the page using the developer tools, and I noticed that the .intro-name class is not appearing in the styles section. I’ve double-checked my code, and everything seems correct. I even tried clearing my browser cache, but the issue persists.

I even created a live example of the page on Replit, and the styling appears correctly there. However, when I view the page locally in my browser, the styling is still not applied to the .intro-name class.

Can someone help me understand why the styling is not being applied to the .intro-name class in my local environment? I would greatly appreciate any insights or suggestions to resolve this issue. Thank you!”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaxBenen</title>
    <link href='https://fonts.googleapis.com/css?family=Fira Code' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=NTR' rel='stylesheet'>
</head>
<link rel="stylesheet" href="style.css"> 
<script src="javascript.js" defer></script>
<body>

   

    <div class="header">

        <div class="hamburger-menu">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
          </div>
  
          
        <ul class="links">
            <li><a href="#">01. About</a></li>
            <li><a href="#">02. Experience</a></li>
            <li><a href="#">03. Work</a></li>

            <button class="cv-button">Resume</button>
        </ul>
    </div>
    <span class="intro">hi, <span class="intro-name">Max</span> here.</span>
    <div class="section-intro">
        <div class="intro-title">Passionate Engineer, Lifelong Learner</div>
        <div class="intro-text">"I'm a self-taught software engineer from The Netherlands 
            with a strong passion for full-stack development, artificial 
            intelligence, machine learning and everything in between.</div>
            <button class="say-hi"><a href="mailto:[email protected]" 
                style="text-decoration: none; color: inherit;">Say hi!</a></button>
    </div>
    <div class="aboutme-section">
    <div class="header-section">
        <span class="about-title">01. About</span>
    </div>
    <div class="aboutme-text">As a still-learning Software Engineer, I am constantly expanding my skills. When I'm not working, I enjoy staying up-to-date with the latest scientific advancements and playing video games.
        <br>
        <br>Here are some technologies I have been working with:</div>
        <ul class="skilz">
            <li>Python</li>
            <li>Bash</li>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
        <div class="aboutme-text">I find these activities help me to stay curious and creative, which I believe are essential traits for any software engineer. Through my work, I hope to make a meaningful impact on the world by creating innovative solutions that help people solve real-world problems.</div>
</div>
    <div class="experience-section">
        <div class="header-section">
            <span class="about-title">02. Experience</span>
        </div>
    </div>



</body>
</html> 



CSS

/* Set the background color of the entire page */
body {
    background-color: #0a192f;
  }
  
  /* Remove underline and change link color */
  a {
    text-decoration: none;
    color: #ccd6f6;
  }
  
  /* Change link color on hover and add transition effect */
  a:hover {
    color: aquamarine;
    transition: 0.3s;
  }
  
  /* Set style for an unordered list */
  ul {
    display: flex;
    list-style: none; /* Remove bullet points */
    gap: 25px;
    margin-left: auto;
    padding: 0;
    align-items: center;
  }
  
  /* Set style for header section */
  .header {
    font-family: "Fira Code";
    display: flex;
    font-size: 13px;
    padding: 14px;
  }
  
  /* Set style for CV button */
  .cv-button {
    color: #ccd6f6;
    background-color: transparent;
    border: 1px solid;
    padding: 0.75rem 1rem;
    border-radius: 7px;
  }
  
  /* Change CV button style on hover and add transition effect */
  .cv-button:hover {
    color: aquamarine;
    background-color: rgba(127, 255, 212, 0.132);
    transition: 0.3s;
  }
  
  /* Set style for introduction section 
  .intro {
    display: flex;
    gap: 10px;
    padding: 5% 15%; 
    font-family: "NTR", sans-serif;
    font-size: 96px;
    color: #ccd6f6;
  }
  */

  .intro {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 5s steps(30, end);
    gap: 10px;
    padding: 5% 15%;
    font-family: "NTR", sans-serif;
    font-size: 96px;
    color: #ccd6f6;
  }

  
  /* Change color for name in introduction section */
  .intro-name {
    color: aquamarine !important;
    font-weight: 600;
  }

/* Set animation for blinking cursor */
@keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

   /* Code add */

  
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  

  
  @keyframes blink-caret {
    from, to {
      background-color: transparent;
    }
    50% {
      background-color: aqua;
    }
  }
    /* Code add */
  
  
  /* Add blinking cursor after intro span */
  .intro::after {
    content: '|';
    animation: blink 1s infinite;
    color: aquamarine;
  }

.section-intro{
  display: flex;
  font-size: 50px;
  font-family: "NTR", sans-serif;
  color: rgb(136, 146, 176);
  gap: 10px;
  padding-left: 15%;
  padding-right: 25%;
  margin-top: -150px;
  flex-direction: column;
}


.intro-text {
    font-size: 20px;
    max-width: 500px;
    margin-top: -35px;
}

.say-hi {
    position: relative; /* Add position relative to the button */
    color: aquamarine;
    background-color: transparent;
    border: 1px solid;
    border-radius: 7px;
    margin-right: 85%;
    padding: 20px;
    font-size: 20px;
    text-align: center; /* Align the button content to the left */
    padding-left: 50px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Add the envelope icon using ::before pseudo-element */
  .say-hi::before {
    content: "2709"; /* Add the envelope unicode */
    display: inline-block;
    font-size: 40px;
    position: absolute;
    left: 20px; /* Adjust the position of the icon as needed */
    top: 47%;
    transform: translateY(-50%);
    color: aquamarine; /* Match the color of the button */
  }
  
  /* Change Say-hi button style on hover and add transition effect */
  .say-hi:hover {
    color: #ccd6f6;
    background-color: rgba(127, 255, 212, 0.132);
    transition: 0.3s;
  }
  
  /* Change the hover style for the envelope icon */
  .say-hi:hover::before {
    color: #ccd6f6;
    transition: 0.3s;
  }

  .aboutme-section, .experience-section{
    padding-left: 15%;
    padding-right: 25%;
    font-family: "NTR", sans-serif;
    color: #ccd6f6;
  }
  
  .header-section{
    padding-top: 3%;
    display: flex;
    padding-bottom: 42px;
    width: 100vw;
  }

  .header-section:after {
    content: "";
    display: block;
    width: 300px;
    margin-top: 39px;
    height: 1px;
    margin-left: 20px;
    margin-top: 22px;
    background-color: rgb(86, 98, 121);
  }


  .about-title{
    font-family: "Fira Code";
    color: #ccd6f6;
    font-size: 30px;

  }

  .aboutme-text{
    font-size: 20px;
    font-family: "NTR", sans-serif;
    color: rgb(136, 146, 176);
    max-width: 480px;
    line-height: 1.4;
  }

  .skilz {
    padding-top: 10px;
    list-style-type: '25B9'; /* Unicode character for White Right-Pointing Small Triangle */
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 10px));
    padding-left: 15px;
    font-size: 20px;
  }
  
  .skilz li {
    color: rgb(136, 146, 176); /* set the text color */
    list-style-type: none; /* remove the default list bullet point */
    position: relative; /* make the pseudo-element position relative to the list item */
  }
  
  .skilz li::before {
    content: '25B9'; /* Unicode character for White Right-Pointing Small Triangle */
    color: aquamarine; /* set the bullet point color */
    position: absolute; /* position the pseudo-element absolutely */
    left: -15px; /* move the pseudo-element 15 pixels to the left of the list item */
  }



  .hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 30px;
    height: 20px;
    margin-right: 10px;
    
  }
  
  .hamburger-menu .line {
    width: 100%;
    height: 2px;
    background-color: #ccd6f6;
    margin-bottom: 4px;
    transition: background-color 0.3s;
  }
  
  /* Animate the hamburger menu lines on active state */
  .hamburger-menu.active .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  
  .hamburger-menu.active .line:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger-menu.active .line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }



  


  @media only screen and (max-width: 767px) {

    .header {
      justify-content: space-between;
    }
  
    .hamburger-menu {
      display: flex;
    }
  
    .links {
      display: none;
    }
  
    .header.active .links {
      display: flex;
      flex-direction: column;
      padding-right: 35%;
    }

   

    .intro {
      font-size: 60px;
      padding: 0 10px;
      text-align: center;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
      margin-bottom: -80px;
    }
  
    .intro-name {
      color: aquamarine;
      font-weight: 600;
    }
    
    .intro-title {
        white-space: normal;
        display: inline-block;
        max-width: 90%;
        width: auto;
        font-size: 30px;
        line-height: 1;
      }



      .section-intro {
        margin-top: 50px;
        align-items: center;
        text-align: center;
        padding: 0 10%;
        margin-top: 50px;
      }

      .intro-text{
        margin-top: 5px;
      }
      .say-hi{
        margin: 0 auto; 
      }
  }




JS 


document.querySelector('.hamburger-menu').addEventListener('click', function() {
    this.classList.toggle('active');
    document.querySelector('.header').classList.toggle('active');
  });

  const introElement = document.querySelector('.intro');
  const introNameElement = document.querySelector('.intro-name');
  const text = introElement.textContent.trim();
  let charIndex = 0;
  
  function type() {
    if (charIndex < text.length) {
      introElement.textContent = text.slice(0, charIndex + 1);
      charIndex++;
      setTimeout(type, 200); // Delay between each character typing 
    } else {
      introNameElement.style.color = 'aquamarine'; // Apply the desired styling to .intro-name
    }
  }
  
  type(); // Start the animation
  
  

Given the following Pattern:
ptrn = “url/{test1}/url2/{test2}/url3?param1=&param2=”

and following string
fullURL = “url/abcd/url2/efgh/url3?param1=&param2=”

I want to remove {test1} and {test2} from the fullURL-string, so that the outcome looks like this:
modifiedfullURL = “url//url2//url3?param1=&param2=”

“abcd” + “efgh” can be everything else dependend on the call.
Is there any way to do this “clean”?

I tried with regex, but here of course the pattern can always change, so it would be nice if i can identify the strings which needs to be replaced, based on the pattern.

i am trying to not replace some of variable using mangle reserved keyword using below code

.pipe(uglify({
  mangle: { reserved: ["baseUrl", "actionUrl", "clientErrorUrl"] }}
 ))

however it’s not working .i’m using gulp version 4.0.2. any help really appreciated.

I am able to receive the locally scheduled notifications for both Android and IOS and I am trying to navigate the user to screens according to the type of notification when the user taps on the notification. IOS works fine but on Android when I receive the notification in killed state, then onNotification is not working in some android phones.
It works fine in realme with OS version 13 but not in redme with OS version 13 and vivo with OS version 12.
Kindly help me to fix this issue.

All the permissions are added in AndroidManifest.xml. SplashActivity.java is already added. It works fine on some phones but not working in these Android OS versions.

I need to run some function whenever a new base is created in airtable. I found out that airtable api support webhooks but it needs baseid for creating webhook, so i can’t use it for getting notification about base creation.
I am trying to poll the data but List base Api also don’t return any info about created/updated time.
Is there any hack/info which i can use to get only new created base.

I already looked into api docs and didn’t found anything useful about getting notifications for new created base.