Ejercicio Gastos - magonbe/JAVA-SCRIPT GitHub Wiki

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GastosAnuales</title>
    <style>
    /*Esto da estilo al formulario*/
        h1 {
            margin: "10px auto";
            color: #311975;
            text-align: center
        }
        form{
            background-color:#BFFFFA;
            border: 2px solid #311975;
            padding:25px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            margin:60px 200px;
            color: #311975;
            -webkit-box-shadow: 28px 20px 5px 0px rgba(32,44,150,1);
            -moz-box-shadow: 28px 20px 5px 0px rgba(32,44,150,1);
            box-shadow: 28px 20px 5px 0px rgba(32,44,150,1);
        }
        input{
            margin-right:15px;
        }
    </style>
    <script>

        function calcula(){

            var precio= parseFloat(document.getElementById('precio').value);
            var producto=document.getElementById('producto').value;
            
            var lunes=document.getElementById('lunes').checked;
            var martes=document.getElementById('martes').checked;
            var miercoles=document.getElementById('miercoles').checked;
            var jueves=document.getElementById('jueves').checked;
            var viernes=document.getElementById('viernes').checked;
            var sabado=document.getElementById('sabado').checked;
            var domingo=document.getElementById('domingo').checked;
            
            var ene=document.getElementById('ene').checked;
            var feb=document.getElementById('feb').checked;
            var mar=document.getElementById('mar').checked;
            var abr=document.getElementById('abr').checked;
            var may=document.getElementById('may').checked;
            var jun=document.getElementById('jun').checked;
            var jul=document.getElementById('jul').checked;
            var ago=document.getElementById('ago').checked;
            var sep=document.getElementById('sep').checked;
            var oct=document.getElementById('oct').checked;
            var nov=document.getElementById('nov').checked;
            var dic=document.getElementById('dic').checked;


            var total=0;
            if(lunes){total=total+precio;}
            if(martes){total=total+precio;}
            if(miercoles){total=total+precio;}
            if(jueves){total=total+precio;}
            if(viernes){total=total+precio;}
            if(sabado){total=total+precio;}
            if(domingo){total=total+precio;}

        /* Una forma de hacerlo:

            var totalmes=total*4;
            var totalanual=0;
            if(ene){totalanual=totalanual+totalmes;}
            if(feb){totalanual=totalanual+totalmes;}
            if(mar){totalanual=totalanual+totalmes;}
            if(abr){totalanual=totalanual+totalmes;}
            if(may){totalanual=totalanual+totalmes;}
            if(jun){totalanual=totalanual+totalmes;}
            if(jul){totalanual=totalanual+totalmes;}
            if(ago){totalanual=totalanual+totalmes;}
            if(sep){totalanual=totalanual+totalmes;}
            if(oct){totalanual=totalanual+totalmes;}
            if(nov){totalanual=totalanual+totalmes;}
            if(dic){totalanual=totalanual+totalmes;}

        alert("El gasto anual en " + producto + " es " + totalanual.toFixed(2) + " euros");
        }   
        */

        /*Otra forma de hacerlo*/   
    var semanas=0;
        if(ene){semanas=semanas+4;}
        if(feb){semanas=semanas+4;}
        if(mar){semanas=semanas+4;}
        if(abr){semanas=semanas+4;}
        if(may){semanas=semanas+4;}
        if(jun){semanas=semanas+4;}
        if(jul){semanas=semanas+4;}
        if(ago){semanas=semanas+4;}
        if(sep){semanas=semanas+4;}
        if(oct){semanas=semanas+4;}
        if(nov){semanas=semanas+4;}
        if(dic){semanas=semanas+4;}

        total= total * semanas;


        alert("El gasto anual en " + producto + " es " + total.toFixed(2) + " euros");
        }   

    </script>
</head>

<body>


    <h1>GASTOS ANUALES</h1>
    <!--Este es el formulario-->
    
    <form action="">
        PRODUCTO
        <input type="text" id="producto" name="producto">
        <br>
        <br> PRECIO
        <input type="text" id="precio" name="precio">
        <br>
        <br>
        <p>DIAS DE LA SEMANA</p>

        L<input type="checkbox" id="lunes">
        M<input type="checkbox" id="martes"> 
        X<input type="checkbox" id="miercoles"> 
        J<input type="checkbox" id="jueves"> 
        V<input type="checkbox" id="viernes"> 
        S<input type="checkbox" id="sabado"> 
        D<input type="checkbox" id="domingo">
        <br>
        
        <p>MESES DEL AÑO</p>

        Ene<input type="checkbox" id="ene"> 
        Feb<input type="checkbox" id="feb">
        Mar<input type="checkbox" id="mar">
        Abr<input type="checkbox" id="abr">
        May<input type="checkbox" id="may">
        Jun<input type="checkbox" id="jun">
        Jul<input type="checkbox" id="jul">
        Ago<input type="checkbox" id="ago">
        Sep<input type="checkbox" id="sep">
        Oct<input type="checkbox" id="oct">
        Nov<input type="checkbox" id="nov">
        Dic<input type="checkbox" id="dic">

        <br>
        <br>
        <input type="submit" onclick="calcula()" value="CALCULAR">
    </form>

</body>


</html>
Ejercicio Gastos - magonbe/JAVA-SCRIPT GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️
