Help running a vue.js program created in older version

Rodrigo — Thu, 12 Dec 2024 21:13:40 +0000

Hi, I'm trying to run a vue.js program and I get this error when run npm install

My system:
MacOs 12.7.4 Monterey
node -v22.12.0
npm -v10.9.0
@vue/cli 5.0.8

npm warn old lockfile
npm warn old lockfile The package-lock.json file was created with an old version of npm,
npm warn old lockfile so supplemental metadata must be fetched from the registry.
npm warn old lockfile
npm warn old lockfile This is a one-time fix-up, please be patient...
npm warn old lockfile
npm warn old lockfile Could not fetch metadata for vue-loader-v16@16.0.0-rc.2 vue-loader-v16: No matching version found for vue-loader-v16@16.0.0-rc.2.
npm warn old lockfile     at module.exports (/usr/local/lib/node_modules/npm/node_modules/npm-pick-manifest/lib/index.js:215:23)
npm warn old lockfile     at RegistryFetcher.manifest (/usr/local/lib/node_modules/npm/node_modules/pacote/lib/registry.js:130:54)
npm warn old lockfile     at async /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:715:24 {
npm warn old lockfile   code: 'ETARGET',
npm warn old lockfile   type: 'version',
npm warn old lockfile   wanted: '16.0.0-rc.2',
npm warn old lockfile   versions: [
npm warn old lockfile     '16.0.0-beta.5',
npm warn old lockfile     '16.0.0-beta.5.1',
npm warn old lockfile     '16.0.0-beta.5.2',
npm warn old lockfile     '16.0.0-beta.5.3',
npm warn old lockfile     '16.0.0-beta.5.4'
npm warn old lockfile   ],
npm warn old lockfile   distTags: { latest: '16.0.0-beta.5.4' },
npm warn old lockfile   defaultTag: 'latest'
npm warn old lockfile }
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: calendar_app@0.1.0
npm error Found: eslint@6.8.0
npm error node_modules/eslint
npm error   dev eslint@"^6.7.2" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint@">=7.5.0" from @vue/cli-plugin-eslint@5.0.8
npm error node_modules/@vue/cli-plugin-eslint
npm error   dev @vue/cli-plugin-eslint@"~5.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Help in figuring out how to open the project.
It does not create the node_modules folder
vue-cli is installed globally

Help with a function in java script

Rodrigo — Sun, 19 May 2024 20:34:41 +0000

Hello, I'm a student, so as I'm still trying to grasp the concepts on event listeners I'm trying to solve a project that involves solving random math problems in 30 seconds and keeping a score to each correct answer. The initial stage of the project displays a box with the operators inside an , the values being addition, subtraction, multiplication and division. Next to it a called "Go" that calls the function onclick="startGame()" and a few instructions... all these wrapped inside a .

Once the button its clicked. It suppose to hide the

and display a which contains the Operation that was selected, the random operation, a focused input field to enter the answers, the calculator buttons to select or type your answers, the score count and the countdown timer. At time left=0, the game stops and displays the final results and a button to re-start the game again.

I'm getting confused on how to achieve this inside 1 function that gets called when the "Go" button gets clicked as there are different tasks to handled.

My main problem is syntax and how to add them inside the function (or maybe I need to do separate functions?)
Hope someone can shine some light...
I still haven't done the code to check if the answers are correct to add to the score and when the timer gets to 0 to display final results and a re-start button.

I did not include css as is not important to the question, just styling.

This is what I have so far:

HTML

Math Facts Practice

Operation:

Addition
Subtraction
Multiplication
Division

Go

Select operation.
Press Go
How many problems can you solve in 30 seconds?

Selection

1
2
3
4
5
6
7
8
9
0
CLEAR

Score:

Time left:

javascript

function startGame() {
let x = document.getElementById("hide");
let y = document.getElementById("show");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}

let randomNumA = Math.floor((Math.random() * 100) + 1);
let randomNumB = Math.floor((Math.random() * 100) + 1);

let sel = document.getElementById('random-operation');
sel.innerHTML = '<h4>Operation Selection</h4><p>' + randomNumA + operator + randomNumB + '</p>';

let countdown = 30;
const countdownInterval = setInterval(() => {
  countdown--;
  document.getElementById('time').textContent = `Time left:    ${countdown} seconds`;

  if (countdown === 0) {
    clearInterval(countdownInterval);
    document.write.getElementById('score') = 'score';
    document.write.getElementById('time') = 'countdown';
  }
}, 1000);

let operator = getElementsByTagName('option');
let result = document.getElementById('operation-selection');
if (operator.lenght >= 1) {
  let addition = operator[0];
  let subtraction = operator[1];
  let multiplication = operator[2];
  let division = operator[3];
  if (operator == 'addition') {
    result = randomNumA + randomNumB;
  }
  else if (operator == 'subtraction') {
    result = randomNumA - randomNumB;
  }
  else if (operator == 'multiplication') {
    result = randomNumA * randomNumB;
  }
  else {
    result = randomNumA / randomNumB;
  }
}

}

DEV Community: Rodrigo

Help running a vue.js program created in older version

Help with a function in java script

Math Facts Practice

Operation: