Answer to Question #298297 in HTML/JavaScript Web Application for Megha

Question

Answer to Question #298297 in HTML/JavaScript Web Application for Megha

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #298297

Create a script that asks users to input names in a text field. Sort the names and

display them in a seperate text area.

2. If the user enters an empty name, show the text field in red color. Also display an

alert box. Change the color to white when a non empty name is eneterd.

3. Add shortcut keys to text area. When user presses Ctrl+Enter, change the font style

of text in text area to italic. When user presses Shift+Enter, change the font style of

text area to normal.

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>
    <form action="">
        <input type="text" placeholder="">
        <button class="myButton">add</button>
        <div class="warning"></div>
    </form>
    <div class="names" style="margin-top: 20px;"></div>
    <script>
        const input = document.querySelector('input'),
              button = document.querySelector('.myButton'),
              warning = document.querySelector('.warning'),
              names = document.querySelector('.names')

        let pressedKeys = {};
        let cursive = false;

        function toggleCursive() {
            cursive = !cursive;
        }

        document.addEventListener('keydown', (e) => {
            // if (event.code in pressedKeys) return;
            if (e.ctrlKey && e.keyCode == 13) {
                if (!cursive) {
                    input.style = 'font-style: italic'
                    toggleCursive()
                } else {
                    input.style = 'font-style: normal'
                    toggleCursive()
                }
            }
        });

        document.addEventListener('keyup', function(event) {
            delete pressedKeys[event.code]
        });

        button.addEventListener("click", (e) => {
            e.preventDefault()
            if (input.value === '') {
                input.style.background = '#ff9292'
                warning.innerHTML = 'field placeholder'
            } else {
                input.style.background = 'white'
                warning.innerHTML = ''
                if (cursive) 
                    names.innerHTML += "<i>" + input.value + "<i>" + "<br>"
                else 
                    names.innerHTML += input.value + "<br>"
                    input.value = ''
            }
            
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #298297 in HTML/JavaScript Web Application for Megha

Comments

Leave a comment

Related Questions