DEV Community

Veera Ganapathi
Veera Ganapathi

Posted on

DOM Mini Project Part-2

#task #dom #project #javascript

Task 7

Uppercase converter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uppercase</title>
</head>
<body>
    <h1 id="upper">hello</h1>
    <button onclick="change()">Change to Uppercase</button>
    <script>
        function change()
        {
        let upperCase=document.getElementById("upper").innerText;
        result=upperCase.toUpperCase();
        document.getElementById("upper").innerText=result;
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

Before Click


After Click

Task 8

Simple greeting alert box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple greeting alert box</title>
</head>
<body>
    <input type="text" id="greet">
    <button onclick="greet()">Greet</button>
    <script>
        function greet()
        {
            let name = document.getElementById("greet").value;
            alert("Hello, " + name + "!");
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode


Before


After

Task 9

Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
</head>
<body>
    <input type="text" id="val1">
    <input type="text" id="val2">

    <button onclick="add()">Add</button>
    <button onclick="subtract()">Subtract</button>
    <button onclick="multiply()">Multiply</button>
    <button onclick="divide()">Divide</button>
    <h1 id="res"></h1>

    <script>


        function add(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a+b;
        }

         function subtract(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a-b;
        }

         function multiply(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            document.getElementById("res").innerText=a*b;
        }

         function divide(){
            let a=Number(document.getElementById("val1").value);
            let b=Number(document.getElementById("val2").value);
            if(b===0){
                document.getElementById("res").innerText="Cannot divide by zero";
            }
            else{
                document.getElementById("res").innerText=a/b;
            }
        }
    </script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)