Category: javascript

I am working on a web project where I need to create a vertically scrollable list. My objective is to have the list automatically snap to the nearest item, aligning it to the center of the list, whenever the user stops scrolling.

I’ve tried a CSS approach, where I applied scroll-snap-type to the list container and scroll-snap-align to each list item. This doesn’t seem to work correctly.

Is there a pure CSS solution to ensure the nearest item always snaps to the center upon scroll? Or do I need to use JavaScript to calculate the scroll position and adjust it dynamically? If JavaScript is required, how should I approach this?

Any insights or suggestions on how to achieve this functionality would be greatly appreciated.

.wrapper {
  width: 100vw;
  height: 100vh;
  background-color: #e5ddde;
  display: flex;
  justify-content: center;
}

li {
  text-transform: uppercase;
  font-family: Futura;
  font-size: 40px;
  color: grey;
  scroll-snap-align: center;
}

li.active {
  color: black;
}

ul {
  list-style: none;
  scroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

<div class "wrapper">
  <ul>
    <li>Name One</li>
    <li>Name Two</li>
    <li>Name Three</li>
    <li class="active">Name Four -----</li>
    <li>Name One</li>
    <li>Name Two</li>
    <li>Name Three</li>
    <li>Name Four</li>
    <li>Name One</li>
    <li>Name Two</li>
    <li>Name Three</li>
    <li>Name Four</li>
    <li>Name One</li>
    <li>Name Two</li>
    <li>Name Three</li>
    <li>Name Four</li>
  </ul>
</div>

I am currently designing a banking app to showcase on my portfolio, i have a static JS file container data of users balance, name, etc… i also have a seperate html file for both my login page and logged in area.

My login JS file

// index num
export let indexNum = 0

export const login = (e) => {
    e.preventDefault()
    let emailVal = email.value
    let passwordVal = password.value 

    const renderedUser = data.map((user, index) => {
        if(emailVal === user.email){
            if(passwordVal === user.password){
                window.open(`../home/home.html`)
                indexNum = index
            }
        }

    })
}

loginSubmit.addEventListener('click', login)
export default indexNum

This is my logged in JS file that is trying to recieve the export

import { indexNum } from "../Login/login.js"
// Logout Button

// Name, Balance, Savings, Loans
const name = document.getElementById('banking-welcome')
const balance = document.getElementById('banking-balance-target')
const savings = document.getElementById('banking-saving-target')


const render = (index) => {
    name.textContent = data[index].name
    balance.textContent = `Balance: £${data[index].balance}`
    savings.textContent = `£${data[index].savings}`
}

render(indexNum)

I recieve a TypeError: Cannot read properties of null (reading ‘addEventListener’), why is this?

Any help so the indexNum comes through as an import and not get an error?

I’m currently trying to get my code that I am writing for a software engineering boot camp to pass the test suite on postman. Everything worked fine before I changed my .eslintrc.js file, as well as changing the package.json file devDependencies.

essentially I removed:

"eslint-plugin-react": "^7.33.2"

from:

  "devDependencies": {
    "eslint": "^8.55.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.29.0",
    "nodemon": "^3.0.2",
    "prettier": "^3.1.0"
  }

Then I ran npm install, after the changes to my package.json was made. Now I get the same errors from almost every request that I run, whether It’s a POST, PUT, DELETE, or GET request, they all return this error:

Response contains a JSON object | AssertionError: expected 'text/html; charset=utf-8' to include 'application/json'

Here is an example of one of my requests, so that you can see what I am doing, inside of one of my functions:

module.exports.createItem = (req, res, next) => {

  const { name, weather, imageUrl } = req.body;

  ClothingItem.create({ name, weather, imageUrl, owner: req.user._id })
    .then((item) => {
      res.send({ data: item });
    })
    .catch((e) => {
      if (e.name === "ValidationError") {
        const validationError = new Error(e.message);
        validationError.statusCode = HTTP_BAD_REQUEST;
        next(validationError);
      }
      next(e);
    });
};

This is a POST request, and initially it does add the item, but when it tries to add an item with a “name” field less than 2 characters and a “name” field with greater than 30 characters, it then gives me the error above. Below I have added the code where I create parameters where the name field cannot be greater than 30 or less than 2. This was working before I changed my .eslintrc.js and package.json.

const mongoose = require("mongoose");
const validator = require("validator");
const user = require("./user");

const clothingItem = new mongoose.Schema({
  name: {
    type: String,
    required: true,
    maxlength: [30, "Name cannot be more than 30 characters"],
    minlength: [2, "Name cannot be less than 2 characters"],
  },
  weather: {
    type: String,
    required: true,
    enum: ["hot", "warm", "cold"],
  },
  imageUrl: {
    type: String,
    validate: {
      validator: (v) => validator.isURL(v),
      message: "Link is not valid",
    },
  },
  owner: {
    type: mongoose.Schema.Types.ObjectId,
    ref: user,
    required: true,
  },
  likes: [
    {
      type: mongoose.Schema.Types.ObjectId,
      ref: user,
    },
  ],
});

module.exports = mongoose.model("clothingItems", clothingItem);

If someone could help me with this issue then I would be most appreciative. This is my second post on Stack Overflow so I hope that I provided enough information. I am also relatively new to coding, so maybe the answer is obvious.

I’m not really sure how to go about this, and I looked up a few answers to try and find the problem and solve it before creating this post. I didn’t find anything, and what I did find when I looked up this error, which is the title of the post this is what I found. What does “Content-type: application/json; charset=utf-8” really mean?

When I’m trying to change my ‘view/template’ using AngularJS in my app, the url changes but the template it’s still the Index.cshtml. I think I configured all right but not.
This in my _Layout.cshtml:

<body ng-app="application" class="background">

    <div id="ribbon">
        <main>
            @RenderBody()
        </main>
    </div>
</body>
</html>

Here my configuration for my app.js where I’m supposed to put all my controllers:

var app = angular.module("application", [
    "ngRoute",
    "ngResource",
    "toastr"
]);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Index", { templateUrl: "Home/Index", controller: "index-controller" })
        .when("/Main", { templateUrl: "Home/Main", controller: "main-controller" })
        .otherwise({ templateUrl: "Home/Index" });
});
app.controller("index-controller", ["$scope", "$location", function ($scope, $location) {
    $scope.goToMainPDS = function() {
        console.log("Loading view...");
        console.log("View Loaded!");
        $location.path("/Main");
    }
}]);
app.controller("main-controller", ($scope) => {
    console.log("Main loaded..!");
})

On my Index.cshtml I only have my button with the code:

<div class="index" ng-controller="index-controller">
        <div class="index">
            <button class="btn btn-primary" ng-click="goToMainPDS()">Go to MainPDS</button>
        </div>
</div>

I based this application in others I created in the past following the same steps but is not working.

1. In console I’m not getting errors.
2. Whe my application loads the url is “http://localhost:63902/” and when the button is pressed the url changes to “http://localhost:63902/#!/Main” but nothing really happens. The template does not change even if I refresh the page (No errors in console).
3. The only way I can access to that view is if I go through “http://localhost:63902/Home/Main”. (Which is incorrect I guess).
4. I do not added a ‘ng-view’ in any .cshtml file because if I do that, my app starts loading the view again and again with no end.

Подскажите, как передать одну переменную в Javascript, сохраненную в JSON массиве значения файла qookie?

Qookie записывается таким образом:

$cookie_key = 'count';
CookieManager::store($cookie_key, json_encode(array(
    'SameSite' => 'None',
         ...
    'lastvisit' => $time,
    'token' => $counts->token)));

Пример кода ниже, делает вывод целого массива из qookie, в то время, как из всего, необходима лишь одна переменная token, чтобы ее одну затем передать в javascript:

function getCookie(count) {
    var matches = document.cookie.match(new RegExp("(?:^|; )" + count.replace(/([.$?*|{}()[]\/+^])/g, '\$1') + "=([^;]*)"));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
 
console.log(getCookie('count'));

Но как выделить лишь один токен?

enter image description here

enter image description here

Cost calculator. Alisher wants to go on holiday abroad. After searching for the cost of the trip on the Internet, he found the information given in the list below.

Some of them are shown in US dollars, and some are given in euros. Round-trip plane ticket – $500 Hotel fee (for the entire trip) – $250 For museums and entertainment places – 120 euros $1 = 11000.34 soums 1 euro = 12354.03 soums Program to be made works as follows:

1. Alisher enters the amount of money he has in soums through a prompt.
2. Expenses are transferred from dollars and euros to soums.
3. If Alisher has enough money, the console.log will say “White road, Alisher!” a message appears.
4. If Alisher doesn’t have enough money, the console.log will show “Alisher, you need to be patient.” a message appears.

Pseudo code:

1. We store the soum value from the prompt in a variable
2. We change the travel expenses to soum
3. It is from Alisher’s money

Please see that the answer is only False

I think my mind is in if else, but I don’t know where`

const userMoney = parseFloat(prompt("Alisher sizda qancha pul bor"));

const planeTicket = 500;
const hotelTicket = 250;
const museumTicket = 120;

const dollarKurs = 11000.34;
const euroKurs = 12354.03;

const planeTicketSom = planeTicket * dollarKurs;
const hotelTicketSom = hotelTicket * dollarKurs;
const museumTicketSom = museumTicket * euroKurs;

const totalExpenses = planeTicketSom + hotelTicketSom + museumTicketSom;

const extraMoney = userMoney - totalExpenses;

if (extraMoney > totalExpenses) {
  console.log("Oq yo'l, Alisher!");
} else {
  console.log("Alisher, ozgina sabr qilish kerak bo'lar ekan.");
}

basically i started learning mern stack few weeks back and got recently struck with the api portion of “How to update the data from api automatically in my ejs template without refreshing or no button click post method”

first step : I implemented a get request for index.ejs
second step : I created a const function fetchJoke to Fetch a joke at random intervals

But the i am getting data from api for 10 secs time interval but i couldnt able to update the data in my ejs template without refreshing the page and i need to update it automatically for 10 secs “

import express from "express";
import axios from "axios";

const app = express();
const port = 3000;
app.get("/",(req,res)=>{
    res.render("index.ejs");
});

let currentJoke = {}; // Store the current joke

const fetchJoke = async () => {
    try {
        const response = await axios.get("https://v2.jokeapi.dev/joke/any?type=twopart");
        currentJoke = response.data;
        console.log(currentJoke);
    } catch (error) {
        console.error("Failed to fetch joke:", error.message);
    }
};
setInterval(fetchJoke,20000);
fetchJoke();
app.post('/', (req, res) => {
    res.render("index.ejs", {
        Service: currentJoke,
    });
});
app.listen(port,()=>{
    console.log(`Server Running on port ${port}`);
});


<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <% if(locals.Service) {%>
        <h1>
            <%= Service.setup %>
        </h1>     
    <% } %>
</body>
</html>

I have a short script with javascript and canvas. As the lines grow, it suddenly becomes laggy and unresponsive, and I cannot tell why. I have cleared the canvas every time animate is called. It is very simple overall, so I don’t see a reason why it would behave this way.

<!DOCTYPE html>

<html>
<head>

<title>Line Split</title>

<style>
body {
  background-color: gray;
  background-attachment: fixed;
}
#canvas{
  margin-left: 10px;
  margin-top: 10px;
}

</style>

<canvas id="canvas" width="640" height="640"></canvas>

<script>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let intervalId 

let lines = []

window.onload = function() 
{
  init();
};

function init()
{
    let start = {x:200,y:100}
    let angle = 45
    let length = 100
    const line = new Line(start,angle,length);
    lines.push(line)
    
    start = {x:450,y:300}
    angle = 130
    length = 100
    const line2 = new Line(start,angle,length);
    lines.push(line2)
    
    start = {x:500,y:300}
    angle = 130
    length = 100
    const line3 = new Line(start,angle,length);
    lines.push(line3)
    
    start = {x:550,y:300}
    angle = 130
    length = 100
    const line4 = new Line(start,angle,length);
    lines.push(line4)
    
    intervalId = setInterval(animate, 30);

}

function animate()
{
    clearCanvas();
    fillBG("black")

    lines.forEach((line) => {
        drawLineWithAngleLength(line.start, line.angle, line.length)
        if(line.grow) line.length += 1
    });
    
}

class Line {
  constructor(coordinateStart, angleDeg, lineLength) 
  {
    this.start = coordinateStart;
    this.angle = angleDeg;
    this.length = lineLength;
    this.grow = true
  }
}

function drawLineWithAngleLength(startCoordinate, angleInDegrees, length) {
    // Convert the angle to radians
    const angleInRadians = (angleInDegrees * Math.PI) / 180;

    // Calculate the endpoint of the line
    let endX = startCoordinate.x + length * Math.cos(angleInRadians);
    let endY = startCoordinate.y + length * Math.sin(angleInRadians);
    
    if(endX > canvas.width)
    {
        endX = canvas.width
        this.grow = false
    }
    else if(endX < 0)
    {
        endX = 0
        this.grow = false
    }
    if(endY > canvas.height)
    {
        endY = canvas.height
        this.grow = false
    }
    else if(endY < 0)
    {
        endY = 0
        this.grow = false
    }
    
    drawLine({x:startCoordinate.x,y:startCoordinate.y}, {x:endX,y:endY})
    
    
}

function drawLine(start, end)
{
  ctx.strokeStyle = 'white';
  ctx.lineWidth = 2;

  ctx.moveTo(start.x, start.y);
  ctx.lineTo(end.x, end.y);
  ctx.stroke();
}

function fillBG(color)
{
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}


</script>

</head>
<body>


</body>

</html>

My component is written in Vue 3 and Quasar and I test it with Jest. This is an exemple of a test:

import { factory_mount } from '@/test-utils';
import VueBtn from '@/components/VueBtn.vue';
import { btnDesc } from '@/service/btnDesc';
import { installQuasarPlugin } from "@quasar/quasar-app-extention-testing-unit-test";

installQuasarPlugin();

const typesBtn = Object.keys(btnDesc);

describe("Button", () => {
    typesBtn.forEach((type) => {
        describe(`Testing button type: ${type}`, () => {
            let wrapper;

            beforeEach(() => {
                const componentResult = factory_mount(VueBtn, { type });
                wrapper = componentResult.wrapper;
            });

            it("btn exists", () => {
                expect(wrapper.exists()).toBe(true);
            });
        });
    });
});

This test runs well but when I run it I have a console.warn: failed to resolve component: q-btn if this is a native custom element make sure to include it from component resolution via compilerOptions.isCustomElement. At the moment I run hundreds of tests like this and I have warnings for almost each of them and parasite test results. How to fix this console warning?

I want to transform an array of arrays with headers as the first row according to a struct.
The data and structure is only known at runtime.
I could not get the objects inside the arrays to work and add the data to the right place in a recursive function.

imagine following example:

let data = [
    [
        'customer_id',
        'company_name',
        'order_id',
        'order_date',
        'ship_address',
        'product_id',
        'product_name',
        'quantity',
        'unit_price'
    ],
    [
        'CHOPS',
        'Chop-suey Chinese',
        10254,
        '11.07.1996',
        'Hauptstr. 31',
        24,
        'Guaraná Fantástica',
        15,
        3.5999999046325684
    ],
    [
        'HANAR',
        'Hanari Carnes',
        10250,
        '08.07.1996',
        'Rua do Paço, 67',
        41,
        "Jack's New England Clam Chowder",
        10,
        7.699999809265137
    ],
    [
        'HANAR',
        'Hanari Carnes',
        10253,
        '10.07.1996',
        'Rua do Paço, 67',
        31,
        'Gorgonzola Telino',
        20,
        10.0
    ],
    [
        'HANAR',
        'Hanari Carnes',
        10250,
        '08.07.1996',
        'Rua do Paço, 67',
        51,
        'Manjimup Dried Apples',
        35,
        42.400001525878906
    ],
    
]

let structure = {
    customer_id: 'string',
    company_name: 'string',
    orders: [
        {
            order_id: 'number',
            order_date: 'date',
            ship_address: 'string',
            order_details: [
                {
                    product_id: 'number',
                    product_name: 'string',
                    unit_price: 'number',
                    quantity: 'number'
                }
            ]
        }
    ]
};

let result = [
    {
        customer_id: 'CHOPS',
        company_name: 'Chop-suey Chinese',
        order_ids: [
            {
                order_id: 10254,
                order_date: '11.07.1996',
                ship_address: 'Hauptstr. 31',
                order_details: [
                    {
                        product_id: 24,
                        product_name: 'Guaraná Fantástica',
                        quantity: 15,
                        unit_price: 3.6
                    },
                ]
            }
        ]
    },
    {
        customer_id: 'HANAR',
        company_name: 'Hanari Carnes',
        order_ids: [
            {
                order_id: 10250,
                order_date: '08.07.1996',
                ship_address: 'Rua do Paço, 67',
                product_ids: [
                    {
                        product_id: 41,
                        product_name: "Jack's New England Clam Chowder",
                        quantity: 10,
                        unit_price: 7.7
                    },
                                        {
                        product_id: 51,
                        product_name: 'Manjimup Dried Apples',
                        quantity: 35,
                        unit_price: 42.4
                    },
                ]
            },
            {
                order_id: 10253,
                order_date: '10.07.1996',
                ship_address: 'Rua do Paço, 67',
                product_ids: [
                    {
                        product_id: 31,
                        product_name: 'Gorgonzola Telino',
                        quantity: 20,
                        unit_price: 10
                    },
                ]
            }
        ]
    },
]

as you can tell, this is data from the Northwind database.

I did try to iterate over the struct properties and rows and recursively set the properties of an object with help of an access stack. The assignment of data to array positions at a deeper nesting level did not work properly.

Transposing the data and turning each column into a set and storing the rowIndex, at which a new unique value starts did help, but I still did not find a working solution.

I expect something like this:

function transformData(data: (string | number)[][], structure: any): any {     
    let result = {};
    ...     
    return result;
}

The map contains:

          map -> identitiesUserApplyes:
                   userId: "firstname:"...", lastname:"...""
                   userId: "firstname:"...", lastname:"...""

every time I update it the user gets switched, I can never have more than one user in the map.
Any help will be much appreciated!!

async function updateIdentitiesUserApplies() {
    const persons = collection(database, "persons");
    const userRef = doc(persons, jobToApplyId);
    const subcollectionRef = collection(userRef, "postingJobs");


    const date = new Date();
    const userToUpdate = {
        [userId]: `
          {
            firstName: ${firstName},
            lastName: ${lastName},
            dateApply: ${date},
            jobTitle: ${jobTitle}
          }
        `,
    };

    try {
        await database.collection("persons").doc(userId).collection("postingJobs".doc(docId).updateDoc({
            [`identitiesUserApplyes.${userId}`]:`{firstName: ${firstName},lastName: ${lastName},dateApply: ${date},jobTitle: ${jobTitle}}`
        }))
      
    } catch (error) {
        console.error("Error updating document:", error);
    }
}

I am working on a project that shows some data on radar charts. But I can not figure out the size of radar chart. Currently, I am using react-apexcharts and its radar chart.

import { ApexOptions } from "apexcharts";
import React from "react";
import Chart from "react-apexcharts";

type RadarChartProps = {
  series: ApexOptions["series"];
  categories: string[];
};

const RadarChart: React.FC<RadarChartProps> = (props) => {
  const options: ApexOptions = {
    chart: {
      height: "100%",
      width: "100%",
      type: "radar",
      toolbar: {
        show: false,
      },
      zoom: {
        enabled: true,
      },
      sparkline: {
        enabled: false,
      },
    },

    xaxis: {
      categories: props.categories,
    },
    dataLabels: {
      enabled: false,
    },
    grid: {
      padding: {
        left: 0,
        right: 0,
      },
    },

    plotOptions: {
      radar: {
        size: 140,
        polygons: {
          fill: {
            colors: ["#f8f8f8", "#fff"],
          },
        },
      },
    },
    markers: {
      size: 4,
      colors: ["#0000FF"], // Marker color for each series
      strokeWidth: 0,
    },
    tooltip: {
      y: {
        formatter(val: number, _opts?: any): string {
          return `${val}`;
        },
      },
    },
    legend: {
      show: true,
      position: "top",
      horizontalAlign: "right",
      fontSize: "14px",
    },
  };
  return <Chart options={options} series={props.series} type="radar" />;
};

export default RadarChart;

This is my code for the question above with the options.

this is an image of my code result. I need to change height and width higher than current size. but i did not find any answers about it from stackoverflow or github issues of react-apexcharts. If you faced into this issue can you give me solutions?

I want to change the size of my radar chart.

I got stuck at a weird point …

// ticketList refers to an html table id
console.log("ticketList.rows.length before: " + ticketList.rows.length);
    for (i= 1; i < ticketList.rows.length; i++) {
        ticketList.rows[i].remove();
        console.log(`ticket ${i - 1} removed`);
    }

    // some more code which works properly

    console.log("ticketList.rows.length after: " + ticketList.rows.length);

Now this is the console output:

ticketList.rows.length before: 13
ticket 0 removed
ticket 1 removed
ticket 2 removed
ticket 3 removed
ticket 4 removed
ticket 5 removed
ticketList.rows.length after: 19

The initial value of 13 is correct.
Why does it stop after 6 iterations instead of removing twelve elements as supposed?

I tried hardcoding the stop value in the for-loop and got the following error:

Cannot read properties of undefined (reading ‘remove’)

this is image datatables and button

I’m using Primereact and mui joy at the same project, but Primereact styling won’t load properly.
I don’t know if because conflict with MUI JOY or no

here my package.json

{
  "name": "project-collection-sys",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.18",
    "@mui/joy": "5.0.0-beta.15",
    "@mui/lab": "5.0.0-alpha.153",
    "@mui/material": "^5.14.18",
    "primereact": "^10.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-paginate": "^8.2.0",
    "react-router-dom": "^6.20.0",
    "react-toastify": "^9.1.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "vite": "^5.0.0"
  }
}

and this my line code for component

import React from "react";
import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

// STYLING
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import { useState } from "react";

function Datatables() {
  const [isData, setIsData] = useState([
    {
      id: 1,
      title: 'try',
      text: 'try again'
    }
  ])
  return (
    <>
      <PrimeReactProvider>
        <DataTable
          value={isData}
          paginator
          rows={5}
          removableSort
          rowsPerPageOptions={[5, 10, 25, 50]}
          tableStyle={{ minWidth: '50rem' }}
        >
          <Column 
            field="title"
            header="Title"
            sortable
            style={{ width: '25%' }}
          />
        </DataTable>
      </PrimeReactProvider>
    </>
  )
}

export default Datatables;

even render button can’t render properly, and in Primereact ver 10 no more import for

import 'primereact/resources/primereact.css'; // core css
/**
 * The primereact[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.
 */

and i already import resources theme
import "primereact/resources/themes/lara-light-indigo/theme.css";

before that i have project build with MUI JOY and primereact for testing datatables and work properly, why this one can’t render properly?

I’m sorry if this is the wrong place to come to with this, but I don’t know where to go. I can’t code at all and I really need help with this. I’m trying to create a tampermonkey script for cunyfirst so that when I click on show academic record the inspect element grade I put in is there. I need to show my mom my grades and I really need help changing one of them because it’s really bad if I don’t have perfect grades. Thank you guys for your time. Save inspect element Google chrome extension doesn’t work which is why I’m using tamper monkey. Please help me guys

I don’t know how to code I haven’t really tried much