Category: javascript

Category Added in a WPeMatico Campaign

My items are not aligning and not scrollable have tried alot but still not working

i’ve tried various flex operations nothing seems to work or maybe i am doing it wrong. I want all these photos to appear line by line once by once but now i cannot even see the second row and scroll through the first row horizontally which was first atleast doable even though not desired

flex operation, break classes etc. I expect the site to show these 6 photos once by once line by line

i am also a newbie so please recommend me that what could have I done to have avoided the problem

<div>
<section class="work">
<div>
    <h2 class="apn" style="font-family: Bebas Neue; font-size: 40px; position: absolute; top: 900px; text-align: center; left: 0; right: 0; background-color: #E1ECC8; padding-top: 30px;">Our Work</h2>
<div class="photos">
    <div style="position: absolute; top: 1050px;">
    <div class="flexrow">
    <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; padding-top: 40px; margin-top: -35px;"><img src="/images/vertical-placeholder-image.jpg" alt="Red Kurti" style="width: 300px; "></div>
    <div class="break">
    <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; padding-top: 40px; margin-top: -35px;"><img src="/images/vertical-placeholder-image.jpg" alt="Blue Kurti" style="width: 300px; "></div>
    </div class="break">
    <div>
    <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; padding-top: 40px; margin-top: -35px;"><img src="/images/vertical-placeholder-image.jpg" alt="Black Kurti" style="width: 300px; "></div>
    </div>
    </div>
    <div class="flexrow">
        <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; margin-bottom: -500px;"><img src="/images/vertical-placeholder-image.jpg" alt="Red Kurti" style="width: 300px; "></div>
        <div class="break">
        <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; margin-bottom: -500px;"><img src="/images/vertical-placeholder-image.jpg" alt="Blue Kurti" style="width: 300px; "></div>
        </div>
        <div class="break">
        <div class="im" style="background-color: #E1ECC8; padding-right: 80px; padding-left: 86px; margin-bottom: -500px;"><img src="/images/vertical-placeholder-image.jpg" alt="Black Kurti" style="width: 300px; "></div>
        </div>  
</div>
    </div>
    </div>
</div>

@media screen and (min-width: 360px)

and (max-width: 740px){

.im{
    position: absolute;
    padding: 10px;
    width: 520px;
}

.work{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    width: 520px;

}
.apn{
    position: absolute;
    width: 520px;
}

.break{
    flex-basis: 100%;
    height: 0;
}

}

How can I make an iFrame fullscreen on a button click, without JS?

I’m currently trying to fullscreen an iFrame on a button click, similar to this website. This website has a bar that goes fullscreen with the iframed game, which is what I would ideally like to do. I can’t really figure out how to do this. If possible, I would prefer to use no JavaScript, but let me know if there is an easier method with JavaScript. I’m pretty new to coding, so any help would mean a lot.

Below is the iFrame code and the image/title of the game.

  <html>
    <iframe src="https://1v1.lol" style="border:0px #ffffff none;" name="" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="465px" width="740px" allowfullscreen="yes" ></iframe>
    <p>
<span style="color: #000000;">
<img src="https://geometryspot.com/wp-content/uploads/2023/05/1001v1LOL.webp" style="width: 35px; position: relative; left: 15px">
<span>&nbsp&nbsp&nbsp&nbsp&nbsp1v1.lol</span>
</span> 
    </p>
</html>```

Call ts file from html getting “Refused to execute script” error

I am calling a typescript file in a html file but am getting the following error:

Refused to execute script from 'http://localhost:8000/index.ts' because its MIME type ('video/mp2t') is not executable.

I want to add an eventListener to a p tag in my ts file but am not able to,

My script:

HTML:

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>My Class</title>
</head>
<body>
     <p class="myClass" id="myID">Click Here</p>

<script src="index.ts"></script>
</body>
</html>

My .ts. file: index.ts

document.addEventListener("click", function () {
  console.log(document.getElementById("myID").innerHTML);
});

Once I reload my page, I am getting the error mentioned above and nothing happens when I click my p tag either.

Carousel not working correctly when changing between divs

I made a carousel for a particular section on my site.

Here’s the link the site:- Website

What I want to do is to change the div on clicking the two buttons/links at the start of the portfolio section to toggle between technical and professional section and along with that, I want the carousel to work fine with both divs but it’s not working that way. Please suggest any solution.

Here’s the link to the github repo:- Portfolio Git

Merge pdf files(with form fields) issue with pdf-lib

I am trying to merge multiple files using pdf-lib. The code is working fine for most of the file but it gives error when there are form fields/fillable fields in the file.

Trying to parse invalid object: {“line”:228,”column”:16,”offset”:32962})
Invalid object ref: 457 0 R
Trying to parse invalid object: {“line”:336,”column”:16,”offset”:244737})
Invalid object ref: 6 0 R
Trying to parse invalid object: {“line”:344,”column”:16,”offset”:245437})
Invalid object ref: 8 0 R
Trying to parse invalid object: {“line”:352,”column”:16,”offset”:245879})
Invalid object ref: 9 0 R
Trying to parse invalid object: {“line”:358,”column”:16,”offset”:246012})
Invalid object ref: 10 0 R
Trying to parse invalid object: {“line”:364,”column”:16,”offset”:246204})
Invalid object ref: 11 0 R
Trying to parse invalid object: {“line”:382,”column”:16,”offset”:248201})
Invalid object ref: 12 0 R
Trying to parse invalid object: {“line”:402,”column”:16,”offset”:249457})
Invalid object ref: 13 0 R
Trying to parse invalid object: {“line”:416,”column”:16,”offset”:250897})
Invalid object ref: 14 0 R
Trying to parse invalid object: {“line”:430,”column”:16,”offset”:257366})
Invalid object ref: 18 0 R
Trying to parse invalid object: {“line”:436,”column”:16,”offset”:257515})
Invalid object ref: 19 0 R
ERROR: Error: Expected instance of PDFDict, but got instance of undefined
at new UnexpectedObjectTypeError (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/core/errors.ts:31:5)
at PDFContext.lookup (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/core/PDFContext.ts:166:11)
at PDFCatalog.PDFDict.lookup (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/core/objects/PDFDict.ts:143:38)
at PDFCatalog.Pages (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/core/structures/PDFCatalog.ts:24:17)
at Cache.PDFDocument.computePages [as populate] (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/api/PDFDocument.ts:1366:18)
at Cache.access (/Users/banjaxedpk/Documents/salesforce-litify-backend/node_modules/pdf-lib/src/utils/Cache.ts:17:40)

This is my code.

        const doc = await PDFDocument.create();

        const content = await PDFDocument.load(body, {
          ignoreEncryption: true,
        });
        const contentPages = await doc.copyPages(
          content,
          content.getPageIndices()
        );
        for (const page of contentPages) {
          doc.addPage(page);
        };
        doc.save()

Is there any other library or is there any way that pdf-lib can the handles such files?

I have projected a cube onto 2d screen .When no axis of rotation is provided and angle is increased, the cube appears to shrink to a point and regrows

I have a 3D cube projected onto 2D screen using perspective projection and Quaternions. When no axis for rotation is provided, and angle is increased (with say 0.01 increment), the cube appears to shrink to a point before regrowing and the process continues. How can I avoid this ? I am coding in p5.js but without any 3D library.

How can I divide line ? ( Simple CSS Animation )

How can I divide the yellow line by 2 or how can I remove the yellow line above the red box. I just want the yellow line below. Is it possible to solve that with only using HTML and CSS ? Do I have to use JS for that ? if there is a way with css and html pls let me to know details. (…………………………………………………………………………………………………………………………………………………………………………………………………..)

<!DOCTYPE html>
<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
        }

        .container {
            width: 500px;
            height: 500px;
            border: 3px solid black;
            border-radius: 50%;
            margin: 100px auto;
            position: relative;
        }

        .content {
            width: 50%;
            border: 3px solid red;
            position: relative;
            left: 50%;
            top: 50%;
            transform: rotate(-90deg);
            transform-origin: left;
            animation: animasyon 2s linear infinite normal paused;
        }

        .ring {
            width: 500px;
            height: 500px;
            border: 5px solid goldenrod;
            position: absolute;
            border-radius: 50%;
            border-style: none solid none none;
            transform: translate(-50%, -50%);
        }

        .content::after {
            content: '';
            width: 25px;
            height: 25px;
            background-color: blueviolet;
            position: absolute;
            top: -12px;
            left: 100%;
        }

        @keyframes animasyon {

            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(90deg);
            }

            50% {
                transform: rotate(180deg);
            }

            75% {
                transform: rotate(270deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="content">
            <div class="ring"></div>
        </div>
    </div>
</body>

</html>

Generate content with Ajax – scroll to Id doesn’t work

I am generating the page content depending on the data I get via ajax.
The problem I am having, is that when I would like to scroll to an ID, the scroll either doesn’t happen or it scrolls to the wrong position.

I’ve been looking at SO q&a, but I haven’t found any good solutions. A lot of answers are for Angular or React, but nothing really solid for plain js.

As an example, lets say the user clicks a link About us -> Project, where about us is the page and projects is in id at the end of the page with some content.

As the page data in being rendered with javascript, I can’t use event listeners DOMContentLoaded or load, as they trigger before the content is being generated (I think).

Below is my non working solution. It is supposed to check if the id is in viewport, and if not, it should scroll.

I don’t want to use setTimeout as it might not always work (slow internet, more content (images) etc.)

Any help would be much appreciated.


function generate(data){
   // code

    let idx = 0 //just in case, so we don't have an infinite loop
    if (window.location.href.indexOf("#") !== -1) {
        const id = window.location.href.split("#")[1];

        const element = document.getElementById(id);
        document.addEventListener('DOMContentLoaded', function () {
            console.log("loaded");
            if (element) {
                while (!isInViewport(id)) {
                    idx = idx + 1;
                    console.log(isInViewport(id))
                    scrollToElement(id);
                    if (idx === 10000){
                        break;
                    }
                };
            }
        });
    }
}

generateContent();


function scrollToElement(id) {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({
            behavior: 'smooth'
        });
    }
}

function isInViewport(id) {
    const element = document.getElementById(id);
    if (element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
}

If I can provide any additional data, please let me know.

How to fetch the description from the backend and display it in a textarea when editing?

I’m developing a web application in React where users can create and edit notes. I’m facing a specific issue when trying to display the description of a note in the component while editing.

The structure of my application is as follows: I have a Node.js backend that provides the note data through a RESTful API, and I’m using React to build the user interface.

When editing an existing note, I need to display the current description of the note in the text field of the . However, I’m having difficulties in getting the description of the note from the backend and placing it in the .

Here’s a snippet of my current code:

import { useState, useEffect } from "react";
import { api } from "../../services";

function UpdateNote() {
  const [description, setDescription] = useState("");

  useEffect(() => {
    async function fetchNote() {
      const response = await api.get("/notes/1"); // Example: Getting note with ID 1
      const note = response.data;

      // How can I display the note's description in the textarea?
      // I've tried using both `defaultValue` and `value`, but they didn't work.

      setDescription(note.description);
    }

    fetchNote();
  }, []);

  return (
    <div>
      <textarea value={description} onChange={(e) => setDescription(e.target.value)}></textarea>
    </div>
  );
}

export default UpdateNote;

I’ve tried using both the defaultValue and value properties of the , but neither worked for displaying the note’s description.

I would like to know how I can fetch the description of the note from the backend and display it in the when editing the note. Any suggestions or solutions would be greatly appreciated.

Thank you!

Nodemon automatically crashed [nodemon] app crashed – waiting for file changes before starting

nodemon automatically disconnects nearly after 30 sec after starts and gives this error “[nodemon] app crashed – waiting for file changes before starting…”. if I make some changes in the file then it will automatically get restarted and if the file is kept idle without doing any change nodemon gets crashed nearly after 30 sec and server gives no response but after crash if I make some changes then it will automatically again get restarted same thing continues after restart also

Full Error

D:reactinotebookbackendnode_modulesmongooselibconnection.js:792
    err = new ServerSelectionError();
          ^

MongooseServerSelectionError: connect ECONNREFUSED ::1:27017
    at _handleConnectionErrors (D:reactinotebookbackendnode_modulesmongooselibconnection.js:792:11)
    at NativeConnection.openUri (D:reactinotebookbackendnode_modulesmongooselibconnection.js:767:11) {       
  reason: TopologyDescription {
    type: 'Unknown',
    servers: Map(1) {
      'localhost:27017' => ServerDescription {
        address: 'localhost:27017',
        type: 'Unknown',
        hosts: [],
        passives: [],
        arbiters: [],
        tags: {},
        minWireVersion: 0,
        maxWireVersion: 0,
        roundTripTime: -1,
        lastUpdateTime: 15938834,
        lastWriteDate: 0,
        error: MongoNetworkError: connect ECONNREFUSED ::1:27017
            at connectionFailureError (D:reactinotebookbackendnode_modulesmongodblibcmapconnect.js:370:20)  
            at Socket.<anonymous> (D:reactinotebookbackendnode_modulesmongodblibcmapconnect.js:293:22)      
            at Object.onceWrapper (node:events:628:26)    
            at Socket.emit (node:events:513:28)
            at emitErrorNT (node:internal/streams/destroy:151:8)
            at emitErrorCloseNT (node:internal/streams/destroy:116:3)
            at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
          cause: Error: connect ECONNREFUSED ::1:27017    
              at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
            errno: -4078,
            code: 'ECONNREFUSED',
            syscall: 'connect',
            address: '::1',
            port: 27017
          },
          [Symbol(errorLabels)]: Set(1) { 'ResetPool' }   
        },
        topologyVersion: null,
        setName: null,
        setVersion: null,
        electionId: null,
        logicalSessionTimeoutMinutes: null,
        primary: null,
        me: null,
        '$clusterTime': null
      }
    },
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    localThresholdMS: 15,
    setName: null,
    maxElectionId: null,
    maxSetVersion: null,
    commonWireVersion: 0,
    logicalSessionTimeoutMinutes: null
  },
  code: undefined
}

Node.js v18.16.0
[nodemon] app crashed - waiting for file changes before starting...

My directory schema

React 
|__inotebook
   |__backend
   |  |__node_modules (folder)
   |  |__index.js
   |  |__db.js
   |  |__package-lock.json
   |  |__package.json
   |
   |___ Files and folders created by "npx create-react-app"

db.js code

const mongoose = require('mongoose')
const mongoURI = "mongodb://localhost:27017"

const connectToMongo=()=>{
    mongoose.connect(mongoURI)
    console.log("Connection Successful")
}
 
module.exports=connectToMongo

index.js code

const connectToMongo=require('./db')
connectToMongo()

I have tried uninstalling full mongoDB and installed it again. I have installed nodemon by -> npm i -D nodemon and tried it by this also npm install -g nodemon

my package.json code

{
  "name": "inotebook-backend",
  "version": "1.0.0",
  "description": "iNoteboot - Your notebook on the cloud",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.3.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

Nodemon doesn’t restart when changes are made on discord.js

I’m making a discord bot on JavaScript using discord.js. I am running it via nodemon, but when I’m making changes to the script, the script doesn’t restart. Please help me!

  • index.js
const { Client, IntentsBitField } = require("discord.js");

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

client.on('ready', (c) => {
    console.info(`✔ ${c.user.tag} is online.`);
});

client.on('messageCreate', (msg) => {
    if (msg.content == 'Hello!')
        msg.reply('Hi!');
});

client.login(
  "my key"
);

The command is nodemon src/index.js

The log is:

[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node src/index.js`
✔ [RR] Military Bot#1578 is online.
[nodemon] restarting due to changes...

I tried changing the command from nodemon src/index.js to nodemon -L src/index.js, but it didn’t work. And then I tried running from the terminal instead of the package.json but again, nothing.

Vite Could not resolve ‘globalThis’ Error in React

Error:

vite build vite v2.5.10 building for production... ✓ 3357 modules transformed. Could not resolve '../internals/globalThis' from ../internals/globalThis?commonjs-external error during build: Error: Could not resolve '../internals/globalThis' from ../internals/globalThis?commonjs-external at error (/Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:158:30) at ModuleLoader.handleResolveId (/Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:22263:24) at /Users/user/Coding/vite-test/node_modules/rollup/dist/shared/rollup.js:22257:26

I was getting such error when I use yarn build command for dist file but I solved it. My main question is, I used the jspdf and jspdf-autotable libraries that caused this error and when I removed them the problem went away. Why does it give an error when these libraries exist? Do I need to add it to the config file?

Which react library can I use for pdf download instead?

Vite.config.js:

import fs from "fs";
import * as path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
import NodeGlobalsPolyfillPlugin from "@esbuild-plugins/node-globals-polyfill";

export default () => {
  return defineConfig({
    plugins: [react()],
    define: {
      global: "globalThis",
    },
    server: {
      port: 3000,
      cors: {
        origin: [ "http://localhost:3000"],
        methods: ["GET", "PATCH", "PUT", "POST", "DELETE", "OPTIONS"],
        allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          includePaths: ["node_modules", "./src/assets"],
        },
      },
      postcss: {
        plugins: [require("postcss-rtl")()],
      },
    },
    resolve: {
      alias: [
        {
          find: /^~.+/,
          replacement: (val) => {
            return val.replace(/^~/, "");
          },
        },
        { find: "stream", replacement: "stream-browserify" },
        { find: "crypto", replacement: "crypto-browserify" },
        { find: "@src", replacement: path.resolve(__dirname, "src") },
        { find: "@store", replacement: path.resolve(__dirname, "src/redux") },
        {
          find: "@configs",
          replacement: path.resolve(__dirname, "src/configs"),
        },
        {
          find: "url",
          replacement: "rollup-plugin-node-polyfills/polyfills/url",
        },
        {
          find: "@styles",
          replacement: path.resolve(__dirname, "src/@core/scss"),
        },
        {
          find: "util",
          replacement: "rollup-plugin-node-polyfills/polyfills/util",
        },
        {
          find: "zlib",
          replacement: "rollup-plugin-node-polyfills/polyfills/zlib",
        },
        {
          find: "@utils",
          replacement: path.resolve(__dirname, "src/utility/Utils"),
        },
        {
          find: "@hooks",
          replacement: path.resolve(__dirname, "src/utility/hooks"),
        },
        {
          find: "@assets",
          replacement: path.resolve(__dirname, "src/@core/assets"),
        },
        {
          find: "@layouts",
          replacement: path.resolve(__dirname, "src/@core/layouts"),
        },
        {
          find: "assert",
          replacement: "rollup-plugin-node-polyfills/polyfills/assert",
        },
        {
          find: "buffer",
          replacement: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
        },
        {
          find: "process",
          replacement: "rollup-plugin-node-polyfills/polyfills/process-es6",
        },
        {
          find: "@components",
          replacement: path.resolve(__dirname, "src/@core/components"),
        },
      ],
    },
    esbuild: {
      loader: "jsx",
      include: /./src/.*.js?$/,
      exclude: [],
      jsx: "automatic",
    },
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          ".js": "jsx",
        },
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true,
          }),
          {
            name: "load-js-files-as-jsx",
            setup(build) {
              build.onLoad({ filter: /src\.*.js$/ }, async (args) => ({
                loader: "jsx",
                contents: await fs.readFileSync(args.path, "utf8"),
              }));
            },
          },
        ],
      },
    },
    build: {
      rollupOptions: {
        plugins: [rollupNodePolyFill()],
      },
    },
  });
};```




I removed the library and the problem was solved

bootstrapSwitch how to use a events

On my document.ready I am setting this control to a bootstrapSwitch and setting the state based on data from a database. Setting that state fires off the change switchChange.bootstrapSwitch. Is there anyway I can set it so it will not fire off a event? I have tried to change it to a click event but that is not working. Any help would be great I just want the click event when the users selects the control.

$(document).ready(function() {
  $("#IsPublish").bootstrapSwitch();
  $("#IsPublish").bootstrapSwitch('state', true);
});

$('#IsPublish').on('click', function(event) {
  $('#status').text('click');
});

$('#IsPublish').on('switchChange.bootstrapSwitch', function(event, state) {
  //$('#status').text('switchChange');  
});

$('#IsPublish').change('switchChange.bootstrapSwitch', function(event, state) {
  //$('#status').text('change'); 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css" integrity="sha512-lANJTDwF23Xos7T5Q7SNbZ7dFxLG8YSQJ2qCGrav0Fhe5vns60+tUECZv+9udXdKiX3/YTWt++tEKyEcuZv4dQ==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<input type="checkbox" id="IsPublish" />
<br><br>
<label id="status"></label>

Determining the optimal approach for handling various input types (checkbox, file, number, password, radio, text, time, url) in a React app

I’m currently working on a React application that involves multiple input types, including checkboxes, file inputs, numbers, passwords, radios, text inputs, time pickers, and URLs. I’m in the process of deciding the most suitable approach for managing these input types within my components.

Specifically, I’m considering two options: creating a single component with a type prop or developing separate components for each input type (e.g., , , , etc.).

So far, I tried implementing a single component and it was a lot of work trying to deal with all the different possible value types. However, I’m conflicted since multiple Input components might lead to a lot of duplicate code.

I’ve thought of another solution, which is to regroup all inputs with the same value type together (for example: text, password and url inputs in one component since they are strings). I would appreciate some guidance on which approach would be most appropriate!

after upgrading to angular 16 getting Error: Unexpected value ‘NgbModule’ imported by the module ‘AppModule’. Please add an @NgModule annotation

after upgrading to angular 16 and trying to import bootstrap i’m getting this error”**Error: Unexpected value ‘NgbModule’ imported by the module ‘AppModule’. Please add an @NgModule annotation.
**
I’m added NgbModule at the module imports.it was working fine before upgrading.

  Imports..

// @dynamic
@NgModule({

  declarations: [
    ....
  ],
  imports: [
  ...
    NgbModule,
  ...
  ],
  exports: [],
  providers: [
  ....
],
  bootstrap: [AppComponent]

})
export class AppModule { }