Wednesday, July 13, 2022

My solution for the MDN skills - conditionals 4


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test your skills 4</title>

    <style>
         p {
             color: black;
             text-shadow: 2px 2px 2px rgb(66, 96, 53);
             margin: 0.5em 0;
         }
         * {
             box-sizing: border-box;
         }
        section {
            width: 250px;
            height: 100px;
            border: 2px solid black;
            text-align: center;
           
            margin: 80px;
           
        }
    </style>
</head>
<body>
    <h1>Test your skills - 04 - Conditionals</h1>

    <section class="preview"></section>
    <script>

        let machineactive = true;
        let pwd = 'cheese'; // user login

        let machineResult; // will hold the response if machine-on
        let pwdResult; // if login

        const section = document.querySelector('section');

        // Add your code

        (machineactive)? machineResult = 'So the power is on and the system is working': machineResult = 'The power is off, the system is shut down';

        (pwd == 'cheese')? pwdResult = 'The login was sucessfully, welcome to the system':pwdResult = 'The login was\'t executed';

        if(machineactive && pwd == 'cheese'){
            section.style.background = 'yellow';
            section.style.boxShadow = '4px 4px 10px yellow';
        } else {
            section.style.background = 'white';
        }


        // Don't edit the code below!

        section.innerHTML = '';
        let para1 = document.createElement('p');
        let para2 = document.createElement('p');

        para1.textContent = machineResult;
        para2.textContent = pwdResult;

        section.appendChild(para1);
        section.appendChild(para2);        
    </script>
</body>
</html>

To you see what the system when shut down go to the 'let machineactive' and delete true and write false and the button will be written other text and the color of the panel will be white.

Rute Bezerra de Menezes Gondim

No comments:

Post a Comment