This the line on html <script src="script.js"></script>
GET http://localhost/luoptiags/script.js net::ERR_ABORTED 500 (Internal Server Error)Understand this error
how i can solve thsi problem and run java script code...
my files code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UX-Comptible" content="ie=edge">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta Content-Security-Policy: script-src>
<title>Image Viewer</title>
<link rel="stylesheet" href="lustyles.css">
</head>
<body class="flex-center">
<div class="card flex-center">
<section class="product-img">
<img src="./imagenes/armazones/armazones_image1.jpg" alt="">
<div class="magnifier-lens"></div>
</section>
<section class="product-details">
<h1 class="product-title">El producto es de alata calidad y soporte tenico indefinido</h1>
<div class="prodcut-review">
<span class="start">★</span>
<span class="start">★</span>
<span class="start">★</span>
<span class="start">★</span>
<span class="start">☆</span>
<span class="start-rate"><mark>4.0</mark>Start</span>
<span class="review-no"><mark>12k</mark>Reviews</span>
<span class="quantity-sold"><mark>10k</mark>Vendidos</span>
</div>
<div class="product-price">
<p>Special Price</p>
<p class="Precio-actual">$900.00</p>
<p class="Original-price"><del>$1050.00</del> 20% descuento</p>
</div>
<div class="product-promotion">
<p>Avalible Promotions</p>
<ul class="promotion-list">
<li class="promotion-item">Compra de mas 10 envio gratis</li>
<li class="promotion-item">Compra de mas 20-30 30% de descuento</li>
<li class="promotion-item">Compra de mas 50-100 50% de descuento</li>
</ul>
</div>
<div class="magnified-img"></div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
css
:root{
--orange:#ff9800;
--green: green;
--ligth-blue:#d6f4ff;
--blue:#374794;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
height: 100vh;
font: 700 1rem sans-serif;
}
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 95%;
height: 60%;
}
section.product-img{
position: relative;
width: 40%;
}
section.product-img img{
width: 100%;
height: auto;
}
section.product-details{
position: relative;
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.magnifier-lens{
position:absolute;
top: 0;
left: 0;
width: 150px;
height: 100px;
background-color: #ff980030;
border: 1px solid var(--orange);
opacity: 0;
}
.magnifier-lens.active{
opacity: 1;
}
.product-title{
font: 600 1.4rem sans-serif;
}
.start{
font-size: 1.5 rem ;
color: var(--orange);
cursor: pointer;
}
mark{
padding: 4px 8px;
border-radius: 4px;
background-color: var(--green);
color: #fff;
}
.Precio-actual{
font: 500 2rem sans-serif;
color: Var(--orange);
}
.Original-price{
font: 400 1.2rem sans-serif;
color: var(--green);
}
.Original-price del{
color: #666;
}
.product-promotion{
font: 500 1rem sand-serif;
background-color: var(--ligth-blue);
padding: 10px;
border-radius:4r3m;
color: var(--blue);
}
.promotion-list{
list-style: none;
}
.promotion-item:not(:first-child){
margin-top: 15px;
}
.promotion-item:before{
content: "\1F380";
margin-right: 10px;
}
.magnified-img{
position: absolute;
width: 100%;
height: 100%;
border: .1px, solid var(--orange);
background-color: #ff980030;
transform: scale(0.5);
opacity: 0;
transform: opacity .5s, transform .5s;
}
.magnified-img.active{
opacity: 1;
transform: scale(1);
}
js file
const lens=document.querySelector('.magnifier-lens');
const product_img=document.querySelector('.product-img img');
const magnified_img=document.querySelector('.magnified-img');
function magnify(product_img,magnified_img){
lens.addEventListener('mousemove', moveLens);
product_img.addEventListener('mousemove', moveLens);
// Take maouse out img
lens.addEventListener('mouseout', leaveLens);
}
function moveLens(e){
let x, y , cx, cy;
console.log("x:"+e.pageX +" y:"+e.pageY);
const product_img_rect= product_img.getBoundingClientRect();
x= e.pageX - product_img_rect.left - lens.offsetwidth/2;
y=e.pageY - product_img_rect.top - lens.offsetheight/2;
let max_xpos = product_img_rect.width - lens.offsetwidth;
let max_ypos = product_img_rect.height - lens.offsetheight;
if ( x > max_xpos) x=max_xpos;
if (x < 0) x=0;
if ( y > max_ypos) y=max_ypos;
if (y < 0) y=0;
lens.style.csstext=`top: ${y}px ; left: ${x}px`;
// Calculate magnifer and lens size
cx=magnified_img.offsetwidth / lens.offsetwidth;
cy=magnified_img.offsetheight / lens.offsetheight;
magnified_img.style.csstext=`
background:url('${product_img.src}')
-${x *cx}px -${y *cy}px /
${product_img_rect.width * cx }px ${product_img_rect.height * cy}px
no-repeat
`;
lens.classList.add('active');
magnified_img.classList.add('active');
}
function leaveLens(){
lens.classList.remove('active');
magnified_img.classList.remove('active');
}
magnify(product_img, magnified_img)
