Category: javascript

I am creating a nextjs 13 app router project using material UI. i have designed the theme using createTheme but the primary color sort of dulls down on its own when uploading on AWS AMPLIFY. the changes look fine locally but not on cloud.

Dependencies i am using in the current project:

    {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.8",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.3",
    "@types/node": "20.4.8",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "ag-grid-community": "^30.1.0",
    "ag-grid-react": "^30.1.0",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "faker": "^5.5.3",
    "millify": "^6.1.0",
    "next": "13.4.12",
    "next-auth": "^4.22.3",
    "react": "18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "18.2.0",
    "react-fast-marquee": "^1.6.0",
    "react-spring": "^9.7.2",
    "sass": "^1.67.0",
    "typescript": "5.1.6"
  }

Theme.ts, describing the two themes being used.

import { createTheme } from "@mui/material/styles";

declare module "@mui/material/styles" {
  interface CustomTheme {
    danger?: {
      super?: string;
    };
  }

  interface Theme extends CustomTheme {}
  interface ThemeOptions extends CustomTheme {}
}
const theme = createTheme({
  palette: {
    primary: {
      main: "#ffeda0",
      light: "#ffe98a",
      dark: "#ffdf57",
    },
    secondary: {
      main: "#280b45",
      light: "#411271",
      dark: "#0e0419",
    },
    background: {
      paper: "#fff",
      default: "#fff",
    },
  },
  danger: {
    super: "#f00",
  },
});

const darkTheme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#280b45",
      light: "#411271",
      dark: "#0e0419",
    },
    text: {
      primary: "#fff",
      secondary: "#808080",
    },
    secondary: {
      main: "#ffe98a",
      light: "rgb(255,237,160)",
      dark: "#ffdf57",
    },
    background: {
      paper: "#121212",
      default: "#121212",
    },
  },
});
export default theme;
export { darkTheme };

I am trying to build and extension for youtube for which I need to manipulate its DOM. The Dom manipulation thing works but not the first load but after reloading the page for once.

The code for my script file:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./src/App";
import "./src/index.css";

declare const chrome: any;

if (typeof browser === "undefined") {
  var browser = chrome;
}

class Main extends React.Component {
  render() {
    return (
      <div className={'my-extension'}>
        <App />
      </div>
    )
  }
}

function addReactApp() {
  const sideBox = document.getElementById("secondary"); 
  const sideBox_inner = document.getElementById("secondary-inner");
  const videoPlayer = document.getElementsByClassName("html5-video-container");

  console.log("videoPlayer",videoPlayer)

  if (sideBox && sideBox_inner && videoPlayer) {
    const app = document.createElement("div");
    app.id = "tubechat-ai";

    sideBox.prepend(app);

    const container = document.getElementById("tubechat-ai");

    if (container) {
      const root = createRoot(container);

      root.render(
        <React.StrictMode>
          <Main />
        </React.StrictMode>
      );
    }
  } else {
    console.log("Not all required elements are present.");
  }

}

browser.storage.sync.get("ytrvp-manipulating-dom", function (items) {
  if (!browser.runtime.error) {
    let observer = new MutationObserver((mutations) => {
      for (let mutation of mutations) {
        for (let node of mutation.addedNodes) {
          const shouldAddReactApp = node instanceof HTMLElement && node.tagName === "DIV" && node.id === "secondary";

          shouldAddReactApp ? addReactApp() : console.log("No tags found in the added node");
        }
      }
    });

    observer.observe(document, { childList: true, subtree: true });
  } else {
    console.log("Runtime error occurred");
  }
});

Manifest File for extension :

{
  "manifest_version": 3,
  "name": "Tubechat.ai",
  "version": "1.0.0",
  "permissions": [
    "activeTab",
    "storage",
    "scripting",
    "webNavigation",
    "tabs",
    "notifications"
  ],
  "host_permissions": [
    "http://www.youtube.com/*",
    "https://www.youtube.com/*"
  ],
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "my-assets/logo.png",
      "48": "my-assets/logo.png",
      "128": "my-assets/logo.png"
    }
  },
  "icons": {
    "16": "my-assets/logo.png",
    "48": "my-assets/logo.png",
    "128": "my-assets/logo.png"
  },
  "content_scripts": [
    {
      "matches": ["*://www.youtube.com/*"],
      "js": ["content.js"],
      "css": ["my-assets/index.css"]
    }
  ],
  "background": {
    "service_worker": "background.js" 
  }
}

I have tried to change the manifest by putting the run_at tag in the content script but that also didn’t work

I want to add a class of each li items like Adding different classes to each list item

I used code from here Adding different classes to each list item

$(function () {

  $(".sd-list li").each(function(index) {
        $(this).attr("class", "color" + index);
  });

});

It is add the class like color0, color1
But I want add a class of given attribute name like

It is display the <li class”color-brand”>Brand

Please let me know how can i do this becase am not want to add 0, 1, 2 I want the class as a name

i am using 123rf for the images and bayphoto apis for the frames and sizes but i want to implement the Immersive Visual APIs for Room-Based Image Display and Artwork Framing in my website like this website they are create the images background images like that https://www.greatbigcanvas.com/view/watercolor-lemons-in-mason-jar-landscape,2605210/ i want to know what apis is this you can see my website http://dvart.io/order/?id=10182910066 in this i have create the custom background images but it cannot show like that i also use artplacer plugin in my website to show images like that but it is not what i am looking for

i also try arty api but that only for one images

Basically, I have a function:

const parseToNumber = (inputString) => {
   const cleanedString = inputString.replace(/[^0-9a-zA-Z]+/g, '');
   const numberValue = parseInt(cleanedString);
   return numberValue;
}

I’m trying to pass it to the evaluate method:

const parseToNumber = (inputString) => {
   const cleanedString = inputString.replace(/[^0-9a-zA-Z]+/g, '');
   const numberValue = parseInt(cleanedString);
   return numberValue;
}

I’m getting the error:

parseToNumber is not a function

what am I doing wrong?

async function getData(){
  let browser = await puppeteer.launch({
    headless: false,
    slowMo: 100,
    defaultViewport: {
        width: 1280,
        height: 1024,
    },
    let page = await browser.newPage();
    const url= "MY_URL";
    await  page.goto(url, {
        waitUntil: "networkidle0",
    });

    await page.evaluate(async (parseToNumber)=>{
       parseToNumber("2,42$");
    },parseToNumber);

 })
 .catch((err) => console.log("error loading url", err));

}
getData()

I have POS application in Laravel PHP. I need to show customer display. I have the customer display like Partner CD7220 UN model. I need the API or source code to connect the customer display with my PHP POS application. so can any one have the plugins/source code/ideas kindly share to me. That will helpful to me. Thanks in Advance.

I don’t have any plugins or code with me…

I’m doing the form project on TOP and the paragraph and the form it self keeps overflowing outside its container when resizing the browser vertically as shown in picture below.

overflowing content

I’m a newbie so please forgive my lack of knowledge, i dont know half what I’m doing.

I tried the flex shrink, also tried to put the font sizing using rem instead of pixels as i was thinking the font size might get updated relativly to its parent container, i also tried those commands base on some searching but no luck, word-wrap: break-word, and min-width: 0.

I’m expecting the content to shrink down in size and keep fitting in its container.

this is my code
Live form overview

Suppose I have a function named formatStr in global.js file:

export const formatStr = () => {
 return 'something';
}

Now, I am importing it a component say OptionComponent.vue:

import { formatStr } from '@/vue/folder/global';

The component is written in Options API in Vue3. Now when I try to use the function inside template I get this error that it is not a function. But I can use it inside script tag of the component. What is the way to using a function in Options API? Should I declare a local variable or function for that imported function?

I wrote a local function that calls the imported function and then used the local function instead of the imported function.

I expect a clean way to handle function import in Vue Options API.

I’m working on a React project using Emotion js for styled components. I’m using Vim with the CoC plugin and coc-tsserver for JavaScript development. Even though I’m not using TypeScript, I’m relying on tsserver for type checking in my JavaScript files.

I’m encountering type errors when passing props to Emotion styled components. Here’s an example of my code:

export const CommandInput = styled.div`
  display: flex;
  flex-direction: column;
  height: ${({ height }) => height};
`;

On using <CommandInput height="200px" /> im getting a type error:

My jsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "checkJs": true,
    "skipLibCheck": true,
    "baseUrl": ".",
  },
  "exclude": ["node_modules", "dist"]
}

Has anyone encountered a similar problem or have suggestions on how to fix this or configure to ignore it?

sdada pintu baja moti pintu baja moti pintu baja moti pintu baja moti pintu baja moti pintu baja moti
enter image description here

pintu baja moti pintu baja moti pintu baja moti pintu baja moti pintu baja moti pintu baja moti
enter image description here

I am trying to retrieve data from an API, but am getting a status 500 error.

I am able to get the data perfectly fine when running this in my terminal:

curl -u myApiKey: https://api.racehero.io/v1/events/38247

but when I try and retrieve it in JavaScript with the given sample code from the API docs I get the status 500 error.
Here is my JavaScript code below, with the only modification to the sample code provided being the added (‘Authorization’, ‘Basic myApiKey’) to the request header.

var XMLHttpRequest = require('xhr2');
var request = new XMLHttpRequest();

request.open('GET', 'https://api.racehero.io/v1/events/38247');
request.setRequestHeader('Authorization', 'Basic myApiKey:');

request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Accept', 'application/json');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

request.send();

Any help is appreciated!

I tried doing it in python as well as different calls, but keep running into the same issue.

I need help locating the Xpath or CSS Selector of the download JSON button on this page.

https://data.ntsb.gov/carol-main-public/query-builder?month=12&year=1962

I copied the selector via Chrome browser but it is not locating the button when I control find.

Xpath -> //*[@id=”exportResultsButton”]
CSS -> #exportResultsButton

I would like to conditionally fill a property based on the target type.

I need to do this inside an event handler for a form (react).

I would like an if/else statements situations that encompasses what I am trying to do in line 41 and 42, but I don’t know how.

How can I implement an if/else statement or a switch in object literals assigning?

As you can see from the image, I have tried nesting a ternary operator, while I am glad to see that it doesn’t show any errors in my code, it still does not work.

I was trying to use basic if/else statements but wasn’t succesful.

My website is a subscription based website that uses stripe as payment with the following plan.

$24.99/ Month
This subscription gives the customer 10 credit a month to use to purchase reports. Each report cost 1 credit.

Every month the credits are refilled to a total of 10 no matter how many are left over from the previous month.

The part im stuck on is how to automatically have the website refill the customers account with 10 credits after their monthly subscription renews and if their subscription does not renew then to clear their leftover credits from their account.

Additionally…
I am using the MERN Stack and was thinking of storing the credits in the userSchema. Would this be the correct way of assigning credits to users?

As of now I have a planSchema and a userSchema. Credits are stored in the userSchema and once the customer subscribes with stripe it applies these credits to their userProfile stored in mongodb.

What I would like to happen..
Example: Customer subscribes on November 1st and receives 10 credits. Customer uses 8 credits for the month of November. December 1st their subscription renews and their credits are then reset to 10.

Data just adding up to previous result. I want to remove the previous one when inputting another city. I use openweather API.

I made refresh button to reload the page before entering another input. But I want is removing the previous result when inputting another city without reloading the page. I use javascript in this case.

function fetchWeather(city){
    displayLoading();
    const fetchAPI = fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api}&units=metric`);

    fetchAPI.then(response => {
        return response.json();
    }).then(data => {
        hideLoading();
        displayWeather(data)
    })
    .catch(err => {
        error.style.display = "block";
        console.log(err);
    })
}

//Fetch daily and hourly forecast
function fetchForecast(city) {
    const url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${api}&units=metric&cnt=25`;
    fetch(url).then(response => {
        return response.json();
    }).then(data => displayForecast(data))
    .catch(err => {
        console.log(err);
    })
}

//Display animated weather icon
function displayWeatherIcon(weather){

    const icon = document.createElement("img");

    switch(weather){
        case "clear sky":
            icon.setAttribute("src", "./images/clear-day.svg");
            break;
        case "few clouds":
            icon.setAttribute("src", "./images/partly-cloudy-day.svg");
            break;
        case "scattered clouds":
            icon.setAttribute("src", "./images/cloudy.svg");
            break;
        case "overcast clouds":
        case "broken clouds":
            icon.setAttribute("src", "./images/overcast.svg");
            break;
        case "shower rain":
            icon.setAttribute("src", "./images/overcast-rain.svg");
            break;
        case "light rain":
        case "moderate rain":
        case "rain":
            icon.setAttribute("src", "./images/overcast-day-drizzle.svg");
            break;
        case "thunderstorm":
            icon.setAttribute("src", "./images/thunderstorm-overcast.svg");
            break;
        case "snow":
            icon.setAttribute("src", "./images/snow.svg");
            break;
        case "mist":
            icon.setAttribute("src", "./images/mist.svg");
            break;
                
    }

    row.prepend(icon);
}

//Display weather informations from fetched api
function displayWeather(weather){
    // console.log(weather);

    const city = document.createElement("h1");
    city.innerHTML = `${weather.name}, ${weather.sys.country}`;
    header.prepend(city);

    const weatherDesc = weather.weather[0].description;
    displayWeatherIcon(weatherDesc);

    const temp = document.createElement("p");
    const temperature = weather.main.temp;
    temp.innerHTML = `${temperature.toFixed()}°C`;
    row.append(temp);


    info.style.backgroundColor = "#F0F0F0";

    const desc = document.createElement("p");
    desc.innerHTML = weather.weather[0].description;
    info.append(desc);
    const cloudIcon = document.createElement("i");
    cloudIcon.setAttribute("class","fas fa-cloud-sun-rain");
    desc.prepend(cloudIcon);

    const humidity = document.createElement("p");
    humidity.innerHTML = `Humidity: ${weather.main.humidity}%`;
    info.append(humidity);
    const humidIcon = document.createElement("i");
    humidIcon.setAttribute("class","fas fa-water");
    humidity.prepend(humidIcon);

    const wind = document.createElement("p");
    wind.innerHTML = `Wind: ${weather.wind.speed} m/s`;
    info.append(wind);
    const windIcon = document.createElement("i");
    windIcon.setAttribute("class","fas fa-wind");
    wind.prepend(windIcon);
}

//Display daily forecast informations from fetched api
function displayForecast(forecast){
    console.log(forecast.list);

    const list = forecast.list;

    for(let index = 7; index < list.length; index+=8){
        const col_one = document.createElement("div");
        const col_one_time = document.createElement("div");
        let dateString = list[index].dt_txt;
        let date = new Date(dateString).toLocaleDateString('en-us', {weekday:'long'})
        let time = new Date(dateString).toLocaleTimeString('en-us', {hour: '2-digit', minute: '2-digit'})
        col_one.setAttribute("class", `column-${index}`);
        col_one.innerHTML = date;
        col_one_time.innerHTML = time;
        middle.append(col_one);
        col_one.append(col_one_time);

        let col_one_icon = document.createElement("img");
        col_one_icon.setAttribute("src", "http://openweathermap.org/img/w/" + list[index].weather[0].icon + ".png");
        col_one.append(col_one_icon);

        let col_one_temp = document.createElement("div");
        col_one_temp.innerHTML = `${list[index].main.temp.toFixed(0)}°C`;
        col_one.append(col_one_temp);
    }
}


function handleClick(event){
    event.preventDefault();
    const cityInput = document.getElementById("cityInput").value;
    fetchWeather(cityInput);
    fetchForecast(cityInput);
}

function refreshPage(){
    window.location.reload();
}

button.addEventListener('click', handleClick);
refresh.addEventListener('click', refreshPage);