Highlight the right instead of the left of an input type=”range”

I have an input of type range. Normally this enables a user to create a range of values. Maybe the min value is 0 and max is 100 and the start value is 50. So that means the range is from 0 to the number you choose and so the left side of the slider has a color. In other words the number you are choosing is a maximum of the range but what if you want it to be a minimum?

I know there are plenty of videos on how to reverse input. I don’t want change the numbers just highlight the right side of the slider. How can I do this?

It is actually working in the code snippet here

How to reverse the direction in HTML5 range input?

But I don’t know how they do it.

This the code for my from custom slider.

style.css

body {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}
.container{
  height: 15px;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.slider{
  width: 90vw;
  height: 15px;
  position: absolute;
  webkit-appearance:none;
  background-color: #280dd8;
  border-radius: 5px;
  outline: none;
  left: 0;
  right: 0;
  margin: auto;

}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  outline: none;
  cursor: pointer;

}

the html is

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Javascript General</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <input type="range" min="0" max="100" value="50"
  class="slider" id="slider">

How do I open a dropdown from an index link?

I have a doc site where I have to add multiple dropdown texts for the sake of simplicity. However, what happens is that the right nav of the index panel displays all the h3 as it does under normal circumstances. Now, when we click the link from the index it just navigates to the page instead of
Opening the Dropdown > Navigating to the h3 Topic

Here is an example:

enter image description here

Is there any way to open the dropdown and navigate to these links?

I was expecting the index links to navigate to the correct h3 of the dropdown.
It navigates to the page instead and the dropdown remains closed

Merge two set of objects

I am trying to merge two objects fetched from response distance matrix api into one. Distance matrix api can’t accept more than 25 set of lat and long data. Hence with the help of for loop i am trying to run the distance matrix api multiple times and merge the results, so that it can be used.

let distanceMatrixData = [];
let countk = 0;
for(let k = 0; k<destlatlongArr.length; k++ ){

    Request.get(
      `${gmapBaseUrl}/distancematrix/json?origins=${custlatlong}&destinations=${destlatlongArr[k]}&key=${process.env.googleMapsKey}`,
      (error, response, body) => {
        if (error) {
          return res.status(500).json({
            success: 0,
            error: error,
            message: "Error in distance matrix Api",
          });
        }

        console.log("Response of Distance Matrix Api is below : ");
        distanceMatrixData = JSON.parse(body).rows[0]; //this always gives with 2nd iteration data . I also tried distanceMatrixData.push(JSON.parse(body).rows[0]); but it would create two different set of data


        countk++;
        
        if(countk == destlatlongArr.length){
            console.log(distanceMatrixData);
        }
    });
}

I have destlatlongArr.length as 2 and it can be even more in future.
I wanted the data in JSON.parse(body).rows[0] to always be filled in distanceMatrixData Array.

1st set of data in JSON.parse(body).rows[0] is below :

{
  elements: [
    {
      distance: {
        text: "2 m",
        value: 2,
      },
      duration: {
        text: "2 min",
        value: 2,
      },
      status: "OK",
    },
    {
      distance: {
        text: "3 m",
        value: 3,
      },
      duration: {
        text: "3 min",
        value: 3,
      },
      status: "OK",
    }
  ],
}

Second set of data in JSON.parse(body).rows[0] is below:

{
  elements: [
    {
      distance: {
        text: "4 m",
        value: 4,
      },
      duration: {
        text: "4 min",
        value: 4,
      },
      status: "OK",
    },
    {
      distance: {
        text: "4 m",
        value: 4,
      },
      duration: {
        text: "4 min",
        value: 4,
      },
      status: "OK",
    }
  ],
}

I want two data merged in distanceMatrixData as below (also all the objects in elements from both iteration to be merged to elements of distanceMatrixData so that i get the merged data) :

{
  elements: [
    {
      distance: {
        text: "2 m",
        value: 2,
      },
      duration: {
        text: "2 min",
        value: 2,
      },
      status: "OK",
    },
    {
      distance: {
        text: "3 m",
        value: 3,
      },
      duration: {
        text: "3 min",
        value: 3,
      },
      status: "OK",
    },
        {
      distance: {
        text: "4 m",
        value: 4,
      },
      duration: {
        text: "4 min",
        value: 4,
      },
      status: "OK",
    },
    {
      distance: {
        text: "4 m",
        value: 4,
      },
      duration: {
        text: "4 min",
        value: 4,
      },
      status: "OK",
    }
  ],
}

Flicker during React animations

Background: I am using Web Animations API (native JavaScript) to translate elements (div’s) horizontally to visualize sorting algorithms. I am also using React which handles the rendering of these elements by the JSX.

Problem: There is a screen flickering after I have completed the swapping animations (using Web Animations) but before I have set the state (useState hook) of the now-ordered elements. It is not recommended to manipulate the DOM outside of the React component, but this appears to be the only option because React does not appear to support animations natively for this use case. The workaround I have employed is reversing/cancelling the animations after they have completed for the elements, quickly restoring them to their original (React-managed) positions, and calling setState(). This results in intermittent flickering of the original unsorted state and occasional improper rendering (elements offscreen).

Similar implementation to post.

Code:

Animation Code:

    let previousAnimation = Promise.resolve();
    for (const animation of swapAnimations) {
        // Redacted code to compute $leftBlock and $rightBlock [...]

        previousAnimation = Promise.all([previousAnimation]).then(() => {
            // Timing options
            const timing = {
                duration: 1000,
                fill: "forwards",
            };

            // Left element moves right
            const leftMove = [
                {transform: `translateX(${LEFT_POSITION}px)`, offset: 0.0},
                {transform: `translateX(${RIGHT_POSITION}px)`, offset: 1.0}
            ];
    
            // Right element moves left
            const rightMove = [
                {transform: `translateX(${RIGHT_POSITION}px)`, offset: 0.0},
                {transform: `translateX(${LEFT_POSITION}px)`, offset: 1.0}
            ];

            // Play animations
            const leftAnimation = leftBlock.animate(leftMove, timing);
            const rightAnimation = rightBlock.animate(rightMove, timing);

            // Chain animations such that next pair of animations start 
            // after the current pair of animations finishes
            return Promise.all([leftAnimation.finished, rightAnimation.finished]);
        }).catch((reason) => console.log(new Error(reason)));
    }

Restore React State Workaround:

// Outside of previous code's loop
previousAnimation = previousAnimation.then(() => {
    for (const block of blocks) {
        // Restore initial state
        const restoreAnimation = block.animate({
            transform: `translateX(0)`,
        }, {
            // Options to try to fix screen flicker
            duration: 0,
            fill: "forwards",
            easing: "step-end",
            delay: 1
        });
        restoreAnimation.finished.then(() => {
            // Also tried this, not sure if it changes anything to cancel
            // finished animations
            block.getAnimations().forEach((animation) => animation.cancel());
        });

        // $sortedBlocks is computed earlier on
        // I have tried moving this line to before, in-line with, and after 
        // the restore code above. The screen flicker persists
        setBlocks(sortedBlocks);
    }
});

Potential Solutions:

  1. Timing manipulation did not seem to work for me thus far. I tried making the restore animation as fast as possible by setting the KeyframeEffect() options but it still renders the flicker unfortunately. Is there anything else I can try related to this?
  2. React Transition Group is natively supported but does not appear to fit the use case as it only appears to work for components entering/exiting DOM as per this guide. The elements I am trying to animate are already in the DOM, so Hooks don’t really apply I believe.
  3. External React animation libraries (React Spring, Framer Motion, etc.) would be ideally be avoided. I have not explored any of these as I trying to not import any third-party libraries or frameworks. Would one of these work for this task? Maybe something like this?
  4. Window.requestAnimationFrame() is another native JS animation method that could work as per link. But as this would still be a non-React implementation, it seems probable that the DOM rendering issues I am experiencing would persist.

Question (TLDR): The screen flickers after the JS animation finishes because I have to restore the pre-animation DOM quickly in order to maintain React state for proper rendering. How can I fix this? Any help is greatly appreciated. Thanks.

Update: I have also looked into CSS Transitions/Animations. This is also not feasible because the animations are dynamic and based on element positions which vary greatly. Thus these animations cannot be reduced into finite CSS classes unfortunately.

AppShellMain in Mantine covers the entire screen

Im creating a log in with next and Mantine
my code:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='es'>
      <Head>
        ...
      </Head>
      <body>
        <AuthUserProvider>
          <MantineProvider theme={theme}>
            <Notifications position="top-left" zIndex={1000} autoClose={9000} limit={5} />
            <AppShell >
              <AppShellMain>{children}</AppShellMain>
              <AppShellFooter pos='unset'>
                <Footer />
              </AppShellFooter>
            </AppShell>
          </MantineProvider>
        </AuthUserProvider>
      </body>
    </html >
  );
}

AppShellMain is using all the height of the screen, and to can watch the AppShellFooter i need to sroll down

main
as you can see the childre doesn’t use all the height
children

I would like to fit the size or something to can see the footer but without use position fixed

Tensorflow js cross product?

I’m converting some numpy code to tensorflow js. It calls to cross product two vectors:

n = [0.61237244, -0.35355339, 0.70710678]
u = [0.5, 0.8660254, 0]
cross(n,u)

Looking through the tensorflow js api, I see nothing for calculating the cross product? Seems like the python libraries have tf.cross. Does the JS library have an equivalent or do I need to manually calculate it? If so can someone provide a code snippet of doing a cross product with tfjs?

Unententional outline around canvas shapes

I am making a 3d engine, and noticed an outline around every shape that is drawn. I’ve tried a few ways to get rid of this, like image-rendering: pixelated; in the css for the canvas, ctx.imageSmoothingEnabled = false;, and I also tried adding my own outline, but that was too laggy. Is there any way to fix this?

plane made of triangles with an unwanted outline

I’ve searched google and asked chatGPT, but they all went straight to what I’ve already tried. Please help.

Why am I not able to pass a Array of custom React components?

I am new to StackOverflow and asking questions and such, so bear with me, and let me know if I am missing any useful information. I am working on a productivity web app for my fiance for her job, and this is a notes section of the app. I currently have the program fetching from an API I made, storing the code in a state variable, and then I have a JSX expression in the component to map the list of notes retrieved from the server. Here is kind of how it is setup:

const Notes = () => {
    const [notesList, setNotesList] = useState([]);
    useEffect(() => {
        //loadNotes runs a fetch GET request to the server, here's what is being returned in the :
        //{notes: [{ title: "Title", content: "This is the content of the note.", lastModified: "" }, { title: "Title 2", content: "This is the content of the second note.", lastModified: "" }]}

        loadNotes().then(data => setNotesList(data.notes))
    }, [])

    return
        <div className="notes-list">{notesList.map(item => return <NoteTab title={item.title} content={item.content} lastModified={item.lastModified} />)</div>
}

Every time I run the program, I receive this error:
Objects are not valid as a React child (found: object with keys {title, content, lastModified}). If you meant to render a collection of children, use an array instead.

I have tried a bunch of different things, like spread operators on the notesList in the JSX, mapping in the useEffect function, taking off the return from the mapping, and a bunch more. Any suggestions would be great as I’ve been stuck on this for two days. Thanks!

Can promise constructor throw and resolve at the same time?

I have this issue in my working code (Scheme Interpreter in JavaScritp called LIPS) I have a Promise constructor where I throw and resolve at the same. But the code is a bit complex and there is unpromise function that handles promises or simple values in a lot of places. The code may or may not be async.

And in that code, I have basically code like this:

function x() {
  return new Promise(resolve => {
    resolve();
    throw new FakeError("<ZONK>");
  });
}

I’m almost sure the code is pretty much the same, I have resolved and thrown in the Promise constructor. The FakeError was added inside the try..catch macro to break the evaluation when there is an exception in the user code:

(let ((result #f))
  (try
   (begin
     (set! result 1)
     (throw 'ZONK)
     (set! result 2))
   (catch (e)
          (set! result 3)))
  (t.is result 3))

This is a basic test that I use to test if it works. And It does:

If I use:

(try (throw 'ZONK) (catch (e) 10))

it evaluates to 10 so it’s working perfectly fine.

This is part of my real code:

This is code that triggers a macro, invoke is call to the function attached to the macro:

function evaluate_macro(macro, code, eval_args) {
    function finalize(result) {
        if (result instanceof Pair) {
            result.markCycles();
            return result;
        }
        return quote(result);
    }
    try {
        var value = macro.invoke(code, eval_args);
        return unpromise(resolve_promises(value), function ret(value) {
            if (!value || value && value[__data__] || self_evaluated(value)) {
                return value;
            } else {
                return unpromise(evaluate(value, eval_args), finalize);
            }
        }, error => {
            if (!(error instanceof IgnoreException)) {
                throw error;
            } else {
                console.log('<<<ERROR>>>');
            }
        });
    } catch (error) {
        if (!(error instanceof IgnoreException)) {
            throw error;
        } else {
            console.log('<<<EXCEPTION>>>');
        }
    }
}

and here is ‘try’ macro:


new Macro('try', function(code, { use_dynamic, error }) {
    return (new Promise((resolve, reject) => {
        let catch_clause, finally_clause;
        if (LSymbol.is(code.cdr.car.car, 'catch')) {
            catch_clause = code.cdr.car;
            if (code.cdr.cdr instanceof Pair &&
                LSymbol.is(code.cdr.cdr.car.car, 'finally')) {
                finally_clause = code.cdr.cdr.car;
            }
        } else if (LSymbol.is(code.cdr.car.car, 'finally')) {
            finally_clause = code.cdr.car;
        }
        if (!(finally_clause || catch_clause)) {
            throw new Error('try: invalid syntax');
        }
        function finalize(result) {
            resolve(result);
            throw new IgnoreException('[CATCH]');
        }
        let next = (result, next) => {
            next(result);
        }
        if (finally_clause) {
            next = function(result, cont) {
                // prevent infinite loop when finally throw exception
                next = reject;
                args.error = (e) => {
                    throw e;
                };
                unpromise(evaluate(new Pair(
                    new LSymbol('begin'),
                    finally_clause.cdr
                ), args), function() {
                    cont(result);
                });
            };
        }
        const args = {
            env: this,
            use_dynamic,
            dynamic_env: this,
            error: (e) => {
                var env = this.inherit('try');
                if (catch_clause) {
                    const name = catch_clause.cdr.car.car;
                    if (!(name instanceof LSymbol)) {
                        throw new Error('try: invalid syntax: catch require variable name');
                    }
                    env.set(name, e);
                    let catch_error;
                    var args = {
                        env,
                        use_dynamic,
                        dynamic_env: this,
                        error: (e) => {
                            reject(e);
                            throw new IgnoreException('[CATCH]');
                        }
                    };
                    const value = evaluate(new Pair(
                        new LSymbol('begin'),
                        catch_clause.cdr.cdr
                    ), args);
                    unpromise(value, function(result) {
                        if (catch_error) {
                            reject(catch_error.error);
                        } else {
                            next(result, finalize);
                        }
                    });
                } else {
                    next(value, finalize);
                }
            }
        };
        const value = evaluate(code.car, args);
        unpromise(value, function(result) {
            next(result, resolve);
        }, args.error);
    })).catch(e => {
        console.log('CATCHED');
    }).then(x => {
        console.log('RESOLVED');
        console.log({x});
        return x;
    });
})

And here is unpromise function (it’s basically maybe async like old jQuery differed).

function unpromise(value, fn = x => x, error = null) {
    if (is_promise(value)) {
        var ret = value.then(fn);
        if (error === null) {
            return ret;
        } else {
            return ret.catch(error);
        }
    }
    if (value instanceof Array) {
        return unpromise_array(value, fn, error);
    }
    if (is_plain_object(value)) {
        return unpromise_object(value, fn, error);
    }
    return fn(value);
}

unpromise_object and unpromise_array is the equivalent for arrays and objects.

The important part is finalize function that is executed last:

function finalize(result) {
    resolve(result);
    throw new IgnoreException('[CATCH]');
}

evaluate can return promise or not depending on the scheme code used, some functions and macros are async some don’t. A more user friendly API exec always returns a Promise.

and evaluates catch exception and call error option:

function evaluate(code, { env, dynamic_env, use_dynamic, error = noop, ...rest } = {}) {
    try {
        // ... evaluation code
        return result;
    } catch (e) {
        error && error.call(env, e, code);
    }
}

and when executing this code:

(let ((result #f))
  (try
   (begin
     (set! result 1)
     (throw 'ZONK)
     (set! result 2))
   (catch (e)
          (set! result 3)))
  (t.is result 3))


(print (try (begin (throw 'ZONK) (print "x")) (catch (e) 10)))

the logs looks like this:

RESOLVED
{ x: true }
<<<EXCEPTION>>>
RESOLVED
{ x: undefined }
<<<EXCEPTION>>>
RESOLVED
{ x: LBigInteger { __value__: 10n, __type__: 'bigint' } }
10

Can you explain why I can’t reproduce this code with simple example like the first snippet, here is a copy:

function x() {
  return new Promise(resolve => {
    resolve();
    throw new FakeError("<ZONK>");
  });
}

await x() evaluates to undefined.

This function only resolves but doesn’t throw. Can someone explain how this is possible? I want to create a reproduction to report a bug to some library but I’m not able to create an example that works the same as my original code.

I was checking if the value returned by evaluate is a promise:

console.log(is_promise(value));

and for my base scheme code for try and catch it returns false.

Why isn’t array[i] < min && min = array[i]; grammatically correct?

 <script>
    // let min =;
    // let max = ;

    function minMax(array) {
      let min = 0;
      let max = 0;

      for (let i = 0; i < array.length; i++) {
        array[i] < min && min = array[i];
        array[i] > max && max = array[i];




      }

    }
  </script>

VS Code says there are two problems, ‘;’ is expected, but I’ve already provided the ‘;’.
enter image description here

I don’t know what to do, a if sentence can avoid this issue, but I’d like to know why the above way isn’t working.

Webpack: `Field ‘browser’ doesn’t contain a valid alias configuration`. Using alias with trailing forward slash “@/”

I was trying to build my app with webpack and getting the error in the title of this question.

My config was:

module.exports = {
   mode: "development",
   entry: './src/index.ts',
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
   },
   module: {
      rules: [
         {
            test: /.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
         },
         {
            test: /.css$/,
            use: ["style-loader", "css-loader"],
            exclude: /node_modules/,
         }
      ],
   },
   resolve: {
      extensions: ['.ts', '.js'],
      alias: {
         "@/": path.resolve(__dirname, "/src/"),
      }
   },
   stats: {
      errorDetails: true
   },
};

I had to change the resolve property to:

   resolve: {
      extensions: ['.ts', '.js'],
      alias: {
         "@": path.resolve(__dirname, "./src"),
      }
   },

And it worked. I also tried to set the second argument to resolve to “./src/” and it worked. But if I remove the dot at the beginning of the string, so it is “/src” or “/src/”, i get the same error.

This gives me some doubt. Does webpack have a problem when there’s a / at the end of an alias like in “@/”? Based on the errors that i got, i seems like webpack wasn’t recognizing ‘@/’ as an alias and taking it as a literal part of the path.

An extra thing, how does the path.resolve method work? What does it do with its arguments? I’ve currently got no knowledge of node.js.

At what point is it worth creating custom DOM-manipulating functions? [JS] [closed]

EX: I have a vanilla script in a PHP file that affects multiple nodes in the DOM. I am very commonly doing {element}.style.display = "none" and {element}.style.display = "block".

Example functions

This image is an example of about 1/3rd of the {element}.style.display = {display}‘s I am having to do. Assume there are 10-15 lines using this DOM assignment. Example of how I am making assignments now

Trying to sum key values of an object (basically 14 and 16) using .map() and it gives rather a strange result

I am learning JavaScript and I like to sum the grades[0].grade and grades[1].grade (basically 14+16), the result is 30.

I did the coding using .reduce() method as seen below:

function getSumGrades(grades) {

  return grades.reduce(function(acc, grade) {
    return acc += grade.grade
  }, 0)
}

// Sample usage - do not modify
let grades = [{
    name: "Sam Blue",
    grade: 14
  },
  {
    name: "Charlie Bron",
    grade: 16
  }
];
console.log(getSumGrades(grades));

But I like to also practise .map() , so I wanted to code with .map and for some reason it gives [ 14, 30 ] as output.

The code, that gives incorrect output is this one:

function getSumGrades(grades) {
  let sum = 0;
  return grades.map(function(grade) {
    return sum = sum + grade.grade;
  })
}

// Sample usage - do not modify
let grades = [{
    name: "Sam Blue",
    grade: 14
  },
  {
    name: "Charlie Bron",
    grade: 16
  }
];
console.log(getSumGrades(grades));

What did I do wrong?

Scroll event triggers multiple times even when debounced

I have the following component where on scroll to the end, we load more data to page.

I am loading 12 images at a time, when we reach the end of page.

But at present, it easily triggers approx 10 api calls each time instead of 1.

Ending up with a lot more images then intended at a time.

There are 2 issues here closely related to on scroll data load.

  1. During initial load, api called with page 1 which is right. But When we scroll, the api call triggers
    and fetches same data again for page 1 during the first scroll. But page has been set to 2 after initial load. Why is it not loading page 2 instead? This only happens for first scroll. From then on is fine, data wise.
  2. As mentioned, why is it triggering multiple api calls on scroll?
    I have debounce and using the isLoading state to control it which doesn’t seem to matter.

The component

import debounce from 'lodash.debounce';
import useStore from "../utils/store.js"; // zustand sore
import React, {useEffect, useState} from "react";
import {fetchItems} from "../utils/rest.js";
import MyComponent from "./MyComponent.jsx";

const Layout = () => {
 const setItems = useStore((state) => state.setItems);
 const page = useStore((state) => state.page);
 const setPage = useStore((state) => state.setPage);

 const [isLoading, setIsLoading] = useState(false); // hook or zustand state, same outcome

 const debouncedFetchItems = debounce(() => fetchItems(page), 50);

 const updatePageAndItems = (newItems) => {
  setPage();
  setItems(newItems);
 };

 const handleScroll = () => {
  const offset = 1000;
   if (!isLoading && window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - offset) {
    setIsLoading(true);
     const promise = debouncedFetchItems();
     promise?.then(newItems => {
      updatePageAndItems(newItems)
      setIsLoading(false)
     });
   }
 };

 useEffect(() => {
   fetchItems(page).then(newItems => updatePageAndItems(newItems));
 }, []);

 useEffect(() => {
  window.addEventListener('scroll', handleScroll);
 },[page]);

 return (
   <MyComponent /> {/* This component loads data based on using the global state value from items */}
 );
};

export default Layout;

Just for reference, this is store.js.

import { create } from "zustand";
import { combine } from 'zustand/middleware'

const initialValues = {
  items: [],
  page: 1,
}

const useStore = create(
  combine(
    { ...initialValues },
    (set) => ({
      setItems: (newItems) => set((state) => ({ items: [...state.items, ...newItems] })),
      setPage: () => set((state) => ({ page: state.page + 1 })),
    })
  ),
)

export default useStore;

Note:

I can’t do this. (no dependency)

 useEffect(() => {
  window.addEventListener('scroll', handleScroll);
 },[]);

It doesn’t multi trigger api calls in this case. But it permanently ends up taking page as value 1. handleScroll never considers the state getting updated.

Thus this works, but as mentioned, ends up with multiple api calls.

 useEffect(() => {
  window.addEventListener('scroll', handleScroll);
 },[page]);

Unable to print the HTML lines from paragraph through queryselector from DOM

I wrote a rock, paper, scissor game and set the score in local storage using getItem and setItem .I wrote a paragraph with class=jsscore and tried to display the HTML content inside the script with a query selector but I couldn’t do it. what am I doing wrong?

     <!DOCTYPE html>
     <title>video exercises</title>
     <body>
        <script>

            let score=
            JSON.parse(localStorage.getItem
            ('score')) ||{
                wins:0,
                losses:0,
                Ties:0
                }; 
              
            document.querySelector('.js-score').innerHTML = `wins: ${score.wins}, losses:       ${score.losses},Ties: ${score.Ties}`;
        
        
            function pickComputerMove()
            {
                const randomNumber= Math.random();

                if(randomNumber >=0 && randomNumber <1/3)
                {
                computerMove='rock';
                }

                else if(randomNumber >=1/3 && randomNumber <2/3)
                {
                computerMove='paper';
                }

                else if(randomNumber >=2/3 && randomNumber <1)
                {
                    computerMove='scissors';
                }

                return computerMove;

            }
            function playGame(playerMove){
                const computerMove=pickComputerMove();
            
                let result='';
                if(playerMove === 'scissors')
                {
                    if(computerMove === 'rock')
                    {
                        result='you lose';
                    }

                    else if(computerMove ==='paper')
                    {
                        result='you win';
                    }

                    else if(computerMove ==='scissors')
                    {
                        result='Tie';
                    }

                    if(result === 'you win'){
                        score.wins +=1;
                    }

                    else if(result === 'you lose'){
                        score.losses +=1;
                    }

                    else if(result ==='Tie'){
                        score.Ties +=1;
                    }

                    localStorage.setItem('score',JSON.stringify(score));
                    
                    alert(`you picked ${playerMove},
                    computer picked ${computerMove},${result}
                    wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
                }

                else if(playerMove ==='rock')
                {
                    if(computerMove ==='rock')
                    {
                        result='Tie';
                    }
                    else if(computerMove ==='paper')
                    {
                        result='you lose';
                    }
                    else if(computerMove ==='scissors')
                    {
                        result='you win';
                    }
                    if(result === 'you win'){
                        score.wins +=1;
                    }
                    else if(result === 'you lose'){
                        score.losses +=1;
                    }
                    else if(result ==='Tie'){
                        score.Ties +=1;
                    }
                    alert(`you picked ${playerMove},
                    computer picked ${computerMove},${result}
                    wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
                }
                
                else if(playerMove ==='paper')
                {
                    if(computerMove ==='rock')
                    {
                        result='you win';
                    }

                    else if(computerMove ==='paper')
                    {
                        result='Tie';
                    }

                    else if(computerMove ==='scissors')
                    {
                        result='you loose';
                    }

                    if(result === 'you win'){
                        score.wins +=1;
                    }

                    else if(result === 'you loose'){
                        score.losses +=1;
                    }

                    else if(result ==='Tie'){
                        score.Ties +=1;
                    }
                    alert(`you picked ${playerMove},
                    computer picked ${computerMove},${result}
                    wins: ${score.wins},losses: ${score.losses},Ties: ${score.Ties}`);
                }
               

            }
            
            </script>
            <button onclick="
            playGame('rock');
            ">Rock</button>

        <button onclick="
        playGame('paper');
        ">paper</button>

        <button onclick="
        playGame('scissors');
        ">scissors</button>
        
        <p class="js-score"></p>
        <button onclick="
        score.wins=0;
        score.losses=0;
        score.Ties=0;
                localStorage.removeItem('score');
        ">Reset score</button>
   </body>
   </html>
    
            
    </body>
    </html>

I also added an extra button called restore button,it restores and sets all the values to zero