typescript method decoretor code not working / running

i am following code with mosh typescript course
while doing it i faced dis following problem

the code given below working perfectly in mosh video but in my pc and in playground it’s not working. i don’t know dis topic quit well so i don’t understand what i did wrong in my code

i hope u guys may helpful
comment down below if anyone knows what’s wrong going on with my code

function Log(target: any, methodName: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value as Function;

  descriptor.value = function (...args: any) {
    console.log("before");
    original.call(this, ...args);
    console.log("after");
  };
}

class Person {
  @Log
  say(message: string) {
    console.log("Person says" + message);
  }
}

let person = new Person();
person.say("hello");

String to DateTime convertion for the Date Property in the model

I’m trying to pass an ajax object to a controller method. I’m using a date property in the model. But after debugger hit on the controller method, date value become default date like {01-01-0001 00:00:00} instead of a specific date. But other properties are getting actual value. In the ajax object dataParams, date is in string format. In model, it is declared as DateTime datatype. So, I tried to convert the string value to the Date format using below syntax. But it doesn’t help. Can anyone suggest.

JavaScript:

var dataParams = {                    
        MDate: new Date(MDate),  //Date.parse(MDate),
        Status: "hh",
        CountryID: 8
        }
$.ajax({
        url: '../Monitoring/ActionGrid',
        type: 'GET',
        async: false,
        dataType: "html",
        datatype: "application/json",
        data: dataParams,
        cache: true,
        headers: {
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache',
            'Expires': '0'
        },
        success: function (dataResponse) {
            //..
        }, failure: function (data) {
            //..
        },
        error: function (data) {
            //..
        }
    });

MonitoringController:

public JsonResult ActionGrid(ActionEntity actionEntity)
{
    //..
}

ActionEntity Model:

public class ActionEntity
{        
    public string CountryID { get; set; }        
    public string Status { get; set; }        
    public DateTime MDate { get; set; }        
}

Here is the value if we check console.log(MDate) before sending the ajax request.

enter image description here

Mocked Jest resolved value not being called but the actual function implementation

I’m working with ts-jest and I have the following in handler.ts and I’m having trouble mocking the getToken function that’s being called inside fetchData, since I only want to test fetchData, I want to mock the response from getToken so it wouldn’t make the axios request, but somehow when I run the test I see the “called getToken” console.

I know that moving getToken to a different file would work but I want to understand why is this case not working since I might come across this scenario multiple times

export const getToken = async (params: {}): Promise<string> => {
  try {
    console.log("called getToken");
    const oauthResponse = await axios.post(`url`, params);
    return oauthResponse.data.token;
  } catch (e) {
    throw new Error("Exception caught getting token");
  }
};

export const fetchData = async (params: {}): Promise<any> => {
  try {
    console.log("called fetchData");
    const tokenValue = await getToken(params);
    const response = await axios.post(`url`, params, {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + tokenValue,
      },
    });
    return response.data.body;
  } catch (e) {
    throw new Error("Exception caught");
  }
};

And this is my handler.test.ts

import { fetchData, getToken } from "./handler";

...

  (getToken as jest.Mock).mockResolvedValue(mockedTokenValue);
  (axios.post as jest.Mock).mockResolvedValue(response);

  const result = await fetchData(params);

...

I’ve also tried

jest.mock(".handler", () => ({
  ...jest.requireActual("./handler"),
  getSFEToken: jest.fn().mockImplementation(() => {
    return "mocked_token";
  })
}));

This is my jest.config.ts and my tsconfig.json for reference

import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "node",
};

export default config;

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "commonjs",
    "target": "es5",
    "sourceRoot": "src",
    "outDir": "dist",
    "noImplicitAny": false,
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "declaration": false,
    "listFiles": false,
    "downlevelIteration": true,
    "lib": [
      "es5",
      "es6",
      "es2015",
      "es2015.promise",
      "dom",
      "esnext.asynciterable"
    ]
  },
  "include": ["src/**/*"],
  "exclude": [".vscode", ".serverless", ".git", "node_modules/**/*", "dist"],
  "compileOnSave": true,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  },
  "baseUrl": "./",
  "paths": {
    "*": ["src/*"]
  }
}

Ps. also reviewed this https://jestjs.io/docs/bypassing-module-mocks

Tried multiple mocking approaches and spies but the actual getToken implementation is being called rather than the mocked value

How to make Custom Action of Thingsboard to accept users input and act accordingly?

Thingsboard version: v3.6.2PE

Widget: Entities hierarchy

I’m using custom actions (action source: on node selected). I’m able to navigate to different dashboards based on EntityType using the custom action. I have a new situation wherein the custom action should receive input from the user. For example,

  • Upon clicking on a node, a popup should be displayed that has several clickable options.
  • When one of those options is clicked, the custom action should navigate to the dashboard based on the selected option.

Following is my snippet that displays a popup when clicking on a node.

function showActionPopup(title, actions) {
  widgetContext.dialogs.confirm(title, "Select an action:").then(function (selectedAction) {
    if (selectedAction === actions[0]) {
      openDashboardStates("device_fw_n_sw");
    } else if (selectedAction === actions[1]) {
      showAlertDialog("Device Details", "Device details to be displayed here");
    }
  });
}

The above function is called from:

$injector.get(widgetContext.servicesMap.get('entityService')).getEntity(entityId.entityType, entityId.id)
  .subscribe(function (data) {
    if (entityId.entityType == "DEVICE") {
      showActionPopup("Title", ["Open Dashboard1", "Open dashboard2"]);
    } else if (entityId.entityType == "ASSET") {
      showActionPopup("Title", ["Open Asset Dashboard1", "Open Asset Details"]);
    }
  });

The actions as seen in the snippet are exemplary, my actual actions are different.

I get the following using the above code snippets:

enter image description here

It seems widgetContext.dialogs.confirm is not helpful in my case and widgetContext.dialogs.popup is not available in Thingsboard.

How can this problem be solved?

Thank you.

How to make modal not popup when loading the page

this is my first website and i kinda just copy pasted the js script for the popup. everything is ok but everytime the page is refreshed a popup shows even though its set so its only when i click an image.

heres the code that i used for the overlay

<div class="overlay" id="overlay">
            <div class="popup-container">
                <span class="close-btn" onclick="closePopup()">&times;</span>
                <img src="" alt="Popup Image" class="popup-image" id="popup-image">
                <div class="text-box" id="popup-text">
                    
                </div>
            </div>
        </div>

and heres the js script

<script>
        function openPopup(name, sex, birthday, age, color, description) {
    var overlay = document.querySelector('.overlay');

    if (overlay) {
        overlay.style.display = 'flex';
        document.getElementById('popup-image').src = `images/${name.toLowerCase()}.jpg`;
        document.getElementById('popup-text').innerHTML = `
            <p>Name: ${name}</p>
            <p>Sex: ${sex}</p>
            <p>Birthday: ${birthday}</p>
            <p>Age: ${age}</p>
            <p>Color: ${color}</p>
            <p>Description: ${description}</p>`;
    }
}

    
        function closePopup() {
            document.getElementById("overlay").style.display = "none";
        }
    </script>

Why my code in javascript do not working? For is not add ${} in container

let container = document.querySelector(`.container`);

let titles = [`First`, `Second`, `Third`, `Fourth`, `Fiveth`, 
`Sixth`, `Seventh`, `Eighth`, `Nineth`];
let dicsriptioes = [
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`,
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`, 
    `Some quick example text to build on the card title and make up the bulk of the card's 
    content always.`
];

let avaible = [true, true, true, true, true, false, false, true, false];

for (let i = 0; i < titles.length; i++) {
    let title = titles[i];
    let dicsriptios = dicsriptioes[i];
    let isAvaible = avaible[i];
    let className;

    if (isAvaible) {
        className = `card`;
    } else {
        className = `card not-avaible`;
    }

    container += `
        <div class="${className}">
                <img src="assets/${i + 1}menu-Image.jpg" class="card-img-top">
                <div class="card-body">
                  <h5 class="card-title">${title}</h5>
                  <p class="card-text">${dicsriptios}</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
        </div>
    `;
}

ClassName container is right, Method forEarc() also does not work. Please, help me! In httm only div with class container, i do not understand, why it wrong, becouse i alreaby doing same js code and add card for.

Why do we not need to install the eslint plugins in our end user app, to use @vercel/style-guide?

This is a question about plugin modules resolution in ESLint, when using pnpm. There are many articles and answers about this online, I have read most of it.

I have also educated myself on pnpm’s node_modules structure and ESLint’s resolution algorithms. I still do not understand why we do not need to install the plugins used under the hood by the @vercel/style-guide module.

This is what the ESLint docs says about plugin resolution:

  1. Plugins are resolved relative to the config file. In other words,
    ESLint loads the plugin as a user would obtain by running
    require('eslint-plugin-pluginname') in the config file.

  2. Plugins in the base configuration (loaded by extends setting) are relative to the
    derived config file. For example, if ./.eslintrc has extends: ["foo"]
    and the eslint-config-foo has plugins: ["bar"], ESLint finds the
    eslint-plugin-bar from ./node_modules/ (rather than
    ./node_modules/eslint-config-foo/node_modules/) or ancestor
    directories. Thus every plugin in the config file and base
    configurations is resolved uniquely.

@vercel/style-guide exposes some ESLint configs, like the react.js config, which in turn will extend: plugin:eslint-plugin-react, which in turn contains plugin: { react }.

With that in mind, it is safe to assume that when our application extends @vercel/style-guide/react is should be necessary to install the plugins it uses, i.e. eslint-plugin-react directly as a dependency of the end user app.

I tried it, and for some reason it is not necessary to install them.

Why is that? What am I not seeing about the resolution of these plugins?

React JS Error: is not defined react/js-no-undef

I don’t understand where the error is,It’s my first time working with react.jsx. this is the code

app.js

import './App.css';
import Navbar from './components/Navbar'

function App() {
  return (
    <div className='App'>
      <Navbar/>
    </div>
  );
}

export default App;

Navbar.js

import { Component } from 'react';
import './Navbar.css';
import {Link} from 'react-router-dom'

class Navbar extends Component {
    render() {
        return(
            <nav className='NavbarItems'>
                <h1 className='navbar-logo'>Trippy</h1>
                <ul className='nav-menu'>
                    <li>
                        <a href='/'> <i className="fa-solid fa-house-user"></i> Home </a>
                    </li>
                </ul>
            </nav>
        )
    }
}

export default Navbar

I looked for syntax errors and couldn’t find anything.

Check if an element is inside an element with Jquery.contains() [closed]

In jQuery document, the contains() method should be check if an element is inside a given element. So it will return true or false. https://api.jquery.com/jQuery.contains/

So here my table:

const tbody = $('table#data tbody');
const trLine = $('tr[data-line="3848"]');
if ($.contains(trLine, tbody)) {
  console.log('Found');
} else {
  console.log('Not Found')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="data">
  <tbody>
    <tr data-line="3848">
      <td></td>
    </tr>
    <tr data-line="0980">
      <td></td>
    </tr>
  </tbody>
</table>

But it gives me “Not Found”. What i’m doing wrong?

How do I leave only the arrows in TransformControls mode translate?

At the moment TransformControls fits my needs but they have extra stuff like arrows in distance of the object and some squares. Is there anyway of me turning these off and instead keep only the arrows?
enter image description here

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';

const boxGeometry = new THREE.BoxGeometry();
const theeBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
const theeBox = new THREE.Mesh(boxGeometry, theeBoxMaterial);
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

const gridHelper = new THREE.GridHelper(30);
scene.add(gridHelper);

scene.add(theeBox);

const orbitControls = new OrbitControls(camera, renderer.domElement);
const transformControls = new TransformControls(camera, renderer.domElement);
transformControls.attach(theeBox);
transformControls.setMode('translate')
scene.add(transformControls);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(50, 30, 20);
camera.lookAt(0, 0, 0);

const rayCaster = new THREE.Raycaster();
const mousePos = new THREE.Vector2();

let isDragging = false;

transformControls.addEventListener('dragging-changed', function (event) {
    orbitControls.enabled = !event.value;
    isDragging = event.value;
});



function animateTheeBox() {
    if (!isDragging && !orbitControls.enabled) {
        rayCaster.setFromCamera(mousePos, camera);
        const intersect = rayCaster.intersectObjects([theeBox]);

        if (intersect.length === 0) {
            const moveSpeed = 0.1;
            camera.position.x += (mousePos.x - 0.5) * moveSpeed;
            camera.position.y += (mousePos.y - 0.5) * moveSpeed;
            camera.lookAt(0, 0, 0);
        }
    }

    renderer.render(scene, camera);
}

renderer.setAnimationLoop(animateTheeBox);

Minimal Reproducing Code. Thanks in Advance!

How can I exclude an index of an array from being looped in a forLoop() after it has been used once? (Native JS)

Currently, I am creating a random group generator. Right now, I have a for loop that creates a div and inserts it into a larger (parent?) div. In these smaller divs, I am using a random number to create a random index that is used to display random names.

Problem: However, I do not know how to make it so that after one index is chosen, it cannot be used again.

Question: How can I make a for loop that excludes a number after it is used once?

const inputArticle = document.querySelector('#input-article');
const inputForm = document.querySelector('#input-form');
const table = document.querySelector('#table');
const groupOptions = document.querySelector('select[ name="group-options" ]');
const createTeamsButton = document.querySelector('#create-teams-button');
const outputArticle = document.querySelector('#output-article');
const outputMainDiv = document.querySelector('#output-main-div');

let peopleArray = [];
let numberPeople = 0;
let rowNumber = 0;
let groupNumber = 1;
let maxPeopleInGroup = 0;
let maxNumberGroups = 0;

function addRow(person) {
    let row = table.tBodies[0].insertRow(-1);
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let cell3 = row.insertCell(2);
    let removeButton = document.createElement("button");

    cell1.style.width = "5vmin";
    cell1.style.height = "5vmin";
    cell1.style.fontSize = "18pt";
    cell1.style.fontWeight = "300";

    cell2.style.width = "5vmin";
    cell2.style.height = "5vmin";
    cell2.style.fontSize = "18pt";
    cell2.style.fontWeight = "300";

    cell3.style.width = "5vmin";
    cell3.style.height = "5vmin";
    cell3.style.fontSize = "18pt";
    cell3.style.fontWeight = "300";
    
    removeButton.dataset = person;
    removeButton.innerText = `Remove ${person.firstName} ${person.lastName}`;
    removeButton.setAttribute("type", "button");

    removeButton.addEventListener('click', (event) => {
        peopleArray = peopleArray.filter(p => p != person);
        row.remove();
    })

    cell1.innerText = person.firstName;
    cell2.innerText = person.lastName;
    cell3.appendChild(removeButton);
}

function createNames(event) {
    let person = {
        firstName:  document.getElementById(`firstName`).value,
        lastName: document.getElementById(`lastName`).value
    }

    event.target.reset();
    addRow(person);
    peopleArray.push(person);
    numberPeople++;
    //alert(JSON.stringify(peopleArray));
}

function submit() {
    if (groupOptions.value != "") {
        inputArticle.classList.add("hidden");
        outputArticle.classList.remove("hidden");
        createGroups();
    }
}

function createGroups() {
    maxPeopleInGroup = groupOptions.value;
    maxNumberGroups = Math.floor(maxPeopleInGroup / peopleArray.length);
    let divWidth = 5 * maxPeopleInGroup;
    let divHeight = 7.5 * maxPeopleInGroup;

    while (numberPeople / maxPeopleInGroup > maxNumberGroups) {
        maxNumberGroups++;
    }

    for (let i = 0; i < maxNumberGroups; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", `group${groupNumber}`);
        div.style.width = `${divWidth}vw`;
        div.style.height = `${divHeight}vh`;
        div.style.textAlign = "center";
        div.style.alignItems = "center";
        div.style.fontFamily = "Georgia, 'Times New Roman', Times, serif";
        div.style.fontSize = "18pt";
        div.style.fontWeight = "400";
        div.style.border = "1px solid black";
        outputMainDiv.appendChild(div);
        div.innerHTML = `Group ${groupNumber}:</br>`;

        for (let k = 0; k < maxPeopleInGroup; k++) {
            let index = Math.round(Math.random() * peopleArray.length);
            div.innerHTML += `${peopleArray[index].firstName} ${peopleArray[index].lastName} </br>`;
        }

        groupNumber++;
    }
}     

inputArticle.classList.remove("hidden");
outputArticle.classList.add("hidden");

window.addEventListener('keydown', (event) => {
    if (event.key == 'Enter') {
        if (firstName.value && lastName.value) {
            createNames(event);
        }    
    }
}, false)

inputForm.addEventListener("submit", (event) => {
   createNames(event);
   event.target.reset();
})

createTeamsButton.addEventListener('click', submit);
#input-article.hidden {
    display: none;
}

table {
    text-align: center;
    align-items: center;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    width: 50vmin;
    height: 10vmin;
    font-size: 20pt;
    font-weight: 800;
}

input {
    width: 50vmin;
    height: 5vmin;
    text-align: center;
    align-items: center;
    font-size: 18pt;
    font-weight: 500;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border: 0;
    padding: 0;
}

#group {
    display: flex;
    flex-wrap: wrap;
}

#output-article.hidden {
    display: none;
}

#output-main-div {
    width: 95vw; /*Percentage width of browser*/ 
    height: 95vh; /*Percentage height of browser*/
    border: 1px solid black;
}

#input-article p, #input-article option {
    font-size: 18pt;
}
<!DOCTYPE html>
<html lang="en">

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport", content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <article id="input-article">
            <form method="dialog" id="input-form">
                <table id="table" border="1">
                    <thead>
                        <tr>
                            <th>First Name:</th>
                            <th>Last Name:</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    
                    <tbody></tbody>

                    <tfoot>
                        <tr>
                            <td><input name="first-name" type="text" required placeholder="First Name" id="firstName"></td>
                            <td><input name="last-name" type="text" required placeholder="Last Name" id="lastName"></td>
                            <td>
                                <button type="submit">Add Person</button>
                                <button type="reset">Clear Names</button>
                            </td>
                        </tr>
                    </tfoot>
                </table> 
            </form><br>

            <div id="group">
                <p>Number of people per group:&nbsp;</p>
                <select name = "group-options" required>
                    <option value="">--Select Answer--</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            </div>    

            <div id="buttons">
                <button id="create-teams-button">Randomize Teams</button>
            </div>
        </article>

        <article id="output-article">
            <div id="output-main-div"></div>
        </article>
    </body>
</html>

react swiper – Cannot convert undefined or null to object when using Thumbs module on nextjs modal

while creating swiper thumbs component in next.js 14 Cannot convert undefined or null to object when using Thumbs module this component is thrown this error
swiper v11.0.5

tries this the workaround is
thumbs={{ swiper: thumbsSwiper }}
replace to
thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }} didnt work still issue is present.

import React, { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import "./styles.css";

// import required modules          
import { Navigation, Thumbs, A11y, Scrollbar } from "swiper/modules";

export default function SwiperComp() {
  const [thumbsSwiper, setThumbsSwiper] = useState();
const swiperRef =useRef(null)
  return (
    <>
<ModalWrapper>
      <Swiper
       
        thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}
        modules={[Navigation, Thumbs, A11y, Scrollbar]}


      >
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
  <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
        
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        spaceBetween={10}
        slidesPerView={10}
        watchSlidesProgress={true}
        modules={[Navigation, Thumbs, A11y]}
      >
        

        <SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </SwiperSlide>
<SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </SwiperSlide>
<SwiperSlide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </SwiperSlide>
      </Swiper>
    </>
</ModalWrapper>
  );
}

Blazor – How to access JavaScript from another file

I have a component with some html and some JavaScript. How can I separate the JavaScript code to a file in the wwwroot folder and have that code be accessible in the component? I tried adding <script src="~/app.js"></script> to the App.razor but the functions are not accessable in the component.

How to make my javascript code invalid after i change screen size?

I am trying to create a navigation bar. When the screen size becomes a certain size, I want the tab links to disappear and a button appears to make them expand. This is working as intended, however while I have pushed the button and I have the expanded list, if my screen size changes and increases above the threshold the changes still apply and I can’t find a way to remove them.

The code:

HTML:

<nav>
        <div class="navList">
            <ul>
                <li class = "navImg"><img src="./Images/Logo (1).png" alt="Logo" /></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Collection</a></li>
                <li><a href="#">Wholesale</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <button class="navDropdown">&#9776;</button>
        </div>
    </nav>

CSS:

.navList {
    display: flex;
    background-color: #002F63;
}

.navList ul {
    display: flex;
    margin-bottom: 0;
}

.navList ul li {
    list-style: none;
    margin: 1.7rem;
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.navImg {
    padding: 0;
    margin: 0 !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.navList ul li a {
    text-decoration: none;
    color: white;
}

.navDropdown {
    align-self: right;
    margin-left: auto;
    background-color: #002F63;
    border: none;
    color: white;
    padding-right: 1.5rem;
    font-size: 1.5rem;
    display: none;
}

@media (max-width: 813px) {
    
    .navList ul{
        display: none;
    } 

    .navDropdown {
        display: inline-block;
    }

}

Javascript:

$(".navDropdown").on("click", function () {
    var x = $(".navList ul").css("display");
    if (x === "none") {
        $(".navList ul").css("display","block");
    } else {
        $(".navList ul").css("display","none");
    }
});

I want the navigation bar to return to normal when increasing the screensize after I have pressed the button, but it remains as expanded.