Category: javascript

I’ve been having trouble with the OCR.space API. I use the free API’s OCR Engine 2, and sometimes it is down. I know I can check it manually via. the OCR.space API Status Page, however I need an API that can be used to check it directly in the client-side javascript.

I’ve tried simply using fetch() on the page, but it gets blocked by CORS. Below is the error I got:

Access to fetch at ‘https://status.ocr.space/‘ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

GET https://status.ocr.space/ net::ERR_FAILED 200 (OK)

The reason I need this is to disable a button on my page that uses the API.

Thanks in advance.

Kış aylarında evinizin sıcak kalmasını sağlamak için kombinizin düzenli olarak kontrol edilmesi şarttır. Birçok kişi sadece cihaz arızalandığında teknik servis çağırmayı tercih eder. Oysa ki düzenli olarak yapılan kombi bakımı, hem cihazınızın ömrünü uzatır hem de ani arızaların önüne geçer. Üstelik sadece konfor değil, enerji tasarrufu açısından da büyük fayda sağlar.

Empati Teknik olarak Ankara genelinde verdiğimiz hizmetlerde müşteri memnuniyetini ön planda tutuyoruz. Deneyimli teknisyenlerimizle gerçekleştirdiğimiz detaylı kombi bakımı, cihazınızın iç aksamlarının temizlenmesini, gaz ayarlarının kontrolünü ve genel çalışma performansının test edilmesini kapsar. Böylece cihazınız güvenli, verimli ve sessiz bir şekilde çalışır.

Kombi kadar önemli olan bir diğer konu da petek temizliği. Isıtma sistemlerinde zamanla oluşan tortu, çamur ve kireç tabakası, suyun petekler içerisinde rahat dolaşmasını engeller. Bu durum odaların yeterince ısınmamasına, kombinin daha fazla çalışmasına ve doğalgaz tüketiminin artmasına neden olur. İşte tam da bu nedenle düzenli petek temizliği, daha iyi bir ısınma ve daha düşük fatura anlamına gelir.

Empati Teknik olarak kullandığımız özel ekipmanlarla ve kimyasal destekli temizlik sistemlerimizle, peteklerinizin ilk günkü verimliliğine kavuşmasını sağlıyoruz. İşlem sonrası tüm peteklerin eşit ısındığını fark edecek, ısınma süresinin kısaldığını hemen hissedeceksiniz.

Detaylı bilgi almak ya da hemen servis randevusu oluşturmak isterseniz Ankara kombi servisi sayfamıza göz atabilirsiniz. Web sitemiz üzerinden birkaç adımda kolayca başvuru yapabilir, servis ekiplerimizin sizi arayarak yönlendirmesini sağlayabilirsiniz.

Unutmayın: kombi bakımı yılda en az bir kez, petek temizliği ise iki yılda bir mutlaka yapılmalıdır. Hem güvenliğiniz hem de bütçeniz için bu işlemleri aksatmamak büyük önem taşır. Empati Teknik olarak biz buradayız; siz sıcak, güvenli ve tasarruflu bir kış geçirin diye!

I am writing documentation for some classes written using the ES6 class syntax. I have some classes which inherit their constructor from their parent class, as below:

/**
 * @class
 */
class Parent {
    /**
     * the inherited constructor
     * @param {*} someAttribute - an attribute of the parent class
     */
    constructor(someAttribute) {
        this.someAttribute = someAttribute
    }

    /**
     * does nothing
     * @method
     */
    someMethod() {
        return;
    }
}

/**
 * @class
 * @extends Parent
 */
class Child extends Parent {
}

This mostly does exactly what I need, documenting Parent exactly as I expect in the generated website, and showing that Child extends Parent. It also documents someMethod within both Parent and Child as I expected. Additionally, I see the documentation exactly as expected in the popups that show on VSCode when typing, for example, new Child(

However, in the generated website, the constructor documentation is displayed only for Parent and not for Child, even though the constructor is also inherited.

Is there any way to inherit the constructor documentation from Parent in Child. As well as the above, I have also tried using @augments in place of @extends, @constructor or @method above the constructor function, and @inheritdoc in the Child class

User.js

import express from 'express';
import connectDB  from '../db.js';
import bodyParser from 'body-parser';

const app = express();
app.use(bodyParser.json());

const router = express.Router();

//Create User
router.post('/create-data',async(req,res)=>{
    const db = await connectDB();
    const Bodydata = {age:req.body.age,gpa:req.body.gpa}
    const result = await db.collection('students').insertOne({Bodydata})
    console.log(Bodydata)
    res.status(201).json(result);
})
export default router;

Index.js (Express connection)

import express from 'express';
import router from './routes/user.js';
import bodyParser from 'body-parser';

const app = express();
app.use(bodyParser.json());

app.use(express.json());
app.use('/', router);

const PORT = 8000;
app.listen(PORT, () => {
    console.log(`Server running at Port: ${PORT}`);
});

db.js (Mongo Connection)

import { MongoClient } from 'mongodb';

const uri = 'mongodb://0.0.0.0:27017';
const client = new MongoClient(uri);
let db;

const connectDB = async () => {
  if (!db) {
    await client.connect();
    db = client.db('school'); // your DB name
    console.log('Connected to MongoDB');
  }
  return db;
};

export default connectDB;

Note: I am not using moongoose Postman & Error Message Image

I am trying to perform a CRUD Operation with Mongo + Express but I am facing this error not sure what it is? I am not able to create data it is throwing the error which I have attached to the Image. Let me know where I am going wrong

I would like to create a full-page scroll effect (block-by-block scrolling) on a WordPress site using the DIVI theme. I have a code that works only on desktop, but if I activate it, the site doesn’t work on mobile Safari and shows an error.
I would like to know if it’s possible to make the code work only on desktop and disable it on mobile?

The CSS code is applied to the block section.

.fullpage-section{
height:100vh; 
display: flex; 
flex-direction: column; 
justify-content: center;}

JavaScript code added to the head of the site

<script>
 ( function( $ ) {
 $( document ).on( 'mousewheel DOMMouseScroll', function( event ) {
 if ( ( $( '.et_pb_side_nav' ).length === 0 ) || $( 'html, body' ).is( ':animated' ) ) return;
 event.preventDefault();
 var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;
 var $position = $( '.et_pb_side_nav' ).find( '.active' );
 var $target;
 if( direction < 0 ) {
 $target = $( $position ).parent().next();
 } else {
 $target = $( $position ).parent().prev();
 }
 if ( $( $target.length ) !== 0 ) {
 $( $target ).children( 'a' ).trigger( "click" );
 }
 } );
 } )( jQuery );
 </script>

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  trigger: ".page-0",
  start: "top top", 
  end: "bottom",
  pin: ".season"
});

ScrollTrigger.create({
  trigger: ".page-1",
  start: "top top", 
  end: "bottom",
  pin: ".winter"
});

ScrollTrigger.create({
  trigger: ".page-2",
  start: "top top", 
  end: "bottom",
  pin: ".summer"
});

ScrollTrigger.create({
  trigger: ".page-3",
  start: "top top", 
  end: "bottom",
  pin: ".spring"
});

ScrollTrigger.create({
  trigger: ".page-4",
  start: "top top", 
  end: "bottom",
  pin: ".fall"
});

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
  margin: 0;
  padding: 0;
}
body{
  font-family: "Inter", sans-serif;
  filter: grayscale(100%);
}
.page{
  width: 100%;
  height: 100vh;
  position: relative;
}
.season{
  width: 100%;
  height: 100vh;
  background-image: url("https://static.vecteezy.com/system/resources/previews/036/226/450/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.winter{
  width: 100%;
  height: 100vh;
  background-image: url("https://wallpapers.com/images/hd/winter-scene-bridge-n3beaqbjiy0xvdbc.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.summer{
  width: 100%;
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/1450353/pexels-photo-1450353.jpeg?cs=srgb&dl=pexels-asadphoto-1450353.jpg&fm=jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.spring{
  width: 100%;
  height: 100vh;
  background-image: url("https://i.pinimg.com/736x/f5/9b/90/f59b90781e5248d6c5b522f1d3b6df21.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fall{
  width: 100%;
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/1114896/pexels-photo-1114896.jpeg?cs=srgb&dl=pexels-jplenio-1114896.jpg&fm=jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#overflow{
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #000;
  opacity: 0.5;
}

h1{
  color: #fff;
  font-size: 14vw;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2vw;
  z-index: 10;
}

<div class="page-0 page">
  <div class="season">
    <div id="overflow"></div>
    <h1>Season</h1></div>
</div>
<div class="page-1 page">
  <div class="winter">
    <div id="overflow"></div>
    <h1>Winter</h1></div>
</div>
<div class="page-2 page">
  <div class="summer">
    <div id="overflow"></div>
    <h1>Summer</h1></div>
</div>
<div class="page-3 page">
  <div class="spring">
    <div id="overflow"></div>
    <h1>Spring</h1></div>
</div>
<div class="page-4 page">
  <div class="fall">
    <div id="overflow"></div>
    <h1>fall</h1></div>
</div>

When I apply a CSS filter property (such as filter: blur() or filter: grayscale()or other CSS filters.) to a top-level parent element like body, and then try to pin a child element using GSAP’s ScrollTrigger, the pinning stops working.

How can I apply a CSS filter to a parent element while still allowing GSAP’s pinning to work properly for its child elements?

codepen:https://codepen.io/bw_ky/pen/vEEYGYp

On mobile I have a fixed navbar, with closeable message banner(s) fixed below that – I’m adding marginBlockStart to the page wrapper in js – what I would like is to have the code run and re-run the calculation if a message banner is closed. Here’s my attempt:

// add a margin on page-wrapper to allow for banners at mobile size (fixed header)

function pageWrapperMargin() {

  const mediaQuery = window.matchMedia('(max-width: 1023px)')
  // Check if the media query is true
  if (mediaQuery.matches) {

    //  calculate height of any site banners
    
    let banners = document.getElementsByClassName("site-banner")
    let bannersHeight = 0 // Set an accumulator variable to `0`
    for (let i = 0; i < banners.length; i++) { // Loop through each element with the class "site-banner"
      bannersHeight += banners[i].offsetHeight // Add the height of the element to the accumulator variable (the total)
    }
    
    // Now set that as the pageWrapper margin
    const pageWrapper = document.querySelector(".pageWrapper")
    pageWrapper.style.marginBlockStart = bannersHeight + 'px'
  }
}
const button = document.querySelector('.banner__btn');
button.addEventListener('click', pageWrapperMargin); 

This isn’t working – without the function wrapping around and the event listener, the margin is correctly added (just not re-calculated on banner close).

I have been working on a collapsible vertical menu with Bootstrap 5 and JavaScript.

I needed to keep the vertical menu’s state – either collapsed or expanded – from one page to another.

For this purpose, I have used JavaScript’s sessionStorage, this way:

document.querySelector('.navbar-toggler').addEventListener("click", function(event) {
    event.preventDefault();
    if (Boolean(sessionStorage.getItem('sidebar-collapsed'))) {
        sessionStorage.setItem('sidebar-collapsed', '');
    } else {
        sessionStorage.setItem('sidebar-collapsed', '1');
    }
});

 document.addEventListener("DOMContentLoaded", function () {
     console.log(sessionStorage.getItem('sidebar-collapsed'))
    if(sessionStorage.getItem('sidebar-collapsed') == '1'){
        document.querySelector('.sidebar').classList.remove('show');
    } else {
        document.querySelector('.sidebar').classList.add('show');
    }
});

The problem I am faced with is that the menu is initialized as expanded and I need it collapsed initially.

Switching the if… else block in the click event function fails.

Where is my mistake?

Is it possible create intercompany purchase order to sales order
give me the exact solution

I want to create intercompany purchase order to sales order but its having some error like this

but I give the purchase order number also
You must create a purchase order first to transfer intercompany inventory.

Error in Scheduled Script: You must create a purchase order first to transfer intercompany inventory.

Choosing the right API development services provider is a critical decision that can significantly impact the performance, security, and scalability of your applications. Whether you’re building a custom solution from scratch or integrating with third-party systems, a reliable API partner ensures your business runs smoothly and efficiently.

const data = [
          { 
              "id": 'notes-jT-jjsyz61J8XKiI',
              "title": 'Welcome to Notes, Dimas!',
              "body": 'Welcome to Notes! This is your first note. You can archive it, delete it, or create new ones.',
              "createdAt": '2022-07-28T10:03:12.594Z',
              "archived": false,
          },
          { 
              "id": 'notes-aB-cdefg12345',
              "title": 'Meeting Agenda',
              "body": 'Discuss project updates and assign tasks for the upcoming week.',
              "createdAt": '2022-08-05T15:30:00.000Z',
              "archived": true,
          },
          { ...many more...}
        ] 

I have these kind of javascript object from public API, I want to filter object with the value true, so I could get 2 different data with object.archived==true and object.archived==false. How can I do that? I’ve been trying using filter and map method, both of it return undefined. How can I solve this?

I have a child component that returns a Pie chart

const coloredStats = [
        { id: 0, value: 5, label: 'Good tasks', color: 'success'},
        { id: 1, value: 4, label: 'Bad Tasks', color: 'error'} 
]

function MyPiechart(){
return (
  <PieChart
     series={[{
       data: coloredStats,
       innerRadius: 30,
       outerRadius: radius,               
       }, 
     ]}
  /> )}

The values success and error are taken from the default palette https://mui.com/material-ui/customization/palette/, I use them on my other components and I would like to use them on Pie Chart too due to my Parent component having a custom theme of which Im overriding the colors, and in case these color changes I would like to simply edit the ones in my theme instead of having to edit the hexcode inside of the piechart to match.

But instead of showing the colors like I expect them to I instead get the default color value, I know the theme is working since I already edited some values in the palette and they’re showing up correctly on my other components.

Is there a way to do it so that it follows the theme without manually writing the hex codes?

I would like to reach exactly the same effect as: https://www.ysl.com/en-gb

I reached exactly effect which I want but only on scrolling down, but on scrolling up it works wrong. Result of my work you can see on: https://codesandbox.io/p/sandbox/swiper-mousewheel-control-forked-cyzyhd

I think that the problem is with creativeEffect, but after a lot of try I really don’t know how can I do that.

I created an app using React Native and a backend with Django. And I want to integrate a VOIP to GSM into the mobile app where users call GSM phones via my mobile app (internet), so I was looking into using Media Streams – WebSocket Messages where my current flow is that users make a request to my backend with a phone number to call, I initiate calling with Twilio with a URL to call if the user picks up, so the URL returns an XML that tells Twilio to connect to a bidirectional media stream with my WebSocket, so that is how audio will be sent to and from Twilio to make the project happen. But look at this: I am trying my best to make this project as clean, best practice, and real-time as possible, so actually I will be sending audio and microphone tracks via WebSocket in real-time, so is there any method or function that I can call to grab the microphone and send natively and an audio track to play too in real-time within this library used in conference implementation?

I’m working on a Nuxt 3 project, and I’m experiencing an issue where NuxtLink components are not redirecting properly. Clicking on a NuxtLink does not navigate to the desired route, but using a classic tag works without any issues.

What I’ve Tried:

1. Verified that the routes exist in the pages/ directory.
2. I checked the browser console and found the following warnings:

[Warning] Timer "[nuxt-app] page:loading:start" already exists
[Warning] Timer "[nuxt-app] page:loading:end" already exists

3. Disabled pageTransition in nuxt.config.ts:
   pageTransition: false
   This did not resolve the issue.
4. Cleared the .nuxt directory and rebuilt the app:

rm -rf .nuxt
npm run dev

5. Tested with a minimal example:

<template>
  <NuxtLink to="/about">Go to About</NuxtLink>
</template>

The issue persists.
Relevant Code:
Here’s my nuxt.config.ts file:

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  runtimeConfig: {
    public: {
      GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS,
      CHATWAY: process.env.CHATWAY,
    },
  },
  css: ["/assets/css/main.css", "primeicons/primeicons.css"],
  devtools: { enabled: true },
  debug: true,
  modules: [
    "nuxt-swiper",
    "@nuxtjs/tailwindcss",
    "@primevue/nuxt-module",
    "@nuxt/icon",
    "@nuxt/fonts",
  ],
  app: {
    baseURL: "/",
    buildAssetsDir: "/_nuxt/",
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: "https://example.com/img/Favicon-2/height=100",
        },
      ],
      title: "Nuxt App",
      charset: "utf-16",
      viewport: "width=device-width, initial-scale=1, maximum-scale=1",
      htmlAttrs: {
        lang: "en",
      },
    },
    pageTransition: { name: "page", mode: "out-in" },
  },
  nitro: {
    output: {
      publicDir: "dist",
    },
  },
});

I am not using any custom middleware.
The issue occurs across all pages.
Using tags works fine, but I want to use NuxtLink for client-side navigation and better performance.

What could be causing NuxtLink to fail while tags work? How can I debug or fix this issue?