Why is the value returning undefined?

I’m trying to a chrome extension to track tweets that I type out and store them into a variable that can be displayed in the html code. However, each time I do a tweet there is just an undefined value.
Here is the code:

script.js

document.addEventListener('DOMContentLoaded', function() {
  const tweetButtonSelector   = 'div[data-testid="tweetButtonInline"]';
  const tweetTextareaSelector = 'div[aria-label="Tweet text"]';

  function trackTweet() {
    setTimeout(() => {
      const tweetTextarea = document.querySelector(tweetTextareaSelector);
      if (tweetTextarea) {
        const tweetInput = tweetTextarea.innerText;
        console.log('User is tweeting:', tweetInput);
        chrome.storage.local.set({
          tweetInput: tweetInput
        }, function() {
          console.log('Tweet content saved:', tweetInput);
        });
      }
    }, 500);
  }

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach((node) => {
          if (node.querySelector && node.querySelector(tweetButtonSelector)) {
            const tweetButton = node.querySelector(tweetButtonSelector);
            tweetButton.addEventListener('click', trackTweet);
          }
        });
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });

  const tweetButton = document.querySelector(tweetButtonSelector);
  if (tweetButton) {
    tweetButton.addEventListener('click', trackTweet);
  }
});

popup.js

document.addEventListener('DOMContentLoaded', function () {
  chrome.storage.local.get(['tweetInput'], function (result) {
    console.log('Retrieved tweet content:', result.tweetInput);
    const tweetContent = document.getElementById('tweetContent');
    tweetContent.textContent = result.tweetInput || 'No tweet tracked yet.';
  });
});

hello.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Tweet Tracker</title> 
    <script src="script.js"></script>
    <script src="popup.js"></script>
</head> 
<body> 
    <p>Tweet Tracker</p>
    <input type="text" id="InputText" placeholder="Input Text">
    <button id="SubmitButton">Submit</button>
    <p id="output">a</p>
    <p id="tweetContent">No tweet tracked yet.</p> 
</body> 
</html>

manifest.json

{
  "manifest_version": 3,
  "name": "Tweet Tracker",
  "description": ".",
  "version": "1.0",
  "permissions": [
        "activeTab",
        "background",
    "scripting",
    "storage"
],
  "content_scripts": [
    {
      "matches": ["https://x.com/*"],
      "js": ["script.js"]
    }
  ],
  "host_permissions": [
    "https://x.com/*"
  ],
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

I tried testing the code by putting in

chrome.storage.local.get('tweetInput', function(result) {
  console.log(result.tweetInput); 
});

and

chrome.storage.local.get(null, console.log)

in the console, but that also returned undefined.

how to add Polyfills in next js project

When I created a project in NestJS, I encountered different errors in different browsers. For example, I implemented a button that uses the microphone, and it works perfectly in Chrome but not in Brave. Can someone help me resolve this issue, possibly using polyfills?

Brython’s ‘set_loop_timeout’ not working within asynchronous code—any solutions?

While developing my code, I encountered an issue where the webpage becomes unresponsive and irrecoverable when an infinite loop is executed in async mode. While searching for a solution, I found a related discussion here. I tried applying the suggestions to my code, but it didn’t work as expected.

Here’s my code:

from browser import document, window, aio, console, timer

# Set loop timeout
timer.set_loop_timeout(10)

...

def processInput(event=None):
    global input_values
    # Clear previous output
    document["mainConsole"].innerHTML = ""
    # Execute the script
    aio.run(exec_script())

async def exec_script():
    try:
        ${solutiontext}  # This may include an infinite loop
    except BrythonNotRunningError:
        on_compile_done()
        return
    except Exception as e:
        print(f"Error: {e}")
    finally:
        on_compile_done()

processInput()

The problem is that when the solutiontext variable contains an infinite loop like while(1):, the entire webpage freezes. It seems that the set_loop_timeout(10) option doesn’t work within the asynchronous function exec_script().

Has anyone encountered this issue before? How can I prevent or handle infinite loops in asynchronous Brython code?

Approach to apply liner gradient style on area charts using google charts

I am trying to solve an area chart development but I see the exact style as difficult to achieve.

I am using google charts to develop this but I am struggling with

  1. How to apply linear gradient in both data area which turns white towards 0 line.
  2. How to center my liner gradient spread to the peak data points (In below pic, its on June)

enter image description here

Attaching 2nd pic of my situation with google charts

enter image description here

My google chart code.

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'KWH', 'KWH'],
        ['JAN', -250, 800],
        ['APRIL', -240, 810],
        ['JUN', -250, 900],
        ['SEP', -240, 800],
        ['DEC', -200, 700]
    ]);

    var options = {
        title: '',
        colors: ['#00B55F', '#FFC52D'],
        chartArea: {               
            width: '88%',  // Adjust width
            height: '80%'  // Adjust height
        },
        hAxis: { title: 'Month', titleTextStyle: { color: '#FFC52D0' }, backgroundColor: 'FFC52D0' },
        vAxis: { minValue: -400, ticks: [-400, -200, 0, 200, 400, 600, 800, 1000] }

    };

    var chart = new google.visualization.AreaChart(document.getElementById('area_chart_div'));
    chart.draw(data, options);
}

Is there a way that I can get fullpage.js to work in an Express project with Pug template?

I am trying to use fullpage.js in an express project with Pug as the template language. However, the website shows all messed up with fullpage.js working but not doing its normal function and all the sections are mixed together.

I have this in layout.pug

doctype html
html
  head
    title Hello
    block indStyles
  body
    block content

    script(src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js' integrity='sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz' crossorigin='anonymous')
    script(src='https://unpkg.com/[email protected]/dist/aos.js')
    block indScripts

& this in home.pug

extends layout

block indStyles
  link(rel='stylesheet' href='/stylesheets/home-styles.css')

block content
  #fullpagehome 
    .section 
      h1 Hello  
    .section 
      h1 Great

block indScripts
  script(src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.22/fullpage.min.js' integrity='sha512-yHHLi2ZwgtW9QNVZd0asqMyWGJ6Kx73ijKlGWSi3MwYFB5ZzOJV8wPtopKr6muHk5SERgF3OB/2dZj3StlI34w==' crossorigin='anonymous' referrerpolicy='no-referrer')
  script(src='/javascripts/fullpagehome.js')

& this in fullpagehome.js

new fullpage('#fullpagehome', {

    loopTop: true,
    loopBottom: true,
    autoScrolling:true,

});

This is the result I have instead of the scroll-able fullpage.js style

Using the same code but in HTML, I get the correct fullpage.js style

I have tried a lot of options like including the fullpage sections in the layout file & searched around if there is something missing in the javascript file but no still. I also thought maybe because Express & Pug utilize SSR it maybe does something wrong however, I didn’t find any info about that & tried to load the fullpage.js function after page fully rendered using document.readyState == 'complete' & still nothing.

Thanks in advance for taking the time to maybe help me & I need this to work

How to make media recorder api individual chunks playable by it self

I’m trying to send individual chunks to the server instead of sending the whole chunks at once. This way, I have Ffmpeg on my Rails server to convert these chunks to HLS and upload them to S3 to stream the video instantly. However, I’ve encountered an issue the Media Recorder only provides playable chunks for the first segment after that, they are not playable and need to be concatenated to play.

To avoid this, I’ve taken a different approach where I start a new Media Recorder every 3 seconds so that I get a playable chunk every time. However, this approach has its issues the video glitches a bit due to the delay when I stop and start a new Media Recorder. Is there a way to achieve this with ease? This is my current status. please help!

const startVideoRecording = async (
    screenStream: MediaStream,
    audioStream: MediaStream
  ) => {
    setStartingRecording(true);

    try {
      const res = await getVideoId();
      videoId.current = res;
    } catch (error) {
      console.log(error);
      return;
    }

    const outputStream = new MediaStream();
    outputStream.addTrack(screenStream.getVideoTracks()[0]);
    outputStream.addTrack(audioStream.getAudioTracks()[0]); // Add audio track

    const mimeTypes = [
      "video/webm;codecs=h264",
      "video/webm;codecs=vp9",
      "video/webm;codecs=vp8",
      "video/webm",
      "video/mp4",
    ];

    let selectedMimeType = "";
    for (const mimeType of mimeTypes) {
      if (MediaRecorder.isTypeSupported(mimeType)) {
        selectedMimeType = mimeType;
        break;
      }
    }

    if (!selectedMimeType) {
      console.error("No supported mime type found");
      return;
    }

    const videoRecorderOptions = {
      mimeType: selectedMimeType,
    };

    let chunkIndex = 0;

    const startNewRecording = () => {
      // Stop the current recorder if it's running
      if (
        videoRecorderRef.current &&
        videoRecorderRef.current.state === "recording"
      ) {
        videoRecorderRef.current.stop();
      }

      // Create a new MediaRecorder instance
      const newVideoRecorder = new MediaRecorder(
        outputStream,
        videoRecorderOptions
      );
      videoRecorderRef.current = newVideoRecorder;

      newVideoRecorder.ondataavailable = async (event) => {
        if (event.data.size > 0) {
          chunkIndex++;
          totalSegments.current++;
          const segmentIndex = totalSegments.current;
          console.log(event.data);
          handleUpload({ segmentIndex, chunk: event.data });
        }
      };

      // Start recording with a 3-second interval
      newVideoRecorder.start();
    };

    // Start the first recording
    startNewRecording();

    // Set up an interval to restart the recording every 3 seconds
    recordingIntervalIdRef.current = setInterval(() => {
      startNewRecording();
    }, 3000);

    setIsRecording(true);
    setStartingRecording(false);
  };

Impossible to delete 2 cookies at the same time

I have 2 cookies named : access_token and refresh_token.

I can’t delete these 2 cookies at the same time by:

const logout = (req, res) => { 
    res.clearCookie('access_token', { path: '/' });
    res.clearCookie('refresh_token', { path: '/' });
    return res.status(200).json({
        EM: "logout success",
        EC: 1,
        DT: "",
    });
}

But when I only have 1 cookie, I can still clear it by using clearCookie() method.

I want to delete all cookies in 1 action.

How can I do it? or any suggest please!! Thanks.

Mapbox Geocoder on Safari

The following snippet works perfectly on Chrome displaying a search bar to autofill address results. Unfortunately Safari (17.5 in my case) does not recognize .on method on mapboxGeocoder object. Is there a solution ? (Working in a Rails 7 app using Stimulus controller)

  initMapboxAutofill() {

    mapboxgl.accessToken = window.mapboxAccessToken;

    this.mapboxGeocoder = new MapboxGeocoder({
      accessToken: mapboxgl.accessToken,
      mapboxgl: mapboxgl,
      marker: false,
      autocomplete: true,
      placeholder: 'Search for an address',
    });

    if (this.hasGeocoderAutocompleteTarget) {
      this.geocoderAutocompleteTarget.appendChild(this.mapboxGeocoder.onAdd());

      if (typeof this.mapboxGeocoder.on === 'function') {
        this.mapboxGeocoder.on('result', (event) => {
          const { geometry } = event.result;
          this.populateAddressFields(event);
      
          const coordinates = geometry.coordinates;
          this.displayStaticMap(coordinates);
        });
      } else {
        console.error('Mapbox Geocoder "on" method is not available.'); //Safari flow
      }
    } else {
      this.initStaticMapForExistingHome();
    }
  }
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <script id="search-js" defer src="https://api.mapbox.com/search-js/v1.0.0-beta.21/web.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>

Isn’t the size of an inline element determined by the size of its child elements?

I’m a beginner.

What I’m curious about is the size of an inline element.

I’ve heard that the size of an inline is determined by the content of the inline element or the size of its child element.

The container(span) doesn’t have the same size as the canvas.

When I checked with the dev tool, the height of the span was only 21px and the size of the canvas was 400px.

I thought the container would take up the same size as its child element, canvas.

What’s wrong?

<body>
    <span class="container">
        <canvas id="screen"></canvas>
    </span>
    <script src="index.js"></script>
</body>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: wheat;
    height: 100vh;
    min-height: 100vh;
}
.container {

    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#screen {
    position: relative;
    border: 3px solid white;
}
const canvas = document.querySelector("canvas");

canvas.style.width = "600px";
canvas.style.height = "400px";

DiscordAPIError[10062]: Unknown interaction randomly popped up

I’m trying to make a discord bot. for a skyblock server, using the commands it will show for example farming level, etc. this code use to work just fine, the next day when I started it I got this error following. Note: it only breaks in the Farming function that I created I did a dungeon’s functions and slash command and it worked just fine.

Error : DiscordAPIError[10062]: Unknown interaction at handleErrors (C:Usersyy3OneDriveDisktopSkyblockbotnode_modules@discordjsrestdistindex.js:730:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async BurstHandler.runRequest (C:Usersyy3OneDriveDisktopSkyblockbotnode_modules@discordjsrestdistindex.js:835:23) at async _REST.request (C:Usersyy3OneDriveDisktopSkyblockbotnode_modules@discordjsrestdistindex.js:1278:22) at async ChatInputCommandInteraction.deferReply (C:Usersyy3OneDriveDisktopSkyblockbotnode_modulesdiscord.jssrcstructuresinterfacesInteractionResponses.js:71:5) at async Client.<anonymous> (C:Usersyy3OneDriveDisktopSkyblockbotsrcindex.js:307:9) Emitted 'error' event on Client instance at: at emitUnhandledRejectionOrErr (node:events:402:10) at process.processTicksAndRejections (node:internal/process/task_queues:84:21) { requestBody: { files: undefined, json: { type: 5, data: { flags: undefined } } }, rawError: { message: 'Unknown interaction', code: 10062 }, code: 10062, status: 404, method: 'POST', url: 'https://discord.com/api/v10/interactions/1271726598881804370/aW50ZXJhY3Rpb246MTI3MTcyNjU5ODg4MTgwNDM3MDpoRFlWN1hwODUxVGNLY21lRnk1NWh4UEVOT0tYQllLblZZR0Z5WXJ0eHdZSExiVUlDR0w0Qmc1ak5uUjRvZ3p2a2xpVzRDd3RNb0hDODFlUFhwWVVQNGZOSURGQjlGNnBVMzVlbEpkZzl4MHZLU1VXSVhQT01iUkl3NHd1c1JGRg/callback' }

require('dotenv').config();
const { UserFlags } = require('discord-api-types/v9');
const {Client, GatewayIntentBits, EmbedBuilder, PermissionsBitField, Permissions, SlashCommandBuilder, Events} = require('discord.js');
const { MongoClient } = require('mongodb');


const uri = "mongodb://localhost:27017/";
const dbName = "skyblock";
const collectionUsers = "profiles";

const mongoclient = new MongoClient(uri, { useNewURLParser: true, useUnifiedTopology: true });


// Connecting-Reading Database Collections.
mongoclient.connect()
    .then(() => {
        console.log('Connected to MongoDB');

        const db = mongoclient.db(dbName);

        return db.listCollections().toArray();
    })
    .then(collections => {
        let count = 0
        console.log('Collections in database:');
        collections.forEach(collection => {
            count = count + 1
        });
        console.log(`${count} Collections Loaded`)
    });




const client = new Client({
    intents: [
        GatewayIntentBits.Guilds,
        GatewayIntentBits.GuildMessages,
        GatewayIntentBits.MessageContent
    ]
});


function Mapping(n, mapping) {
    let count = 0;
    for (let i = 0; i < mapping.length; i++) {
        n -= mapping[i];
        if (n < 0) {
            return count;
        }
        count = i + 1;
    }
    return count;
}

function capitalizeUsername(username) {
    if (!username) return ''; // Handle empty or undefined input
    return username.charAt(0).toUpperCase() + username.slice(1).toLowerCase();
}

function catchFarmingMapping(Level) {

    farmingMapping = [50, 125, 200, 300, 500, 750, 1000, 1500, 2000, 3500, 5000, 7500, 10000, 15000, 20000, 30000, 50000, 75000, 100000, 200000, 300000, 400000, 500000, 600000, 700000, 800000, 900000, 1000000, 1100000, 1200000, 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000, 2100000, 2200000, 2300000, 2400000, 2500000, 2600000, 2750000, 2900000, 3100000, 3400000, 3700000, 4000000, 4300000, 4600000, 4900000, 5200000, 5500000, 5800000, 6100000, 6400000, 6700000, 7000000];

    const Farming = Mapping(Level, farmingMapping);
    console.log(Farming)
    return Farming;
}

function catchCatacombMapping(Level) {

    dungeonmapping = [ 50, 75, 110, 160, 230, 330, 470, 670, 950, 1340, 1890, 2665, 3760, 5260, 7380, 10300, 14400, 20000, 27600, 38000, 52500, 71500, 97000, 132000, 180000, 243000, 328000, 445000, 600000, 800000, 1065000, 1410000, 1900000, 2500000, 3300000, 4300000, 5600000, 7200000, 9200000, 12000000, 15000000, 19000000, 24000000, 30000000, 38000000, 48000000, 60000000, 75000000, 93000000, 116250000 ]

    const Catacomb = Mapping(Level, dungeonmapping);
    console.log(Catacomb);
    return Catacomb;
}

async function catchDungeonLevel(User) {
    const database = mongoclient.db('skyblock');
    const usersCollection = database.collection('users');
    const profileMemCollection = database.collection('profile_members');

    const user = await usersCollection.findOne({ lowercase_name: User });

    if (!user) {
        console.log('User not found');
        return null;
    }

    const activeProfile = user.active_profile;
    console.log('Active Profile:', activeProfile);

    const profile = await profileMemCollection.findOne({ profile_id: activeProfile });

    if (!profile) {
        console.log('Profile not found');
        return null;
    }

    const CatacombExperience = profile.data?.dungeons?.dungeon_types?.CATACOMBS?.experience;

    console.log(CatacombExperience);

    if (CatacombExperience !== undefined) {
        const DungeonLevel = Math.floor(CatacombExperience);
        return DungeonLevel;
    } else {
        console.log('Farming experience not found');
        return null;
    }
}

async function catchFarmingMedals(User) {

    const database = mongoclient.db('skyblock');
    const usersCollection = database.collection('users');
    const profileMemCollection = database.collection('profile_members');

    const filter = { lowercase_name: User };
    const user = await usersCollection.findOne(filter);

    console.log(filter)
    activeProfile = user.active_profile
    console.log(activeProfile)

    if (User) {

        const filter = { profile_id: activeProfile };
        const Profile = await profileMemCollection.findOne(filter);
        
        if (Profile) {
            Gold = Profile.data?.farming?.gold
            Silver = Profile.data?.farming?.silver
            Bronze = Profile.data?.farming?.bronze

            console.log(`Gold ${Gold}, Silver ${Silver}, Bronze ${Bronze}`)
        }
    }

}

async function catchFarmingLevel(User) {
    const database = mongoclient.db('skyblock');
    const usersCollection = database.collection('users');
    const profileMemCollection = database.collection('profile_members');

    const user = await usersCollection.findOne({ lowercase_name: User });

    if (!user) {
        console.log('User not found');
        return null;
    }

    const activeProfile = user.active_profile;
    console.log('Active Profile:', activeProfile);

    const profile = await profileMemCollection.findOne({ profile_id: activeProfile });

    if (!profile) {
        console.log('Profile not found');
        return null;
    }

    const farmingExperience = profile.data?.experience_skill_farming;

    if (farmingExperience !== undefined) {
        const farmingLevel = Math.floor(farmingExperience);
        return farmingLevel;
    } else {
        console.log('Farming experience not found');
        return null;
    }
}

async function catchFarmingContests(User) {

    const database = mongoclient.db('skyblock');
    const usersCollection = database.collection('users');
    const profileMemCollection = database.collection('profile_members');

    const filter = { lowercase_name: User };
    const user = await usersCollection.findOne(filter);

    console.log(filter)
    activeProfile = user.active_profile
    console.log(activeProfile)

    if (User) {

        const filter = { profile_id: activeProfile };
        const Profile = await profileMemCollection.findOne(filter);
        
        if (Profile) {
            Contests = Profile.data?.farming?.contests;

            if (Profile.data?.farming?.contests && typeof Profile.data?.farming?.contests === 'object') {
                const numberOfContests = Object.keys(Profile.data?.farming?.contests).length;
                console.log(`Number of contests: ${numberOfContests}`);
                return numberOfContests;
            } else {
                console.log('Contests data is either undefined or not an object');
                return null;
            }
        }
    }

}

client.on(Events.ClientReady, (e) => {
    console.log(`✅ ${e.user.tag} is ready!`);

    const farming = new SlashCommandBuilder()
    .setName ('farming')
    .setDescription ('View a players farming statistics!')
    .addStringOption(option =>
        option
        .setName('username')
        .setDescription('Minecraft Username')
        .setRequired(true)
    )

    const support = new SlashCommandBuilder()
    .setName ('support')
    .setDescription ('Supporting fakepixel')

    const dungeons = new SlashCommandBuilder()
    .setName ('dungeons')
    .setDescription ('View dungeon stats')
    .addStringOption(option =>
        option
        .setName('username')
        .setDescription('Minecraft Username')
        .setRequired(true)
    )

    client.application.commands.create(farming);
    client.application.commands.create(support);
    client.application.commands.create(dungeons);

});

client.on('interactionCreate', async (interaction) => {
    if(!interaction.isChatInputCommand()) return;

    if(interaction.commandName==='dungeons') {
        const username = interaction.options.getString('username');

        if(username) {
            const Username = username
            const username_lowercase = Username.toLowerCase();

            try {

                const FetchDungeonExperience = await catchDungeonLevel(username_lowercase);
                const FetchDungeonLevel = await catchCatacombMapping(FetchDungeonExperience);
                console.log(FetchDungeonExperience);
                console.log(FetchDungeonLevel);

                interaction.reply(`Catacomb :${FetchDungeonLevel}`);

            } catch (error) {

                console.error('Error handling Dungeons command:', error);
                interaction.reply('Please provide a valid username to fetch Dungeons details.');

            }
        }

    } else {
        interaction.reply('Please provide a valid username to fetch farming details.');
    }
})


client.on('interactionCreate', async (interaction) => {
    if(!interaction.isChatInputCommand()) return;

    if(interaction.commandName==='support') {

        const supportEmbed = new EmbedBuilder()
        .setTitle(`Fakepixel Support`)
        .setDescription(`Fakepixel is a thriving Minecraft server that thrives on the support of its community. By supporting Fakepixel, you help keep the server running and enable us to continually provide exciting updates and new features. As a token of our gratitude, supporters receive a range of exclusive perks that enhance your in-game experience.`)
        .setColor('#347deb')
        .addFields({
            name: 'Features:',
            value: `• **Cool Prefix & Chat Customization** - Stand out with a unique prefix and a custom chat color.
            • **Custom Commands** - Gain access to special command like /fly, /vanish to enhance your gameplay.
            • **Support the Server** - Show your dedication and help Fakepixel grow stronger.
            • **Discord Perks** - Share media files in the Discord server and connect with the community.
            • **Exclusive Beta Tester Access** - Be among the first to try out new features and content before anyone else.
            `,
            inline: true
        })
        .setImage('https://i.imgur.com/8ObuWiL.png')
        .setFooter({text: 'by @Dyamonic', iconURL: 'https://i.imgur.com/dVdkH9y.gif'})

        interaction.reply({embeds: [supportEmbed]});
    }
})


client.on('interactionCreate', async (interaction) => {
    if(!interaction.isChatInputCommand()) return;

    if(interaction.commandName==='farming') {
        await interaction.deferReply({})
        const username = interaction.options.getString('username');

        if(username) {
            const username_lowercase = username.toLowerCase();
            const Username_Capitial = capitalizeUsername(Username);

            try {

            const FetchFarmingLevel = await catchFarmingLevel(username_lowercase);
            const FetchFarmingMapping = await catchFarmingMapping(FetchFarmingLevel);
            const FetchFarmingMedals = await catchFarmingMedals(username_lowercase);
            const FetchFarmingContests = await catchFarmingContests(username_lowercase);


            await interaction.editReply(`
                Username : ${Username_Capitial}
                Farming : ${FetchFarmingMapping}
                Gold : ${Gold}
                Silver : ${Silver}
                Bronze : ${Bronze}
                Contests : ${FetchFarmingContests}`);

            //const farmingEmbed = new EmbedBuilder()
            //.setTitle(`${Username_Capitial}'s Farming Skill on Profile`)
            //.setDescription(`<:Iron_hoe:1268545041735876704> Farming: **${FetchFarmingMapping}**
            //    <:Farming_Contest:1268545029509742623> Contests: **${FetchFarmingContests}**`)
            //.setColor('#347deb')
            //.setThumbnail(`https://visage.surgeplay.com/full/${username_lowercase}`)
            //.addFields({
            //    name: 'Medals',
            //    value: `<:Gold_Ingot:1268544990510972949> Gold: ${Gold}
            //    <:Iron_Ingot:1268545007422275645>  Silver: ${Silver}
            //    <:Clay_Brick:1268545018688180276> Bronze: ${Bronze}`,
            //    inline: true
            //})
            //.setFooter({text: 'by @Dyamonic | Support by using /support', iconURL: 'https://i.imgur.com/dVdkH9y.gif'})
    
            //interaction.reply({embeds: [farmingEmbed]});

            } catch (error) {

                console.error('Error handling farming command:', error);
                interaction.reply('Please provide a valid username to fetch farming details.');

            }

        }
        else {
            interaction.reply('Please provide a valid username to fetch farming details.');
        }
    }
})

client.login(process.env.TOKEN);

How to hide an already open browser in Puppeter?

You need to open the browser and close it after 3 seconds

const browser = await (require('puppeteer')).launch({headless: false, defaultViewport: null,args: ['--start-maximized'] });
const page = await browser.newPage();
//
page.goto('https://web.telegram.org/a/', {timeout: -1});
//
setTimeout(() => {
    console.log('how to hide browser?')
}, 3000);

I already know how to initially launch it with a hidden browser. But the problem is that I need to close it after a while

Livewire action restricting 3rd part plugin intialization

i’m using a 3rd party scrollbar plugin (smooth-scrollbar) in my php code and it is working fine when loading page, after any livewire click or action happened (like pagination or sorting) inside a table happened suddenly the scrollbar plugin content is getting removed. Any idea what is the issue behind this. Any fix for that?

function scrollInitialize() {
    var elements = document.getElementsByClassName('scroll');
    for (var i = 0; i < elements.length; i++) {
        var scrollbar = Scrollbar.init(elements[i], {
            damping: 0.5, // Set damping to 0.5
            renderByPixels: true, // Render scrollbars by pixels
            continuousScrolling: true, // Enable continuous scrolling
            alwaysShowTracks: true
        });

        
    }
}

function init() {
    // ========================================================
    // Condition based on screen width
    // ========================================================
    if (mq.matches) {
        
        // ========================================================
        // Smooth Scrollbar
        // ========================================================

        // Initialize Smooth Scrollbar for all elements with the class 'scroll'
        scrollInitialize();

    }
}

This is the initilization code

HTML Code:

<div class="table-responsive scroll">
     <table class="cs-table table caption-top main-listing" id="dropdown-options-table"></table>
</div>

Google Apps Script Error: ‘Script function onSubmitOpening could not be found’ Despite Correct Setup

I am working on a little project for a restaurant, where I am using Chat GPT to write a code for an opening and closing task list on Google Apps Script. I have a submit button on the sheet triggers notification, my code on the “employer” side are as follow. The code works fine on the “employer side”, where I can get notif and stuff, but when I use a dummy account to be an “employee”, it states “Script function onSubmitOpening could not be found”. What’s wrong with the code?

Error Message
Excel structure

`
function onSubmitOpening() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(“Opening”);

  // Define the range for the "CHECK" and "INITIALS" columns
  var checkColIndex = 3; // Index for the "CHECK" column (assuming it's the 5th column)
  var initialsColIndex = 4; // Index for the "INITIALS" column (assuming it's the 6th column)
  var itemColIndex = 1; // Index for the "ITEM" column (assuming it's the 2nd column)

  // Find the cell next to "Submitted by:"
  var submittedByRange = sheet.createTextFinder("Submitted by:").findNext();
  if (!submittedByRange) {
    SpreadsheetApp.getUi().alert("Could not find the 'Submitted by:' cell.");
    return;
  }
  var submittedByName = sheet.getRange(submittedByRange.getRow(), submittedByRange.getColumn() + 1).getValue().toString().trim();

  // Check completion and notify
  checkCompletionAndNotify(sheet, itemColIndex, checkColIndex, initialsColIndex, "Opening Checklist", submittedByName);

  // Protect the sheet, allowing only "CHECK" and "INITIALS" columns to be edited
  protectSheet(sheet, checkColIndex, initialsColIndex);
}

function checkCompletionAndNotify(sheet, itemColIndex, checkColIndex, initialsColIndex, sheetName, submittedByName) {
  var dataRange = sheet.getDataRange();
  var data = dataRange.getValues();
  var incompleteTasks = [];
  var allTasksCompleted = true;

  // Ensure that all "CHECK" and "INITIALS" columns are filled only for rows where ITEM exists
  for (var i = 2; i < data.length; i++) { // Start from row 3 (index 2)
    var itemValue = (data[i][itemColIndex] || "").toString().trim();
    var checkValue = (data[i][checkColIndex] || "").toString().trim().toLowerCase();
    var initialsValue = (data[i][initialsColIndex] || "").toString().trim();

    // Skip rows where ITEM is empty
    if (itemValue === "") {
      Logger.log("Row " + (i + 1) + " skipped because ITEM is empty.");
      continue;
    }

    // Log the values being checked
    Logger.log("Row " + (i + 1) + " - ITEM: " + itemValue + ", CHECK: " + checkValue + ", INITIALS: " + initialsValue);

    if (checkValue === "" || initialsValue === "") {
      allTasksCompleted = false;
      SpreadsheetApp.getUi().alert("Please complete all required fields then submit.");
      return;
    }

    if (checkValue !== "yes") {
      incompleteTasks.push(itemValue); // Use itemValue directly for logging incomplete tasks
      allTasksCompleted = false;
    }
  }

  // Send an email notification and generate a PDF based on the completion status
  var emailAddress = "[email protected]";
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var hour = now.getHours();
  var minute = now.getMinutes();

  var emailSubject = sheetName + " Submission Notification";
  var emailBody;

  if (allTasksCompleted) {
    emailBody = "All the items have been successfully submitted at " + year + "/" + month + "/" + day + " at " + hour + ":" + minute + " by " + submittedByName;
  } else {
    // Format incomplete tasks as a list, each item on a new line
    var itemList = incompleteTasks.map(function(task) {
      return task;
    }).join("n");

    emailBody = "Good day! Kindly find attached the " + sheetName + " report, submitted at " + year + "/" + month + "/" + day + " at " + hour + ":" + minute + ". The following items in the " + sheetName + " still need to be completed by " + submittedByName + ":n" + itemList;
  }

  // Generate the PDF
  var pdfBlob = createPDF(sheet);

  // Send the email with the attached PDF
  MailApp.sendEmail({
    to: emailAddress,
    subject: emailSubject,
    body: emailBody,
    attachments: [pdfBlob]
  });

  // Clear the "CHECK" and "INITIALS" columns after submission, leaving the headings intact
  clearColumns(sheet, checkColIndex, initialsColIndex);
}

function createPDF(sheet) {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheetId = sheet.getSheetId();
  var url = "https://docs.google.com/spreadsheets/d/" + spreadsheet.getId() + "/export?format=pdf&size=A4&portrait=true&sheetnames=false&printtitle=false&pagenumbers=false&gridlines=true&fzr=false&gid=" + sheetId;

  var token = ScriptApp.getOAuthToken();
  var response = UrlFetchApp.fetch(url, {
    headers: {
      'Authorization': 'Bearer ' + token
    }
  });

  return response.getBlob().setName(sheet.getName() + ".pdf");
}

function clearColumns(sheet, checkColIndex, initialsColIndex) {
  var lastRow = sheet.getLastRow();
  sheet.getRange(3, checkColIndex + 1, lastRow - 2, 2).clearContent(); // Clears "CHECK" and "INITIALS" columns from row 3 downwards
}

function protectSheet(sheet, checkColIndex, initialsColIndex) {
  // Protect the entire sheet
  var protection = sheet.protect().setDescription('Protect sheet except CHECK and INITIALS columns');

  // Unprotect the "CHECK" and "INITIALS" columns
  var unprotectedRange = sheet.getRange(3, checkColIndex + 1, sheet.getLastRow() - 2, 2);
  protection.setUnprotectedRanges([unprotectedRange]);

  // Set the owner of the sheet
  var me = Session.getEffectiveUser();
  protection.addEditor(me);
  protection.removeEditors(protection.getEditors());
  if (protection.canDomainEdit()) {
    protection.setDomainEdit(false);
  }
}`

I followed Chat GPT’s instruction to set up a trigger but it doesn’t seem to work.

trigger set up

On submission

Event Coding Exercise on mdn web docs

Mdn Web Docs Event Exercises I am new to coding exercises from JavaScript, i m doing event exercises for first time trying no to cram it ,kindly help

I need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again.

The HTML should not be changed; just the JavaScript.

const btn = document.querySelector('.off');

// Add your code here
btn.addEventListener(onclick, () => {
btn.innerHTML = changeText;
});

TypeError: Router.use() requires a middleware function but got a Object at Function.use

I checking some code on NodeJS but here is the error I am getting and notable to resolve it.

  throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))
  ^

TypeError: Router.use() requires a middleware function but got a
Object
at Function.use (D:Reactfeedback-appnode_modulesexpresslibrouterindex.js:469:13)
at Function. (D:Reactfeedback-appnode_modulesexpresslibapplication.js:227:21)
at Array.forEach ()
at Function.use (D:Reactfeedback-appnode_modulesexpresslibapplication.js:224:7)
at Object. (D:Reactfeedback-appserver.js:27:5)
at Module._compile (node:internal/modules/cjs/loader:1378:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
at Module.load (node:internal/modules/cjs/loader:1212:32)
at Module._load (node:internal/modules/cjs/loader:1028:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)

Node.js v21.6.2

Here is my auth.js

const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

const router = express.Router();

// Register a new user
router.post('/register', async (req, res) => {
    const { username, email, password } = req.body;

    try {
        // Check if the user already exists
        let user = await User.findOne({ email });
        if (user) {
            return res.status(400).json({ msg: 'User already exists' });
        }

        // Create a new user
        user = new User({ username, email, password });

        // Hash the password before saving the user
        const salt = await bcrypt.genSalt(10);
        user.password = await bcrypt.hash(password, salt);

        await user.save();

        // Create and return JWT token
        const payload = { user: { id: user.id } };
        jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' }, (err, token) => {
            if (err) throw err;
            res.json({ token });
        });

    } catch (err) {
        console.error(err.message);
        res.status(500).send('Server error');
    }
});

// Login a user
router.post('/login', async (req, res) => {
    const { email, password } = req.body;

    try {
        // Check if the user exists
        let user = await User.findOne({ email });
        if (!user) {
            return res.status(400).json({ msg: 'Invalid credentials' });
        }

        // Compare the entered password with the hashed password
        const isMatch = await bcrypt.compare(password, user.password);
        if (!isMatch) {
            return res.status(400).json({ msg: 'Invalid credentials' });
        }

        // Create and return JWT token
        const payload = { user: { id: user.id } };
        jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' }, (err, token) => {
            if (err) throw err;
            res.json({ token });
        });

    } catch (err) {
        console.error(err.message);
        res.status(500).send('Server error');
    }
});

module.exports = router;

This is my server.js

const express = require("express");
const mongoose = require("mongoose");
require('dotenv').config();

const app = express();

app.use(express.json());//middleware

mongoose.connect(process.env.MONGO_URI,{
    useNewUrlParser: true,
    useUnifiedTopology: true,
}).then(() => {
    console.log('Connected to MongoDB');
}).catch(err => {
    console.error('Error connecting to MongoDB:', err.message);
});

app.get('/', (req, res) => {
    res.send('Welcome to the Feedback App!');
});

const authRoutes = require('./routes/auth');
console.log("test");
console.log(authRoutes);
console.log("test");
// Routes
app.use('/api/auth', authRoutes); // Add the auth routes



const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});