Category: javascript

I am working on a project in which all of my css code is based on the simple divs and and html elements and all the values assigned as pixel based now i want to make my project responsive and i have no idea what i do to make it for mobile responsive can anyone help me please.

Here is my whole jsx and css file code.

import React from 'react';
import Rect3 from '../assets/Rectangle 3.png';
import Rect1 from '../assets/Rectangle 1.png';
import Group from '../assets/Group.png';
import Ellipse from '../assets/Ellipse 4.png';
import Rect72 from '../assets/Rectangle 72.png';
import Rect73 from '../assets/Rectangle 73.png';
import Ellipse1 from '../assets/Ellipse 5.png';
import Group1 from '../assets/Group1.png';
import Rect74 from '../assets/Rectangle 74.png';
import Rect75 from '../assets/Rectangle 75.png';
import Ellipse2 from '../assets/Ellipse 6.png';
import Group3 from '../assets/Group3.png';
import Rect76 from '../assets/Rectangle 76.png';
import Rect77 from '../assets/Rectangle 77.png';
import Ellipse3 from '../assets/Ellipse 7.png';
import Group2 from '../assets/Group 2.png';
import Rect71 from '../assets/Rectangle 71.png';
import Rect80 from '../assets/Rectangle 80.png';
import Group229 from '../assets/Group 229.png';
import Ellipse8 from '../assets/Ellipse 8.png';
import Ellipse9 from '../assets/Ellipse 9.png';
import './AdminPage.css';


const AdminPage = () => {
  return (
    <div className="main_div">
        <div className='navbar'>
          <img src={Rect3} alt="NavigationBar" className='navbaradmin'/>
          <p className='Adminpara'>Admin Dashboard</p>
        </div>
        <div className='AddProject'>
          <img className='addprojects' src={Rect1} alt="Addprojects"/>
          <p className='AdminDpara'>Dashboard</p>
        </div>
        <div className='ProjectsDetials'>
          <div className='NewProjectContainer'>
            <img src={Ellipse} alt="Elipse Background" className='ellipse'/>
            <img className='inbox' src={Group} alt="Inbox Pic"/>
            <p className='Infopara'>New Project <br/>(10)</p>
            <img src={Rect72} alt="fullline" className='fulline' />
            <img src={Rect73} alt='halfline' className='halfline' />
          </div>

          <div className='NewProjectContainer1'>
            <img src={Ellipse1} alt="Elipse Background" className='ellipse1'/>
            <img className='cart' src={Group1} alt="Inbox Pic"/>
            <p className='Infopara1'>Pending Projects <br/>(05)</p>
            <img src={Rect74} alt="fullline" className='fulline1' />
            <img src={Rect75} alt='halfline' className='halfline1' />
          </div>

          <div className='NewProjectContainer2'>
            <img src={Ellipse2} alt="Elipse Background" className='ellipse2'/>
            <img className='cost' src={Group3} alt="Inbox Pic"/>
            <p className='Infopara'>Cost <br/>($52,567,56)</p>
            <img src={Rect76} alt="fullline" className='fulline2' />
            <img src={Rect77} alt='halfline' className='halfline2' />
          </div>

          <div className='NewProjectContainer3'>
            <img src={Ellipse3} alt="Elipse Background" className='ellipse3'/>
            <img className='uprofile' src={Group2} alt="Inbox Pic"/>
            <p className='Infopara'>Mew Customers<br/>(500)</p>
            <img src={Rect74} alt="fullline" className='fulline' />
            <img src={Rect75} alt='halfline' className='halfline' />
          </div>

        </div>

        <div className="TopProjectsDetails">
        <p className="pDpara">Top Projects</p>
        <div className="Pheadings">
          <p className='pheadval1'>Projects</p> 
          <p className='pheadval2'>Sales</p> 
          <p className='pheadval3'>Earning</p> 
          <p className='pheadval4'>Left Area</p> 
        </div>
        <div className='value1'>
          <img src={Rect71} alt="SAK TOWER Pic" className="elempic"/>
          <p className="eval1">SAK TOWER</p>
          <p className="eval2">81</p>
          <p className="eval3">$1,912.00</p>
          <p className="eval4">(439,553 sq. ft.)</p>
        </div>
        <div className='value2'>
          <img src={Rect80} alt="Element Residencia Pic" className="elempic1"/>
          <p className="eval5">KHARIAN</p>
          <p className="eval6">81</p>
          <p className="eval7">$1,912.00</p>
          <p className="eval8">(439,553 sq. ft.)</p>
        </div>
        
        
        </div>
        <div className="Messages">
          <p className="RMessages">Recent Messages</p>
          <p className="Runread">3 Unread Messages</p>
          <img src={Group229} alt="Reload Icon" className="reloadicon"/>
        </div>
        <div className='msg1'>
          <img src={Ellipse8} alt='recentmsg1' className='Rmpic1'/>
          <span className='Rmpara1'>James Anderson</span>
          <p className='Rmpara2'>Simply dummy text of the printing and type setting industry</p>
          <span className='Rmjust'>Just Now</span>
          <p className='Rmdate'>April 14 ,2020</p>
        </div>
        <div className='msg2'>
          <img src={Ellipse9} alt='recentmsg1' className='Rmpic2'/>
          <span className='Rmpara3'>James Anderson</span>
          <p className='Rmpara4'>Simply dummy text of the printing and type setting industry</p>
          <span className='Rmjust'>Just Now</span>
          <p className='Rmdate'>April 14 ,2020</p>
        </div>
        <span className='allMsgs'>All Messages</span>
        
    </div>  
  )
}

export default AdminPage;





CSS Code 
.navbaradmin{
    position: absolute;
    left: 328px;
    top: 30px;
    width: 921px;
    height: 60px;
}
.Adminpara{
    position: absolute;
    width: 171px;
    height: 24px;
    left: 330px;
    top: 50px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    
    color: #FFFFFF;
}
.AddProject{
    position: absolute;
    top:90px;
    left: 50px;
    width: 50px;
    height: 40px;
}
.addprojects{
    position: absolute;
    left: 285px;
    right: 58px;
    top: 7px;
    bottom: 91.59%;
}
.AdminDpara{
    position: absolute;
    top: 6px;
    left: 331px;
    color: black;
    width: 90px;
    height: 20px;
    font-weight: 700;
    background: #FFFFFF;
}
.ProjectsDetials{
    position: absolute;
    width: 895px;
    height: 204px;
    top: 160px;
    left: 339px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);

}
.NewProjectContainer{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 190px;
    height: 150px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}
.ellipse{
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 40px;
    
}
.inbox{
    position: absolute;
    top: 25px;
    left: 45px;
}
.Infopara{
    position: absolute;
    top:65px;
    left: 30px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #A5A5A5;
}
.fulline{
    position: absolute;
    top: 110px;
    left:5px;
}
.halfline{
    position: absolute;
    top: 110px;
    left:5px;
}


.NewProjectContainer1{
    position: absolute;
    top: 20px;
    left: 237px;
    width: 190px;
    height: 150px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 6px;
}
.ellipse1{
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 40px;
    
}
.cart{
    position: absolute;
    top: 25px;
    left: 45px;
}
.Infopara1{
    position: absolute;
    top:65px;
    left: 30px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #A5A5A5;
}
.fulline1{
    position: absolute;
    top: 110px;
    left:5px;
}
.halfline1{
    position: absolute;
    top: 110px;
    left:5px;
}



.NewProjectContainer2{
    position: absolute;
    top: 20px;
    left: 464px;
    width: 190px;
    height: 150px;
    background-color: rgb(176, 180, 176);
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 6px;
}
.ellipse2{
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 40px;
    
}
.cost{
    position: absolute;
    top: 25px;
    left: 45px;
}
.Infopara2{
    position: absolute;
    top:50px;
    left: 30px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #A5A5A5;
}
.fulline2{
    position: absolute;
    top: 110px;
    left:5px;
}
.halfline2{
    position: absolute;
    top: 110px;
    left:5px;
}


.NewProjectContainer3{
    position: absolute;
    top: 20px;
    left: 689px;
    width: 190px;
    height: 150px;
    background-color: rgb(176, 180, 176);
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 6px;
}
.ellipse3{
    position: absolute;
    width: 40px;
    height: 40px;
    top:20px;
    left: 40px;
    
}
.uprofile{
    position: absolute;
    top: 20px;
    left: 41px;
}
.Infopara3{
    position: absolute;
    top:50px;
    left: 30px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #A5A5A5;
}
.fulline3{
    position: absolute;
    top: 110px;
    left:5px;
}
.halfline3{
    position: absolute;
    top: 110px;
    left:5px;
}
.TopProjectsDetails{
    box-sizing: border-box;
    position: absolute;
    width: 530px;
    height: 500px;
    left: 341px;
    top: 388px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.pDpara{
    position: absolute;
    width: 77px;
    height: 21px;
    left: 224px;
    top: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #000000;
    font-weight: 700;
}
.Pheadings{
    box-sizing: border-box;
    position: absolute;
    width: 531px;
    height: 51px;
    left: -1px;
    top: 45px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
}
.pheadval1{
    position: absolute;
    width: 48px;
    height: 21px;
    left: 40px;
    top: -2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #5F5E5E;
}
.pheadval2{
    position: absolute;
    width: 48px;
    height: 21px;
    left: 190px;
    top: -2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #5F5E5E;
}
.pheadval3{
    position: absolute;
    width: 48px;
    height: 21px;
    left: 300px;
    top: -2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #5F5E5E;
}
.pheadval4{
    position: absolute;
    width: 90px;
    height: 21px;
    left: 430px;
    top: -2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #5F5E5E;
}

.Pheadings{
    box-sizing: border-box;
    position: absolute;
    width: 531px;
    height: 51px;
    left: -1px;
    top: 45px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
}
.value1{
    box-sizing: border-box;
    position: absolute;
    width: 531px;
    height: 51px;
    left: -1px;
    top: 120px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
}
.elempic{
    position: absolute;
    top: 5px;
    left: 5px;
}
.eval1{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 44px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval2{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 157px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval3{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 275px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval4{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 413px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.value2{
    box-sizing: border-box;
    position: absolute;
    width: 531px;
    height: 51px;
    left: -1px;
    top: 188px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
}
.elempic1{
    position: absolute;
    top: 5px;
    left: 5px;
}
.eval5{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 44px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval6{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 157px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval7{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 275px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.eval8{
    position: absolute;
    width: 94px;
    height: 15px;
    left: 413px;
    top: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #828080;
}
.Messages{
    box-sizing: border-box;
    position: absolute;
    width: 341px;
    height: 500px;
    left: 897px;
    top: 387px;
    background: #FFFFFF;
    border: 1px solid #EFEDED;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
}
.RMessages{
    position: absolute;
    width: 112px;
    height: 21px;
    left: 12px;
    top: 2px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #000000;
}
.Runread{
    position: absolute;
    width: 152px;
    height: 21px;
    left: 12px;
    top: 8px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #BABABA;
}
.reloadicon{
    position: absolute;
    left: 300px;
    top: 10px;
}
.msg1{
    box-sizing: border-box;
    position: absolute;
    width: 335px;
    height: 100px;
    left: 900px;
    top: 474px;
    background: #FFFFFF;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #EFEDED;
}
.Rmpic1{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 8px;
    top: 23px;
}
.Rmpara1{
    position: absolute;
    width: 113px;
    height: 21px;
    left: 71px;
    top: 0px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #24A5AB;
}
.Rmpara2{
    position: absolute;
    width: 259px;
    height: 28px;
    left: 69px;
    top: 22px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #000000;
}
.Rmjust{
    position: absolute;
    width: 54px;
    height: 21px;
    left: 14px;
    top: 73px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #6ADADF;
}
.Rmdate{
    position: absolute;
    width: 78px;
    height: 21px;
    left: 245px;
    top: 60px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #6ADADF;
}
.msg2{
    box-sizing: border-box;
    position: absolute;
    width: 335px;
    height: 100px;
    left: 900px;
    top: 581px;
    background: #FFFFFF;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #EFEDED;
}
.Rmpic2{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 8px;
    top: 23px;
}
.Rmpara3{
    position: absolute;
    width: 113px;
    height: 21px;
    left: 71px;
    top: 0px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #24A5AB;
}
.Rmpara4{
    position: absolute;
    width: 259px;
    height: 28px;
    left: 69px;
    top: 22px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    display: flex;
    align-items: center;
    color: #000000;
}
.allMsgs{
    position: absolute;
    width: 89px;
    height: 21px;
    left: 1030px;
    top: 852px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 5;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    color: #2432AB;
} 

I want my whole code into responsiveness.

I have been struggling with this error about one week and in dev mode everything is working
perfectly but when I deploy and want to sign in via next auth credentials provider I get error and I do not know where it comes from?
I checked everything and set All env variable in vercel dashboard but it seems my backend has not deploy correctly or something is wrong with my next-auth config

this is my […nextauth].js

 CredentialsProvider({
      name: "Credentials",

      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials, req) {
        const payload = {
          email: credentials.email,
          password: credentials.password,
        };
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/auth/signin`, {
          method: "POST",
          body: JSON.stringify(payload),
          headers: { "Content-Type": "application/json" },
        });

        const user = await res.json();

        if (res.ok && user) {
          return user;
        }

        return null;
      },
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {},
    async jwt({ token, user }) {
      return { ...token, ...user };
    },
    async session({ session, token, user }) {
      session = token;
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin",

/auth/signin.js

 <button
          className="border-2 w-[200px] h-[40px] uppercase"
          onClick={(e) => {
            e.preventDefault();
            signIn("credentials", {
              email: emailRef.current,
              password: passwordRef.current,
            });
          }}
        >
          Sign in
        </button>

I’m dynamically importing a module with JavaScript with a function and the function’s gonna import the script and return a certain object. But it’s returning an Promise. I expected it to return the function.

Here’s the code:

Main.js

import { includeFile } from './Export.js';

console.log(includeFile()); // This Is Logging a Promise object

Export.js

export async function includeFile() {
    var { x } = await import('./File.js');
    console.log(x); // This Is Logging a Function
    return func;
}

File.js

export function x() {
    console.log('Something Out Of Hell');
}

So, in Main.js file, the console.log is outputting a Promise, but I’ve returned a function from a function in Export.js

I made a script to toggle (on click) a class between elements of a group (slide-container) that works well.
Since I have multiple containers with the same class, all elements are affected.
I need to target only the clicked elements belonging to this slide-container. Not other slide-container

Here’s my code:

<div class="container">
            <h1>Test custom slider</h1>
            <div class="slide-container">
                <a href="#" class="slide active">
                    <img src="patio-estrie-1.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-2.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-1.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-2.jpeg" alt="">
                </a>
            </div>
            <div class="slide-container">
                <a href="#" class="slide active">
                    <img src="patio-estrie-1.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-2.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-1.jpeg" alt="">
                </a>
                <a href="#" class="slide">
                    <img src="patio-estrie-2.jpeg" alt="">
                </a>
            </div>
        </div>
    <script>
    $(document).ready(function() {
        function activeSlide() {
            $("a.slide.active").not(this).removeClass("active");
            $(this).toggleClass("active");
        }

            $( "a.slide" ).on( "click", activeSlide );
     });
    </script>

I have Python converted models.json but how to detect objects using this model for the web-cam in angular

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as tf from '@tensorflow/tfjs';

export class MyComponent {
   @ViewChild('videoElement') videoElement: ElementRef;
  @ViewChild('canvasElement') canvasElement: ElementRef;

  private model: tf.GraphModel;
  private requestAnimationFrameId: number;

  constructor() {
    this.loadModel();
  }

  async loadModel() {
    this.model = await tf.loadGraphModel('assets/model.json');
  }

  async startDetection() {
    await this.setupCamera();
    this.detectFrame();
  }

  async setupCamera() {
    const video = this.videoElement.nativeElement;
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
    await video.play();
  }

  detectFrame() {
    const video = this.videoElement.nativeElement;
    const canvas = this.canvasElement.nativeElement;
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    const inputTensor = tf.browser.fromPixels(imageData).expandDims();
    const outputTensor = this.model.executeAsync(inputTensor);
    outputTensor.then(results => {
      console.log('Detection results:', results);
      this.drawBoundingBoxes(context, results);
      this.requestAnimationFrameId = requestAnimationFrame(() => this.detectFrame());
    });
  }

  drawBoundingBoxes(context, results) {
    const boxes = results[0].dataSync();
    const scores = results[1].dataSync();
    const classes = results[2].dataSync();
    const numDetections = results[3].dataSync()[0];
    for (let i = 0; i < numDetections; i++) {
      const boxOffset = i * 4;
      const scoreOffset = i;
      const classOffset = i;
      const yMin = boxes[boxOffset] * context.canvas.height;
      const xMin = boxes[boxOffset + 1] * context.canvas.width;
      const yMax = boxes[boxOffset + 2] * context.canvas.height;
      const xMax = boxes[boxOffset + 3] * context.canvas.width;
      const score = scores[scoreOffset];
      const cls = classes[classOffset];
      if (score > 0.5) {
        context.beginPath();
        context.rect(xMin, yMin, xMax - xMin, yMax - yMin);
        context.lineWidth = 2;
        context.strokeStyle = 'green';
        context.stroke();
        context.fillStyle = 'green';
        context.fillText(`${cls} (${score.toFixed(2)})`, xMin, yMin - 10);
      }
    }
  }

  stopDetection() {
    cancelAnimationFrame(this.requestAnimationFrameId);
    const video = this.videoElement.nativeElement;
    video.pause();
    video.srcObject.getTracks().forEach(track => track.stop());
  }

Can I Use multiple model.json in the same project? if yes then how to do that.

problem is how to detect Frame of an object and draws the Bounding Boxes around an object and I do not know how to do that. If anyone has an idea let me know.

in the console, in input got the tensor shape but how to convert it to the output?

I can seem to make this work.
I can filter unwanted classes and return the rest from an element using:

let classes = ["button", "active", "primary", "secondary", "positive"];
         
let excluded = ["button", "active"];
let result = classes.filter(function (item) {
    return !excluded.includes(item);
});
console.log(result);

result returns ["primary", "secondary", "positive"]

which is fine, but if I do something like this:

let classes = ["button", "active", "primary", "secondary", "positive"];

let included = ["primary", "secondary", "positive"];
let result = classes.filter(function (item) {
  return included.includes(item);
});
console.log(result);

result returns only one class in array but not all of them.
the desired result should be ["primary", "secondary", "positive"]

array classes is actually set of classes pulled from an element, and they will be different for each element. I just want to extract those classes if they exist.

Disclaimer; I’m new to Express.js. I have this uni project where I need to make a website to sell movie tickets. What I have until now is a movie page.

I also have an index page with a menu to choose what film to go to. What I want is:

1. The user clicks on, say “The Grand Budapest Hotel”
2. An EventListener is triggered and redirects to http://localhost:8081/movies/The_Grand_Budapest_Hotel
3. A function finds what movie in the database has title “The Grand Budapest Hotel”
4. movie.js calls load with as argument the corresponding Movie object

How do I do this with Express.js routing? I know this is a very compilcated and lengthy question, so a nudge in the right direction would already be of great help! Thanks in advance!!

class Movie {
    constructor(title, image, description, duration, release, age, schedule, seats){
        this.title = title;
        this.image = image;
        this.description = description;
        this.duration = duration;
        this.release = release;
        this.age = age;
        this.schedule = schedule; //dictionary met alle tijden per dag.
        this.seats = seats;
    }
}

const blankMovie = new Movie (
    "Title",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Grey_background.jpg/1200px-Grey_background.jpg",
    "description",
    0,
    0,
    0,
    0,
    0
);

function load(movie) {
    var content = document.querySelector('.content');
    addMovieInfo(content, movie);
}

function addMovieInfo(location, movie) {
    var moviegrid = document.createElement('div');
    moviegrid.classList.add('movie-grid');


    var postertitle = document.createElement('div');
    postertitle.classList.add('movie__postertitle');

    var poster = document.createElement('img');
    poster.classList.add('movie__poster');
    poster.src = movie.image;
    poster.alt = movie.title + ' Poster'

    var title = document.createElement('div');
    title.classList.add('movie__title');
    title.innerText = movie.title;

    postertitle.appendChild(title);
    postertitle.insertBefore(poster, title);


    var desc = document.createElement('div');
    desc.classList.add('movie__desc');

    var descpar = document.createElement('p');
    descpar.innerText = movie.description;

    desc.appendChild(descpar);


    var tickets = document.createElement('div');
    tickets.classList.add('movie__ticketprompt');
    
    var ageanchor = document.createElement('a');
    ageanchor.classList.add('ageanchor');
    ageanchor.href = 'https://www.kijkwijzer.nl/over-kijkwijzer/'

    var ageimg = document.createElement('img');
    ageimg.classList.add('ageimg');
    
    switch (movie.age) {
        case 18:
            ageimg.src = 'https://www.kijkwijzer.nl/media/xtimbi5i/18.png'
            ageimg.alt = 'Age Resctriction: 18'
            break;
        case 16:
            ageimg.src = 'https://www.kijkwijzer.nl/media/iryaeluj/16.png'
            ageimg.alt = 'Age Resctriction: 16'
            break;
        case 14:
            ageimg.src = 'https://www.kijkwijzer.nl/media/0gnp0ifa/14.png'
            ageimg.alt = 'Age Resctriction: 14'
            break;
        case 12:
            ageimg.src = 'https://www.kijkwijzer.nl/media/vz4av3wf/12.png'
            ageimg.alt = 'Age Resctriction: 12'
            break;
        case 9:
            ageimg.src = 'https://www.kijkwijzer.nl/media/s5rf1lpy/9.png'
            ageimg.alt = 'Age Resctriction: 9'
            break;
        case 6:
            ageimg.src = 'https://www.kijkwijzer.nl/media/avlcycfz/6.png'
            ageimg.alt = 'Age Resctriction: 6'
            break;
        default:
            ageimg.src = 'https://www.kijkwijzer.nl/media/ovmjwgmq/al.png'
            ageimg.alt = 'Age Resctriction: AL'
            break;
        
    }

    ageanchor.appendChild(ageimg);

    var gotobutton = document.createElement('div');
    gotobutton.classList.add('movie__gotobutton');
    gotobutton.innerText = 'TICKETS';

    var availableseats = document.createElement('div');
    availableseats.classList.add('movie__seats');
    availableseats.innerText = movie.seats + ' / 100';

    tickets.appendChild(gotobutton);
    tickets.insertBefore(availableseats, gotobutton);
    tickets.insertBefore(ageanchor, availableseats);


    moviegrid.appendChild(tickets);
    moviegrid.insertBefore(desc, tickets);
    moviegrid.insertBefore(postertitle, desc);

    location.appendChild(moviegrid);
}

load(blankMovie)

body{
    margin: 0;
    font-family: 'Teko', sans-serif;
}

.float-right{
    float: right;
}

.content {
    transition: margin-top 0.4s;
}

.movie-grid > .movie__postertitle  { grid-area: postertitle }
.movie-grid > .movie__desc         { grid-area: description }
.movie-grid > .movie__ticketprompt { grid-area: tickets     }

.movie-grid {
    display: grid;
    grid-template-areas: 
    'postertitle description'
    'tickets     tickets';
}

.movie__poster {
    width: 250px;
}

.movie__ticketprompt {
    margin: 10px 10%;
    background-color: gray;
    border-radius: 25px;
    display: flex;
    justify-content: space-between;
}

.ageimg {
    width: 60px;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Movie Page</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Teko:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="/css/general.css">
        <link rel="stylesheet" href="/css/movie.css">
    </head>
    <body>
        <article class="content">
        </article>

        <script src="/js/movie.js" type="module"></script> 
        <script src="/js/general.js" type="module"></script> 
    </body>
    
</html>

I’ve created a user registration page frontend in Angular which seems to have the proper code for POST register method to be called & data to be sent to backend for user registration but no request are being called to the backend, neither are user details be sent, console.log shows nothing for calling register() method & the network tab in browser developer tools is also kinda empty.

Sharing the code for relevant files:

register.component.html

<div class="registrationForm" type="FormGroup">
<form (ngSubmit)="onSubmit()">


<div class="form-row">

  <div class="form-group">
    <label for="exampleInputUsername">First Name</label>
    <input type="text" [(ngModel)]="fname"  class="form-control" id="exampleInputUsername" placeholder="eg. John" [ngModelOptions]="{standalone: true}">
  </div>

  <div class="form-group">
    <label for="exampleInputUsername">Last Name</label>
    <input type="text" [(ngModel)]="lname"  class="form-control" id="exampleInputUsername" placeholder="eg. Doe" [ngModelOptions]="{standalone: true}">
  </div>

</div>

<div class="form-row">

  <div class="form-group">
    <label for="exampleInputEmail1">Email:</label>
    <input type="email" [(ngModel)]="email" name="mail" class="form-control" placeholder="eg. [email protected]" required >
  </div>
  <!--
  <div class="form-group">
    <label for="exampleInputEmail1">Email:</label>
    <input type="email" name="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="eg. [email protected]">
  </div>
  -->

  <div class="form-group">
    <label>Password:</label>
    <input type="password" [(ngModel)]="password" name="password" class="form-control" required>
  </div>

</div>

<button type="submit" class="btn btn-primary" style="margin-left:220px;margin-top:20px;">Submit</button>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from 'src/app/register/userservice'; //import the user service
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; //import form modules
import { catchError, tap } from 'rxjs';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.less']
})
export class RegisterComponent implements OnInit {

  registrationForm: FormGroup;
  email:string ='';
  password:string ='';
  fname:string ='';
  lname:string ='';
  submitted = false;

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private UserService: UserService,
  )
 {
  this.registrationForm = this.formBuilder.group({});
  }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      email: [this.email, [Validators.required, Validators.email]],
      password: [this.password, [Validators.required, Validators.minLength(6)]],
      fname: [this.fname],
      lname: [this.lname],
    });
  }

  // convenience getter for easy access to form fields
  get f() { return this.registrationForm.controls; }

  onSubmit() {
    console.log('Submit button clicked');
    this.submitted = true;
    if (this.registrationForm.invalid) {
      return;
    }
this.UserService.register(
    this.registrationForm.controls['email'].value, 
    this.registrationForm.controls['password'].value, 
    this.registrationForm.controls['fname'].value, 
    this.registrationForm.controls['lname'].value)
    .pipe(
      tap((response: any) => console.log('Response from server:', response)),
      catchError((error: any) => {
        console.log('Error from server:', error);
        return throwError(error);
      })
    )
    .subscribe();
    
  }

  }

function throwError(error: any): any {
  throw new Error('Function not implemented.');
}

userservice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private baseUrl = 'http://localhost:8080/'; // replace with your backend URL //backend url for post mapping of user details

  constructor(private http: HttpClient) { }

  //check the use of 'Observable'
  register(email: string, password: string, fname: string,lname: string): Observable<any> {
    const data = {
      email: email,
      password: password,
      fname: fname,
      lname: lname
    };
    console.log('User service register method called with user:', data);
    return this.http.post(`${this.baseUrl}/api/register`, data);
  }
}

My browser console registers submit button being clicked but not about any of the methods, kindly help.

I am having trouble fetching posts from my WordPress site. I tested the URL endpoint and it appears to be working fine with client-side rendering. However, when I attempt to use the getStaticProps function, I’m not getting the results I expect. I have included the code I’m using below.

import { wpPosts } from "@/urls/indext";
import { Key } from "react";

const Blog = ({ data }: { data: any }) => {
  if (!data) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      {data.map(
        (post: {
          id: Key | null | undefined;
          title: {
            rendered: string;
          };
          excerpt: { rendered: string };
          slug: string;
        }) => (
          <div key={post.id}>
            <h2>{post.title.rendered}</h2>
            <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
            <a href={`/posts/${post.slug}`}>Read more</a>
          </div>
        )
      )}
    </div>
  );
};

export default Blog;

export async function getStaticProps() {
  const res = await fetch(wpPosts);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

I did this approach few weeks ago while fetching pages from WordPress, and everything was working fine. Now for this code I get Error:
TypeError: fetch failed.

When I wrap the fetch with try / catch block I get error like this:
Error serializing .data returned from getStaticProps in “/posts”.
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.

And when I use null or any other type I don`t get error anymore but now the problem is that loading never stops.

I also tried axios and get:
Error: connect ECONNREFUSED ::1:10052

The task of the script:

• to create an array of numbers, the dimension of which is determined by the data in the form, the send_n() function is responsible for this;
• after that, display a table of two columns on the page: an array element and the sum of the positive elements of the array at the moment;
• at the end of the table, output the result in one row of the table into 2 columns: the final sum of positive elements;
• at the same time, each row of the table should appear with a delay of 1 second, I have the timeout(ms) function responsible for this, most likely it is not the best solution, but as I understood, setTimeout(() => {do sth}, ms) is an asynchronous function, so in my in this case, using it, the calculation_x(arr, count) function does not work correctly, and a custom timeout(ms) function has appeared.

The problem is that when the loop is triggered, the result is output to the console as needed, but the table is output only at the execution stage of this line:

document.getElementById(`result`).innerHTML += result;

after completing the cycle.

I attach HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="text" id="n" placeholder="Количество элементов массива">
        <input type="button" value="Принять" onclick="send_n()">
    </form>
    <div id="table-div"></div>
    <script src="/scripts.js"></script>
</body>
</html>

I also attach JavaScript:

function timeout(ms)
{
    let date = new Date();
    while ((new Date()) - date <= ms)
    {
        // w/o do
    }
}

function calculation_x(arr, count)
{
    let i = 0;
    let sum = 0;
    let table = String(`<table border="1px"><thead><tr><td>Элемент массива</td><td>Сумма положительных элементов массива</td></tr></thead><tbody id="result"></tbody></table>`);
    document.getElementById(`table-div`).innerHTML = table;
    for (i = 0; i < count; i++)
    {
        if (arr[i] > 0)
        {
            sum += arr[i];
        }
        table = `<tr><td>X[${i}] = ${arr[i]}</td><td>${sum}</td></tr>`;
        document.getElementById(`result`).innerHTML += table;
        console.log(`X[${i}] = ${arr[i]} | ${sum}`);
        timeout(1000);
    }
    timeout(1000);
    let result = `<tr><td colspan="2">Результат: ${sum}</td></tr>`;
    document.getElementById(`result`).innerHTML += result;
    console.log(`Сумма положительных элементов: ${sum}`);
}

function send_n()
{
    let i = 0;
    let n = Number(document.getElementById(`n`).value);
    let numbers = new Array(n);
    for (i = 0; i < n; i++)
    {
        numbers[i] = Number(Math.floor(Math.random() * 200) - 100);
    }
    calculation_x(numbers, n);
}

I tried using setTimeout(); and setInterval();, but this did not give the desired result for the reasons described above.

I’m working on a restaurant website with symfony 6.2 and I have to do a reservation page. On this page I’m using easepick to pick the date.

My question is : How can I get the date data from JS into TWIG to compare with my DB date data ?

Here I got the date picked when selected :

picker.on("select", () => {
  let pickerDate = picker.getDate();
  console.log(pickerDate);
});

As a first step to the final purpose, I’m trying to display only the booked ones of the selected day

Here is what I’m looking for but pickerDate is obviously not recognized :

{% for reservation in reservationTime %}
  {% if pickerDate is same as(reservation.datetime | date)  %}

    <li class="mx-1 my-1"><a class="btn btn-danger">{{ reservation.datetime | format_time('short') }}</a></li>

  {% endif %}
{% endfor %}

The final purpose is to show all the available time.
I don’t even know if it’s possible/deprecated

i hope someone is familiar with the Vite bundler. I have a problem with the HMR and my modules that I import and export. To summarize I have my classes that I export to my main.js, the problem is that when I modify something on one of them (even a little thing), my main.js is duplicated and is read 2 times in my localhost, which creates bugs. To be more precise I have a main.js which is executed and a main.js?t=16680880366756 which is also executed.

How can I achieve this with CSS or JavaScript when text overlay images I want to change color, so only letters that overlay images!

I haven’t tried yet I have no idea!

Is it possible to create a cookie in nuxt2 and keep it on server side only? So that I won’t see it in the devtools/Application

I am trying to make a search bar with a clear button using the useSubmit hook from react-router. The search query should be submitted both on input change and button click.

SearchBar.tsx

import { Form, useSubmit } from 'react-router-dom';
import { ChangeEvent, useState } from 'react';

export default function SearchBar({ query }: { query?: string }) {
  const submit = useSubmit();
  const [q, setQ] = useState(query ?? '');

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    setQ(event.target.value);
    submitForm(event.currentTarget.form);
  }

  function handleClear(event: any) {
    setQ('');
    submitForm(event.currentTarget.form);
  }

  function submitForm(submitTarget: any) {
    const isFirstSearch = q == null;
    submit(submitTarget, {
      replace: !isFirstSearch,
    });
  }

  return (
    <Form role="search">
      <input
        type="search"
        name="q"
        value={q}
        onChange={handleChange}
        autoComplete="off"
      />
      {q && q.length > 0 && (
        <button type="button" onClick={handleClear}>
          Clear
        </button>
      )}
    </Form>
  );
}

todos.tsx

import { getTodos } from '../todos';
import { useLoaderData } from 'react-router-dom';
import SearchBar from '../SearchBar';

export async function loader({ request }: { request: Request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get('q');
  const todos = await getTodos(q);
  return { todos, q };
}

export default function Todos() {
  const { todos, q }: any = useLoaderData();

  return (
    <div>
      <SearchBar query={q} />
      <div>
        {todos.length > 0 ? (
          todos.map((todo: any) => <div key={todo.id}>{todo.text}</div>)
        ) : (
          <p>No todos</p>
        )}
      </div>
    </div>
  );
}

When I click the clear button, the input gets cleared but the submitted query has still the value from before.

StackBlitz