I want to be able to customize OUTPUT, I want to be able to customize the result of the calculation but I cannot with this code

Asked

Viewed 39 times

0

1.I have already done the css of the first part, that is the part that commands the information, which in this case is the height and weight. I want to take this information and calculate the BMI. However, I cannot customize the output part (output). I wanted to know what I need to change, and how can I personalize this output.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Calculadora IMC</title>
        <style type="text/css"></style>
        <meta charset="utf-8">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet">
    </head>
    <body>
    
        <div class="box-container"> 
            <div class="form-container">    
                <h1>Calculadora IMC</h1>
                <div class="items-container">
                    <form name="FormInc" action=" " method="post">
                         <input class="ipt-text" placeholder="Seu peso" type="number" name="pe" /><p></p>
                         <input class="ipt-text" placeholder="Sua altura" type="number" name="alt" /><p></p>
                        <input class="calc-button"  type="button" name="calcular" value="CALCULAR" onclick="calculo()" />
                    </form>
                </div>
            </div>  
        </div>
    
        <script type="text/javascript">
        var peso;
        var altura;
        var imc = peso/(altura*altura);
    
        function calculo() {
    
            peso = document.FormInc.pe.value; 
            altura = document.FormInc.alt.value;
    
            imc = Math.round(peso/(altura*altura));
            
            if(imc < 18.5){
            document.write("CLASSIFICAÇÃO: MAGREZA" + "<br>SEU IMC: " + imc); 
        }else if(imc > 18.5 && imc < 25){
            document.write("CLASSIFICAÇÃO: NORMAL" + "<br>SEU IMC: " + imc);
        }else if(imc > 25 && imc < 30){
            document.write("CLASSIFICAÇÃO: SOBREPESO" + "<br>SEU IMC: " + imc);
        }else if(imc > 30){
            document.write("CLASSIFICAÇÃO: OBESIDADE" + "<br>SEU IMC: " + imc);
        }
        
        }
    
    
        </script>
        
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: 'Montserrat', sans-serif;
            }
    
            .box-container {
                display: flex;
                position: absolute;
                width: 35vw;
                height: 40vh;
                box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
                
                
            }
    
            .form-container {
                display: flex;
                flex-direction: column; 
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
                
            }   
    
            .items-container {
                min-width: 200px;
                max-width: 600px;
                margin-top: 20px;
    
            }
    
            .ipt-text {
                display: flex;
                margin-left: 11%;
                margin-top: 2%;
                margin-bottom: 3%;
                border-radius: 2%;
                outline-style: none;
                height: 6vh;
                border-style: none;
                border-bottom: 2px solid rgba(0, 0, 0, 0.1);
            }
    
            .calc-button {
                display: flex;  
                justify-content: center;
                margin-top:20px;
                margin-left: 25%;
    
                outline-style: none;
                border-style: none;         
                color: #f1f2f6;
                background: #1B9CFC;
                height: 7vh;
                width: 10vw;
                border-radius: 10px;
    
                cursor: pointer;
                
            }
    
            .calc-button:hover {
                background: #25CCF7;
                
                border-radius: 5px;
                transition: 0.4s; 
                
            }
    
            .calc-button:not(:hover) {
                transition: 0.5s; 
                
            }
    
        </style>
    
    </body>
    </html>

javascript html css script

  • What would this "customize' that you speak?

  • The same part of the CSS. In this case the CSS of the result, because the CSS of the calculator/first part is already working. The problem is the CSS of the imc/calculation result

1 answer

0

Instead of using document.write() create a paragraph element creates a variable for the classification (not required is only to facilitate) puts it as element Child (child) of body, calls a idfor him in case I put "myId" but you can put whatever you want, so that when you change the CSS uses by id his #myId. And finally adds what will be written on it with the innerHTML

<!DOCTYPE html>
    <html>
    <head>
        <title>Calculadora IMC</title>
        <style type="text/css"></style>
        <meta charset="utf-8">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap" rel="stylesheet">
    </head>
    <body>
    
        <div class="box-container"> 
            <div class="form-container">    
                <h1>Calculadora IMC</h1>
                <div class="items-container">
                    <form name="FormInc" action=" " method="post">
                         <input class="ipt-text" placeholder="Seu peso" type="number" name="pe" /><p></p>
                         <input class="ipt-text" placeholder="Sua altura" type="number" name="alt" /><p></p>
                        <input class="calc-button"  type="button" name="calcular" value="CALCULAR" onclick="calculo()" />
                    </form>
                </div>
            </div>  
        </div>
    
        <script type="text/javascript">
        var peso;
        var altura;
        var imc = peso/(altura*altura);
        var classific = ""
    
        function calculo() {
    
            peso = document.FormInc.pe.value; 
            altura = document.FormInc.alt.value;
    
            imc = Math.round(peso/(altura*altura));
            var createParagrafo = document.createElement('p')
           
            if(imc < 18.5){
            classific = "MAGREZA"
            document.body.appendChild(createParagrafo)
            document.querySelector('body p:last-child').id = "myId"          
            document.getElementById('myId').innerHTML = "CLASSIFICAÇÃO: " + classific + "<br>SEU IMC: " + imc

        }else if(imc > 18.5 && imc < 25){
            classific = "NORMAL"
            document.body.appendChild(createParagrafo)
            document.querySelector('body p:last-child').id = "myId"          
            document.getElementById('myId').innerHTML = "CLASSIFICAÇÃO: " + classific + "<br>SEU IMC: " + imc

        }else if(imc > 25 && imc < 30){
            classific = "SOBREPESO"
            document.body.appendChild(createParagrafo)
            document.querySelector('body p:last-child').id = "myId"          
            document.getElementById('myId').innerHTML = "CLASSIFICAÇÃO: " + classific + "<br>SEU IMC: " + imc

        }else if(imc > 30){
            classific = "OBESIDADE"
            document.body.appendChild(createParagrafo)
            document.querySelector('body p:last-child').id = "myId"          
            document.getElementById('myId').innerHTML = "CLASSIFICAÇÃO: " + classific + "<br>SEU IMC: " + imc

        }
        
        }
    
    
        </script>
        
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: 'Montserrat', sans-serif;
            }
    
            .box-container {
                display: flex;
                position: absolute;
                width: 35vw;
                height: 40vh;
                box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
                
                
            }
    
            .form-container {
                display: flex;
                flex-direction: column; 
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%)
                
            }   
    
            .items-container {
                min-width: 200px;
                max-width: 600px;
                margin-top: 20px;
    
            }
    
            .ipt-text {
                display: flex;
                margin-left: 11%;
                margin-top: 2%;
                margin-bottom: 3%;
                border-radius: 2%;
                outline-style: none;
                height: 6vh;
                border-style: none;
                border-bottom: 2px solid rgba(0, 0, 0, 0.1);
            }
    
            .calc-button {
                display: flex;  
                justify-content: center;
                margin-top:20px;
                margin-left: 25%;
    
                outline-style: none;
                border-style: none;         
                color: #f1f2f6;
                background: #1B9CFC;
                height: 7vh;
                width: 10vw;
                border-radius: 10px;
    
                cursor: pointer;
                
            }
    
            .calc-button:hover {
                background: #25CCF7;
                
                border-radius: 5px;
                transition: 0.4s; 
                
            }
    
            .calc-button:not(:hover) {
                transition: 0.5s; 
                
            }
    
        </style>
    
    </body>
    </html>

Browser other questions tagged javascript html css script

You are not signed in. Login or sign up in order to post.