Answer to Question #210901 in HTML/JavaScript Web Application for Ayushi

Question

Answer to Question #210901 in HTML/JavaScript Web Application for Ayushi

Question #210901

we want HTML , CSS & JAVASCRIPT code are written in different different ,

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>Time Converter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container>h1 {
            margin-top: 40px;
            font-size: 40px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .time-form {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 400px;
            height: 200px;
        }
        .time-form label {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .time-form label span {
            font-size: 20px;
            font-weight: bold;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .time-form label input {
            width: 60%;
            padding: 5px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 2.5px;
        }
        .messages-wrapper {
            margin-top: 40px;
            height: 60px;
            font-size: 20px;
            font-weight: bold;
        }
        #timeInSeconds {
            color: rgb(19, 12, 128)
        }
        #errorMsg {
            margin-top: 10px;
            color: red;
        }
        #convertBtn {
            margin-top: 20px;
            border: none;
            background-color: rgb(19, 12, 128);
            color: white;
            font-size: 20px;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Time Converter</h1>
        <div class="messages-wrapper">
            <p id="timeInSeconds"></p>
            <p id="errorMsg"></p>
        </div>
        <form class="time-form">
            <label>
                <span>Enter hours: </span>
                <input type="number" name="number" id="hoursInput">
            </label>
            <label>
                <span>Enter minutes: </span>
                <input type="number" name="number" id="minutesInput">
            </label>
            <button type="submit" id="convertBtn">Convert</button>
        </form>
    </div>
    <script>
        const form        = document.querySelector('.time-form'),
            hoursInput    = document.querySelector('#hoursInput'),
            minutesInput  = document.querySelector('#minutesInput'),
            timeInSeconds = document.querySelector('#timeInSeconds'),
            errorMsg      = document.querySelector('#errorMsg')


        form.addEventListener('submit', (e) => {
            e.preventDefault()
            let hours = hoursInput.value
            let minutes = minutesInput.value
            if (hours && minutes) {
                timeInSeconds.textContent = `${hours} hours and ${minutes} minutes = ${60 * 60 * Number(hours) + 60 * Number(minutes)} seconds`
                hoursInput.value = null
                minutesInput.value = null
            } else {
                timeInSeconds.textContent = ''
                errorMsg.textContent = 'Please enter time properties!!!'
                setTimeout(() => {
                    errorMsg.textContent = ''
                }, 1500)
            }
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #210901 in HTML/JavaScript Web Application for Ayushi

Comments

Leave a comment

Related Questions