Casino: diseño

Deberemos construir una página de un casino con los siguientes apartados:
– Página de inicio (index.html)
Puede incluir fotos, slider, lo que queráis. Tiene que resultar atractiva.
– Registro
Típico formulario para darse de alta SIN FUNIONALIDAD

Además de los siguientes juegos:

Slot Machine
Dados
Blackjack
Ruleta

Desde cualquier página deberíamos poder ir a cualquier otra, por lo que no estaría de más tener un menú.

La primera funcionalidad que tenemos que implementar es la siguiente:

Necesitamos poder guardar el saldo del jugador, y para eso utilizaremos una cookie. Nada más entrar en la página comprobaremos si existe la cookie ‘saldo’:
– Si no existe, la creamos con valor de 100
– Si existe, recuperamos el valor y lo asignamos a una variable global saldo.

Para ello no nos vendría mal disponer de algunas funciones para poner/recuperar cookies. Ejemplos:

https://www.w3schools.com/js/js_cookies.asp
o esto:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

Animaciones

Página de descarga:

https://daneden.github.io/animate.css/

 <h1>Hola, ¿Qué tal?</h1>
        <input type="button" class="btn btn-success" value="Animar" id="animar">
        <script>
            $('#animar').click(function () {
                
                $('h1').addClass("rubberBand").addClass("animated")
                        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                        function (e) {
                            //Quitamos las clases al acabar la animación
                            $('h1').removeClass();

                        });
            });
        </script>

Calendario equipos

 <p>Inicio campeonato:</p>
        <input type="text" id="fecha">
        <ul id="equipos">
            <li>Logroñés</li>
            <li>Alcoyano</li>
            <li>Numancia</li>
            <li>Albacete</li>
            <li>Huelva</li>
            <li>Osasuna</li>
        </ul>
        <input type="button" class="btn btn-success" id="partidos" value="Partidos">
        <input type="button" class="btn btn-success" id="aleatorio" value="Aleatorio">
        <div id="res"></div>
        <script>
            $(function () {

                $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();
                $('#equipos').sortable();
                $('#partidos').click(function () {
                    var equipos = $('#equipos li');
                    var f = $('#fecha').val().split("/");
                    var fecha = new Date(f[2], f[1] - 1, f[0]);
                    $('#res').empty();
                    for (var i = 0; i < equipos.length; i += 2) {
                        $('#res').append("<p>" + fecha.toLocaleDateString() + " : " + equipos[i].innerText + " - " +
                                equipos[i + 1].innerText + "</p>");
                        fecha.setDate(fecha.getDate() + 1);
                    }
                });
                $('#aleatorio').click(function () {
                    $('#mensaje').dialog();
                    var equipos = $('#equipos li');
                    equipos.sort(function () {
                        return Math.random() - .5
                    });
                    $('#equipos').empty();
                    for (var i = 0; i < equipos.length; i++) {
                        $('#equipos').append(equipos[i]);
                    }
                });


            });
        </script>

Datepicker

 <input type="text" id="fecha">
 $.datepicker.regional['es'] = {
                    closeText: 'Cerrar',
                    prevText: '< Ant',
                    nextText: 'Sig >',
                    currentText: 'Hoy',
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);
                $('#fecha').datepicker();

Catalá:

 $.datepicker.regional['ca'] = {
  closeText: 'Tancar',
  prevText: 'Prv',
        nextText: 'Seg;',
  currentText: 'Avui',
  monthNames:['Gener','Febrer','Març','Abril','Maig','Juny','Juliol','Agost','Setembre','Octubre','Novembre','Desembre'],
  monthNamesShort: ['Gen','Feb','Mar','Abr','Mai','Jun','Jul','Ago','Set','Oct','Nov','Des'],
  dayNames: ['Diumenge','Dilluns','Dimarts','Dimecres','Dijous','Divendres','Dissabte'],
  dayNamesShort: ['Dug','Dln','Dmt','Dmc','Djs','Dvn','Dsb'],
  dayNamesMin: ['Dg','Dl','Dt','Dc','Dj','Dv','Ds'],
  weekHeader: 'Sm',
  dateFormat: 'dd/mm/yy',
  firstDay: 1,
  isRTL: false,
  changeMonth: true,
  changeYear: true,
  showMonthAfterYear: false,
  yearSuffix: ''};
  $.datepicker.setDefaults($.datepicker.regional['ca']);

Cabecera jquery + jquery ui (cdn)

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Ejemplos funciones



function masLarga(tabla) {
    var res = "";
    for (var i = 0; i < tabla.length; i++) {
        if (res.length<tabla[i].length){
            res=tabla[i];
        }
    }
    return res;
}
function masLargaWhile(tabla) {
    var res = "";
    var i=0;
    while(i<tabla.length){
        if (res.length<tabla[i].length){
            res=tabla[i];
        }
        i++;
    }
    return res;
}
function masLargaSort(tabla){
    tabla.sort(function(a,b){return b.length-a.length;});
    return tabla[0];
}

function password(longitud){
    var caracteres="ABCDEFGGHIJKLMNÑOPQRSTUVWXYZ1234567890;:_-.,!·$%&/()";
    var pass="";
    for(var i=0;i<longitud;i++){
        pass+=caracteres.charAt(aleatorio(0,caracteres.length));
    }
    return pass;
}
function aleatorio(min,max){
    return Math.floor(Math.random()*(max-min))+min;
}

jQuery dinámico

 <input type="button" class="btn btn-info" id="nuevo" value="+">
        <div id="contenido">
            <ul>
                <li>1</li>
            </ul>
        </div>
#contenido{
    background-color: lightblue;
    min-height: 300px;
    display:flex;
}
#contenido ul{
    background-color: lightpink;  
}
$(function () {
    var cont=2;
    enlazar();
    
    $('#nuevo').click(function () {
        $('#contenido').append("<ul><li>"+(cont++)+"</li></ul>");
        enlazar();
        dobleclick()
    });
    function enlazar() {
        $('li').off("click");
        $('li').click(function () {
            $(this).after("<li>"+(cont++)+"</li>");
            enlazar();
            dobleclick()
        });
    }
    function dobleclick(){
        $('li').dblclick(function () {
            $(this).remove();
        }); 
    }
})

Traversing


 <body>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <div>
            <h1>adios</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>cuatro</li>
                <li>cinco</li>
                <li>seis</li>
            </ul>
        </div>
        <div>
            <h1>hola</h1>
            <h2>Ejemplos</h2>
            <ul>
                <li>uno</li>
                <li>dos</li>
                <li>tres</li>
            </ul>
        </div>
        <script>
            $(function () {
                $('li').click(function () {
                    //Cambio el color del elemento clicado a rojo
                    $(this).css("color", "red");
                    //Cambio el color de los hermanos a azul
                    $(this).siblings().css("color", "blue");
                    //Cambiar el color del hermano del padre h1
                    $(this).parent().siblings("h1").css("color", "green");
                    //Cambiar el color de los otros li's a gris
                    $(this).parents("div").siblings().find("li").css("color", "grey");
                    //Cambiar el color de los otros h1 a negro
                    $(this).parents("div").siblings().find("h1").css("color", "black");
                    
                });
            });
        </script>
    </body>

Tamaño y pelota

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <style>
            #contenedor{
                background-color: lightblue;
                width:500px;
                height:600px;
                padding:10px;
                border:10px solid blue;
                position:relative;
            }
            .elemento{
                background-color: red;
                border: solid 1px black;
                display:inline-block;
                box-sizing: border-box;
            }
            .pelota{
                background-color: red;
                border: solid 1px black;
                position:absolute;
                top:0;
                left:0;
                box-sizing: border-box;
                border-radius: 50%;
                width:50px;
                height:50px;
            }
        </style>
    </head>
    <body style="background-color:lightgrey">
        <input type="number" id="incremento" value="10">
        <input class="btn btn-info boton" type="button" id="cambiar"  value="Cambiar">
        <input class="btn btn-info boton" type="button" id="pelota"  value="Pelota">
        <div id="contenedor">
        </div>
        <script>
            $(function () {
                var incX=10;
                var incY=10;
                $('#cambiar').click(function () {
                    var incremento = Number($('#incremento').val());
                    $('#contenedor').width($('#contenedor').width() + incremento)
                            .height($('#contenedor').height() + incremento);

                });
                $("#contenedor").mouseover(function (e) {
                    console.log(e);
                });
                $('#pelota').click(function(){
                    $("#contenedor").append("<div class='pelota'></div>");
                    setTimeout(moverPelota,100);
                })
                function moverPelota(){
                    $(".pelota").css("top","+="+incY+"px");
                    $(".pelota").css("left","+="+incX+"px");
                    
                    var top=parseInt($(".pelota").css("top"));
                    var left=parseInt($(".pelota").css("left"));
                    var ancho=$('#contenedor').width()-$(".pelota").outerWidth()/2;
                    var alto=$('#contenedor').height()-$(".pelota").outerHeight()/2;
                    if (top>alto || top<0){
                        incY=-incY;
                    } 
                    if (left>ancho || left<0){
                        incX=-incX;
                    } 
                    setTimeout(moverPelota,100);
                }
            });

        </script>
    </body>
</html>