Category: javascript

I’ve set the min and max values and the input field type to ‘number’, but I can still physically input any numbers in the field, regardless of the range. How can I limit the input of numbers to only the required range, preventing values below or above it?

<input
 type="number"
 min='40'
 max='270'
 className="input-field"
/>

input field

Yes, warning will show if I will click any button in form, but I want to block exact ability to input anything outside the range

Bom dia pessoal.
Estou tendo problemas ao subir uma aplicação em javascript na plataforma Digital Ocean.

Não sei o que informar no campo Health Check para que o sistema suba.

Já tentei de tudo. Coloquei link do página Home, login, coloquei a porta 80 etc.

NÃO PASSA.

Alguém me ajuda.

porta 80,
porta 3000
rota login, home page, etc.

I’m using requestAnimationFrame to simulate position fixed behavior.
I update top position of the element each time the scroll event fired

But when scrolling, I think requestAnimationFrame calculation speed does not catch up with scroll speed so, sometimes element is shifted out of the viewport.

Any suggestion for this

Here is my codesandbox:
https://codesandbox.io/s/staging-dream-93hg2r?file=/src/App.tsx

When rendering all elements in the DOM the browser becomes laggy. I used virtual list but the problem with virtual list is when you scroll too fast (especially on mobile phones) the screen becomes white.

So now what i’m doing is keep limited amount of elements in DOM when user scrolls to the bottom remove the nodes from DOM and render the next elements. if the user scrolls to top the reverse. but the problem with this approach scrolling experience is not that great.

does anybody have a better solution ?
should i keep this solution or is there any better way to approach this ?

Xrm.Page is deprecated and as per the requirement, I need to use formContext instead. I’m having difficulties trying in making my function work when I use anything except Xrm.Page

export function OpenQuickCreateForm(formId: string = ‘9add862d-3ceb-4342-99cf-fe5a952eebf8’, context: Xrm.FormContext): void {

const emailadd = Xrm.Page.getAttribute("emailaddress1");

const firstName = Xrm.Page.getAttribute("firstname");

const lastName = Xrm.Page.getAttribute("lastname");

I want to use formContext.getAttribute.

I’m developing app (FE: Vue.js, BE: flask), and I want to know how to pass access token from BE to FE.

This is my auth.py (BE) file, and I store access token to payload.

from flask import Flask, request, abort, jsonify
import json
from functools import wraps
from jose import jwt
from urllib.request import urlopen


app = Flask(__name__)

AUTH0_DOMAIN = ***
ALGORITHMS = ['RS256']
API_AUDIENCE = ***


class AuthError(Exception):
    def __init__(self, error, status_code):
        self.error = error
        self.status_code = status_code


def get_token_auth_header():
    """Obtains the Access Token from the Authorization Header
    """
    auth = request.headers.get('Authorization', None)
    print(request.headers)
    if not auth:
        raise AuthError({
            'code': 'authorization_header_missing',
            'description': 'Authorization header is expected.'
        }, 401)

    parts = auth.split()
    if parts[0].lower() != 'bearer':
        raise AuthError({
            'code': 'invalid_header',
            'description': 'Authorization header must start with "Bearer".'
        }, 401)

    elif len(parts) == 1:
        raise AuthError({
            'code': 'invalid_header',
            'description': 'Token not found.'
        }, 401)

    elif len(parts) > 2:
        raise AuthError({
            'code': 'invalid_header',
            'description': 'Authorization header must be bearer token.'
        }, 401)

    token = parts[1]
    return token


def verify_decode_jwt(token):
    jsonurl = urlopen(f'https://{AUTH0_DOMAIN}/.well-known/jwks.json')
    jwks = json.loads(jsonurl.read())
    unverified_header = jwt.get_unverified_header(token)
    rsa_key = {}
    if 'kid' not in unverified_header:
        raise AuthError({
            'code': 'invalid_header',
            'description': 'Authorization malformed.'
        }, 401)

    for key in jwks['keys']:
        if key['kid'] == unverified_header['kid']:
            rsa_key = {
                'kty': key['kty'],
                'kid': key['kid'],
                'use': key['use'],
                'n': key['n'],
                'e': key['e']
            }
    if rsa_key:
        try:
            payload = jwt.decode(
                token,
                rsa_key,
                algorithms=ALGORITHMS,
                audience=API_AUDIENCE,
                issuer='https://' + AUTH0_DOMAIN + '/'
            )

            return payload

        except jwt.ExpiredSignatureError:
            raise AuthError({
                'code': 'token_expired',
                'description': 'Token expired.'
            }, 401)

        except jwt.JWTClaimsError:
            raise AuthError({
                'code': 'invalid_claims',
                'description': 'Incorrect claims. Please, check the audience and issuer.'
            }, 401)
        except Exception:
            raise AuthError({
                'code': 'invalid_header',
                'description': 'Unable to parse authentication token.'
            }, 400)
    raise AuthError({
                'code': 'invalid_header',
                'description': 'Unable to find the appropriate key.'
            }, 400)
def check_permissions(permission, payload):
    if 'permissions' not in payload:
        print(payload)
        abort(400)
    if permission not in payload['permissions']:
        print(permission)
        abort(403)
    return True

def requires_auth(permission=''):
    def requires_auth_decorator(f):
        @wraps(f)
        def wrapper(*args, **kwargs):
            token = get_token_auth_header()
            try:
                payload = verify_decode_jwt(token)
            except:
                abort(401)
            check_permissions(permission, payload)

            return f(payload, *args, **kwargs)

        return wrapper
    return requires_auth_decorator

This is my FE code. currently, I store static data to accessToken so I want to make it dynamically. I don’t know how to get accessToken from BE..

<script>
import axios from 'axios';

export default {
  name: 'ActorList',
  props: {
    msg: String,
  },
  data() {
    return {
      actorList: '',
    }
  },
  mounted() {
    const accessToken = '***';
    axios.get(`http://127.0.0.1:5000/actor-list`,{
      headers: {
        'Authorization': `Bearer ${accessToken}`
      }
    })
      .then(response => {
        this.actorList = response.data.actor;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
}
</script>

I work for a company developing WebGL-based learning content, and we’re looking to add more accessibility features to our programs. To that end, I’ve been trying to find a way to enable screen readers to work, but I’m running into an issue where it can fall behind (say, if hovering over several interactive things in quick succession).

I’ve put together this demo to illustrate the problem:
https://jsfiddle.net/dzqek8os/

When you hover over the coloured squares on the left of the output, it updates a div tagged with aria-live="assertive" with the name of the colour, and also outputs when you click on one of the squares. However, when you scrub your mouse quickly over the squares, even though the div is updated immediately, the screen reader (tested with NVDA in my case) doesn’t interrupt itself with the update. It does interrupt itself when you click on one of the squares though.

On the right is the behaviour I’m trying to replicate. If you hover over the words (simple p tags in another div), the screen reader does interrupt itself when you hover over a new element.

Other things I’ve tried:

• appending a new div as a child of an assertive div
• same as above but clearing the parent div before appending the new child
• having 5 separate divs (all with aria-live="assertive") and cycling through which one updates with each hover

Is there a way to replicate the behaviour on the right with JS?

Language used : Js with react

Problem : I am trying to create a transition effect between each route with framer-motion.
I need to put location in my Router, but I got error ‘useLocation() may be used only in the context of a component.’

Code :
Here, is my App.js who contain my routes

 import { AppRoute } from './route';
        
        function App() {
          return (
            <div className="App">
              <AppRoute />
            </div>
          );
        }
    
    export default App;

And here the resume of my AppRoute file (I have remove some import to make it clear)

 import {
  BrowserRouter as Router,
  Route,
  Routes,
  Navigate,
  useLocation,
} from 'react-router-dom';
 
import { motion, AnimatePresence } from 'framer-motion';

export const AppRoute = () => {
 
  const location = useLocation();
 


  return (
    <Router>
      <AuthenticatedTemplate>
        {userData && userRole?.length > 0 ? (
          <>
            <>
              <Navigation />
              <Routes> 
                <Route path="/intern/new" element={<NewOrderPage />} />
                <Route path="/intern/user/orders" element={<MyOrdersPage />} />
                <Route
                  path="/intern/orders/one/edit/:id"
                  element={
                    userRole?.includes('1') ||
                    userRole?.includes('2') ||
                    userRole?.includes('3') ? (
                      <OneOrder />
                    ) : (
                      <Navigate replace to={'/intern/new'} />
                    )
                  }
                />
                <Route
                  path="/intern/orders/one/preview/:id"
                  element={<OneOrder />}
                />
                {userRole?.includes('1') ||
                userRole?.includes('2') ||
                userRole?.includes('3') ? (
                  <>
                    <Route path="/intern/all" element={<InternOrdersPage />} />
                    <Route
                      path="/intern/validation"
                      element={<ToValidatePage />}
                    />
                  </>
                ) : null}{' '}
                <Route path="/*" element={<NotFound />} />
              </Routes>{' '}
            </>{' '}
            <PopUpSend />
          </>
        ) : (
          <Routes>
            <Route path="/*" element={<Loading />} />{' '}
          </Routes>
        )}
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <Routes>
          <Route path="/*" element={<LoginPage />} />
        </Routes>
      </UnauthenticatedTemplate>
    </Router>
  );
};

What I have already tried :

I have removed every useLocation used in component child (For exemple, i have useLocation i my nav bar) but still got the error.

I have tried to put ” inside ‘Routes’ but still got the error.

For the electron.js (main Electron Process)

This post explains how to use function in electron to read data from serial port and to send it to rendered page using ipcmain ipcrender and javascript.

const { app, BrowserWindow, ipcMain } = require('electron')

const path = require("path");
const { SerialPort } = require('serialport');
const { ReadlineParser } = require('@serialport/parser-readline');


let win
let A = 1;
let a = new Array(A);


const creatWindow = () => {

  const win = new BrowserWindow({
    minWidth: 1300,
    minHeight: 800,
    width: 1000,
    height: 700,
  

    webPreferences: {
      nodeIntegration: false,

      preload: path.join(__dirname, 'preload.js'),
      enableRemoteModule: false,
      contextIsolation: true
    },
  })
  win.loadFile('./login/login.html')
  win.loadURL("http://localhost:3000/login")
  win.webContents.openDevTools()



}

function readSerialData() {
  return new Promise((resolve, reject) => {

    const port = new SerialPort({
      path: 'COM3', //EDIT AS NEEDED
      baudRate: 9600,//EDIT AS NEEDED
      maxBufferSize: 256
    })

    const parser = port.pipe(new ReadlineParser({ delimiter: 'rn' }));

    let receivedDataCount = 0;
    for (let i = 0; i < 2; i++) {
      parser.on('data', (data) => {
        a[0] = data;
        receivedDataCount++;
        let weightValue;
        if (receivedDataCount === 2) {
          // Close the port after receiving three data points
          port.close();

          // const components = a[0].split(',');

          // const pressure = components[2].trim();
          // const status = pressure.toString(5, 7)


          const match = a[0].match(/(d+.d+)kg/);
          if (match && match[1]) {
            weightValue = parseFloat(match[1]);
          }
          resolve(weightValue);

        }
      });

    }




    //console.log(a[0]);
    //console.log("Pressure:", status);

    parser.on('end', () => {
      port.close(); // Close the port after reading data
      resolve(data);
    });

    port.on('error', (err) => {
      reject(err);
    });
  });
  ;
}

ipcMain.handle('products', readSerialData); 

Inside the preload file you should receive it like this:

contextBridge.exposeInMainWorld('Products', {
 products: () => ipcRenderer.invoke('products').then(response => response)
})

At the end in the component you want to render the information you need to receive the information like this:

useEffect(() => {

   window.Products.products().then(response => {
     setPoids((response));
   });
 });


  <input
                 type="number"
                 className="form-control"
                 id="poids"
                 value={poids}
                 readOnly={true}
                 required
     />

I make a online course for building a website with StencilJS, NodeJS and the IonicFramwork. I am new in this and I am biting my teeth with a problem:

They import the API "https://swapi.dev/api" as a string into the file app-people.tsx with

import { API_URL } from '../../helpers/api';

I know it is an import of a module with a relative reference.
But I don’t get API_URL imported! Visual Studio shows me only the error:

Cannot find module '../../helpers/api' or its corresponding type declarations.

Where do I need to create the folders '../../helpers/api'?

What must the file with API_URL contain? What file type must be used(.ts, .js, .d.ts)?

This is my code in app-people.tsx:

import { Component, State, h, ComponentDidLoad} from '@stencil/core';
import { API_URL } from '../../helpers/api';                           // to import the Basic-API

//...

@Component({
  tag: 'app-people',
  styleUrl: 'app-people.css',
})

export class AppPeople implements ComponentDidLoad {

  @State() people: Person[] = [];
  @State() loading = true;

  private apiUrl = `${API_URL}/people`;                              // here is API_URL used:
//...

From my root folder star-wars to app-people.tsx is this path:

star-wars/src/components/app-people/app-people.tsx

I have already tried many combinations but can’t come to a solution. Please for tips here!

If I wanted to use the lower level Postgres package from NPM called pg inside my Apollo server so I don’t have to use an ORM. Is it considered bad practice to pass the connection into the resolver directly?

Example:

// ./db/index.ts

import { Pool } from 'pg'

const pool = new Pool({
  user: 'your_username',
  host: 'your_host',
  database: 'your_database',
  password: 'your_password',
  port: 5432,
});

export default pool

// ./index.ts

import { ApolloServer, gql } from 'apollo-server'
import pool from './db'

const typeDefs = gql`
  type Query {
    getUsers: [User]
  }

  type User {
    id: ID
    name: String
    email: String
  }
`;

const resolvers = {
  Query: {
    getUsers: async () => {
      const result = await pool.query('SELECT * FROM users');
      return result.rows;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server running at ${url}`);
});

i am using default html select i have option element, i want to insert two elements which i want to make individual and want to click for the second element. here is the sample code that i have implemented. can any one help on this please

const data = [
    {vechile:"Maruthi", icon:"Car"},
    {vechile:"Mahendra", icon:"Jeep"},
    {vechile:"benZ", icon:"lorry"},

  ]

 const clickIcon = () => {
    alert("hello");
  };

<select>
        {data.map(item => {
        return <option value="volvo">
<div>
          {item.vechile} </div>
          <div onClick={clickIcon}>{item.icon}</div>
        </option>
        })}
      </select>

I’m currently working on developing a custom form within WooCommerce that enables our delivery personnel to update expenses related to specific orders. The idea is to allow them to input additional expenses, such as taxi fares, and have these expenses associated with a particular order.

The form is designed to collect three pieces of information:

1. Order ID: The unique identifier for the order they wish to update.
2. Expense Amount: The cost of the additional expense incurred. Expense
3. Reason: A brief description or reason for the expense.

Once the delivery personnel submit this form, the data should be stored as metadata for the specified order, allowing for accurate expense tracking and management.

I have successfully built the form, but I’ve encountered a persistent issue. Whenever I attempt to submit the form, it returns a “POST Bad Request Error 400.”

I have provided the code I’m using for the form, both in JavaScript and PHP, in the hope that the community can help me identify the root cause of this issue and guide me on how to resolve it. Any assistance and guidance on what I can do to fix this problem would be greatly appreciated.

<form id="expense_form" class="expense_form">
    Order Number<input class="exp_order_no" id="exp_order_no" type="text" pattern="[0-9]*" placeholder="Enter the Order Number" required >
Expense Amount<input class="expense_amt" id="expense_amt" type="text"  pattern="[0-9]*" placeholder="Enter the expense amt" required>
Expense Reason<input class="expense_reason" id="expense_reason" type="textarea" placeholder="Enter Message" required>
   <button class="exp_but" id="exp_but">Submit</button>
    </form>
<script>
jQuery(document).ready(function($) {
            $('#expense_form').on('submit', function(e) {
                e.preventDefault();
var orderid  = $('#exp_order_no').val();
var expense  = $('#expense_amt').val();
var expense_reason  = $('#expense_reason').val();
console.log (orderid);
console.log (expense);
console.log (expense_reason);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action: 'update_custom_field_order_expense',
orderid: orderid,
expense: expense,
expense_reason:expense_reason
},
success: function( response ) {
console.log( 'Custom field updated successfully.' );
},
error: function( response ) {
console.log( 'Failed to update custom field.' );
}
});
});
});
</script>

<?php
add_action( 'wp_ajax_update_custom_field_order_expense', 'update_custom_field_order_expense' );
function update_custom_field_order_expense() {
$order_id = $_POST['orderid'];
$order_expense = $_POST['expense'];
$order_expense_reason = $_POST['expense_reason'];
$order = wc_get_order( $order_id );
//$current_date = date_i18n( 'j F, Y', strtotime( $current_date_time ) );
$order->update_meta_data( 'Driver Expense', $order_expense );
$order->update_meta_data( 'Driver Expense Reason',$order_expense_reason);
$order->save();
wp_send_json_success();
} ?>

Thank you in advance for your help and expertise!

I have created an array with images and change them after click. But i cant change the animation, unfortunately. And i noticed that changing the images change his appearance when the circle passes. I have no idea what`s wrong. Maybe u guys understand.

<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>audio-player</title>
</head>
<body>
    <div class="wrapper">
        <div class="player__wrapper">
            <div class="player__wrapper-content player__content">
                <div class="player__content-image img">
                    <img class="album__image" src="" alt="album__image">
                </div>
                <div class="player__content-navigation navigation">
                    <div class="navigation__text name">
                        <h1 class="navigation__actor">Rick Astley</h1>
                        <p class="navigation__name-song">Never gonna give you up</p>
                    </div>
                    <div class="navigation__song">
                        <audio class="audio" src=""></audio>
                        <div class="navigation__next-prev">
                            <i class="ri-rewind-fill"></i>
                            <i class="ri-pause-circle-fill hidden"></i>
                            <i class="ri-play-circle-fill"></i>
                            <i class="ri-speed-fill"></i>
                        </div>
                        <div class="volume">
                            <i class="ri-volume-down-fill"></i>
                            <input type="range" class="input__volume">
                            <i class="ri-volume-up-fill"></i>
                        </div>
                    </div>
                    <div class="slider">
                        <p class="time-one">00:00</p>
                        <input type="range" class="input__slider">
                        <p class="time-two">00:00</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

   @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Raleway:wght@400;500;700&display=swap');
@import './reset.scss';

.wrapper {
    min-height: 100vh;
    width: 100%;
    background: url() ;
    backdrop-filter: blur(10px);
    background-blend-mode: multiply;
    transition: background-image 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.player__wrapper {
    padding: 20px;
    border: 1px solid rgb(73, 63, 63);
    border-radius: 10px;

}

.player__content {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    transition: 1s;
    background-size: cover;
    min-width: 340px;
    min-height: 600px;
    height: 60vh;
    width: 41vh;
}

.player__content-image {
    width: 100%;
    height: 41vh;
    background-color: #171717;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 340px;
}

.album__image{
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-blend-mode: multiply;
    transition: background-image 1s ease-in-out;
}

.player__content-navigation {
  background-color: #393e46;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.navigation__song{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.navigation__text{
    padding: 0 0 20px 0;
}

.navigation__play-button {
    width: 50px;
    background-color: transparent;
    cursor: pointer;
}

.navigation__actor {
    font-size: var(--big-font-size);
    font-weight: var(--font-bold);
    padding-bottom: 5px;
}

.navigation__next-prev {
    display: flex;
    align-self: flex-start;
    align-items: center;
    column-gap: 10px;
    & i{
        cursor: pointer;
        color: rgb(21, 21, 21);
        font-size: 30px;
        transition: color .2s ease;
        &:hover{
            color: #2d3137;
            transition: color .2s ease
        }
    }
}

.navigation__next-prev .ri-pause-circle-fill,
.navigation__next-prev .ri-play-circle-fill{
    font-size: 60px;
}

.slider{
    display: flex;
    justify-content: center;
    align-items:center;
}

.slider p{
    color: #fff;
    font-size: 18px;
    padding: 0 10px;
}

input[type='range']{
    appearance: none;
    background: #0ee6e6;
    height: 5px;
    cursor:pointer;
    border-radius: 10px;
}

.input__slider{
    width: 56%;
}

.volume{
    display: flex;
    justify-content: right;
    align-items: center;
}

.volume i{
    padding: 0 20px;
    color: white;
    font-size: 20px;
}

.input__volume{
    width: 30%;
}

.hidden{
    display: none;
}

img {
    opacity: 1;
transform: opacity 0.5 ease;
  }
  
  img.hidden__img {
    opacity: 0;
    transition: opacity 0.7s ease
  }

 

   addEventListener("DOMContentLoaded", () => {

const songs = [
  {
    name: "Never gonna give you up",
    artist: "Rick Astley",
    path: "audio/Never Gonna Give You Up (hardstyle).mp3",
    cover: "img/Nevergonnagiveyouup.webp",
  },
  {
    name: "RUNNIN THRU THE 7TH WITH MY WOADIES",
    artist: "$UICIDEBOY$ x POUYA",
    path: "audio/$UICIDEBOY$ x POUYA - RUNNIN THRU THE 7TH WITH MY WOADIES.mp3",
    cover: "img/Suicide.png",
  },
  {
    name: "black cotton.the realist killaz.dumpin(izza remix)",
    artist: "2Pac",
    path: "audio/2pac black cotton.the realist killaz.dumpin(izzamuzzic remix).mp3",
    cover: "img/2pac.jpg",
  },
  {
    name: "Air",
    artist: "Bones",
    path: "audio/Bones - Air.mp3",
    cover: "img/bones.jpg",
  },
  {
    name: "Premonition",
    artist: "Roberto Kan",
    path: "audio/Roberto Kan - Premonition.mp3",
    cover: "img/kan.jpg",
  },
];

const audio = document.querySelector(".audio");
const inputSlider = document.querySelector(".input__slider");
const inputVolume = document.querySelector(".input__volume");
const prevBtn = document.querySelector(".ri-rewind-fill");
const nextBtn = document.querySelector(".ri-speed-fill");
const pauseBtn = document.querySelector(".ri-pause-circle-fill");
const playBtn = document.querySelector(".ri-play-circle-fill");

const time = (t) => {
    if (isNaN(t)) {
        return "02:05"; // Handle NaN gracefully
      }
      
  let min = Math.floor(t / 60);
  if (min < 10) min = "0" + min;

  let sec = Math.floor(t % 60);
  if (sec < 10) sec = "0" + sec;

  return `${min}:${sec}`;
};

let musicCounting = 0;

const listMusic = (key) => {
  const song = songs[key];
  document.querySelector(".img img").src = song.cover;
  audio.src = song.path;
  document.querySelector('body').style.background = `url(${song.cover})no-repeat center / cover`
  document.querySelector(".name h1").innerHTML = song.artist;
  document.querySelector(".name p").innerHTML = song.name;
  const imgContainer = document.querySelector("img");
  

  imgContainer.classList.add("hidden__img");

  setTimeout(() => {
    imgContainer.innerHTML = `<img src="${song.cover}" alt="">`;
    
    imgContainer.classList.remove("hidden__img");
    
  }, 100)
  setTimeout(() => {
    inputSlider.max = audio.duration;
    document.querySelector(".time-two").innerHTML = time(audio.duration);
  }, 300);

  audio.volume = inputVolume.value / 100;
};

const playMusic = () => {
  audio.play();
  playBtn.classList.add("hidden");
  pauseBtn.classList.remove("hidden");
};

const pauseMusic = () => {
  audio.pause();
  pauseBtn.classList.add("hidden");
  playBtn.classList.remove("hidden");
};

playBtn.addEventListener("click", playMusic);
pauseBtn.addEventListener("click", pauseMusic);

inputVolume.addEventListener("input", () => {
  audio.volume = inputVolume.value / 100;
});

prevBtn.addEventListener("click", () => {
  musicCounting = (musicCounting - 1 + songs.length) % songs.length;
  listMusic(musicCounting);
  playMusic();
});

nextBtn.addEventListener("click", () => {
  musicCounting = (musicCounting + 1) % songs.length;
  listMusic(musicCounting);
  playMusic();
});

setInterval(() => {
    if (!isNaN(audio.duration)) {
        inputSlider.max = audio.duration;
        document.querySelector('.time-two').innerHTML = time(audio.duration);
    }
    if (!isNaN(audio.currentTime)) {
    inputSlider.value = audio.currentTime;
    document.querySelector('.time-one').innerHTML = time(audio.currentTime);
    }
  
    if (audio.currentTime >= inputSlider.max) {
      if (musicCounting >= songs.length - 1) musicCounting = 0;
      else musicCounting++;
      listMusic(musicCounting);
      playMusic();
    }
  }, 500);
  

inputSlider.addEventListener(('change'),()=>{
    audio.currentTime = inputSlider.value
})

listMusic(0)

});

i have used opacity, different types of animation. But it still doenst work, when i switch the song image change also, but it looks like horror for epileptic.

My App Service is correctly updated. But i dont see the UI from the first enter.
I use Angular and Azure App Service for this.

If i put F5(without Ctrl) it reloads and gives me the right view of UI.
But after near 1 hour situation returns the same. I come to App and it is still with old view.

To avoid caching i used it:
Adding to index.html meta tags:

    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="cache-control" content="max-age=0">

Adding outputHasing in angular.json production setup

"outputHashing": "all"

Before publishing to Azure i build project by this commang(but i am not sure i am doing it right, other users supposed to use it inside azure app probably, i tried by Kudu CMD but i didnt get success there)

ng build --prod --aot --outputHashing=all