Category: javascript

I have a list of items. Some have a download link and some not.

If I try to render a an undefined url, I have this error. So I tried this :

if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}

But I now have an other error telling me that output is not defined.
Does someone can explain me how to do it well to stop a function to load if undefined ?

[slug].js

const Spectacle = ({ spectacle, spectacles, categories }) => {



  const slideRight = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: 450,
      behavior: 'smooth'
    });
  }

  const slideLeft = () => {
    const slider = document.querySelector('.gallery');
    console.log(slider);
    slider.scrollBy({
      left: -450,
      behavior: 'smooth'
    });
  }

  useEffect(() => {
    const bigTitle = document.getElementById('big-title');
    const vertTitle = document.getElementById('ver-title');
    const title = spectacle.title;
    if (title.length > 30) {
      bigTitle.style.fontSize = "8vw";
      vertTitle.style.fontSize = "3rem";
    }
  }, []);

  
if (spectacle.pdf.url) {
    const pdf = spectacle.pdf.url;
    const flag = `/fl_attachment:dossier${spectacle.slug}`;
    const position = 47;
    const output = [pdf.slice(0, position), flag, pdf.slice(position)].join('');
}


  return (
    <>
      <div className="spectacle-header">
        <img src={spectacle.image.url} />
        <div className="spectacle-titles">
          <h1 id="big-title" className="big-title">{spectacle.title}</h1>
          <h5 className="subtitle">{spectacle.sousTitre}</h5>
        </div>
      </div>
      <Container className="spectacle-text">
        <Row className="bloc-mob">
          <Col className="ext a">
            <h1 id="ver-title" className="vertical-title red">{spectacle.title}</h1>
            <h2 className="quote shows">{spectacle.citation}</h2>
          </Col>
          <Col className="middle-col">
            <p className="">
              <Moment format="YYYY" className="date">{spectacle.year}</Moment>
            </p>
            <Row className="status">
              <Col>
                <span>{spectacle.status}</span>
              </Col>
              <Col>
                <span>{spectacle.category.name}</span>
              </Col>
            </Row>
            <div>
              <p className="description" id='desc'>
                <ReactMarkdown source={spectacle.description} />
                <a href={output} download="newfilename"><h4>Télécharger le document</h4></a>
              </p>
              <div className="video"
              dangerouslySetInnerHTML={{ __html: spectacle.video}} >
              </div>
            </div>
          </Col>
          <Col className="ext b">
            <p className="generic" id="generic">
              <ReactMarkdown source={spectacle.cast} />
            </p>

           
            <div className="scroll-down">
              Scroll down
              <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
                className="arrow-down" />
            </div>
          </Col>
          {/* <Col className="illu">
            <img src={spectacle.Illustration.url} />
          </Col> */}
        </Row>

        <Row className="gallery">

          {spectacle.galery.map((item) => (
            <ModalImage
              key={item.id}
              small={item.url}
              large={item.url}
              alt={item.title}
              hideZoom={true}
              hideDownload={true}
            />
          ))}
        </Row>
        <button
          id="slideLeft"
          type="button"
          onClick={slideLeft}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
        <button
          id="slideRight"
          type="button"
          onClick={slideRight}
        >
          <img src="https://res.cloudinary.com/ciefact/image/upload/v1634668021/arrow_0e058f1520.svg"
            className="arrow-down" />
        </button>
      </Container>
    </>
  )
}

export async function getStaticPaths() {
  const spectacles = await fetchAPI("/spectacles")

  return {
    paths: spectacles.map((spectacle) => ({
      params: {
        slug: spectacle.slug,
      },
    })),
    fallback: 'blocking',
  }
}

export async function getStaticProps({ params }) {
  const spectacle = (await fetchAPI(`/spectacles?slug=${params.slug}`))[0]

  const [spectacles, categories] = await Promise.all([
    fetchAPI("/spectacles"),
    fetchAPI("/categories"),
  ])
  return {
    props: { spectacle: spectacle, spectacles, categories },
    revalidate: 1,
  }
}

export default Spectacle 

First – I know not to keep passwords and logins that way. I am only doing this as a task.

So, i need to save username and password from register form, and next use it in login form.
How i can do this with only html and JS?

Now i have something like that:

let user_name = document.getElementById("username");
let user_paswrd = document.getElementById("password");


let store_data = () => {
  let input_username = localStorage.setItem("username", user_name.value);
  let input_password = localStorage.setItem("password", user_paswrd.value);

};

https://jsfiddle.net/gcu78z20/

it’s saving username and password in localstorage, but I need to save all registered username and password. Then in login menu get it back when login. How can I do it? It is better to do this with localstore or cookie?

IMPORTANT INFORMATION
this form will only be opened locally. The website will not be on the web.

I have my api like this:

const api = "https://api.exchangerate-api.com/v4/latest/USD";

and I want to download it then separate the value to Country and Ratio and embed them to google table. I have found a chart like this. I want to modify the code so it can display in a table with country and corresponding ratio. But at this point, I have no idea how to do it. May I ask for some hint ?

I am using “load” and “OBJloader” from loaders.gl/core and loaders.gl/obj to load a mesh to export it as a const so other module can use it, currently I am using this

export const myMesh = Object.freez({
     mesh : load(path_to_obj_file,OBJLoader),
     origin: [1.4,0,2.2],
     dimensions: [2,2,2],
     scale: 1
)}

but then I find out that I can calculate the origin and dimensions from the obj file itself without the need to put them manually (I used to calculate them form meshlab), and I can do it from the load function itself

load(path_to_obj_file,OBJLoader).then((obj)=>{
console.log(obj.schema.metadata.get["boundingBox"]
}

boundingBox would be like that [[-1.4,-1,-2],[0.6,1,-0.2]] (numbers are not accurate at all).
and I can calculate origin and dims from the boundingBox.

my question is, how can I export the const myMesh now? since I have promise, also when we write:

mesh : load(path_to_obj_file,OBJLoader) 

could that cause a problem since load returns a promise ? (currently it is working correctly)

I tried:

export const loadMyMesh = load(path_to_obje_file,OBJLoader).then((obj) =>{
     const myMesh = Object.freez({
     mesh: obj,
     origin: calculateOrigin(obj),
     dimensions: claculateDim(obj),
     scale: 1
    });
  return myMesh
})

where calculateOrigin and calculateDim are functions used to get the boundingbox and calculate the origin and the dims, but that didn’t work.

so any solution ?

If I enter a fromAmount which is larger than the current toAmount, then toAmount value is expected to become fromAmount + $1.

    const initialObj = {
      fromAmount: '',
      toAmount: '',
      comment: ''
    };
    const [itemObj, setItemObj] = useState(initialObj);

    const setItemFieldHandler = (key, value) => {
      console.log("set", key, value);
      console.log("old state: ", itemObj);
      
      const newState = {
        ...itemObj,
        [key]: value
      };
      
      console.log("new state: ", newState);
      
      setItemObj(newState);
    };


    const handleFromAmountInput = useCallback((value) => {
       setItemFieldHandler('fromAmount', value);
      //check if from amount > to amount, 
      // then set toAmount = fromAmount + 1
      if(areBothAmountsValid()) {
         const newToAmount = value + 1;
         handleToAmountInput(newToAmount);
      }
    }, [itemObj]);


    const handleToAmountInput = useCallback((value => {
      setItemFieldHandler('toAmount', value);
    }, [itemObj]);
    }

The current from-amount is 1, to-amount is 5. If I change from-amount to 10, the console log is:

set fromAmount 10
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 10,
    toAmount: 5,
    comment: ''
  }

set toAmount 11
old state: 
  {
    fromAmount: 1,
    toAmount: 5,
    comment: ''
  }
new state: 
   {
    fromAmount: 1,
    toAmount: 11,
    comment: ''
  }

What confuses me is that, fromAmount is already set as 10, why when calling handleToAmountInput(), the fromAmount’s value is still 1.

At first, I thought it is because the setState is async, so I used setTimeOut to make handleToAmountInput() running after like 5s to test, but the issue is still the same.

Does anyone know the reason and how to solve it?

I’m beginnig my journey into TypeScript in React and to experiment what I’ve learn, I’ve try a simple Todo App.
Everything is working fine except ONE things !

When I’m pushing ‘newTask’
When I’m hovering ‘newTask’ here’s the hint (Google Trad from French) :

The ‘Todo | undefined ‘is not attributable to the parameter of type’ Todo ‘.
Cannot assign type ‘undefined’ to type ‘Todo’.

I guess it’s related to something here :

let [newTask, setNewTask] = useState<Todo>();

because if I type useState<any>(); I don’t have any error..

Here’s the full code :

import React, { useState } from "react";

// INTERFACES
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export const TodoComponent = () => {
  // STATE
  const initialTodos: Todo[] = [
    { id: 0, text: "Todo 1", completed: false },
    { id: 1, text: "Todo 2", completed: true },
    { id: 2, text: "Todo 3", completed: false },
  ];

  const [todos, setTodos] = useState<Todo[]>(initialTodos);

  let [newTask, setNewTask] = useState<Todo>();

  // ACTIONS
  const handleClickOnComplete = (id: number, completed: boolean) => {
    const newTodos = [...todos];
    newTodos[id].completed = !completed;
    setTodos(newTodos);
  };

  const handleRemove = (todo: Todo) => {
    const newTodos = todos.filter((t) => t !== todo);
    setTodos(newTodos);
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewTask({
      id: todos.length,
      text: event.target.value,
      completed: false,
    });
  };

  const handleSubmitNewTodo = () => {
    const newTodos = [...todos];
    console.log(newTask, newTodos);
    newTodos.push(newTask);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>Todo App !</h1>

      <div>
        {todos.map((todo) => {
          return (
            <div key={todo.id}>
              {todo.id} - {todo.text} -{" "}
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => handleClickOnComplete(todo.id, todo.completed)}
              />
              <button onClick={() => handleRemove(todo)}>Remove task</button>
            </div>
          );
        })}
      </div>

      <hr />

      <div>
        <input placeholder="Add todo" type="text" onChange={handleChange} />
        <button onClick={handleSubmitNewTodo}>Add todo</button>
      </div>
    </div>
  );
};

Problem is in handleSubmitTodo

Thanks for your help and advices.
Take care.

Is there a recommended pattern in Remix for running common code on every request, and potentially adding context data to the request? Like a middleware? A usecase for this might be to do logging or auth, for example.

The one thing I’ve seen that seems similar to this is loader context via the getLoadContext API. This lets you populate a context object which is passed as an arg to all route loaders.

It does work, and initially seems like the way to do this, but the docs for it say…

It’s a way to bridge the gap between the adapter’s request/response API with your Remix app

This API is an escape hatch, it’s uncommon to need it

…which makes me think otherwise, because

• This API is explicitly for custom integrations with the server runtime. But it doesn’t seem like middlewares should be specific to the server runtime – they should just be part of the ‘application’ level as a Remix feature.

• Running middlewares is a pretty common pattern in web frameworks!

So, does Remix have any better pattern for middleware that runs before every loader? If so, how do you use it?

I am trying to get multiple different circles to do this transition, but only the first one will trigger the effect (regardless of where the rest are on the page)

javascript

let circle = document.querySelector('.circle')

circle.addEventListener('mouseenter', () => {
    if(!circle.classList.contains('hover')){
        circle.classList.add('hover');
    }
})

circle.addEventListener('mouseleave', () =>{
    if(circle.classList.contains('hover')){
        circle.classList.remove('hover');
    }
})

css

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background: slateblue;
    border-radius: 100px;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 3s;
}

.hover {
  transform: scale(1.5);
}

html

<div class="circle">1</div>
<div class="circle">2</div>

I have set up webpack to generate the public directory from my development enviroment. I have several pages that are being built.
Therefore my entry configuration looks like this:

entry: {
    page_one: [one/main.js, one/index.html, ...]
    page_two: [two/main.js, two/index.html, ...]
}

This works perfectly fine. However i also want to extract some js-files that depends on some serverside renderings. Therefore i dont always have to include those. My initial aproach was to simply add the js file to my entryset. Looks like this:

entry: {
    page_one: [one/main.js, one/maybe.js, one/index.html, ...]
    page_two: [two/main.js, one/another.js, two/index.html, ...]
}

The problem is that both js files get packed into one output file. That kinda makes sense to me but is there some way to archieve my goal of exporting them both separately on the same entrypoint?

Folder structure i get:

 - public
   - one
     - index.html
     - main.js
   - two
     - index.html
     - main.js

Folder structure i want:

 - public
   - one
     - index.html
     - main.js
     - maybe.js
   - two
     - index.html
     - main.js
     - another.js

As mentioned maybe.js and another.js are there but packed into main.js but i want them to be extracted separately.

Start tag head seen but an element of the same type was already open.
also I got some other errors:

” Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) “

and

” No p element in scope but a p end tag seen. “

I have no clue how to fix them.

<!DOCTYPE html>
    <html lang="pl">
    <style>
    html, body { margin: 0; padding: 0; color: black; background-color: grey;}
    #strona { position: absolute; color: white}
    #rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
    </style>
    <head>
        <meta charset="UTF-8"/>
        <title> site</title>
    </head>
    <body>
    <div> <script>
    function clickbutton1(){
        document.getElementById("opis").innerHTML = Date();
    }
    </script>
    </div>
    
        <div id="strona">
            <h1>test</h1>
    <?php
    echo "<p>data replacement</p>";
    echo "<div id='rects'>
        <!-- starting of the function -->
    <p id='opis'> internal description </p>
    <script>
    document.getElementById('rects').onclick = clickbutton1;
    </script>
    </div>";
    ?>
    </div>
    
    
    </body>
    
    </html>```

For same string actionScript’s function charCodeAt returns unicode character 13 and javascript’s function charCodeAt returns unicode character 10. Is there a reason why a line feed is returned by JS and a carriage return is returned by AS. After reading a few answers online I have come to the conclusion that both of these do not have much difference, can anyone please explain why was this change made.

I have a large Table. I am using Bootstrap and implementing the Accordion structure with “b-accordion”. When I want to update the data in any Row, I am experiencing an incredible loss of performance. I am using Modal to edit rows. (B-MODAL)

My table content is like this. When the row is clicked, the Accordion below opens.

Table Generate Code..

<tbody>
    <template v-for="(item, index) in pageArray">

      // Table Row
      <tr :key="`tableTr-${item.recordNo}`">
        <td :id="`accordion-${item.recordNo}-1`" v-b-toggle="`collapse-${item.recordNo}`">
          <a class="text-dark">{{ item.recordNo }}</a>
        </td>
        // Likewise the other 13 Columns.
      </tr>

      // Accordion Row
      <tr :key="`tableSubTr-${item.recordNo}`" class="subtr">
        <td colspan="14">
          <b-collapse :id="`collapse-${item.recordNo}`">
            <div class="container-fluid">
             ....
            </div>
          </b-collapse>
        </td>
      </tr>

    </template>
</tbody>

Now let’s get to the real problem. When I start the EDIT process for any Row, Vue Developer Tools draws a performance like the one below. The low performance ones are all because of the Model I opened.

B-MODAL I made as a Component
props: { thisObject: Object }
<b-modal v-model=”isModal” centered hide-footer hide-header size=”xl” @hide=”$emit(‘closeModal’, true)”>
{{thisObject}}

I’m using translatepress to translate my company’s website, but it’s causing one of our calculators written in javascript to not load. I’ve found it’s adding “defer” to a bunch of our tags. Any ideas on how to prevent this from happening? I’ve tried disabling “Fix missing dynamic content” and “Disable dynamic translation” but none have worked.

I’m new to node and express and node and I’m building an authentication feature with passport.js. In my routes I’m using a middleware function called “checkNotAuthenticated” to check if the user is not authenticated, but I’m getting this error: “TypeError: req.isAuthenticated is not a function”

What could the problem be here?

My routes:

const express = require('express')
const router = express.Router()
const bcrypt = require('bcrypt')
const passport = require('passport')
const flash = require('express-flash')
const session = require('express-session')
const methodOverride = require('method-override')

const User = require('../models/user.model')
const initializePassport = require('../passport-config')
initializePassport(passport)

const app = express()

app.use(flash())
app.use(session({
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false
}))
app.use(passport.initialize())
app.use(passport.session())
app.use(methodOverride('_method'))

/* Middleware function to check if user is authenticated */
function checkNotAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return res.redirect('/')
  }
  next()
}

/* ------- Routes ------- */
/* Create new user */
router.post('/register', checkNotAuthenticated, async (req, res) => {

  /* Check if the email isn't already taken */
  const emailIsTaken = await User.findOne({email: req.body.email})
  if (emailIsTaken) return res.status(500).send('Email already used')

  try {
    const hashedPassword = await bcrypt.hash(req.body.password, 10)

    const user = new User({
      name: req.body.name,
      password: hashedPassword,
      email: req.body.email,
      title: req.body.title,
      about: req.body.about
    })

    user.save()

    res.send('Success - User created')

  } catch (err) {
    res.status(500).send(err)
  }

})

/* Login user */
router.post('/login', checkNotAuthenticated, passport.authenticate('local', {
  successRedirect: '/',
  failureRedirect: '/login',
  failureFlash: true
}))

/* Logout */
router.delete('/logout', (req, res) => {
  req.logOut()
  res.redirect('/login')
})

module.exports = router

passport-config.js:

const User = require('./models/user.model')
const LocalStrategy = require('passport-local').Strategy
const bcrypt = require('bcrypt')

function initializePassport(passport) {

    const authenticateUser = async done => {

        /* Check if there's a user account created with that email */
        const userFound = await User.findOne({email: req.body.email})
        if (!userFound) return done(null, false, {message: 'Cannot find user with that email'})
        
        /* Validate password */
        try {
            const checkPassword = await bcrypt.compare(req.body.password, userFound.password)

            if (checkPassword) {
                return done(null, userFound)
            } else {
                return done(null, false, {message: 'Incorrect password'})
            }
            
        } catch (err) {
            return done(err)
            
        }
    }

    passport.use(new LocalStrategy( { usernameField: 'email' }, authenticateUser) )

    passport.serializeUser(done => { done(null, userFound.id) })
    passport.deserializeUser(done => { done(null, userFound) })
}

module.exports = initializePassport

Full error:

TypeError: req.isAuthenticated is not a function
    at checkNotAuthenticated (/home/German/Desktop/ger/code/projects/helpr/helpr-back/routes/users.route.js:27:11)
    at Layer.handle [as handle_request] (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/layer.js:95:5)
    at /home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/index.js:335:12)
    at next (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/index.js:275:10)
    at Function.handle (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/index.js:174:3)
    at router (/home/German/Desktop/ger/code/projects/helpr/helpr-back/node_modules/express/lib/router/index.js:47:12)

so i have been trying to make a music playlist program that, and i have been trying to make it trigger each song independantly(just like how all music players do) but my script seems to work only when i have only one song in my html, so when i added 12 songs and ordered them with data-attribute and then tried to click the button nothing happened and then i tried to use console.log to check what happened and apparently all 12 songs got triggered at once
here is my javascript
`const songs = document.querySelectorAll(“[data-songs]”);
const icons = document.querySelector(“#icon”);

`
songs.forEach((song) => {
  icon.addEventListener("click", function () {
    console.log(song);
    //put code of icon here
    if (mySong.paused) {
      mySong.play();
      icon.src = "/images/pause.png";
    } else {
      mySong.pause();
      icon.src = "/images/play.png";
    }
  });
});
`

and here is my html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/css/styles.css" />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        />
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        />
        <title>Music App</title>
      </head>
      <body>
        <div class="music-container">
          <div class="music-header">
            <i class="fa fa-angle-left"></i>
            <div class="title">
              <p>My Music</p>
            </div>
            <i class="fa fa-search"> </i>
          </div>
          <div class="music-playlist">
            <div class="music-menu text-center">
              <div class="menu">
                <ul>
                  <li><a href="#">Songs</a></li>
                  <li><a href="#">Albums</a></li>
                  <li><a href="#">Artist</a></li>
                  <li><a href="#">Generes</a></li>
                </ul>
              </div>
            </div>
            <div class="music-box">
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="1">
                    <source src="/music/a.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="2">
                    <source src="/music/b.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="3">
                    <source src="/music/c.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="4">
                    <source src="/music/d.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>burzum</h6>
                  <audio id="mySong" data-songs="5">
                    <source src="/music/e.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="6">
                    <source src="/music/f.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="7">
                    <source src="/music/g.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="8">
                    <source src="/music/h.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="9">
                    <source src="/music/i.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="10">
                    <source src="/music/j.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="11">
                    <source src="/music/k.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
              <hr />
              <div class="music-info">
                <div class="music-img">
                  <img src="images/Filosofem.jpg" alt="" />
                </div>
                <div class="music-name">
                  <h6>Single Song Title</h6>
                  <audio id="mySong" data-songs="12">
                    <source src="/music/m.mp3" type="audio/mp3" />
                  </audio>
                  <p>Single name and music director</p>
                </div>
                <img src="/images/play.png" id="icon" style="padding-right: 20px" />
              </div>
            </div>
          </div>
          <div class="music-play">
            <div class="play-image">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="play-controls">
              <div class="controls">
                <div class="song-name">
                  <h5>Dunkelheit</h5>
                  <p>Burzum</p>
                </div>
                <div class="play-icon">
                  <i class="fa fa-step-backward"> </i>
                  <i class="fa fa-play"> </i>
                  <i class="fa fa-step-forward"> </i>
                </div>
              </div>
              <div class="music-progress">
                <div class="progress">
                  <div class="progress-bar"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src="/Script/jquery-3.6.0.min.js"></script>
        <script src="/Script/script.js"></script>
      </body>
    </html>
    ```