I am getting error while using eden ai API

Error:

{,…}
error

{type: “Invalid request”, message: {providers: [“Please enter the name of the provider(s)”]}}
message

{providers: [“Please enter the name of the provider(s)”]}
providers

[“Please enter the name of the provider(s)”]
0

“Please enter the name of the provider(s)”
type

“Invalid request”.

Code:

const [input, setInput] = useState<string>('');

const { assistant, setAssistant } = useContext(AssistantContext);
    
const onSendMessage = async () => {
  const AIModel = AiModelOptions.find(item => item.name == assistant.aiModelId)

  const result = await axios.post('/api/eden-ai-model', {
    provider: AIModel?.edenAi,
    userInput: input
  });
  console.log(result.data);
  setInput('');
}

Route:

import { NextRequest, NextResponse } from "next/server";

// Post request
export  async function POST(req: NextRequest) {
  const { provider, userInput } = await req.json()

  const headers = {
    Authorization: "Bearer " + process.env.EDEN_AI_API_KEY,
    'Content-Type': 'application/json'
  };
    
  const url = "https://api.edenai.run/v2/multimodal/chat";
  const body = JSON.stringify({
    model: [provider],
    messages: [
      {
        "role": "user",
        "content": [
          {
            "type": "text",
            "content": {
              "text": userInput
            }
          }
        ]
      }
    ]
  });
  
  const response = await fetch(url, {
    method: "POST",
    headers,
    body
  });
  
  const result = await response.json();
  console.log(result)
  
  return NextResponse.json(result);
}

I am trying to make an AI personal assistant using edenAI API and Next.js.

Vue.js + Nginx + Docker: 404 on Page Reload with Vue Router History Mode

Alles klar! Hier ist nur der Text der Fehlermeldung, wie du ihn auf Stack Overflow schreiben kannst – ohne Codeblöcke:


When I reload a page like http://localhost:8080/dashboard/mitarbeiter, I get this error:
“This localhost page can’t be found. No webpage was found for the web address: http://localhost:8080/dashboard/mitarbeiter. HTTP ERROR 404”

After adding try_files $uri $uri/ /index.html; to my Nginx config, the page does load, but I then get:
“500 Internal Server Error”

import HomeView from '../views/HomeView.vue'
import dashbaord from '../views/Dashbaord.vue'

const routes = [
  {
    path: '/dashboard',
    name: 'home',
    component: dashbaord,
    children: [
      {
        path: 'mitarbeiter', // /dashboard
        name: 'dashboard-home',
        component: () => import('../views/Dashboard/Mitarbeiter.vue'),
      },
    ]
  },
  {
    path: '/',
    name: '',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: HomeView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

server {
    listen 8080;
    server_name localhost;

    # Proxy für das Vue.js-Frontend
    location / {
        proxy_pass http://vuejs_app:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # CORS Header
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT';
        add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
    }

    # Proxy für das Node.js-Backend (API)
    location /api/ {
        proxy_pass http://nodejs_app:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT';
        add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
    }
}

server {
    listen 8081;
    server_name auth.localhost;

    location / {
        proxy_pass http://keycloak_auth:8080/;
        proxy_set_header Host auth.localhost;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT';
        add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
    }
}

How can I make my DAW playback more efficient without blocking the animation loop?

I have a konva animation loop for my Digital Audio Workstation as follows:

animationRef.current = new Konva.Animation((frame) => {
// calculate next x playback position for playback line
//check 1 second real time ahead of the line (taking tempo changes etc into account) and schedule exact play time with Tone.js. 
//set playback line x
}

This way of doing things ensures exact timings, but theres a problem. Checking the next note to see if it is in 1 second range (calculations needed) every konva animation loop is unnecessary because im guaranteed that the next note after a lookahead is atleast 1 second away. To fix this, I save the time of the last lookahead, then lookahead again in ~.5 seconds instead of every animation loop.

This is much more efficient but it causes lag spikes for the playback line animation as all the work happens on 1 frame instead of being spaced out. I want to only run the function every ~.5 seconds, but when it does run I need it to not block the animation line but also ensure it runs before the 1 second is up. Is this possible and if so,how can I do this?

Bungie API | Raid Clears, Dungeon Clears and Titles

I’m building a simple JavaScript tool to display my Destiny 2 stats on my website. So far, things like kill count, Triumph score, and time played are working fine. However, I’m stuck trying to get accurate values for:

  • Total raid clears
  • Total dungeon clears
  • Total number of titles earned

From what I understand, I need to query activity completions by specific activity hashes and sum them up manually. But I’m either getting zeroes or incorrect values. The same thing with titles—nothing seems to line up right.

I’ve reviewed Bungie’s API GitHub documentation and even tried other LLMs (Claude, ChatGPT) to debug it. No luck so far.

I’d appreciate any help from anyone who has successfully pulled these values or has insight into the correct endpoints/data structure!

Just to clarify—I can fetch values using activity hashes, but I think what I’m getting back are total instances of those activities, not actual completions. That would explain the inflated or inconsistent numbers. What I need help with is either:

  1. Finding the correct hashes in the manifest (for raids, dungeons, etc.), or
  2. Figuring out how to filter completions from activity instances in the API response.

If anyone’s done this before or has pointers on where to look, I’d really appreciate it.

Thanks in advance.

Notify from batch script to mshta and back

I was inspired by an article of npocmaka (Дякую, друже!) to start win gui app from batch script.
I want to achieve to pass data periodically from batch to gui and back. npocmaka’s example is a cool to launch app but i want to notify launched app f.i. in loop like this:

bat2app.bat

<!-- :

@echo off

pause
echo %time% | mshta.exe "%~f0"

:LOOPSTART

    REM HERE I WANT TO SEND (NOTIFY) data to the launched mshta html-application
    REM echo %time% | {What should be here?}
    
    timeout 3 > nul

GOTO LOOPSTART

pause

exit /b
-->

<html>
<head><title>text submitter</title></head>
<body>

    <script language='javascript' >
    
        //--------------------------------------------------------
    
        var fso = new ActiveXObject('Scripting.FileSystemObject');
    
        function checkInput() {

            var ss = fso.GetStandardStream(0);
            
            if(!ss.AtEndOfStream){
                alert(ss.ReadAll());
                ss.close();
            }
            else{
                alert('waiting for incoming text...');
            }
        }
        
        function close() {
          clearInterval(timerId); 
          alert('stop');
        }

        
        var timerId = setInterval(checkInput, 2000);
        
        setTimeout(close, 10000);

        //--------------------------------------------------------
    
        function pipeText() {
            // ...
        }
    </script>

    <input type='text' name='pass' size='15'></input>
    <hr>
    <button onclick='pipeText()'>Submit</button>

</body>
</html>

My second wish also based on his example – to receive data from gui to batch (in this example batch-file receive data only if html-app will close – when close()-line is uncommented), but I don’t want to close GUI and want to send data from launched gui to batch-process:

app2bat.bat

<!-- :

@echo off
for /f "tokens=* delims=" %%p in ('mshta.exe "%~f0"') do (
    set "text=%%p"
)
REM DO SMTH with received data
pause
exit /b
-->

<html>
<head><title>text submitter</title></head>
<body>

    <script language='javascript' >
        function pipeText() {
            var pass = document.getElementById('pass').value;
            var fso  = new ActiveXObject('Scripting.FileSystemObject');
            var ss   = fso.GetStandardStream(1);
            ss.Write(pass);
            ss.close();
            //close();
        }
    </script>

    <input type='text' name='pass' size='15'></input>
    <hr>
    <button onclick='pipeText()'>Submit</button>

</body>
</html>

So, I want to combine these two approaches to this hypotetically two-way notification scheme:

2wayNotifier.bat

<!-- :

@echo off

pause
    
REM LAUNCH mshta html-application only
start /d "C:WindowsSystem32" mshta.exe "%~f0"

pause

:LOOPSTART

    REM HERE I WANT TO SEND (NOTIFY) data to the launched mshta html-application
    REM echo %time% | {What should be here?}
    
    timeout 3 > nul
    
    for /f "tokens=* delims=" %%p in (?????) do (           REM What should be in (?????) to 'listen' stdin stream from current launched mshta html-application?
        set "text=%%p"                                      REM Need only to check if there are any data or stream is empty
    )
    REM DO SMTH with received data
    pause

GOTO LOOPSTART

pause

exit /b
-->

<html>
<head><title>text submitter</title></head>
<body>

    <script language='javascript' >
    
        //--------------------------------------------------------
    
        var fso = new ActiveXObject('Scripting.FileSystemObject');
    
        function checkInput() {

            var ss = fso.GetStandardStream(0);
            
            if(!ss.AtEndOfStream){
                alert(ss.ReadAll());
                ss.close();
            }
            else{
                alert('waiting for incoming text...');
            }
        }
        
        function close() {
          clearInterval(timerId); 
          alert('stop');
        }

        
        var timerId = setInterval(checkInput, 2000);
        
        setTimeout(close, 10000);

        //--------------------------------------------------------
    
        function pipeText() {
            var pass = document.getElementById('pass').value;
            var fso  = new ActiveXObject('Scripting.FileSystemObject');
            var ss   = fso.GetStandardStream(1);
            ss.Write(pass);
            ss.close();
            //close();
        }
    </script>

    <input type='text' name='pass' size='15'></input>
    <hr>
    <button onclick='pipeText()'>Submit</button>

</body>
</html>

I expect that it is possible to transfer data via the StdIn/StdOut combination but I can’t even figure out how to code it.
Is it even possible??

Google Drive API files.get() returns 403 forbidden after making a few requests

I’m making a get request with an API key in query params like so:

sound = new Audio(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=${APIKey}`

I request songs from my google drive (usually 1-4 songs) that weigh about 50-200mb each. It works like a charm, but after sending about 20 requests my requests are getting blocked and i get 403 forbidden page in response. I used to get “You computer or network may be sending automated requests” but it changed to “403 forbidden” for some reason. I’ve tried throttling my requests to a ridiculous degree(10 sec delay), but it didn’t help.

I’ve tried using the sdk for node js and different auth methods, but it was much slower and i was still getting this error. I’ve tried restarting my router, my pc, using a different browser, cleaning my history, flushing my dns. No effect. Any way to fix this issue?

How to load a 3D model using three.js?

I am completely new to loading 3D models in HTML. I want to render an interactive 3D human head model in web-browser (localhost).

Below is my code which opens up a web-browser without error but does not show the 3D model. When I inspected the console, I found the following error:

Uncaught TypeError: Failed to resolve module specifier “three”. Relative references must start with either “/”, “./”, or “../”.

All three files (html, python and human_head.glb) are in the same folder.

My HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Head Morphing</title>
<style>
    body { margin: 0; }
    canvas { display: block; }
</style>
</head>
<body>
<script type="module">
    // Import three.js using full CDN URLs
    import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
    
    // Import GLTFLoader from jsDelivr
    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
    
    // Import OrbitControls from jsDelivr
    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';

    // Set up the scene
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 1.5, 3);

    // Renderer setup
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Controls setup
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    // Lighting setup
    scene.add(new THREE.AmbientLight(0xffffff, 0.6));
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 2, 2);
    scene.add(light);

    // Load the GLTF model
    const loader = new GLTFLoader();
    let head;

    loader.load('human_head.glb', (gltf) => {
    head = gltf.scene;
    scene.add(head);
    head.scale.set(0.5, 0.5, 0.5);  // Scale the model to fit the scene
    }, undefined, (error) => {
    console.error('Error loading model:', error);
    });

    // Animation loop
    function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
    }

    animate();
</script>
</body>
</html>

Python Code to Start Server:

import http.server
import socketserver
import webbrowser
import threading
import time

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

# Start server in a background thread
def start_server():
    with socketserver.TCPServer(("", PORT), Handler) as httpd:
        print(f"Serving at http://localhost:{PORT}")
        httpd.serve_forever()

# Start the server
server_thread = threading.Thread(target=start_server, daemon=True)
server_thread.start()

# Open the index.html in a browser
time.sleep(1)  # Wait a moment to ensure server is ready
webbrowser.open(f"http://localhost:{PORT}/index.html")

try:
    # Keep the script alive while server is running
    print("Press Ctrl+C to stop.")
    while True:
        time.sleep(1)
except KeyboardInterrupt:
    print("nServer stopped.")

JavaScript and regex

Considering the string below, I want to extract the value from “data-frame-src”

I believe this regex should do the trick, but I’m not getting matches.

Can anyone give me a hand?

console.log(desc.match(/data-frame-src=([^"]+)/));

Expected result:

adstQ4RVd4r8eOvJ

String (coming from an RSS)

<![CDATA[ <p>....................</p><embed type="raw"><iframe id="nxs-video-iframe" data-frame-src="adstQ4RVd4r8eOvJ" width="640" height="360" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" src="https://redir1.domain.com/static-video-player/eyJ2aWRlb19pZCI6ImFkc3RRNFJWZDRyOGVPdkoiLCJwb3N0X2lkIjoyNjM0NzY1LCJhZHRhZ191cmwiOiJodHRwczpcL1wvcHViYWRzLmcuZG91YmxlY2xpY2submV0XC9nYW1wYWRcL2xpdmVcL2Fkcz9zej05eDEwMDAmaXU9XC81Njc4XC9saW4ua3hhblwvbGl2ZXN0cmVhbVwvbG9uZV9zdGFyX05ZRSZ2cG9zPXByZXJvbGwmaW1wbD1zJmdkZnBfcmVxPTEmZW52PXZwJm91dHB1dD12YXN0JnVudmlld2VkX3Bvc2l0aW9uX3N0YXJ0PTEmcG1uZD0wJnBteGQ9MzAwMDAmcG1hZD0xJnVybD1odHRwczpcL1wvd3d3Lmt4YW4uY29tXC90b3Atc3Rvcmllc1wvYXBwLWZlZWRcLyZkZXNjcmlwdGlvbl91cmw9aHR0cHM6XC9cL3d3dy5reGFuLmNvbSZjb3JyZWxhdG9yPTE3NDQ4MTM0MTEuMDcyNiZwYWdldHlwZT1mZWVkIiwicG9zdF90eXBlIjoicG9zdCIsImluamVjdGVkX3ZpYSI6ImZlZWQiLCJhZF9wcm92aWRlciI6ImdhbSIsImluX3dwX2VkaXRvciI6ZmFsc2UsImFsbG93X2F1dG9wbGF5Ijp0cnVlLCJpc19saXZlYmxvZyI6ZmFsc2V9" scrolling="no" frameborder="0" allowfullscreen> </iframe></embed>  ]]>

How do I block events on underlying elements without interfering with mousemove events for a custom highlighter overlay?

I’m creating a browser extension with an element exclusion mode. When turned on, it displays an overlay with a draggable controller and highlights the element under the cursor (using a highlighter box) while showing a label with the element’s tag + its direct children’s.
Take a look at the video for better clarification -> video reference 1 (BEFORE -> NO UNDERLYING EVENT BLOCK)

At first I tried adding a full-screen overlay (with pointer-events: auto) to catch all events early. This works but it interfered with my highlighter logic because document.elementFromPoint() returned the overlay element itself. video reference 2 (AFTER -> AFTER ADDING A EVENT BLOCKER UI OVERLAY)

MY CODEBASE IS HUGE. I CAN ONLY GIVE ENOUGH TO REPRODUCE THIS SAME PART

<!DOCTYPE html>
<html>

<head>
  <style>
    /* Basic layout for testing */
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    .test-box {
      width: 150px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      display: inline-block;
      padding: 10px;
    }

    #example-controller {
      position: fixed;
      top: 100px;
      left: 100px;
      background: #202020;
      color: white;
      padding: 10px;
      z-index: 999999;
      font-family: sans-serif;
      border-radius: 8px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      cursor: move;
    }

    #example-controller button {
      background: #444;
      border: none;
      color: white;
      padding: 6px 10px;
      font-size: 12px;
      cursor: pointer;
      border-radius: 4px;
    }

    #example-blocker {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100vw;
      background: rgba(0, 0, 0, 0.05);
      z-index: 999997;
      pointer-events: all;
    }

    #highlighter-box {
      position: absolute;
      z-index: 999997;
      display: none;
      border: 2px solid red;
      pointer-events: none;
      box-sizing: border-box;
    }

    #example-element-exclude-overlay {
      position: relative;
      z-index: 999998;
    }
  </style>
</head>

<body>
  <div id="example-controller">
    <button id="toggle-overlay-btn">Toggle Overlay</button>
  </div>

  <div id="highlighter-box" style="position: absolute; pointer-events: none; z-index: 999998; border: 2px dashed red; display: none;"></div>

  <div id="example-blocker" style="display: none;"></div>

  <div class="test-box">Box 1</div>
  <div class="test-box">Box 2</div>
  <div class="test-box">Box 3</div>

  <script>
    function mouseMoveHandler(e, controller, hiddenPanel, highlighterBox) {
      const target = document.elementFromPoint(e.clientX, e.clientY);
      if (!target) return;

      if (
        target === controller ||
        target === hiddenPanel ||
        target.closest("#example-element-exclude-overlay")
      ) return;

      const rect = target.getBoundingClientRect();

      Object.assign(highlighterBox.style, {
        display: "block",
        top: rect.top + window.scrollY + "px",
        left: rect.left + window.scrollX + "px",
        width: rect.width + "px",
        height: rect.height + "px",
      });

      const tagName = target.tagName.toLowerCase();
      const childTags = Array.from(target.children).map(child => child.tagName.toLowerCase());
      const displayText = childTags.length > 0 ?
        `${tagName} > ${childTags.join(" + ")}` :
        tagName;

      let label = highlighterBox.querySelector("#highlighter-label");
      if (!label) {
        label = document.createElement("div");
        label.id = "highlighter-label";
        Object.assign(label.style, {
          position: "absolute",
          background: "rgba(255, 0, 0, 0.8)",
          color: "white",
          fontSize: "11px",
          padding: "1px 6px",
          pointerEvents: "none",
          fontFamily: "monospace",
          zIndex: 999998,
        });
        highlighterBox.appendChild(label);
      }

      label.textContent = displayText;

      const boxBottom = rect.bottom + window.scrollY;
      const viewportBottom = window.scrollY + window.innerHeight;
      const labelHeight = label.getBoundingClientRect().height;

      if (boxBottom + labelHeight < viewportBottom) {
        label.style.top = "100%";
        label.style.bottom = "auto";
        label.style.transform = "translateY(0%)";
        label.style.borderRadius = "0px 0px 4px 4px";
      } else {
        label.style.bottom = "100%";
        label.style.top = "auto";
        label.style.transform = "translateY(-100%)";
        label.style.borderRadius = "4px 4px 0px 0px";
      }
    }

    const controller = document.getElementById("example-controller");
    const highlighterBox = document.getElementById("highlighter-box");

    document.addEventListener("mousemove", function(e) {
      mouseMoveHandler(e, controller, null, highlighterBox);
    });

    (function makeDraggable(panel) {
      let isDragging = false,
        offsetX = 0,
        offsetY = 0;

      panel.addEventListener("mousedown", function(e) {
        isDragging = true;
        offsetX = e.clientX - panel.offsetLeft;
        offsetY = e.clientY - panel.offsetTop;
        panel.style.transition = "none";
      });

      document.addEventListener("mousemove", function(e) {
        if (!isDragging) return;
        panel.style.left = (e.clientX - offsetX) + "px";
        panel.style.top = (e.clientY - offsetY) + "px";
      });

      document.addEventListener("mouseup", function() {
        isDragging = false;
      });
    })(controller);

    const overlay = document.getElementById("example-blocker");
    document.getElementById("toggle-overlay-btn").addEventListener("click", function() {
      overlay.style.display = overlay.style.display === "none" ? "block" : "none";
    });
  </script>

</body>

</html>

Replace ‘?’ with ‘?’

How to achieve output string: hm?

Testing code below without success:

const test = (str) => console.log(JSON.stringify(str)) // for proper display of escape characters

test('hm?'.replace('?', '?'))    // "hm?"
test('hm?'.replace('?', '\?'))   // "hm\?"
test('hm?'.replace('?', '\?'))  // "hm\?"
test('hm?'.replace('?', '\\?')) // "hm\\?"

Firefox Developer Edition 138.0b7 Screenshot

Firefox Developer Edition Screenshot

How to style the items from MenuBar Primereact component?

I’m coding my website with React, Primeflex and Primereact. I am using the MenuBar component and I need to style the items in the component, but anything I am trying to do isn’t working. How can I style it?

import { Menubar } from 'primereact/menubar';
import { Button } from 'primereact/button';
import { useNavigate } from 'react-router-dom';
import imgDev from '../assets/img-dev.svg';

function Header() {
    const navigate = useNavigate();

    const items = [
        {
            label: 'Menu',
            command: () => navigate('/')
        },
        {
            label: 'Experiências',
            command: () => navigate('/experiencias')
        },
        {
            label: 'Formação',
            command: () => navigate('/formacao')
        },
        {
            label: 'projetos',
            command: () => navigate('/projetos')
        }
    ];

    const start = (
        <img src={imgDev} alt="Logo" style={{ width: 40, height: 40, marginRight: '10px' }} />
    );

    const end = (
        <Button className='bg-orange-500 border-none' label='Meu Currículo' icon='pi pi-file' />
    );

    return(
        <Menubar className='w-full bg-gray-900 border-none fixed top-0 left-0 p-3 z-1' model={items} start={start} end={end} />
    );
}

export default Header;

I’ve got an image that is within a class container due size. I want to create a mouseover event to swap images, but with the same size constraints

I’m trying to apply a mouseover event to change an original image to new image, and then back to the original image upon mouseout. However, the original image files are very large, so I’m using a container class to display them in the size I want.

The problem is that when I hover over the image, it displays the new image, but it’s at the original size instead of being within the constraints of the container.

const imageContainer = document.querySelector('.flex-container');
const image = document.getElementById('bookCover2');
const originalSrc = 'Book_2_Cover.png';
const newSrc = 'Book_2_Back.png';

imageContainer.addEventListener('mouseover', () => {
image.src = newSrc;
});

imageContainer.addEventListener('mouseout', () => {
image.src = originalSrc;
});

my button styling is having issues, how do i fix? [closed]

I recently added a music player to my website (https://potatoishere.neocities.org/ for reference) and I’ve been having a couple issues with the functionality of the buttons.

  • First issue is that the button shows even when nothings playing
    (before I edited the code to change the style it wasn’t doing it and
    now it is).

  • Second issue is that when refreshing the website the buttons don’t
    load when playing music until I refresh it again.

  • The last issue is that when I hide the div on my neocities website,
    it also hides the buttons when I click the button that opens the
    website.

I have no idea what is causing any of these issues and my website runs an iframe with a github page since neocities isn’t cooperating with the way the the spotify player runs.

(https://potatoisnthere.github.io/HEEELP/ is the github page for reference).

Why is my field resetting when selecting a date in React?

I’m working on a React form where I need to handle a Date of Birth field using an <input type="date">. I want the field to accept dates in the YYYY-MM-DD format, both for displaying the date and for storing it in the state.

When I enter a date manually, the input resets. And when I select a date from the calendar, it doesn’t accept the input.

Here’s some part of my code:

    import React, { ChangeEvent } from 'react';

const RegisterForm: React.FC<RegisterFormProps> = ({
  dateOfBirth,
  setDateOfBirth,
  isValidAge,
}) => {
  // Handle changes in date input
  const handleDateChange = (e: ChangeEvent<HTMLInputElement>) => {
    const inputDate = e.target.value; // This will be in the format YYYY-MM-DD
    setDateOfBirth(inputDate); // Update the state with the YYYY-MM-DD format
  };

  return (
    <form className="form">
      <div className="form-group">
        <label>Date of Birth</label>
        <div className="input-container">
          <Calendar size={18} className="input-icon" />
          <input
            type="date"
            value={dateOfBirth}  // Directly bind the state in YYYY-MM-DD format
            onChange={handleDateChange}  // Update the state when the user selects a date
            className="input"
            required
          />
        </div>
        {dateOfBirth && !isValidAge && (
          <p className="age-error">You must be at least 15 years old to register</p>
        )}
      </div>
    </form>
  );
};

export default RegisterForm;