JavaScript

<h2>My Header 1</h2><h3>My Header 2</h3><h4>My Header 3</h4><p> </p><p> </p><p>My long text.</p>

2022-09-04T00:00:00

04/09/2022

Overview: 
COVID-19 cases have been increased in the last period. As a result, Ministry of Health has 
decided to make a simple application to keep track of all citizens and their vaccination status.
In this TMA, it is required to help the Ministry implement the required application.
Requirements:
After a quick meeting with the employee in charge, you got the following information:
 It is required to store the whole data in one collection 
 Each citizen has a unique civil ID number (national number), name and other attributes (add 
at least 2 attributes from your choice). In addition, it is required to store information about 
all doses taken by the citizen.
 For each dose, the following information should be stored: manufacturer, when and where 
has been taken, and information about the health professional who gave it.
 Each health professional has a unique civil ID number, name, and it is required to store 
his/her experience (in years).
Moreover, you have been informed that the following operations happen frequently:
 Adding a new citizen to the list
 Adding a new dose to a specified citizen
 Retrieving number of fully vaccinated persons (who toke at least 2 doses)
 Saving all the data into a text file after sorting them according to Civil ID.
Analysis:
Q1: There are common attributes and methods between citizen and health professional. What 
is the best choice for designing and writing the codes of these two classes? Explain your 
answer.
Q2: Draw a simple class diagram showing only relationships between the classes.
Implementation:
After analysing the given requirements, implement the required application:
 with Object Oriented Programming style
 following the rules of good programming style (e.g. adding comments, etc.)
 using only the material covered in M251 (and its prerequisites)
Hints:
 For each class, it is required to implement constructors, setters, getters, toString() method,
and any other necessary method
3
 If the user tries to do an operation that could violate the state of objects, the operation 
should be ignored and the application should display an error message (e.g. adding a citizen
twice to the list, etc.)
 Checking equality of any 2 objects should be done via the equals() method
 There is a class that will do the main job of the application as follows:
o It has one collection to store the whole data (all citizens)
o It has static methods, one for each operation happens frequently
o When you add a citizen to the list, a message should be displayed to the user to explain 
the status of the operation (i.e. if it was successful or not)
Testing:
After implementing the required classes, design and implement a testing class to test them as 
follows:
 Add at least 7 citizens to the collection that stores the whole data
 Add 1, 2 and 3 doses to different citizens and keep some citizens unvaccinated
 Try to violate the state of the objects and show that your code prevents all violations.
 Show that the other operations that happen frequently are working fine
 At the end, the whole data should be saved into a text file and this file should be saved 
automatically inside the folder contains your Java project

translatedInUI.forEach(async (language) => {
     const actualLanguageCode = language.code;
     const actualLanguage = await file.getLanguage(language.code);
     const updatesForActual = []; // string array of keys to be updated
     const addToActual = []; // string array of keys to be added
     const removeFromActual = []; // string array of keys to be removed

     // add updates from changes in English
     updatesForActual.push(changesInEnglish);
     // find missing keys in actual language
     english.forEach((line) => {
       let key = line.key;
       if (!actualLanguage.find((element) => element.key == key)) {
         // console.log("key not found: " + key);
         addToActual.push(key);
       }
     });
     // find keys to remove in actual language
     actualLanguage.forEach((line) => {
       let key = line.key;
       if (!english.find((element) => element.key == key)) {
         console.log("key was removed: " + key);
         removeFromActual.push(key);
       }
     });
     // we should have collected all changes for actual language
     toAdd.push({ language: actualLanguageCode, addToActual });
     toRemove.push({ language: actualLanguageCode, removeFromActual });
     toUpdate.push({ language: actualLanguageCode, updatesForActual });
     console.log(toAdd);
   });
   // we should have collected list of changes:

   console.log("to add:" + toAdd);
   console.log(toRemove);
   console.log(toUpdate);

Hola, soy nueva en el mundo del desarrollo web y me propuse hacer un formulario con html, css y js. Al hacer esta última tuve unos inconvenientes y no sé como solucionarlos. Cuando termino de colocar las contraseñas en mi formulario sale un error que dice lo siguiente "Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLInputElement.validarFormulario (intro.js:18:72)" y también "Uncaught ReferenceError: inputPassword1 is not defined at validarContrasena2 (intro.js:30:1) at HTMLInputElement.validarFormulario"

Aquí le adjunto el codigo para que me ayuden:

HTML:
<!DOCTYPE html>
<html>

<head>
  <title> Formulario </title>
  <link rel="stylesheet" href="Diseno.css">
  </head>

  <body>
    <center><h1>Formulario de datos</h1></center>
 <form action="" name="formulario" method="get" id="formulario">

   <div class="formulario_grupo" id="grupo_nombres">
    <label for="nombres">  Nombres: </label>
    <div class="formulario_grupo-imput">
        <input type="text" name="nombres" id="nombres"  placeholder="Escribe tus nombres">
        <p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
    </div>

<br>
 <div class="formulario_grupo" id="grupo_apellidos">
<label for="apellidos"> Apellidos: </label>
<input type="text" name="apellidos" id="apellidos" placeholder="Escribe tus apellidos" >
<p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
</div>

<br>
<div class="formulario_grupo" id="grupo_telefono">
<label for="telefono"> Numero telefonico: </label>
<input type="tel" name="telefono" id="telefono" placeholder="Escribe numero telefonico" >
</div>
  <p class="formulario_input-error">Solo se aceptan números.</p>
<br>

<label for="CI">C.I:</label>
<input type="radio" name="iden" id="CI" value="CI">
<br>
<label for="RIF"> RIF:</label>
  <input type="radio" name="iden" id="RIF" value="RIF">

  <div class="formulario_grupo" id="grupo_identidad">
<label for="identidad"> Ingrese Cedula o RIF:</label>
  <input type="text" name="identidad" id="identidad" placeholder="Número de CI o RIF" >
</div>
    <p class="formulario_input-error">debe de tener un maximo de 11 caracteres.</p>
<br>

<label for="nacimiento"> Fecha de nacimiento:</label>
<input type="date" name="nacimiento" id="nacimiento" >
<br>

<div class="formulario_grupo" id="grupo_correo">
<label for="correo"> Correo electonico: </label>
<input type="email" name="correo" id="correo" placeholder="Escribe tu E-mail" >
</div>

  <p class="formulario_input-error">El correo debe tener dominio.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena">
<label for="contrasena"> Contraseña: </label>
<input type="password" name="contrasena" id="contrasena" placeholder="Escribe tu contraseña" >
</div>

  <p class="formulario_input-error">La contraseña no puede tener espacios.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena2">
<label for="contrasena2"> Repetir contraseña: </label>
<input type="password" name="contrasena2" id="contrasena2" placeholder="Escribe tu contraseña" >
</div>

  <p class="formulario_input-error">Las contraseñas deben coincidir.</p>
<br>
  <label for="sexo"> Sexo:</label>
<select name="Sexo:" id="sexo">
  <option value="Masculino">Masculino</option>
  <option value="Femenino">Femenino</option>
  </div>
  <div class="formulario_mensaje" id="formulario_mensaje"
<p>Error </p>
</div>

    <input type="reset" id="reset" name="reset" value="Borrar">
    <br>
      <input type="submit" id="formulario_btn" name="formulario_btn" value="Enviar">
    </form>
      <script src="intro.js"></script>

    </body>

    </html>

Aquí adjunto CSS:
form {
width:60%;
border:10px solid #4682B4;
margin 30px;
padding 40px;
/*background: #dadcdf;*/
background:#dafae1 ;
}
.formulario_input-error{
font-size: 10px;
  font-family: "Georgia";
  color: #4d4d4f;
  margin-left: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
  display: none;
}

.formulario_input-error-activo{
display: block;
}
.formulario_mensaje-exito{
  font-size: 13px;
    font-family: "Georgia";
    color: #4d4d4f;
display: none;
}
.formulario_mensaje-exito-activo{
display: block;
}
.formulario_validacion-estado{
  position: absolute;
  right: 10px;
  bottom: 15px;
  z-index: 100;
  font-size: 14px;
  opacity: 0;
}

label{
font-size:14px;
font-family: "Georgia";
display:block;
margin-left: 5px;
margin-top: 10px;
color: #4d4d4f;
}

input{
  margin-bottom: 18px;
  margin-left: 14px;
  width: 94%;
  padding:8px;
  border:1px solid #C0C0C0;
  box-sizing: border-box;
  background: #F8F8FF;
}

select{
  margin-bottom: 20px;
  width: 60%;
  margin-left: 14px;
  border:2px solid #C0C0C0;
}

input:focus {
  border: 4px solid 	#4169E1;
}

input[type="radio"]{
    margin-bottom: 1px;
    margin-top: 1px;
}

input[type="submit"]{
  background: #4169E1;
  color: #F8F8FF;
  width: 50%;
    margin-left: 170px;
}
input[type="submit"]:hover{
  background:#4682B4;
  cursor: pointer;
    width: 46%;
        margin-left: 185px;
}
input[type="reset"]{
  background: #4169E1;
  color: #F8F8FF;
  width: 50%;
    margin-left: 170px;
}
input[type="reset"]:hover{
  background:#4682B4;
  cursor: pointer;
    width: 46%;
    margin-left: 185px;
}
.formulario_grupo-correcto .formulario_validacion-estado{
color: #1ed12d;
opacity 1;
}
.formulario_grupo-incorrecto.formulario_label{
  color: #bb2929;
}
.formulario_grupo-incorrecto.formulario_validacion-estado{
  color: #bb2929;
  opacity: 1;
}
  .formulario_grupo-incorrecto.formulario_input{
    border: 3px solid #bb2929;
  }
  
 y Aquí js (donde me aparecio el error)

const formulario = document.getElementById("formulario");
const inputs = document.querySelectorAll("#formulario input");
const expresiones = {
contrasena: /^.{4,14}$/,
}

const validarFormulario = (e) => {
switch (e.target.name) {
    case "contrasena":
    if(expresiones.contrasena.test(e.target.value)){
 document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
 document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
      document.querySelector("#grupo_correo .formulario_input-error").classList.remove ("formulario_input-error-activo");
}else{
 document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
 document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
    document.querySelector("#grupo_contrasena .formulario_input-error").classList.remove ("formulario_input-error-activo");
     }
       validarContrasena2 ();
      break;
      case "contrasena2":
      validarContrasena2 ();
    break;
}
}
const validarContrasena2 = () => {
const inputContrasena1= document.getElementById("contrasena");
const inputContrasena2= document.getElementById("contrasena2");
if (inputPassword1.value !== inputPassword2.value){
  document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
  document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
     document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
else {
  document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
  document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
     document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
}

inputs.forEach((input) => {
  input.addEventListener("keyup", () => {
  input.addEventListener("blur", validarFormulario);
  });
});
formulario.addEventListener("submit", (e) => {
e.preventDefault();
});

var ww = document.body.clientWidth;
$(document).ready(function() {
	$(".toggleMenu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		$("#nav").toggle();
	});
	$("#nav li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent");
		};
	})
	adjustMenu();
});
function adjustMenu() {
	if (ww < 974) {
		$(".toggleMenu").css("display", "inline-block");
		if (!$(".toggleMenu").hasClass("active")) {
			$("#nav").hide();
		} else {
			$("#nav").show();
		}
		$("#nav li").unbind('mouseenter mouseleave');
		$("#nav li a.parent").unbind("click").bind("click", function(e) {
			e.preventDefault();
		 	$(this).parent("li").toggleClass('hover');
		});
	} else {
		$(".toggleMenu").css("display", "none");
		$("#nav").show();
            $("#nav li").removeClass("hover");
	$("#nav li a").unbind("click");
	$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		$(this).toggleClass('hover');
		});
	}
}

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

<pre><script>

window.addEventListener("DOMContentLoaded", e => {

  const getContainerHeight = el => {
    return window.getComputedStyle(el).getPropertyValue("height");
  };

  const setTransitionHeights = el => {

    let containerWasOpen = el.classList.contains("open");

    el.style.height = null;

    el.classList.remove("open", "ready");
    el.dataset.initial = getContainerHeight(el);

    el.classList.add("open");
    el.dataset.final = getContainerHeight(el);
    el.classList.remove("open");

    if(containerWasOpen) {
      el.classList.add("open");
      el.style.height = el.dataset.final;
    } else {
      el.style.height = el.dataset.initial;
    }

    el.classList.add("ready");

  };

  document.querySelectorAll(".collapsible.slow").forEach(current => {

    let toggler = document.createElement("div");
    toggler.className = "toggler";
    current.appendChild(toggler);

    setTransitionHeights(current);

    toggler.addEventListener("click", e => {
      current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
    });

  });

  window.addEventListener("resize", e => {

    document.querySelectorAll(".collapsible.slow").forEach(current => {
      setTransitionHeights(current);
    });

  });

});

</script>

<pre lang="CSS"><pre> .boxed {
    border: 1px solid #ccc;
    padding: 1em 2em;
  }

  .collapsible.slow {
    position: relative;
    overflow: hidden;
    padding-bottom: 0.5em;
    transition: height 0.5s ease-out;
  }
  .collapsible.slow > * {
    display: none;
  }
  .collapsible.slow > p:first-child,
  .collapsible.slow.open > *,
  .collapsible.slow.ready > * {
    display: revert;
  }

  .collapsible.slow > .toggler {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    cursor: pointer;
  }
  .collapsible.slow > .toggler::after {
    content: "\25bc";
  }
  .collapsible.slow.open > .toggler::after {
    content: "\25b2";
  }