Answer to Question #299237 in HTML/JavaScript Web Application for Refilwe

Question

Answer to Question #299237 in HTML/JavaScript Web Application for Refilwe

Question #299237

Convert Temperature Using a drop down. If drop down selection is Fahrenheit to Celsuis , convert Fahrenheit to celsuis. if drop down selection is celsuis to Fahrenheit, convert Celsuis to Fahrenheit. All while also using a button to execute.

Expert's answer

<!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>Document</title>
</head>
<body>

    <style>
        .dropDown {
            width: 150px;
            height: 30px;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .dropDown:hover {
            background: rgb(230, 230, 230);
        }
        .active {
            color: gray;
        }
        .active:hover {
            background: white;
        }
    </style>

    <div class="activeConvertType dropDown active">#</div>
    <div class="wrapper">
        <div class="fToC dropDown">Fahrenheit to Celsuis</div>
        <div class="cToF dropDown">Celsuis to Fahrenheit</div>
    </div>
    <input type="text" placeholder="Enter temperature" style="margin-top: 50px;">
    <button>Convert</button>
    <div class="result" style='margin-top: 20px; font-weight: bold;'></div>

    <script>
        const input = document.querySelector('input'),
              button = document.querySelector('button'),
              dropDown = document.querySelectorAll('.dropDown'),
              toCelsiusType = document.querySelector('.fToC'),
              toFahrenheitType = document.querySelector('.cToF'),
              activeConvertType = document.querySelector('.activeConvertType'),
              result = document.querySelector('.result'),
              wrapper = document.querySelector('.wrapper')
        
        let activeType = 'toCelsius';

        function replaceActiveName() {
            if (activeType == 'toCelsius')
                activeConvertType.innerHTML = 'Fahrenheit to Celsuis';
            else
                activeConvertType.innerHTML = 'Celsuis to Fahrenheit'
        }

        function replaceActiveType(t) {
            activeType = t
            replaceActiveName()
            toggleVisibility(activeConvertType.classList)
        }

        function toggleVisibility() {
            const item = activeConvertType.classList
            item.toggle('active')
            item.contains('active') ? wrapper.style.display ='block' : wrapper.style.display = 'none'   
        }

        function writeResultConvert(temperature) {
            if (Number.isInteger(+temperature)) {
                let t = 0
                if (activeType == "toCelsius") {
                    t = (+temperature - 32) * 5/9
                } else {
                    t = +temperature * 9/5 + 32
                }
                result.innerHTML = t
            } else {
                result.innerHTML = 'incorrect value'
            }
        }

        replaceActiveName()
        toggleVisibility()

        wrapper.addEventListener('click', (e) => {
            if (e.target.classList.contains('fToC')) {
                replaceActiveType('toCelsius')
            } else {
                replaceActiveType('toFahrenheit')
            }
        })

        button.addEventListener('click', () => {
            writeResultConvert(input.value)
        })

        activeConvertType.addEventListener('click', () => {
            toggleVisibility()
        })

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

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #299237 in HTML/JavaScript Web Application for Refilwe

Comments

Leave a comment

Related Questions