Category: javascript

So I’ve made a simple .html file and a simple .js script. It’s very simple, just a button that should make an http.get request once pressed. The get request does get created once I press the button, I also get a response from the request (code 200, can see the data in debugger) but I also get a 304-blocked code(blocked by CORS). I’m using jquery ajax to create the request.

My question is – I can create get requests from local file, but I can not use the data I get back… Why is that and how do I fix it?

I am working on project with vutify I have created a layout.
I want cols to display side by side as the figma at the same line. Here is my result until now.

I am sharing my code I want that col-2 doesn’t go out, but to aligned at the same line with next row.

.box-contact {
    background: url("./../assets/img/homepage-image/background.png");
    width: 692%;
    height: 105px;

}

<template>
    <v-container grid-list-lg class="prodotti-cataloghi">
       <v-row>
            <v-col cols="12" md="5" lg="6" class="ma-0 pa-0">
                <h5>Prodotti </h5>
            </v-col>
         

             <!--<v-divider vertical class="vertical  hidden-sm-and-down ">  </v-divider>          -->

             <v-col cols="12" md="6" lg="6"  class="ma-0 pa-0">
              
                 <div class="box-contact text-center hidden-sm-and-down  d-flex flex-wrap">  
                       <p class="white--text">Lorem ipsum? Contattaci. +xx xxx xxxxx </p>  
                        <a class="phone-contact">
                        <img src="./../assets/img/homepage-image/Phone.png">
                        </a>                  
                </div>
             </v-col>
       </v-row>
       </v-container>
       </template>

Next in the secondly col I have made css to add background image in class
.box-contact but you can add what you want.
but secondly shouldn’t to go out it should aligned with next row
I don’t know if it is problem with width of image or
problem with cod.
Any idea?

A magic number is a natural number that contains both the digits 7 and 9 in it. For eg:- 79, 879, 53729 etc.
Given a number N, your task is to find the closest Magic number from the given number N.

Note:- If more than one answer exists return the minimum one
Input
User Task:
Since this will be a functional problem, you don’t have to take input. You just have to complete the function MagicNumber() that takes integer N as argument.

Constraints:-
1 <= N <= 100000
Output
Return a magic number closest to the given number N.

Example.
Sample Input:-
8

Sample Output:-
79

Sample Input:-
900

Sample Output:-
897

I have a react app that I was able to build into static files which I then added to my node js app. after installing dotenv and adding require('dotenv').config() to server.js in the node server application. The following piece of code I had in the react application does not seem to be working now although the static files are being rendered in the browser just fine.

let node_server_url;
//TODO
// set the NODE_ENV on the .env file.
// create the .env file on the root of the project and add a NODE_ENV on the file
// e.g NODE_ENV=development or NODE_ENV=production

let urlConfig = (process.env.NODE_ENV === "production") ? {
    urlBackend: `https://mybluebookloanuat.bayportbotswana.com`,
} : {
    // urlBackend: `http://10.16.32.22:5000`,
    urlBackend: `http://localhost:5003`,
}

// eslint-disable-next-line
export default node_server_url = urlConfig.urlBackend;

server.js:

require('dotenv').config()
...
const app = express();

// for parsing request body
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// cross origin access to allow backend to communicate with frontend
app.use(cors());

const db = require("./app/models/index");
// to drop existing database and resync the database
db.sequelize.sync({force: false})

require("./app/routes/loan_application.routes")(app);


app.use(express.static(path.resolve(__dirname, 'assets')))

app.get('*', (req, res) => {
 res.sendFile(path.resolve(__dirname, 'assets', 'index.html'));
});

I want to be able to just set up in the .env file the address for development and for production in the node server app. Can someone help me?

recently I perform routing of all components in react js and today I make the footer component when I try to add this below the Homepage and contact page, without showing any error a blank screen shows up as an output.
So please guide me on how to solve this issue. Thanks

some screenshots are also attached

[Routing of all pages][1]
[Home page without Footer component][2]
[Output without Footer component][3]
[Footer component is imported][4]
[Footer component is placed at the bottom of home page][5]
[Output of Home page after adding footer][6]

I’m trying to POST Data to Mongo DB Using Express Js.

I’m new to express just learned for a backend server

This is my app.js

const express = require("express");
const mongoose = require("mongoose");
require("dotenv/config")
const User = require("./model/user.js")

let app = express();
app.use(express.json())
app.get("/", (req,res) => {
    res.send("On Home!")
});
app.post("/register", async (req,res) => {
    try {
        const myUser = new User(req.body);
        await myUser.save();
        res.send(myUser);
    } catch (err){
        res.send({error : err});
    }
});
mongoose.connect(process.env.DB_URI,(req,res) => {
    console.log("Connected to Database!")
});
app.listen("5000" , () =>{
    console.log("Listening on localhost 5000")
})

My user.js

const mongoose = require("mongoose");

const User = mongoose.Schema({
name: {
    type: String,
    required: true,
},
email:{
    type:String,
    required: true,
},
pass:{
    type: String,
    required: true,
}
});

module.exports = mongoose.model("user",User)

My Response Is

My Response

(I’m Using Postman to test)

Thank You For Your Support

After I read prisma article,I can execute npm install prisma --save-dev and npx prisma. After that,
I searched where prisma cli was installed.
multiple cli has symbolic link from node_modules/.bin to its actual file,so I searchprismain this directory but it couldn’t be found. where is prisma cli installed ?

~/test/src/test% ls -ltr node_modules/.bin 
total 0
lrwxrwxrwx 1 hikarmiy amazon 17 Jan 28 03:08 ts-jest -> ../ts-jest/cli.js
lrwxrwxrwx 1 hikarmiy amazon 27 Jan 28 03:08 prettier -> ../prettier/bin-prettier.js
lrwxrwxrwx 1 hikarmiy amazon 15 Jan 28 03:08 lerna -> ../lerna/cli.js
lrwxrwxrwx 1 hikarmiy amazon 21 Feb  1 04:42 npx -> ../npm/bin/npx-cli.js
lrwxrwxrwx 1 hikarmiy amazon 45 Feb  1 04:42 npm-install-peers -> ../npm-install-peers/bin/npm-install-peers.js
lrwxrwxrwx 1 hikarmiy amazon 21 Feb  1 04:42 npm -> ../npm/bin/npm-cli.js
lrwxrwxrwx 1 hikarmiy amazon 26 Feb  1 09:06 tsserver -> ../typescript/bin/tsserver
lrwxrwxrwx 1 hikarmiy amazon 21 Feb  1 09:06 tsc -> ../typescript/bin/tsc

Thanks

I want to import .geojson file extension just like .json files (I don’t need any special parsing).
as I seen in webpack docs:

Since webpack >= v2.0.0, importing of JSON files will work by default.
You might still want to use this if you use a custom file extension.
See the v1.0.0 -> v2.0.0 Migration Guide for more information

but when I switch documentation version to webpack 5, there is no more content about this solution.

what is best practice to have .geojson files without downloading any extra module

Am new to react , so was just introducing drag and drop functionalities in react components.

Here am dragging components from leftPanelComponent and and dropping to RightPanelComponent , meaning both are different components in react. so am not getting event value on RightPanelComponent on Drop function

In LeftPanelComponent ,

<div draggable='true' className='name' onDragStart={dragStartHandler.bind(this)}>
    {propertyName(name, 10, 4)}
</div>

const dragStartHandler = (ev) => {
  console.log('react SyntheticEvent ==> ', ev);
  console.log('nativeEvent ==> ', ev.nativeEvent);
  ev.dataTransfer.setData('Text', ev);
  console.log(ev);

Here am not getting the element value inside ev ( like ev.currentTraget)

Also in my RightPanelComponent am just writing drop function like

<div className='wrapper-div' onDrop={(e) => this.drop(e)} onDragOver={(e) => this.allowDrop(e)}>
//some code

</div>

Here also am not receiving the drop value . Some how i need to get the dragged value

drop = (ev) => {
    if (ev != undefined) {
      var data = ev.dataTransfer.getData('Text'); --> not getting value
      ev.target.appendChild(document.getElementById(data));
      ev.preventDefault();
    }
  };

  allowDrop = (ev) => {
    if (ev != undefined) {
      ev.preventDefault();
    }
  };

Is this the right way to do the same in react , since i can see in UI , element is getting dragged with + sign when it enter on drop area

But am not getting event value on Drop function in RightPanelComponent.(its getting undefined) Am i missing something , please correct me if am wrong

I am writing regex to match an expression but with specific checks.

e.g.

1. ${variable} — allowed
2. ${variable}+”s” — allowed
3. ${variable}+”sa” — not allowed (only s,m,w,d,h,ms)
4. ${variable}++”s” — not allowed (double plus)
5. 2s — allowed

(Checking for expression with certain time suffix (e.g. s,m,w,d,h,ms)

I have made this regex:

((${[^{}]*}(+)?("[(ms|s|m|h|d|w)]+"))|(${[^{}]*}))|((^(d+ws*)?(d+ds*)?(d+hs*)?(d+ms*)?(d+ss*)?(d+mss*)?$))

I want to check for either ${variable} or ${variable}+”s”
But this regex is matching ${variable}++”s” (INVALID VALUE) also for its substring.

Currently, working on The Odin Project – Etch-a-Sketch. I’m trying to include a ‘color picker’ onto the web page so that the user can change the color of the marker.

However, once I select a color the div after my ‘color picker’ div changes from it’s original value to the Hex color code I selected (image shown below).

How do I prevent this?

<div class='color'> 
    <input type='color' id='colorSelect' value='#333333'>
    <label for="colorSelect">Color Picker</label>
</div>

<div class='backgroundColor'>
    <input  type='color' id='bgColorSelect' value='#333333'>
    <label for="bgColorSelect">BG Color Picker</label>
</div>

<div class='eraser'>
    <span>Eraser</span>
</div>

I have these data:

orders = {
  firstName: "Jennie",
  lastName: "asdasda",
  address: "US",
  order: [
    { product: "Tumbler - 500- ML ", variation: [{ qty: 12, color: "red" }] },
    { product: "Shirt - M ", variation: [{ qty: 14, color: "green" }] }
  ],
  instructions: "asdasdad",
  contact: "182738123"
};

Saving this in firestore would look like this:

How do I save this in firestore where the fields of firstName, lastName, address, contact and instructions is not inside the orders map?

I kind of wanted to save it like this:

This is how I saved it in Firestore:

 const Save = () => {
      const { state } = useStateMachine(updateAction);
      const orders = state.yourDetails;
    
      const handleAdd = async () => {
        try {
          const docRef = await addDoc(collection(db, "orders"), { orders });
          console.log("Document written with ID: ", docRef.id);
        } catch (err) {
          console.log(err);
        }
      };
    
      return (
        <div>
          Results
          <pre>{JSON.stringify(state.yourDetails, null, 2)}</pre>
          <button onClick={handleAdd}>Add </button>
        </div>
      );
    };
    
    export default Save;

I am trying to solve this question->
https://www.codewars.com/kata/541c8630095125aba6000c00/train/javascript

Basically the purpose of the function is to:
16 –> 1 + 6 = 7
942 –> 9 + 4 + 2 = 15 –> 1 + 5 = 6
132189 –> 1 + 3 + 2 + 1 + 8 + 9 = 24 –> 2 + 4 = 6
493193 –> 4 + 9 + 3 + 1 + 9 + 3 = 29 –> 2 + 9 = 11 –> 1 + 1 = 2

I am able to get the correct answer (“final sum”) in my console.log but I am not able to get that value in the written statement.

function digital_root(n) {
  console.log("initial", n)
  let sum=0
  
  while(n>0){
    
    sum+= n%10
    console.log("sum",sum)
    n= Math.floor(n/10)
    console.log("num",n)
    
  }
  if(sum>10){
    digital_root(sum)
  } else{
      console.log("final sum",sum)
      return sum}
}

Here’s the console.log->

initial 16
sum 6
num 1
sum 7
num 0
final sum 7
initial 195
sum 5
num 19
sum 14
num 1
sum 15
num 0
initial 15
sum 5
num 1
sum 6
num 0
final sum 6

initial 398754
sum 4
num 39875
sum 9
num 3987
sum 16
num 398
sum 24
num 39
sum 33
num 3
sum 36
num 0
initial 36
sum 6
num 3
sum 9
num 0
final sum 9

its returning undefined instead of 6 & 9 respectively.

Also a humble request is to not suggest an alternative solution but to help me fix this one.
Thank you

I want to use few web components from https://github.com/microsoft/vscode-webview-ui-toolkit. But I don’t know to how to use them in Svelte as svelte treats the web components as svelte components.

When I try to use them as,

<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>

<main>
  <Button appearance="primary">Text</Button>
</main>

I get this error,

Element does not support attributes because type definitions are missing for this Svelte Component or element cannot be used as such.

Underlying error:
JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)
'Button' cannot be used as a JSX component.
  Its instance type 'Button' is not a valid JSX element.
    Property '$$prop_def' is missing in type 'Button' but required in type 'ElementClass'.

Possible causes:
- You use the instance type of a component where you should use the constructor type
- Type definitions are missing for this Svelte Component. If you are using Svelte 3.31+, use SvelteComponentTyped to add a definition:
  import type { SvelteComponentTyped } from "svelte";
  class ComponentName extends SvelteComponentTyped<{propertyName: string;}> {}ts(2786)

For some reason when I try to reopen the first modal (editModal1) from the second modal via (data-bs-target="editModal1") I get the following error:

modal.js:332 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at De._isAnimated (modal.js:332:26)
    at De._initializeBackDrop (modal.js:205:24)
    at new De (modal.js:82:27)
    at Function.getOrCreateInstance (base-component.js:55:41)
    at HTMLButtonElement.<anonymous> (modal.js:434:22)
    at HTMLDocument.n (event-handler.js:120:21)
_isAnimated @ modal.js:332
_initializeBackDrop @ modal.js:205
De @ modal.js:82
getOrCreateInstance @ base-component.js:55
(anónimo) @ modal.js:434
n @ event-handler.js:120

This is my code:

$(document).ready(function() {

});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<table id="itemsTable" class="display nowrap" width="100%">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value1</td>
            <td>value2</td>
            <td>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editModal1">
                EDIT
                </button>                                               
            </td>
        </tr>
        <!-- modal -->
        <div class="modal fade" id="editModal1" tabindex="-1" aria-labelledby="newITTLModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header" id="newTaskModalHeader">
                        <div class="col-8">
                            <h5 class="modal-title" id="newTaskModalLabel">Edit Modal</h5>
                        </div>
                        <div class="col-4">
                            <button type="button" class="btn btn-secondary new-task-dismiss rounded-0" data-bs-toggle="modal" data-bs-target="#cancelModal" data-bs-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary rounded-0">Save</button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-5 mt-3">
                                <ul class="list-unstyled">
                                    <li class="mt-3">
                                        <div class="row">
                                            <div class="col-sm ph-tabs-field-label">
                                                Name <span style="color:red;">*</span>
                                            </div>
                                            <div class="col-sm">
                                                <input type="text" name="name" class="form-control" aria-label="Name" required>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col mt-3">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>
        <!-- end modal -->
        <!-- cancel modal -->
        <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="Cancel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <h4 class="text-center" style="color:#013B4B;">Are you sure you want to cancel?</h4>
                        </div>
                        <div class="row mt-4">
                            <div class="col-3">
                            </div>
                            <div class="col-6 d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-success btn-lg rounded-0" data-bs-dismiss="modal">Yes</button>
                                <button type="button" class="btn btn-danger btn-lg rounded-0" data-bs-target="editModal1" data-bs-toggle="modal" data-bs-dismiss="modal">No</button>
                            </div>
                            <div class="col-3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end cancel modal -->
    </tbody>
</table>

I want to reopen the first modal if I click "Are you sure you want to cancel? -> NO"

If I am not mistaken the problem is that when I click NO, editModal1 no longer exists in the DOM and that’s why I get that error but I don’t know how to fix it.

I’ve been looking at some previous stackoverflow questions about how to nest/concatenate multiple modals, unfortunately I couldn’t find a solution.