|
I am learning Javascript right now and am looking to start as soon as possible, but I don't know where to begin.
In my mind I would like the user experience to be as simple as possible; focused on the centre of the screen, on a single drop down menu, of which when a choice is selected that menu visually slides out of the way (so the user doesn't feel disoriented), as a new one slides in, and so forth, until the selections are exhausted.
What should I look into to achieve this please ?
|
|
|
|
|
|
Thanks, but I'm already working through that (about half way through). What a mess JavaScript has become, how on Earth a let can be a var God only knows, especially coming from a type-safe language like Swift ?!
I found the following code, which was pretty similar to what I wanted : https://codepen.io/balapa/pen/zvObzO[^]
I am just figuring out how the code works now, to see how to load up new menu options..
|
|
|
|
|
After the file is played, you need to load a new file and start playback.
According to my plan, I did this:
the file "au.js"
function replay()
{
var aud = document.getElementById("audio_label");
aud.src = "cap.wav?cb=" + new Date().getTime();
aud.load();
aud.play();
}
function hproc(e)
{
replay();
}
var x = document.getElementById("audio_label");
x.addEventListener('ended',hproc,false);
the "index.html"
<pre><script src="au.js"></script>
<body>
<audio id="audio_label" autoplay controls src="cap.wav"
type="audio/wav"></audio>
...plays only once...
|
|
|
|
|
|
I'm using CKEditor in my Angular project. I save my text, for example, as the following in the database:
<h2>My Header 1</h2><h3>My Header 2</h3><h4>My Header 3</h4><p> </p><p> </p><p>My long text.</p>
I want to retrieve the formatted version of it and then show it to the user. How can I do this in typescript?
|
|
|
|
|
Well, i´m new in the world of programming, and i´m learning javascript where i'm confused about loops, while and this things. I don't understand how to use. Please someone help me 
|
|
|
|
|
|
loops are made to process inner instructions several times, or once ( or zero ).
there are : while | for | foreach
____________________________________________
an infinite loop could be achieved by :
while(true){ instruction... ;;;;;; } // for specific use.
each loop have a (test condition) to break it.
while(condition){...; }
while(i < 24){...; }
while(output !== 'quit'){ .... ; }
it's booleans 'true' or 'false' return;
______________________________________________
the 'for' loop is a very powerful loop
as basic you have learn :
for(var init ; test_condition ; before next lap instruction ) { .....;;;; }
like :
for(i=0 ; i< 24 ; i++) { ...;;;; }
but at full use, you can provide lot of parameters in :
for(i=0,j=5,trace=true ; i < sucess() ; trigger() , run_gui() , add_components() , i++ , j-- , toggle_trace() ){ .....;;;;;;;;;;; }
it's to show you another complex methods with for..loop. very powerfull and short written
_________________________________________________
for each loop :
It's about achieve 'fetch' in a container without incrementation of vars.
foreach(row in big_container){ console.log(row) }
this way , the big container is read, and the row is display in console log.
each row in big container will be display in console log.
it's useful when high limit is unknown , it's modern syntax.
at end of big_container the loop break out.
loops are call 'iterators/iteration' statements too.
|
|
|
|
|
What is the best way in react to convert a date from
2022-09-04T00:00:00
into
04/09/2022
Every day, thousands of innocent plants are killed by vegetarians.
Help end the violence EAT BACON
|
|
|
|
|
I don't know about react, but the general answer is to use the date parser to convert to an internal time representation (eg Unix time, seconds since 1/1/1970...) then the date formatter to get what you want.
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
|
|
|
|
|
Probably by using the Intl.DateTimeFormat[^] object, which is supported in all modern browsers.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
JavaScript's native date object does that.
const date = new Date(Date.parse('2022-09-04T00:00:00'));
console.log(date.toLocaleString());
I would suggest putting a Z at the end of the ISO input date though, just to make it explicit that it's in UTC.
const date = new Date(Date.parse('2022-09-04T00:00:00Z'));
console.log(date.toLocaleString());
Otherwise, JavaScript will assume the input is in the local time zone.
Jeremy Falcon
|
|
|
|
|
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
|
|
|
|
|
Nobody here is going to do your homework for you, even if you do manage to find the correct forum for the language you've been told to use.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hello guys - can someone give me some advice on what I am doing wrong here?
I found out very tricky asynchronous functions in JS where "await" seems not to always mean to wait. I believe there should be similar behavior in JS but it doesn't work as expected - can someone please tell me how to achieve the goal? Let me share part of the code with a little explanation
translatedInUI.forEach(async (language) => {
const actualLanguageCode = language.code;
const actualLanguage = await file.getLanguage(language.code);
const updatesForActual = [];
const addToActual = [];
const removeFromActual = [];
updatesForActual.push(changesInEnglish);
english.forEach((line) => {
let key = line.key;
if (!actualLanguage.find((element) => element.key == key)) {
addToActual.push(key);
}
});
actualLanguage.forEach((line) => {
let key = line.key;
if (!english.find((element) => element.key == key)) {
console.log("key was removed: " + key);
removeFromActual.push(key);
}
});
toAdd.push({ language: actualLanguageCode, addToActual });
toRemove.push({ language: actualLanguageCode, removeFromActual });
toUpdate.push({ language: actualLanguageCode, updatesForActual });
console.log(toAdd);
});
console.log("to add:" + toAdd);
console.log(toRemove);
console.log(toUpdate);
in this code console.log after the loop is displayed with empty variables first - the one at the end of each loops are displayed correctly while the one after loop goes out as an empty array
Thank you very much for any kind of advice
|
|
|
|
|
You are iterating over the translatedInUI array and starting an asynchronous task for each item. You never await those tasks, so the following code will execute before the tasks have finished.
Use a combination of Array.map[^] and Promise.all[^] to wait for the tasks to complete before trying to use the variables they're updating.
const tasks = translatedInUI.map(async (language) => {
...
});
await Promise.all(tasks);
console.log("to add:", toAdd);
console.log("to remove:", toRemove);
console.log("to update:", toUpdate); Obviously the outer function will also need to be marked as async for the await to work.
Using Promises - JavaScript | MDN[^]
async function - JavaScript | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
In addition to what Richard said, this is one of the perfect times to use a generator function. Same concept, just with terse syntax.
async function* fetchStuff() {
const response1 = await fetch('https://some.com/stuff1');
yield await response1.json();
const response2 = await fetch('https://some.com/stuff2');
yield await response2.json();
}
for await (const stuff of fetchStuff()) {
console.log(stuff);
}
const responses = await Promise.all([...fetchStuff()]);
Jeremy Falcon
|
|
|
|
|
Hi everyone,
I have a simple excel file with a simple calculator part and would like to transform it to html keeping the calculator and interaction between fields active. Anybody can help me? Below the link to the excel file.
Likelihood of God Excel File[^]
Thanks in advance for any reply!
|
|
|
|
|
|
|
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:#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();
});
|
|
|
|
|
This error is telling you that (wherever your password input's textbox is showing up and you've typed in the password) typing in the password, again but this time to validate it as this is another textbox where you are now testing whether you've typed correctly in the first textbox, has called a procedure that, for it's input NULL (nothing has been input), the condition is unacceptable.
Este error le indica que (siempre que aparezca el cuadro de texto de ingreso de su contraseña y haya ingresado la contraseña) ingrese la contraseña nuevamente, pero esta vez para validarla, ya que este es otro cuadro de texto donde ahora está probando si ha escrito correctamente en el primer cuadro de texto, ha llamado a un procedimiento que, por su entrada NULL (no se ha ingresado nada), la condición es inaceptable.
|
|
|
|
|
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages:
Uncaught TypeError: $ is not a function
on line 6
The menu works as expected if I recreate it outside of Joomla.
Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript.
I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items.
For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class.
I hope this makes sense!
This is the JS code I have:
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();
});
modified 25-Feb-22 12:18pm.
|
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
