JavaScript-Projects/wt.convereter.html at main · srujana-manda/JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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>Weight Converter</title>
    <style>
     body{
    margin: 0;
    background: linear-gradient(to left top, yellow, lightblue, yellow);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    color: darkcyan;
}

.container{
    background: rgba(255,255,255,0.3);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    border-radius: 10px;
    width: 85%;
    max-width: 450px;
}

.input-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
}

.input{
    padding: 10px;
    width: 70%;
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
    font-size: 18px;
    border-radius: 10px;
    color: darkgreen;
    outline: none;
}

.error{
    color: red;
}
    </style>

</head>
<body>
    <div class="container">
        <h1 class="heading">Weight Converter</h1>
        <div class="input-container">
            <label for="pounds">Pounds:</label>
            <input type="number" id="input" class="input" step=".1" placeholder="Enter number">
        </div>
        <p>Your weight in kg is: <span id="result"></span></p>
        <p class="error" id="error"></p>
    </div>
    <script>
        const inputE1 = document.getElementById("input");
        const errorE1 = document.getElementById("error");
        const resultE1 = document.getElementById("result");

        let errorTime;
        let resultTime;

        function updateResult(){
            if(inputE1.value < 0 || isNaN(inputE1.value)){
                errorE1.innerText = "!please enter a valid number";
                clearTimeout(errorTime);
                errorTime = setTimeout(() => {
                    errorE1.innerText="";
                    inputE1.value="";
                }, 2000);
            }else{
                resultE1.innerText = (+inputE1.value / 2.2).toFixed(2);
                clearTimeout(resultTime);
                resultTime = setTimeout(() => {
                resultE1.innerText = "";
                inputE1.value = "";
             }, 10000);
             }
            }


        inputE1.addEventListener("input",updateResult);
    </script>
</body>
</html>