week4.1 DOM

-
// eg: adding two number by taking user input. **
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        function populateDiv() {
        const a = document.getElementById("firstNumber").value;
        const b = document.getElementById("secondNumber").value;
        const element = document.getElementById("finalSum")
        element.innerHTML = parseInt(a) + parseInt(b);
        
        }
    </script>
    <input id="firstNumber" type="text" placeholder=" First number"></input>
    <br>
    <input id="secondNumber" type="text" placeholder=" Second number"></input>
    <br>
    <button onclick="populateDiv()">Calculate</button>
    <br>
    <div id="finalSum"></div>
</body>
</html>
 
 
//Calculating the sum in real time**
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        async function populateDiv() {
            const a = document.getElementById("firstNumber").value;
            const b = document.getElementById("secondNumber").value;
            const element = document.getElementById("finalSum")
            element.innerHTML = parseInt(a) + parseInt(b);
        }
    </script>

    <input onchange="populateDiv()" id="firstNumber" type="text" placeholder=" First number"></input>
    <br>
    <input onchange="populateDiv()" id="secondNumber" type="text" placeholder=" Second number"></input>
    <br>
    <div id="finalSum"></div>
</body>

</html> 


//Here we created a backend that will help to calculate the sum of two numbers   #ugly way**
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function populateDiv() {
            const a = document.getElementById("firstNumber").value;
            const b = document.getElementById("secondNumber").value;
            const element = document.getElementById("finalSum")

            fetch("https://sum-server.100xdevs.com/sum?a=0" + a + "&b" + b)
            .then(function (response) {
                response.text()
                .then(function (ans) {
                    console.log(ans);
                    document.getElementById("finalSum").innerHTML = ans;
                })
            });
            // element.innerHTML = parseInt(a) + parseInt(b);
        }
    </script>

    <input id="firstNumber" type="text" placeholder=" First number"></input><br>
    <input id="secondNumber" type="text" placeholder=" Second number"></input><br>
    <button onclick="populateDiv()">Click to calculate</button>
    < <div id="finalSum"></div>
</body>

</html>


//Here we created a backend that will help to calculate the sum of two numbers   # in a pretty way**
//  frontend that will take user input
<!-- //here we created a backend that will help to calculate the sum of two numbers -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input id="firstNumber" type="text" placeholder=" First number"></input><br>
    <input id="secondNumber" type="text" placeholder=" Second number"></input><br>
    <button onclick="populateDiv()">Click to calculate</button>
    < <div id="finalSum"></div>

    
    <script>
        async function populateDiv2() {
            const a = document.getElementById("firstNumber").value;
            const b = document.getElementById("secondNumber").value;

            const response = await fetch("https://sum-server.100xdevs.com/sum?a=0" + a + "&b" + b)
            const ans = await response.text();
            document.getElementById("finalSum").innerHTML = ans;
        }
    </script>
</body>

</html>




// Backend server that will calculate the sum of two digits**
const express = require("express");

const app = express();

app.get("/sum", (req, res) => {
    const a = parseInt(req.query.a);
    const b = parseInt(req.query.b);
    const sum = a+b;
    res.send(sum.toString());
});

app.get("/interest", (req,res) => {
    const principal = parseInt(req.query.principal);
    const rate = parseInt(req.query.rate);
    const time = parseInt(req.query.time);
    const interest = (principal*rate*time)/100;
    const total = principal + interest;
    res.send({
        total: total,
        interest: interest,
    })

})

let http = require('http'),
    fs = require('fs');
fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err;
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(80);
});


//debouncing is a method that works when the user finishes, and then it will send the query in the backend/delead requests sent.**

<!-- //here we created a backend that will help to calculate the sum of two numbers -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input oninput="debouncePopulateDiv()" id="firstNumber" type="text" placeholder=" First number"></input><br>
    <input oninput="debouncePopulateDiv()" id="secondNumber" type="text" placeholder=" Second number"></input><br>
    <button onclick="populateDiv()">Click to calculate</button>
    < <div id="finalSum">
        </div>

        <script>

            //delay the call to populateDiv until i have not been called for 100ms
            // and I've been called at least once
            //clear the timeOut
            let timeout ;
            function debouncePopulateDiv() {
                clearTimeout(timeout)
                setTimeout(() => {
                    populateDiv()
                }, 100);
            }

            

            async function populateDiv() {
                const a = document.getElementById("firstNumber").value;
                const b = document.getElementById("secondNumber").value;

                const response = await fetch("./index.js" + a + "&b" + b)
                const ans = await response.text();
                document.getElementById("finalSum").innerHTML = ans;
            }

        </script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

CyberSecurity

-
 # 🔒 CYBERSECURITY A TO Z - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Cybersecurity - From Noob to Pro ================================================================================ TABLE OF CONTENTS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS 2. COMMON THREATS & ATTACKS 3. AUTHENTICATION & AUTHORIZATION 4. ENCRYPTION & CRYPTOGRAPHY 5. NETWORK SECURITY 6. WEB APPLICATION SECURITY 7. DATABASE SECURITY 8. API SECURITY 9. CLOUD SECURITY 10. INCIDENT RESPONSE 11. COMPLIANCE & STANDARDS 12. SECURITY TESTING 13. SECURE CODING PRACTICES 14. DEPLOYMENT SECURITY 15. MONITORING & DETECTION 16. REAL-WORLD IMPLEMENTATIONS ================================================================================ 1. CYBERSECURITY FUNDAMENTALS ================================================================================ WHAT IS CYBERSECURITY? Protection of computer systems, networks, and data fr...
Read more

VERTICAL SCALING 💋

-
 # 🚀 VERTICAL SCALING - COMPLETE GUIDE (0 to 100) # Everything You Need to Know About Vertical Scaling in JavaScript/TypeScript ================================================================================ TABLE OF CONTENTS ================================================================================ 1. WHAT IS VERTICAL SCALING? 2. VERTICAL VS HORIZONTAL SCALING 3. NODEJS CLUSTERING 4. LOAD BALANCING 5. MEMORY OPTIMIZATION 6. CPU OPTIMIZATION 7. DATABASE OPTIMIZATION 8. CACHING STRATEGIES 9. CONNECTION POOLING 10. RATE LIMITING 11. COMPRESSION & GZIP 12. WORKER THREADS 13. MONITORING & PROFILING 14. PRODUCTION DEPLOYMENT 15. COMPLETE EXAMPLES 16. TROUBLESHOOTING ================================================================================ 1. WHAT IS VERTICAL SCALING? ================================================================================ VERTICAL SCALING (Scale Up): Increasing the power of a single server. More CPU cores, more RAM, faster storage, better ...
Read more

prisma using in project idx 13.3

-
Okay, let's troubleshoot why you might be unable to use the Prisma schema in your Project IDX workspace. Here's a breakdown of common reasons and how to fix them: 1. Prisma is not installed Problem:  Prisma might not be installed in your IDX environment. Solution:  You'll need to add it to your  .idx/dev.nix  file, like this: nix { pkgs, ... }: { # ... other configurations packages = [ # ... other packages pkgs.nodePackages.prisma ]; # ... rest of your configuration } lua (auto) Once you add this line and  rebuild the environment  by clicking the popup message, IDX will install  prisma  and make it available in your workspace. 2. The Prisma CLI is not accessible Problem:  After installation, you might need to explicitly call the Prisma CLI using its full path or use  npx . Solution:  When running Prisma commands in your terminal (in IDX), use  npx prisma  (e.g.,  npx prisma migrate dev ) or ...
Read more