Category: javascript

ни как не могу убрать сокет так как он больше не нужен совсем. Возможно заскамите меня но использую не vps а обычный хостинг на котором есть вебсокеты но подключение мне особо и не нужно, просто сайт должен работать и все, php7.2-7.4,

function connect_socket() {
if(!SOCKET) {
var session = getCookie('session');
const isDebug = localStorage.getItem('');
SOCKET = io(isDebug ? isDebug : `http://localhost:8080`, {secure: false});
           
SOCKET.on('live bet', data => {         newLiveWin(data.game, data.player, data.wager, data.multi, data.payout);
        });     SOCKET.on('connect', function(msg) {            send_request_socket({               'type': 'account',              'command': 'resend_verify',             'recaptcha': 'x',       'bypass': true
            });

            

Нужно вырезать подключение через сокет либо же отключить как это сделать?

I need to color specific letters of a word like this example:

go run . –color= “something”

go run . –color=red GuYs “HeY GuYs”

my full code :

https://github.com/m7madnat/ascii-art-color

I need to color ‘GuYs’ in red and keep ‘HeY’ in default color, I tried many solutions but nothing worked

I have a simple expressjs proxy server relaying requests to a RESTful API and relaying the responses from that API back. If I use CURL to access it, like so:

curl -s "http://localhost:3000/api/findOne" 
         -X POST 
         -H "Content-Type: application/json" 
           -H "Accept: application/json" 
         -d '{ /* request body */ }'

then I get valid JSON back to STDOUT.

But if I try to fetch it from the JavaScript front end like this:

fetch('http://localhost:3000/api/findOne', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(/* request body */) })
    .then((res) => res.json()) // .text() doesn't work either!
    .then((res) => console.log(res))
    .catch((e) => e)

then I get this error returned from the catch block:

The worst part is, I have the proxy server printing out the requests it’s receiving and the requests it produces to pull from the actual RESTful API, and I did a diff between the output it produces when the curl call is made, and the output it produces when the fetch call is made, and they’re identical, character for character. Which means that the proxy server is doing the exact same thing each time, there’s just something wrong with fetch that makes it unable to parse the result, even as plain text, which is bizarre.

I haven’t been able to find anything on the internet about this at all, can someone clue me in? Thanks. I’m a bit rusty with my web development skills (been out of the loop for a couple years).

I’m using a Node/Express API on domain A and a NextJS 14 (using app rooter) application on domain B both hosted by Vercel.

In my API when I log in from my NextJS application I create a JWT that I send back via a cookie named “token” :

const login = async (req, res, next) => {
    const { pseudo, password } = req.body;

    if (!pseudo || !password) {
        return res.status(401).json({ message: 'Pseudo and password are required' });
    }
    
    try {
        // Check if user exists
        const user = await UserModel.findOne({ pseudo }).lean().exec();
        if (!user) {
            return res.status(401).json({ message: 'Pseudo or password is wrong' });
        }

        // Check if password is correct
        const passwordValid = await bcrypt.compare(password, user.password);
        if (!passwordValid) {
            return res.status(401).json({ message: 'Pseudo or password is wrong' });
        }

        // Create JWT (expire in 1 day)
        const token = jwt.sign({ pseudo }, SECRET_TOKEN, { expiresIn: '1d' });

        // Set cookie
        res.setHeader('Set-Cookie', `token=${token}; Max-Age=${3600 * 24}; Path=/; HttpOnly; SameSite=None; Secure; Partitioned;`)
        //res.cookie('token', token, { maxAge: 3600 * 24 * 1000, httpOnly: true, sameSite: 'none', secure: true, partitioned: true });

        res.status(200).json({ message: 'Login successful', user: user.pseudo });
    } catch (error) {
        next(error);
    }
}

• 1st problem, Chrome blocks my cookie if I use “res.cookie”.
  I did some research and came across this page:
  https://developers.google.com/privacy-sandbox/blog/cookie-countdown-2023oct

I deduced that I needed to add the “Partitioned” attribute to my cookie. Except that it’s not managed by Express if I’m not saying something stupid (I tried the “partitioned: true” in res.cookie setting on any chance).

So I tested with res.setHeader('Set-Cookie', '[...]; Partitioned')… and the cookie is accepted by the browser, ok :

cookie in browser

In my NextJS application, I have an “/admin” page when I am logged in.

In “app/admin/layout.js” file, I check authentication :

import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
import axios from '@/lib/axios';

export default async function Layout({ children }) {
    // Get cookie token
    const cookieStore = cookies()
    const token = cookieStore.get('token');
    
    if (token) {
        try {
            await axios.post('/auth/check', {}, { headers: { Cookie: `token=${token.value}` } });
        } catch (error) {
            redirect('/');
        }
    } else {
        redirect('/');
    }

    return (
        <>
            Something
        </>
    );
}

• 2nd problem, token variable from cookieStore.get('token') is undefined… However, the cookie “token” is stored in the browser. There’s probably something I don’t understand or haven’t done correctly.

Thanks if you have any ideas.

I’ve tried so many random things that I don’t think there’s any point in talking about them here.

I am trying to make it so that when I click on a button the class of a component changes, allowing for different styling to be applied. I keep getting an error of infinite rendering but I don’t know whats wrong. Here is my code.

const Nav2 = () => {
    const [activeLinks, setActiveLinks] = useState(true);
    const [activeIcons, setActiveIcons] = useState(true);

    const toggleMenu = () => {
        if (activeLinks === true) {
            setActiveLinks(false);
        } else if (activeLinks === false) {
            setActiveLinks(true);
        }
        if (activeIcons === true) {
            setActiveIcons(false);
        } else if (activeIcons === false) {
            setActiveIcons(true);
        }
    }

    return (
        <nav id="lined-nav">
            <div className="logo">Umar Manzoor</div>
            <div className="lined-menu">
                <div className={activeIcons ? "lined-icon" : "lined-icon open"} onClick={toggleMenu()}>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div className={activeLinks ? "menu-links" : "menu-links open"}>
                    <li><a href="#about" onClick={toggleMenu()}>About</a></li>
                    <li><a href="#experience" onClick={toggleMenu()}>Experience</a></li>
                    <li><a href="#projects" onClick={toggleMenu()}>Projects</a></li>
                    <li><a href="#contact" onClick={toggleMenu()}>Contact</a></li>
                </div>
            </div>
        </nav>
    )
}

export default Nav2```

I am a noob trying to create a easy chrome extension. The gist – I would like for a new chrome window to open in the left side of the screen when I click a hyperlink from a specific website. Here is as far as I can get…

Manifest.json

{
  "manifest_version": 2,
  "name": "Link Opener2",
  "version": "1.0",
  "description": "Opens.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "48": "icon.png"
  }
}

content.js

document.addEventListener("click", function(event) {
  const target = event.target;
  
  if (target.tagName === "A") {
    const linkToOpen = target.href;
    chrome.runtime.sendMessage({ action: "openLinkInNewWindow", link: linkToOpen });
  }
});

background.js

chrome.runtime.onInstalled.addListener(function() {
  console.log("Link Opener Extension Installed.");
});

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, { action: "openClickedLink" });
});

I would love some help and appreciate learning.

Result is not functioning as expected. Link opens but in same window

I am working on a tax calculator web application using HTML and JavaScript. The calculator allows users to input their gross salary and select a state from a dropdown menu. The tax rate is then applied based on the selected state, and the calculated tax, net salary, and gross salary are displayed.

“`

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="podatkiCW.css">
  </head>
  <body>

    <h1> Kalkulator podatków </h1>

<div id="Kalkulator">
  <form>
    <label for="brutto">Pensja brutto:</label>
    <input type="text" id="brutto" name="brutto"><br><br>
  </form>

  <label for="stany">Wybierz stan:</label>

  <select id="stany">
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
  </select>



  <div>
    <p> Podatek: </p>
    <p id="podatek"></p>
    <p> Brutto: </p>
    <p id="brutto"> </p>
    <p> Netto: </p>
    <p id="netto"> </p>
  </div>

  <form>
    <button type="button" onclick="liczenie()">Oblicz</button>
    <button type="button" onclick="czysc()">Wyczyść</button>
  </form>

</div>
  <script>
    var stany = document.getElementById('stany');

    function liczenie() {
      var brutto = parseFloat(document.getElementById('brutto').value);

      switch (stany.value) {
        case "Alabama": tax=0.04; break;
        case "Alaska": tax=0; break;
        case "Arizona": tax=0.056; break;
        case "Arkansas": tax=0.065; break;
      }

      let podatek = tax * brutto;
      podatek = podatek.toFixed(2);
      document.getElementById("podatek").textContent = podatek;
      document.getElementById("netto").textContent = (brutto - podatek).toFixed(2);
      document.getElementById("brutto").textContent = brutto.toFixed(2);
    }

    function czysc() {
      document.getElementById('brutto').value = "";
      document.getElementById('netto').textContent = "";
      document.getElementById('podatek').textContent = "";
    }
  </script>

  </body>
</html>

“`

However, I’m facing a problem with the tax calculation. The issue seems to be related to the liczenie() function in my JavaScript code. When I click the “Oblicz” (Calculate) button, the displayed tax value is not correct, and the net salary is not updating accordingly. I’ve double-checked the switch statement for different states, but the problem persists.

Additionally, there might be a conflict with the use of the id="brutto" for both the input field and the displayed gross salary. I’m not sure if this is causing the issue.

I’ve included the relevant parts of my code below for reference. Any help or suggestions on identifying and resolving this issue would be greatly appreciated.

I am trying to sort products from a JSON “product.json” file I got through

<?php
$jsonPath = './product.json';
$jsonString = file_get_contents($jsonPath);
$data = json_decode($jsonString);
?>

in my php file

<?php
$jsonPath = './product.json';
$jsonString = file_get_contents($jsonPath);
$data = json_decode($jsonString);



?>



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>The Range Office Shop</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>


    <!-- Page Header Start -->

    <div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 100px">
        <h1 class="font-weight-semi-bold text-uppercase mb-3">Office Essentials</h1>

    </div>

    <!-- Page Header End -->


    <!-- Shop Start -->

    <div class="container-fluid pt-5">
        <div class="row px-xl-5">

            <!-- Shop Product Start -->
            <div class="col-lg-9 col-md-12">
                <div class="row pb-3">
                    <div class="col-12 pb-1">
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <form action="">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search by name">
                                    <div class="input-group-append">
                                        <span class="input-group-text bg-transparent text-primary">
                                            <i class="fa fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </form>
                            <div class="dropdown ml-4">
                                <button class="btn border dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Sort by
                                </button>
                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="triggerId">
                                    <a class="dropdown-item" href="#">Price</a>
                                    <a class="dropdown-item" href="#">Review</a>
                                    <a class="dropdown-item" href="#">Name</a>
                                    <a class="dropdown-item" href="#">Savings</a>

                                </div>
                            </div>
                        </div>
                    </div>

                    <?php foreach ($data as $key => $jsons) {
                        foreach ($jsons as $key => $product) {
                    ?>
                            <div class="col-lg-4 col-md-6 col-sm-12 pb-1">
                                <div class="card product-item border-0 mb-4">
                                    <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                                        <img class="img-fluid w-100" src="img/<?php echo $product->img; ?>.jpg" alt="">
                                    </div>
                                    <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
                                        <h6 class="text-truncate mb-3"><?php echo ucfirst($product->name); ?></h6>
                                        <div class="d-flex justify-content-center">
                                            <h6>$<?php echo ($product->price); ?></h6>
                                            <?php
                                            if ($product->was_price == false) {
                                            } else {
                                                echo "<h6 class='text-muted ml-2'>Was <del>$$product->was_price</del></h6>";
                                            }
                                            ?>
                                            <?php
                                            if ($product->reviews == false) {
                                            } else {
                                                echo "<h6 class='text-muted ml-2'><span>$product->reviews</span>% Review Score </h6>";
                                            }
                                            ?>
                                        </div>
                                    </div>
                                    <div class="card-footer d-flex justify-content-between bg-light border">
                                        <a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>View Detail</a>
                                        <a href="" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Add To Cart</a>
                                    </div>
                                </div>
                            </div>

                    <?php
                        }
                    }

                    ?>





                    <div class="col-12 pb-1">
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center mb-3">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- Shop Product End -->
        </div>
    </div>
    <!-- Shop End -->


    <!-- Footer Start -->
    <div class="container-fluid bg-secondary text-dark mt-5 pt-5">
        <div class="row mx-xl-5 py-4">
            <div class="col-md-6 px-xl-0">
                <p class="mb-md-0 text-center text-md-left text-dark">
                    &copy; <a class="text-dark font-weight-semi-bold" href="#">Your Site Name</a>. All Rights Reserved. Designed
                    by
                    <a class="text-dark font-weight-semi-bold" href="https://htmlcodex.com">HTML Codex</a><br>
                    Distributed By <a href="https://themewagon.com" target="_blank">ThemeWagon</a>
                </p>
            </div>
        </div>
    </div>
    <!-- Footer End -->


    <!-- Back to Top -->
    <a href="#" class="btn btn-primary back-to-top"><i class="fa fa-angle-double-up"></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!-- Contact Javascript File -->
    <script src="mail/jqBootstrapValidation.min.js"></script>
    <script src="mail/contact.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
</body>

</html>

• Price
• Review
• Name and
• Savings (if you look at my php code, you’ll see the div where i wish to sort this and load them on a html card)

I have already loaded the files I got from the “products.json” files to the html cards with PHP. This is what my JSON file data looks like

{
  "product_arr" : [
    {
      "name": "Nature Patterned Envelope Files",
      "price": 100,
      "was_price": false,
      "reviews": 90,
      "img": 1
    }
}

I have also tried using the sort($data) function, but once I do so all the html cards I have looped disappear.

I need assistance with sorting these files and loading the looped card according to my sorting active. (no sort by default).

Thanks.

I want to add a toggle button to my page and saw this previous question: Flask – Toggle button with dynamic label. I did some testing with it and it worked as expected and I was so excited to implement! Then I moved the code over to my actual .html file and for some reason it isn’t working. I have been working in Flask for about a week now and it’s very rewarding but I am still quite new so I’m not sure what is going on.

HTML:

{% extends "header.html" %}

{% block body %}
<h2>{{ mType }}</h2>
    {% if rType == "Test"%}
        <h3>Test</h3>
    {% endif %}

{% block content %}
<div class="row">
  <div class="col-md-4">{% include "safetychanges.html" %}</div>
  <div class="col-md-8">
      <div id="load3" class="load3">
          <form method="post" action="{{ url_for('tasks') }}">
            <input type="submit" value="Start/Stop Recording" name="rec" />
            </form>
        <div class="container">
    <div class="row">
        <div class="col-12 d-flex justify-content-end">


            <form method="post" action="{{ url_for('tasks') }}">
            </form>
            <img src="{{ url_for('video_feed') }}" height="100%", width="100%">


        </div>
    </div>
</div>
    </div>
  </div>
</div>

{% endblock %}

<html>
  <body>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    </head>
    <input type="checkbox" class='toggle' checked data-toggle="toggle">
    <div class='status'>Toggled</div>
  </body>
<script>
 $(document).ready(function() {
  $('.toggle').click(function() {
   var current_status = $('.status').text();
   console.log("here");
   $.ajax({
    url: "/Planning/get_toggled_status",
    type: "get",
     data: {status: current_status},
     success: function(response) {
      $(".status").html(response);
     },
     error: function(xhr) {
      //Do Something to handle error
     }
   });
  });
});
</script>
</html>
{% endblock %}

app.py:

@app.route('/Planning/get_toggled_status')
def toggled_status():
  current_status = request.args.get('status')
  print("hereeeeeeeeeeeeeeeeeeee")
  print(current_status)
  return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'

From my best estimates while testing, it’s like the script isn’t being triggered while in my html code opposed to when I was testing it in an empty html code file. Any ideas?

I have a function called “Time”, it accepts from 0 to 6 arguments.

function Time(year,month,day,hour,minutes,options) {

}

Parameters month, day, hour and minutes cannot be defined if the previous one isn’t defined.

Even if the “options” parameter is optional, if present, it has to be the last parameter.

However, user can define only year and month for example, and then options.

How to avoid the user to have to write this:

var newTimeInstance = Time(2024,06, undefined, undefined, undefined, options {
   fr: {
     // ...
   },
   es: {
     // ...
   }
})

If it’s not possible, is there another way to join options to a function ?

I’ve tried: var newTimeInstance = Time(2024,01).options({ ... }) but then I’m unable to access the other constructor functions in newTimeInstance.

So, in my bootstrap 5 modal, I have a range slider. I added a tooltip to my three dynamic range sliders. After i add them, the tooltips overflow on the right side ( displaying incorrectly ). I attempted to make it on absolute positions, but it isn’t working.

I want my tooltip to behave similarly to a standard range slider tooltip. I attempted to fix it, but because it is dynamic, those three range slider tooltips are showing the other right side of each range slider.

My code –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

.middle {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.slider {
    position: relative;
    z-index: 1;
    height: var(--2, 8px);
}
.slider > .track {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #E5E7EB;
}
.slider > .range {
    position: absolute;
    z-index: 2;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #1C64F2;
}
.slider > .thumb {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(98,0,238,.1);
    transition: box-shadow .3s ease-in-out;

    stroke-width: 1px;
    stroke: var(--gray-200, #E5E7EB);
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
}
.slider > .thumb.left {
    left: 25%;
    transform: translate(-15px, -10px);
}
.slider > .thumb.right {
    right: 25%;
    transform: translate(15px, -10px);
}


input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 22px;
    height: 22px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    -webkit-appearance: none;
}
.tooltip {
    position: absolute;
    display: none;
    background-color: #1c64f2;
    color: #ffffff;
    padding: var(--05, 2px) var(--2, 8px);
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    top: -40px !important;
}



.modal-dialog {
    max-width: 720px;
    padding: 4px;
}


/* Max Result Start */
.max-result {
    margin-top: 16px;
}
.max-result label {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 12px;
}

.max-result .form-control {
    box-shadow: none;
    background-color: #F9FAFB;
    border-color: #D1D5DB;
    border-radius: 8px;
}
.max-result .form-control::placeholder {
    color: #6B7280;
}

.price-range-section {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 16px;
}
.price-range-section label:first-child {
    color: #000;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; 
    margin-bottom: 26px;
}
.modal-body .price-range-section:nth-child(2) {
    margin-top: 16px;
}
.modal-body-pad {
    padding-top: 4px;
    padding-bottom: 8px;
}


    </style>
</head>
<body>

    <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    Launch static backdrop modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade filter-modal" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header range-modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">Filters</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body modal-body-pad">

            <ul class="nav nav-tabs">
                <li class="nav-item">
                  <a class="nav-link active" id="blockA-tab" data-bs-toggle="tab" href="#blockA">Basic</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="blockB-tab" data-bs-toggle="tab" href="#blockB">Advanced</a>
                </li>
              </ul>

              <div class="tab-content mt-2">
                <div class="tab-pane fade show active" id="blockA">
                  <div class="container">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="price-range-section">
                                <label for="Price Range">Price Range</label>
                                <div class="middle">    
                                    <div class="multi-range-slider">
                                        <input type="range" id="price-min-slider" min="0" max="100" value="25">
                                        <input type="range" id="price-max-slider" min="0" max="100" value="75">
                                
                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                         <!-- Tooltips -->
                                         <div class="tooltip" id="tooltip-left"></div>
                                         <div class="tooltip" id="tooltip-right"></div>
                                    </div>
                                </div>
                            </div>
                
                            <div class="price-range-section">
                                <label for="Delivery Range">Delivery Time (Days)</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider2">
                                        <input type="range" id="min-delivery-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-delivery-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left2"></div>
                                        <div class="tooltip" id="tooltip-right2"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="price-range-section mt-3">
                                <label for="Bid Range">Bid Count</label>
                                <div class="middle">    
                                    <div class="multi-range-slider multi-range-slider3">
                                        <input type="range" id="min-bid-slider" min="0" max="100" value="25">
                                        <input type="range" id="max-bid-slider" min="0" max="100" value="75">

                                        <div class="slider">
                                            <div class="track"></div>
                                            <div class="range"></div>
                                            <div class="thumb left"></div>
                                            <div class="thumb right"></div>
                                        </div>

                                        <!-- Tooltips -->
                                        <div class="tooltip" id="tooltip-left3"></div>
                                        <div class="tooltip" id="tooltip-right3"></div>
                                    </div>
                                </div>
                            </div>
        
                        </div>
                        
            </div>
                    
            </div>
            </div>
                
        </div>
        </div>
        
      </div>
    </div>
  </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script>
    //Range Price Slider Script Start / Price slider
    var PriceMinSlider = document.getElementById('price-min-slider');
      var PriceMaxSlider = document.getElementById('price-max-slider');

      var thumbLeft = document.querySelector('.slider > .thumb.left');
      var thumbRight = document.querySelector('.slider > .thumb.right');
      var range = document.querySelector('.slider > .range');

      var tooltipLeft = document.getElementById('tooltip-left');
      var tooltipRight = document.getElementById('tooltip-right');

      function setLeftValue() {
        var _this = PriceMinSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.min(
          parseInt(_this.value),
          parseInt(PriceMaxSlider.value) - 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbLeft.style.left = percent + '%';
        range.style.left = percent + '%';
        updateTooltipPosition();
      }

      setLeftValue();

      function setRightValue() {
        var _this = PriceMaxSlider,
          min = parseInt(_this.min),
          max = parseInt(_this.max);

        _this.value = Math.max(
          parseInt(_this.value),
          parseInt(PriceMinSlider.value) + 1
        );

        var percent = ((_this.value - min) / (max - min)) * 100;

        thumbRight.style.right = 100 - percent + '%';
        range.style.right = 100 - percent + '%';
        updateTooltipPosition();
      }

      setRightValue();

      function updateTooltipPosition() {
        var thumbLeftPosition = thumbLeft.getBoundingClientRect();
        var thumbRightPosition = thumbRight.getBoundingClientRect();

        tooltipLeft.style.display = 'block';
        tooltipLeft.style.left = thumbLeftPosition.left + 'px';
        tooltipLeft.style.top = thumbLeftPosition.bottom + 5 + 'px';
        tooltipLeft.innerHTML = PriceMinSlider.value;

        tooltipRight.style.display = 'block';
        tooltipRight.style.left = thumbRightPosition.left + 'px';
        tooltipRight.style.top = thumbRightPosition.bottom + 5 + 'px';
        tooltipRight.innerHTML = PriceMaxSlider.value;
      }
      PriceMinSlider.addEventListener('input', setLeftValue);
      PriceMaxSlider.addEventListener('input', setRightValue);

      PriceMinSlider.addEventListener('mousedown', function () {
        thumbLeft.classList.add('active');
      });

      PriceMinSlider.addEventListener('mouseup', function () {
        thumbLeft.classList.remove('active');
      });

      PriceMaxSlider.addEventListener('mousedown', function () {
        thumbRight.classList.add('active');
      });

      PriceMaxSlider.addEventListener('mouseup', function () {
        thumbRight.classList.remove('active');
      });
//Range Price Slider  Script End



// Range Delivery Slider Script
var MinDeliverySlider = document.getElementById('min-delivery-slider');
var MaxDeliverySlider = document.getElementById('max-delivery-slider');

var thumbLeft2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.left');
var thumbRight2 = document.querySelector('.multi-range-slider2 > .slider > .thumb.right');
var range2 = document.querySelector('.multi-range-slider2 > .slider > .range');

var tooltipLeft2 = document.getElementById('tooltip-left2');
var tooltipRight2 = document.getElementById('tooltip-right2');

function setLeftValue2() {
    var _this = MinDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxDeliverySlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft2.style.left = percent + '%';
    range2.style.left = percent + '%';
    updateTooltipPosition2();
}

setLeftValue2();

function setRightValue2() {
    var _this = MaxDeliverySlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinDeliverySlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight2.style.right = 100 - percent + '%';
    range2.style.right = 100 - percent + '%';
    updateTooltipPosition2();
}

setRightValue2();

function updateTooltipPosition2() {
    var thumbLeftPosition2 = thumbLeft2.getBoundingClientRect();
    var thumbRightPosition2 = thumbRight2.getBoundingClientRect();

    tooltipLeft2.style.display = 'block';
    tooltipLeft2.style.left = thumbLeftPosition2.left + 'px';
    tooltipLeft2.style.top = thumbLeftPosition2.bottom + 5 + 'px';
    tooltipLeft2.innerHTML = MinDeliverySlider.value;

    tooltipRight2.style.display = 'block';
    tooltipRight2.style.left = thumbRightPosition2.left + 'px';
    tooltipRight2.style.top = thumbRightPosition2.bottom + 5 + 'px';
    tooltipRight2.innerHTML = MaxDeliverySlider.value;
}

MinDeliverySlider.addEventListener('input', setLeftValue2);
MaxDeliverySlider.addEventListener('input', setRightValue2);

MinDeliverySlider.addEventListener('mousedown', function () {
    thumbLeft2.classList.add('active');
});

MinDeliverySlider.addEventListener('mouseup', function () {
    thumbLeft2.classList.remove('active');
});

MaxDeliverySlider.addEventListener('mousedown', function () {
    thumbRight2.classList.add('active');
});

MaxDeliverySlider.addEventListener('mouseup', function () {
    thumbRight2.classList.remove('active');
});


// Range Bid Slider Script
var MinBidSlider = document.getElementById('min-bid-slider');
var MaxBidSlider = document.getElementById('max-bid-slider');

var thumbLeft3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.left');
var thumbRight3 = document.querySelector('.multi-range-slider3 > .slider > .thumb.right');
var range3 = document.querySelector('.multi-range-slider3 > .slider > .range');

var tooltipLeft3 = document.getElementById('tooltip-left3');
var tooltipRight3 = document.getElementById('tooltip-right3');

function setLeftValue3() {
    var _this = MinBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.min(
        parseInt(_this.value),
        parseInt(MaxBidSlider.value) - 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbLeft3.style.left = percent + '%';
    range3.style.left = percent + '%';
    updateTooltipPosition3();
}

setLeftValue3();

function setRightValue3() {
    var _this = MaxBidSlider,
        min = parseInt(_this.min),
        max = parseInt(_this.max);

    _this.value = Math.max(
        parseInt(_this.value),
        parseInt(MinBidSlider.value) + 1
    );

    var percent = ((_this.value - min) / (max - min)) * 100;

    thumbRight3.style.right = 100 - percent + '%';
    range3.style.right = 100 - percent + '%';
    updateTooltipPosition3();
}

setRightValue3();

function updateTooltipPosition3() {
    var thumbLeftPosition3 = thumbLeft3.getBoundingClientRect();
    var thumbRightPosition3 = thumbRight3.getBoundingClientRect();

    tooltipLeft3.style.display = 'block';
    tooltipLeft3.style.left = thumbLeftPosition3.left + 'px';
    tooltipLeft3.style.top = thumbLeftPosition3.bottom + 5 + 'px';
    tooltipLeft3.innerHTML = MinBidSlider.value;

    tooltipRight3.style.display = 'block';
    tooltipRight3.style.left = thumbRightPosition3.left + 'px';
    tooltipRight3.style.top = thumbRightPosition3.bottom + 5 + 'px';
    tooltipRight3.innerHTML = MaxBidSlider.value;
}

MinBidSlider.addEventListener('input', setLeftValue3);
MaxBidSlider.addEventListener('input', setRightValue3);

MinBidSlider.addEventListener('mousedown', function () {
    thumbLeft3.classList.add('active');
});

MinBidSlider.addEventListener('mouseup', function () {
    thumbLeft3.classList.remove('active');
});

MaxBidSlider.addEventListener('mousedown', function () {
    thumbRight3.classList.add('active');
});

MaxBidSlider.addEventListener('mouseup', function () {
    thumbRight3.classList.remove('active');
});


</script>
</body>
</html>

element.focus() does not work when the focus is on body tag, Im not sure if this is a desired browser behavior because I cant find anything on the web about it.
This is an issue since when shift tabbing or tabbing manually to body the .focus stops working and is essential in my application.

I cant reproduce this in stack snippet since this requires the body element of the main page, this could be easily reproduce by focusing the body element by tabbing into it from the search bar then trying to focus a focusable element by .focus() can be easily done by $0.focus()

 //script.js
   <a href = "./details.html?id=${element.id}" class="details"><i class="fa-solid fa-circle-info"></i></a>

How can I access details section with fetch api?

details.js

//db.json
   "products": [
    {
      "id": 1,
      "image": "/assets/images/product-01.jpg.webp",
      "description": "Converse All Star Hi Plimsolls",
      "price": "74$",
      "category": "Women"
    }]

How can I access details section with fetch api?
details.js details.html

The same code with the same data structure passed to the prop sets the prop as array or as object randomly.

The code fragment:

const props = defineProps({
    all: {
        type: Array,
        default: [],
    }
})

onBeforeMount(() => {
    console.log(props.all)
})

The log:
Array proxy target prototype for the prop

Object proxy target prototype for the prop

Incoming data passed to the prop is a plain array in both cases

Then I am not able to confidently use array functions on this prop because sometimes I am getting:
TypeError: u.all.sort is not a function

What am I missing or doing wrong?

I am building a function in react native expo that saves a state variable array in react native expo to excel file. I am getting a success message and when i console log the directory i get the files list but when i go the file manager of my phone i can’t see the files the directory Documents is empty even though i created the directory in the code. I need your help please.

When i console log the directory name i get this :
file:///data/user/0/host.exp.exponent/files/stopwatch

I am testing my app using expo go on my real device

here is my code

const writeArrayToExcel = async (dataArray) => {
    const resultsMade = [["lap", "time"]];
    dataArray.map((lapTime, index) => {
        const lapName = `${lapWord} ${index + 1}`;
        const valLap = `${displayTime(lapTime).hours}:${displayTime(lapTime).minutesSeconds}:${displayTime(lapTime).centiseconds}`;
        resultsMade.push([lapName, valLap]);
    })

    let wb = XLSX.utils.book_new();
    let ws = XLSX.utils.aoa_to_sheet(resultsMade);

    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    
    const base64 = XLSX.write(wb, { bookType: 'xlsx', type: 'base64' });

    const currentDate = new Date();
    const formattedDate = `${currentDate.getFullYear()}-${(currentDate.getMonth() + 1).toString().padStart(2, '0')}-${currentDate.getDate().toString().padStart(2, '0')}_${currentDate.getHours().toString().padStart(2, '0')}-${currentDate.getMinutes().toString().padStart(2, '0')}-${currentDate.getSeconds().toString().padStart(2, '0')}`;

    const filename = FileSystem.documentDirectory + `stopwatch/Stopwatch-${formattedDate}.xlsx`;

    const metaDataDir = await FileSystem.getInfoAsync(FileSystem.documentDirectory + 'stopwatch');
    const isDir = metaDataDir.isDirectory;
    if (!isDir) {
        try {
            await FileSystem.makeDirectoryAsync(
                FileSystem.documentDirectory + 'stopwatch',
                { intermediates: true }
            );
            console.log("directory created");
        } catch (e) {
            //console.info("ERROR", e);
            console.log("error: ", e);
        }
    } else {
        console.log("is directory");
    }

    try {
        const isDir = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory + 'stopwatch');
        console.info("DIR", isDir);
    } catch (e) {
        console.info("ERROR", e);
    }

    // FileSystem.writeAsStringAsync(filename, base64, {
    //     encoding: FileSystem.EncodingType.Base64
    // }).then(() => {
    //     //Sharing.shareAsync(filename);
    // });
    FileSystem.writeAsStringAsync(filename, base64, { encoding: 'base64' }).then(() => {
        //Sharing.shareAsync(filename);
        Alert.alert("File saved successfully");
    }).catch((error) => Alert.alert('Error:', error.message));
};