Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Cesta de la compra

 <input type="text" id="producto">
 <input type="button" onclick="comprar()" id="compra" value="Comprar">
 <div id="cesta"></div>
 var cesta = [];
function comprar() {
 var producto = document.getElementById('producto').value;
 if (producto.trim() !== "" && cesta.indexOf(producto) === -1) {
 cesta.push(producto);
 mostrar(cesta);
 } else {
 alert("Producto incorrecto o repetido");
 }
}
function mostrar(cesta) {
 var resultado = document.getElementById('cesta');
 resultado.innerHTML = "";
 for (var i = 0; i < cesta.length; i++) {
 resultado.innerHTML += "<p>" + i + ".- " + cesta[i] + "</p>";
 }
}

JavaScript fechas y otros

function sumar() {
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var num3 = document.getElementById('num3');

num3.value = Number(num1) + Number(num2);
num3.value = suma(num1, num2);
}

var fecha = new Date();
var resultado = document.getElementById('resultado');
if (fecha.getDay() === 5) {
resultado.innerHTML = "¡por fin es viernes!!!!";
} else {
resultado.innerHTML = "Hoy NO es viernes :(";

}

var notas = [5, 4, 8, 9, 10];

//¿Cómo obtengo la suma?
var suma=0;
for (var i = 0; i < notas.length; i++) {
suma+=notas[i];
}
console.log(suma/notas.length);

function suma(num1, num2) {
return Number(num1) + Number(num2);
}

Animaciones CSS

<div id="prueba">
<h1>hola</h1>
</div>
#prueba{
width:100px;
height:100px;
background:red;
animation-name:animacion;
animation-duration:4s;
animation-iteration-count: infinite;
}

@keyframes animacion{

15% {transform:translate(0,200px)rotate(0deg);}
30% {transform:translate(0,200px) rotate(360deg);}
50% {transform:translate(100px,100px);background:red;}
65% {transform:translate(100px,100px);background:green;}
80% {transform:translate(100px,100px);background:blue;}

}