Category: javascript

I have quite a hard time understanding this expression (split in italic) Can someone explain it to me:
I understand ‘this’ referring to an object but in this case then what does ‘object.function’ means ?

class Chronometer {
  constructor() {
   this.currentTime = 0
   this.intervalId = null
  }

getMinutes() {
    return this.currentTime/60
  }

 getSeconds() {
    return this.currentTime%60
  }

computeTwoDigitNumber(value) {
     return String("0" + value).slice(-2)
  }

*split () {
      var minutes = this.computeTwoDigitNumber(this.getMinutes());
      var seconds = this.computeTwoDigitNumber(this.getSeconds());
      printSplit(minutes, seconds)*

I have a requirement of generating dates in this format 'Thru: 12/20' (like credit/debit card expiry date format). What is the best way of generating date in this format?

I have search everywhere, but not getting any solutions. Can anyone help?

I have a mongoose object like image-

Here I also get a array of product from frontend like-

products: [
    { product: "61adbb70207f1002fc7c5c2a", quantity: 1 }
    { product: "61adbb52207f1002fc7c5c27", quantity: 2 }
  ]

I have to find mongoose data when all the product match to the queries.

Here is my practice-

         const order = await Order.exists({
            products: {
                $all: {
                    $elemMatch: {
                        product: {
                            $all: input.products.map(item => item.product)
                        }
                    }
                }
            },
            user: reqUserInfo._id
        });

More description–

When I get from frontend this-

      products: [
        { product: "61adbb70207f1002fc7c5c2a", quantity: 1 }
        { product: "61adbb52207f1002fc7c5c27", quantity: 2 }
      ]

then it should return true

And when I get this-

          products: [
            { product: "61adbb70207f1002fc7c5c2a", quantity: 1 }
          ]

It also should return true.

But When I get this-

      products: [
        { product: "61adbb70207f1002fc7c5c2a", quantity: 1 }
        { product: "61b3786ba2123f03dc6da691", quantity: 2 } // This not in the database
      ]

or This

      products: [
        { product: "61b37850a2123f03dc6da68e", quantity: 1 }
        { product: "61b3786ba2123f03dc6da691", quantity: 2 }
        //This two are not in the database
      ]

Then should return false

How can I do that? Please help me.

I learn JavaScript React and now I have problem with positioning of images.
I have a Codesandbox.

I learn from this MUI tutorial.

It should look like this this but I get bad output.

In the Component FileEditor.jsx I load up the FileContentRenderer.jsx that can show both MP4 and Images, but images has problem.
In the FileContentRenderer.jsx I try this:

  cardMedia: {
    width: "auto",
    height: "100%"
  }

That should show the image but not,
Then I try this;

  cardMedia: {
    width: "100%",
    height: "50vh"
  }

That will display images in portrait but in landcape it does not show full image.

This viewer App can display MP4 and images and the MP4 is showing ok in landscape and portrait when using

  viewerMp4: {
    width: "auto",
    height: "100%"
  },

So why does that not work with an image

I have read some documentation on express routing and I am trying to render the logged in user’s username or identification in the url. I need help getting the routing hit in my server.js to render the pages even before authentication. Where am I messing up?

Routing (profile.js)

const express = require("express");
var router = express.Router();
const User = require("../models/user");
const passport = require("passport");
const multer = require("multer");

// Profile Avatar
const upload = multer({ dest: "upload" });
// ACCOUNT ROUTES

router
  .route("/profile/:id")
  .get(function (req, res) {
    if (req.isAuthenticated()) {
      let dateObj = req.user.createdAt;
      let createdDate = dateObj.toString().slice(4, 16);
      let navbarLoggedIn = "partials/loggedIn-navbar.ejs";
      let id = req.params.username;
      console.log(id + "n");
      res.render(
        "profile",
        { id: req.params.id },
        {
          currentUser: req.user.username,
          currentCompany: req.user.company,
          currentLocation: req.user.location,
          currentPosition: req.user.position,
          memberStatus: createdDate,
          navbar: navbarLoggedIn,
        }
      );
    } else {
      res.redirect("login");
    }
  })
  .post(function (req, res) {});

module.exports = router;

server.js

require("dotenv").config();
const express = require("express");
const session = require("express-session");
const passport = require("passport");
const path = require("path");
const ejs = require("ejs");
const logger = require("morgan");
const main = require("./routes/main");
const about = require("./routes/about");
const contact = require("./routes/contact");
const profile = require("./routes/profile");
const pricing = require("./routes/pricing");
const help = require("./routes/help");
const login = require("./routes/login");
const signup = require("./routes/signup");
const forgot_password = require("./routes/forgot-password");
const User = require("./models/user");
const multer = require("multer");

// PORT
const port = 8080;
const app = express();

// COOKIES AND SESSION
app.use(
  session({
    secret: process.env.SECRET,
    resave: false,
    saveUninitialized: true,
  })
);

app.use(passport.initialize());
app.use(passport.session());

// DATABASE
require("./config/database.js");

// PASSPORT AUTHENTICATION
require("./config/passport.js");

// MIDDLEWARE
app.use(logger("dev"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use("/public", express.static(path.join(__dirname + "/public")));
app.set("view engine", "ejs");
app.set("view cache", false);

// ROUTES
app.use("/", main);
app.use("/about", about);
app.use("/contact", contact);
app.use("/pricing", pricing);
app.use("/profile/:id", profile, (req, res, next) => {
  next();
});
app.use("/help", help);
app.use("/login", login);
app.use("/signup", signup);
app.use("/forgot-password", forgot_password);



// Logout
app.get("/logout", function (req, res) {
  res.clearCookie("connect.sid");
  res.redirect("/");
});

app.listen(port, (err, done) => {
  if (!err) {
    console.log({ message: "success!" });
  } else {
    return err;
  }
});

And here is my file structure.file structure.

I am trying to create a chrome extension that captures the screen of a webpage and makes an ajax call with the captured picture.

I want the screen capture to work like a capture area screenshot in the chrome developer tools.

Question.

1. Is there a way to call the capture area screenshot function of chrome developer tools from javascript code?

2. Can I get a rough idea of ​​what language the capture area screenshot function of Chrome Developer Tools is made in?

under this link: https://mui.com/styles/advanced/#theme-nesting I found a guide to customize theming…
I was just wondering about that code part:

 <ThemeProvider
          theme={(outerTheme) => ({
            ...outerTheme,
            background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
            boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .3)',
          })}
        >

Where you basically pass a function callback to the theme property, that returns an object (with the old ...outertheme props passed to the function and getting destructured and extended..)

I was wondering how was that construct called again and how does it work behind the scenes? I think there was somethign similar in React called render props, where you pass a function to a component property that returns a JSX Expression, but that function gets passed some property from the parent component, that gets that function passed as a child and executes the function but passes additional parameters beforehand to the function as the render props. Is that right?

<Component someThing={property => (<p>This is some {property}</p>)} />

and in Component:

({someThing}) => (...create `property`, return (someThing(property)))

I’m trying to modify a .csv file to get a custom .kml file using javascript (I don’t almost nothing about programming) that displays the flight path of an aircraft with the altitude. I made the editting of the .csv manually (with Excel and others online tools) and I got this result:
Google Earth path view
The .csv look like this (but with much more lines):

latitude,longitude,altitude_feet,altitude_meters,speed_kmh,speed_kts,speed_mph,verticalSpeed_fpm,verticalSpeed_ms,heading,squawk,timestamp
-15.661926,-56.111912,0,0,5.6,3,3.5,0,0,326,0,1639064757
-15.661674,-56.112057,0,0,38.9,21,24.2,0,0,331,0,1639064777
-15.661263,-56.112274,0,0,68.5,37,42.6,0,0,334,0,1639064781
-15.661057,-56.112381,0,0,79.6,43,49.5,0,0,334,0,1639064782
-15.660778,-56.112537,0,0,92.6,50,57.5,0,0,334,0,1639064783

To make the .csv I just need the “latitude”, “longitude”, “altitude_meters” and “timestamp” columns.
For these columns to go in the .kml file they need to be edited and arranged in the following format:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
<Document>
    <name>AZU4534 10/12/2021 (SBCY-SBAT)</name>
    <Placemark>
        <name>SBCY Airport</name>
        <Point>
            <coordinates>-56.116719,-15.652931,0</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>SBAT Airport</name>
        <Point>
            <coordinates>-56.106206,-9.866092,0</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        <name>AZU4534</name>
        <description>SBCY-SBAT</description>
        <gx:Track>
            <extrude>1</extrude>
            <tessellate>1</tessellate>
            <altitudeMode>absolute</altitudeMode>
            <when>2021-12-10T11:41:52Z</when>
            <when>2021-12-10T11:41:57Z</when>
            <when>2021-12-10T11:42:02Z</when>
            <when>2021-12-10T11:42:05Z</when>
            <when>2021-12-10T11:42:10Z</when>
            <gx:coord>-56.117455 -15.651947 0</gx:coord>
            <gx:coord>-56.117249 -15.652027 0</gx:coord>
            <gx:coord>-56.117085 -15.652247 0</gx:coord>
            <gx:coord>-56.116959 -15.652451 0</gx:coord>
            <gx:coord>-56.116814 -15.652748 0</gx:coord>
        </gx:Track>
    </Placemark>
</Document>
</kml>

First part: the data and time
In the .kml file the “timestamp” column must be converted to a readable date (I think that with a math formula I can do that, but I don”t know to make this in javascript) in the following format: the date in yyyy-mm-dd, followed by a “T”, followed by the hour in hh-mm-ss, followed by a “Z”. All of this, in betweeen “<when>” and “</when>“.

Second part: coordinates and altitude
For the coordinates and altitude, it must follow this format: first comes the longitude, followed by a space, followed by the longitude, followed by another space, followed by the altitude. And again, all of this in between “<gx:coord>” and “</gx:coord>“.

So, any tips on how can I don that with javascript?

All I have now is a modification of an existing javascript: The “flightradar24-to-csv” by LuisSevillano (https://github.com/LuisSevillano/flightradar24-to-csv). And I would like to make a modification so that .kml file can be automatically generated.

I was developing a program in JavaScript, when each time the button is pressed the image should alternate on each press- if it is currently the “box open” image, it should switch to the “box closed” image.Similarly, if it is currently on closed, it should witch to the “box open”. I am however facing an “illegal invocation” error How can this be solves?

var jackbox = document.getElementById("jackbox");                                               
                                                
  function click()                                              
  {                                             
    if (this.id == "Jump out,Jack!")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
    else(this.id == "Jump out,Jack")                                                
    {                                               
      document.getElementById("jackbox").src = "https://www.paulneve.com/pp/jackbox-open.jpg";                                              
                                                
    }                                               
                                                
  }                                             
                                                
document.getElementById("toggle").onclick = open;

<div style="text-align: center; height: 280px;">
    <img id="jackbox" src="https://www.paulneve.com/pp/jackbox-closed.jpg" />
    <br/>
    <button id="toggle">Jump out, Jack!</button>
</div>

how do I build a timeTable field?

I currently have:

timeTable = (HourScheduleDefinitionModel[])[];

e.g.

[
  {
  day: '0',
  timeline: [
      { from: '01:00', to: '02:00' },
      { from: '20:00', to: '22:00' }
    ]
  },
  {
    day: '1',
    timeline: [ { from: '01:00', to: '04:00' }, { from: '20:00', to: '21:00' } ]
  }
]

and I want to

timeTable: Map<number, Array<HourScheduleDefinitionModel>>;

e.g.

{
0: [{from: '00:00', to: '23:00'}],
1: [{from:'00:00', to:'10:00'},{from:'14:00', to:'16:00'}]
}

the save button shows it
https://stackblitz.com/edit/angular-ivy-slrmqc?fbclid=IwAR3mZbHjz8TkLUZJI1kd7gsMnaPikdS0eyGzdF17RPYJ70jyHhXMOzW8x3w&file=src%2Fapp%2Fapp.component.ts

I’m very new to javascript and I can’t find my mistake. I have an input field and I want to display the value entered in the input field in the section below, once the button is clicked.

I’ve added a click event listener on the button and tried to write a function, which would create a new p element, after the button is clicked, but that doesnt work.

"use strict";

let button = document.getElementById('btn');

button.addEventListener("click", function() {
    let answer = document.createElement('p');
    let input = document.getElementById('input').value;
    answer.innerHTML = "<p>" + input.value;
    console.log('log for testing')
})

body {
    margin: 0 auto;
    background-color: rgb(149, 199, 255);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
    background-color: rgb(14, 131, 240);
    height: 170px;
    width: 100%;
    position: fixed;
}

h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    letter-spacing: 2px;
    font-size: 30px;
}

#input {
    display: inline;
    width: 400px;
    border-radius: 8px;
    border: none;
    height: 40px;
    margin-right: 2px;
    padding-left: 8px;
    margin-left: 10px;
}

#btn {
    font-size: 24px;
    border: none;
    height: 42px;
    width: 42px;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.3s;
}

#btn:hover {
    cursor: pointer;
}

#btn:active {
    background-color: rgb(201, 199, 199);
}

form {
    display: inline-flex;
}

section div {
    background-color: rgb(157, 157, 240);
    height: 100%;
    width: 444px;
    color: white;
    top: 200px;
    position: fixed;
    margin: 0;
    border-radius: 8px;
    padding: 8px;
    margin-left: 10px;
}    

<!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">
    <link rel="stylesheet" href="style.css">
    <title>input to innerHTML</title>
</head>
<body>
    <header>
        <h2>Enter your text below</h2>
        <form id="form">    
            <input id="input" type="text" placeholder="Write something here...">
            <button id="btn" type="button"> + </button>
        </form>
    </header>
    <main>
        <section>
        <div id="answer-section">
            <p></p> <!-- all the answers should go here -->
        </div>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

Can anybody see my mistake or point me to the right direction? Any help would be much appreciated, thanks.

file:///D:/udemy/JavaResource/COmplete%20JS/complete-javascript-course-master/02-Fundamentals-Part-2/starter/Arithmatic.html

i have created the UI using HTML and i thought about using Switch Statements but idk how to connect that with HTML

I want to debugging in the localhost:3000 port when develop a react app, my server api address is admin.example.com, I config like this in the project src/setupProxy.js file:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(createProxyMiddleware('//manage/?$/', 
  { 
    target: 'https://admin.example.com/',
    changeOrigin: true
  }));
};

but when I start the app, still give me tips that the XHR was cross origin. what should I do to make it work? Am I missing something? this is the http-proxy-middleware version "http-proxy-middleware": "^2.0.1". the full request url is: https://admin.example.com/manage/dashboard/overview.

Now I Have Two modules

I need both of them call each other when I do this or i used third module or service to do this it throw this error i try many times need help for this error

I am trying to close the other div when I open a new div, But I am using in loop so I used forloop.counter But it is not working. And when I try to use without forloop.counter or outside the loop then it is working fine, but I want to use inside the for loop.

page.html

{% for result in results %}

    <button class="open-div-button" onclick="openDiv-{{forloop.counter}});">Open Div</button>

    <div class="div-content" id="content-{{forloop.counter}}">Content Goes Here</div>

{% endfor %}



<script>

    function openDiv(id) {
        let model = document.getElementById(`openDiv-${id}`);
        model.classList.toggle("active");
    }

</script>

<style>

    .content {
        padding: 10px 20px;
        display: none;
        background-color: #f1f1f1;
    }

    .content.active {
        padding: 10px 20px;
        display: block;
        background-color: #f1f1f1;
    }

</style>

I have also tried using forEach like :-

function openDiv(id) {
    let model = document.getElementById(`openDiv-${id}`);
  document.querySelectorAll(`openDiv-${id}`).forEach(function(div) {
    if (div.id == id) {
      model.classList.toggle("active");
    } else {
      model.classList.toggle("active");
    }
  });
}

but it is not working and it is not showing any error.

What I am trying to do?

I am trying to close active div when new div is open in for loop.

I have tried many times but it didn’t work. I seen many questions, but unfortunately I didn’t find any of them for forloop.counter. Any help would be much Appreciated. Thank You in Advance.