Category: javascript

I have the following structure in my project:

aibolit
├───apps
├───bin
│   ├───lint
...

lint is a bash script. But when I try to call it from the aibolit folder, I see the following error:

This is lint running script:

"lint": "npm run lint:js && npm run lint:css",
"lint:js": "bin/lint",
"lint:css": "npx stylelint "apps/**/*.scss"",

ls shows the bin folder and the lint file in it

I have want to trace wheel – but page isn’t scroll becase my content is fit for page.
also I need to Know wheel rolling up or down ?

This is my code ,it just work when page is scrollable but (my page isn’t)

function myFunction() { // put this fun on a event of element.
    if (document.body.scrollTop > 50) 
     {
      console.log(document.body.scrollTop);
     } 
 }

I have tryed to make a request from console:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "chrome://version");
xmlhttp.onreadystatechange = function()
{
    if ((xmlhttp.status == 200) && (xmlhttp.readyState == 4))
    {
        console.log(xmlhttp.responseText)
    }
};
xmlhttp.send();

This work perfectly on console, but when I try to execute it on background.js I have this error:

Not allowed to load local resource: chrome://version/

I have tryed to give permission in manifest.json but was unsuccessfull

Permission I have given to manifest:
fileSystem

If there is no way to get chrome version, how I can identificate a chrome user like profile path, whitout the profile is logged in google.

I’m trying to build a product card carousel using vue-owl-carousel. One feature I would like this carousel to have is when a button is pressed, the matching tags will only appear in the carousel filtering out the others (as shown in image) [1]: https://i.stack.imgur.com/wkYds.png
The filter is working, however, the carousel will replace the filtered out cards with blank space as if the filtered out cards were still there. Any way to fix this?

** template **

<template>
<div >
  <button type="button" v-for="(c,i) in tags" :key="i" class="btn btn-outline-primary" @click="onClick(c)">{{c}}</button>

  <carousel :items="3" :margin="10" :nav="true">
    <div class="card" v-for="c in filterProducts" :key="c.name" style="width: 18rem;">
      <img :src="require('../assets/img/' + c.imgName + '.png')">
      <h5 class="card-title ps-2 pt-2">{{c.headline}}</h5>
      <div class="card-body">
        <p class="card-text">by {{c.text}}</p>
        <h6 class="card-text fw-bold fs-2">{{c.price}}</h6>
        <button  class="btn btn-outline-secondary rounded-pill">View Details</button>
      </div>
    </div>
  </carousel>
</div>
</template>

JS

<script>
import carousel from "vue-owl-carousel"
export default {
  components:{carousel},
data(){
    return{
      tags:["business","blog","e-commerce"],

      cards:[{
        imgName: "homepage-design-hotjar",
        headline:"Business Template ",
        text:"Bozo",
        price: "$12.99"
      },
        {
          imgName: "homepage-design-qwilr",
          headline:"Fashion template",
          text:"Bozo",
          price: "$12.99",
          tag:"business"
        },
        {
          imgName: "homepage-design-usabilityhub",
          headline:"Game template",
          text:"Bozo",
          price: "$20.99",
          tag:"business",
        },
        {
          imgName: "skateboard",
          headline:"Game template",
          text:"Tony Hawk",
          price: "$100.99",
          tag:"blog"
        },
       {imgName: "skateboard",
         headline:"Game template",
         text:"Tony Hawk",
         price: "$100.99",
         tag:"blog"
       },

       {
         imgName: "skateboard",
         headline:"Game template",
         text:"Tony Hawk",
         price: "$100.99",
         tag:"e-commerce"
       },

      ],
      filterBy: "",
}

},
  computed:{
    filterProducts(){
if (this.filterBy === "") return this.cards;
else return this.cards.filter(c => c.tag === this.filterBy)
  }

},
methods: {
  onClick(tag) {
    this.filterBy = tag

  },

}
}
</script>

I made a simple project
html:

<!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>
</head>
<body>
    <script src="script.js"></script>
    <canvas id="screwen">

    </canvas>
</body>
</html>

Javascript:

const GameWindow = document.getElementById('screwen')

But in console it saying GameWindow is null
console:

document.getElementById('screwen')
<canvas id=​"screwen">​ ​</canvas>​

const Hello = document.getElementById('screwen')
undefined
Hello
<canvas id=​"screwen">​ ​</canvas>​

GameWindow
null

Why is it like that?

Currently, when I click on input field area the dropdown is appearing. But I want all available “mat-form-field” area should be clickable and on click it can show the dropdown. I tried increasing the “input” field area but it will disturbed the mat-chip-list.
dropdown appear after clicking on input only

Here is the stackblitz link. mat-chip-list with input

I want to implement a DRY principle for my code below which deletes two different user and also i want to implement a dynamic response based on the details of the model provided to the find method

//This code here deletes the student
exports.deleteStudent = async (req, res) => {
    try {
        let ID = req.query.id
        let exactStudent = await Student.findById(ID)
        if (!exactStudent) {
            return res.status(400).json({ error: "Student with the specified ID not present" })
        }
        await Student.findByIdAndDelete(ID);
        res.status(200).json({ success: 'Student Deleted successfully ' })
    } catch (error) {
        throw error
    }
}

//the code here deletes the teachers

exports.deleteTeacher = async (req, res) => {
    try {
        let ID = req.query.id
        let exactTeacher = await Teacher.findById(ID)
        if (!exactTeacher) {
            return res.status(400).json({ error: "Teacher with the specified ID not present" })
        }
        await Teacher.findByIdAndDelete(ID);
        res.status(200).json({ error: 'Teacher Deleted successfully ' })
    } catch (error) {
        throw error
    }
}

With React Router v6 I want to render the callback page. Although I’m not able to get the output from the element prop in my screen. I’m only getting the output from out and always a blank screen or a 404 for the callback page. What am I missing with the new React Router?

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/*" element={<p>auth</p>}>
          <Route path="callback" element={<p>callback</p>} />
        </Route>
      </Routes>
    </Suspense>
  </>
);

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/callback" element={<p>callback</p>} />
      </Routes>
    </Suspense>
  </>
);

Also using an Outlet doesn’t seem to solve the problem..

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/*" element={<><p>auth</p><Outlet /></>}>
          <Route path="callback" element={<p>callback</p>} />
        </Route>
      </Routes>
    </Suspense>
  </>
);

The BrowserRouter is in my Root component, which is rendering App.

I want to create a range like you see in the picture below:

Here is my code for this:

     <div class="form-group">
       <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label>
       <div class="distance">
         <output>40 </output>
         <span>km uzaklık</span>
      </div>
      <input type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
      <div class="total-distance">50</div>
    </div>

So what I am trying to achieve, I want to move this with the range input.

PS: I am using bootstrap for range.

I’m a beginner at javascript and learn a lot by looking already written code.

Some large javascript projects I’ve looked at have minified code and when expanding it it’s not very readable.

almost all variables and functions are just defined by a letter looping trough the alphabet i.e a b c, aa, bb, cc and so on, also no commenting.

Out of curiosity is this a coding style or is there a tool that you use to optimize the code with?

seems hard to maintain such a project.

I am using the following code to download a static pdf file

const downloadPDF = (req, res, next) => {
    const fileLoc = `output.pdf`;
    var filename = path.basename(fileLoc);
    var mimetype = mime.lookup(fileLoc);
    var stat = fs.statSync(fileLoc);
    res.setHeader('Content-Type', mimetype);
    res.setHeader('Content-Length', stat.size);
    res.setHeader('Content-disposition', 'attachment; filename=' + filename);
    return res.download(fileLoc);
}

the file becomes corrupted after download. What might be causing the issue ?

I have a problem with I18next. I can’t figure out how to make links to websites work, here is my code:

import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";

const translationSwe = {
about: "Information",
example: "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>länk</a>"
}

const translationEng = {
about: "About"
example: "Example <br> <strong>text</strong>, here is <a target='_blank' rel='noreferrer 
noopener' href='https://youtube.com'>link</a>"
}

i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});

const App = () => {
const { t } = useTranslation();

return(
<Suspense fallback="Loading..">
<div className="app">
<p><Trans i18nkey="example"/></p>
</div>
</Suspense>
);
};

Line breaks & strong tags work fine, but link doesn’t. Instead of the link it prints just

<a>länk</a>

I have read some articles how to make links work, but in everyone of them data is in seperate JSON files. And in everyone of them you have to also insert the link from where you are calling the Trans component. I would like to just add text(which includes links etc) to translationSwe & translationEng without having to edit Trans component at all later, in case I decide to update or add links. How can I achieve this?

When adding a position: fixed on-scroll on my navbar the DOM throws the error: [Violation] Forced reflow while executing JavaScript took ms, on every scroll event. From my understanding (and Googling) this means there is layout thrashing everytime a scroll event happens due to new calculation.

My question is; is this a problem? I can’t really crack the code of how to improve it to remove the violation, hence why I wanted to hear if this is ‘standard’ behaviour when working with scroll offsets.

The code I’m using is below:

document.addEventListener('DOMContentLoaded', function() {
    
  window.addEventListener('scroll', addPositionFixed);

  var navbar = document.getElementById("navbar");

  var sticky = navbar.offsetTop;

  function addPositionFixed() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky");
    } else {
      navbar.classList.remove("sticky");
    }
  }
})

Is there a way to connect queued_Dr to upcoming_appointments by using all_appointments

What would be the best approach to this problem?

var queued_Dr = ["Dr.Salazar",["Dr.Connors","Dr.Johnson"],"Dr.Pearson"]


upcoming_appointments =
[  
     {"DOB":"01-27-2002","name":"Judy, W." ,"PCD":"Dr-S"}
    ,{"DOB":"08-15-1995","name":"John, V." ,"PCD":"Dr-C"}
    ,{"DOB":"07-05-1992","name":"David, C.","PCD":"Dr-S"}
    ,{"DOB":"01-15-2002","name":"Anna, S." ,"PCD":"Dr-J"}
    ,{"DOB":"01-15-2002","name":"Jeff, D." ,"PCD":"Dr-P"}
]


all_appointments = 
{
    "0": ["Dr-S","New York","Dr.Salazar"],
    "1": ["Dr-C","Austin","Dr.Connors"],
    "2": ["Dr-J","Austin","Dr.Johnson"],
    "3": ["Dr-S","New York","Dr.Salazar"],
    "4": ["Dr-P","San Juan","Dr.Pearson"],
    "5": ["Dr-J","Austin","Dr.Johnson"]
}

Goal Output

"Dr.Salazar" -> "Dr-S"
["Dr.Connors","Dr.Johnson"] -> "Dr-C" or "Dr-J"
"Dr.Pearson"] -> "Dr-P"

I’m making a simple site for a project, and i want to redirect player to a login page if the token is expired, but I’m not really sure how to do it properly, here’s what I’ve tried, im using react-jwt to check the token

function App() {

  return (
    <div style={{display:'flex', flexDirection:'column', height:'100vh'}}>
      <Navbar/>
      <div style={{display:'flex', flex:1}}>
        <Routes>
          <Route path="/login" element ={<LoginForm/>} />
          <Route path="/signUp" element ={<SignUpForm/>} />
          <Route path="/addMovie" element= {<AddMovie/>} />
          <Route path="/" element={isExpired(localStorage.getItem('token') ? <FilmList/> : <LoginForm/> )} />
          <Route path="/details" exact element ={<MovieDetails/>} />
        </Routes>
      </div>
    </div>
  );
}

or something like

<Route path="/" 
render={props=>{
  if(isExpired(localStorage.getItem('token'))){
    return <Navigate to='/login'/>;
  }
  return <FilmList/>
}}
/>

The first one just returns nothing, and the second one gives a warning in console:

Matched leaf route at location “/” does not have an element. This
means it will render an with a null value by default resulting in an
“empty” page.

Is there a way to make it work ?