Nikhil-2002 · PARKER-X · Oct 29, 2023
diff --git a/jsapi/README.md b/jsapi/README.md
@@ -0,0 +1,13 @@
+# js-api
+Javascript Api := https://restcountries.com/v3.1/name/india
+
+Demo
+![image](https://user-images.githubusercontent.com/74282916/210176757-fc447b41-720b-49e1-a3d9-c22170be820c.png)
+
+
+
+
+
+Dad Jokes Api := https://icanhazdadjoke.com/
+![image](https://user-images.githubusercontent.com/74282916/210251631-51737f7d-2b5b-4612-a4e0-236edf21b593.png)
+
diff --git a/jsapi/THERMOMETER.html b/jsapi/THERMOMETER.html
@@ -0,0 +1,68 @@
+<!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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>Document</title>
+</head>
+<style>
+    body{
+        text-align: center;
+        background-color: blue;
+    }
+    .innerDiv{
+        text-align: center;
+        padding-top: 200px;
+        font-size: 2rem;
+        text-transform: capitalize;
+        text-decoration: tomato;
+        text-overflow: clip;
+    }
+</style>
+<body>
+
+
+
+    <div class="outerDiv">
+        <div class="innerDiv">
+            <h1 class="main-heading"> I am thermometer <span id = "temp" class="fa"></span></h1>
+
+        </div>
+    </div>
+
+    <script>
+
+        const tempLoad = () => {
+            let temp = document.getElementById('temp');
+            temp.innerHTML = "&#xf2cb";
+
+
+        setTimeout(() => {
+            temp.innerHTML = "&#xf2ca";
+            temp.style.color = "orangered";
+        },1000);
+
+        setTimeout(() => {
+            temp.innerHTML = "&#xf2c9";
+            // temp.style.color = "red";
+        },2000);    
+
+        setTimeout(() => {
+            temp.innerHTML = "&#xf2c8";
+            // temp.style.color = "blue";
+        },3000);
+
+        setTimeout(() => {
+            temp.innerHTML = "&#xf2c7";
+            temp.style.color = "red";
+        },4000);
+        }
+
+        tempLoad();
+
+        setInterval(tempLoad,5000);
+    </script>
+</body>
+</html>
diff --git a/jsapi/bulb.html b/jsapi/bulb.html
@@ -0,0 +1,37 @@
+<!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>
+
+<style>
+    body{
+        text-align: center;
+    }
+</style>
+<body>
+
+    <img id="lighbulb" onclick="changeImage()" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/93927/pic_bulboff.gif" width="200" height="360">
+     I
+    <p>Click the light bulb to turn on/off the light.</p>
+
+    </body>
+
+
+    <!-- Javascript -->
+
+    <script>
+        function changeImage() {
+        var image = document.getElementById('lighbulb');
+        if (image.src.match("bulbon")) {
+            image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/93927/pic_bulboff.gif";
+        } else {
+            image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/93927/pic_bulbon.gif";
+        }
+    }
+    </script>
+
+</html>
diff --git a/jsapi/count.css b/jsapi/count.css
@@ -0,0 +1,21 @@
+*{
+    padding: 0px;
+    margin: 0px;
+
+}
+
+.flex{
+    display: flex;
+}
+
+.none{
+    list-style: none;
+}
+
+.p-20{
+    padding: 20px;
+}
+
+.p-20-right{
+    padding-right: 20px;
+}
diff --git a/jsapi/counter.html b/jsapi/counter.html
@@ -0,0 +1,87 @@
+<!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>
+    <link rel="stylesheet" href="count.css">
+</head>
+<body>
+
+    <!-- Navbar -->
+    <div class="navbar flex" >
+        <ul class="navbar flex none p-20">
+            <div class="logo flex">
+                <h4 class="p-20-right">Logo</h4>
+            </div>
+            <li class="p-20-right">Home</li>
+            <li class="p-20-right">Services</li>
+            <li class="p-20-right">Courses</li>
+            <li class="p-20-right">About Us</li>
+        </ul>
+
+        <div class="header">
+            <div class="signin">
+                Dashboard
+            </div>
+            <div class="signin">
+                SignIn
+            </div>
+        </div>
+    </div>
+
+    <div class="counter-containe">
+        <div class="counter" data-target="1000">
+            <span>Hello</span>
+
+        </div>
+
+    </div>
+
+    <div class="counter-containe">
+        <div class="counter" data-target="2320">
+            <span>Hello</span>
+
+        </div>
+
+    </div>
+
+    <div class="counter-container">
+        <div class="counter" data-target="1300">
+            <span>Hello</span>
+
+        </div>
+    </div>
+
+
+
+</body>
+
+<script>
+    const counters = document.querySelectorAll('.counter');
+
+    counters.forEach((counter) => {
+        counter.innerHTML = 0;
+
+        const  updateCounter = () => {
+            const targetCount = +counter.getAttribute('data-target'); //+ for converting string into number
+            // console.log(targetCount);
+
+            const startingcount = Number(counter.innerHTML);
+
+            const incr = targetCount/100;
+            if (startingcount < targetCount){
+                counter.innerHTML = `${Math.round(startingcount + incr)}`;
+                setTimeout( updateCounter, 1000)
+            }
+            else{
+                counter.innerHTML = targetCount;
+            }
+        }
+
+        updateCounter();
+    })
+
+</script>
+</html>
diff --git a/jsapi/index.html b/jsapi/index.html
@@ -0,0 +1,151 @@
+<!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>
+
+<style>
+    /* https://youtu.be/A_8DSKGWWYI */
+@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    font-family: 'Londrina Solid', cursive;
+}
+
+.container{
+    width: 300px;
+    height: 425px;
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
+    transition: all 0.6s ease;
+}
+
+.container:hover{
+    box-shadow: rgba(255, 172, 28, 0.199) -10px 10px, rgba(255, 172, 28, 0.19) -20px 20px ;
+}
+
+.container .img{
+    height: 40%;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAB5CAMAAACjkCtXAAAAkFBMVEX/mTMSiAf/////khf/4s3K3csAfgAAAIDe3uza2uoAAHr8/P7y8vjKyuGMjL7p6fKjo8rj4+7R0eVxca5OTpoAAIirq861tdV/f7Q8PJdMTJwSEohVVaJiYqRCQpavr868vNkrK4+/v9VJSZ+WlrtnZ6IeHo2VlcNubqIgIIgvL4+OjrknJ5GFhbQ1NZJXV50aV7fSAAACZklEQVR4nO2Y6W6jMBCA2enuGnwAxuHIwVFi6rRp0vd/uzXdSCt1/w5WLc2nCBMhMV9Gk8FMkhAEQRAEQRAEQRAEQRAEQRAEQRAEEQ9PUZL8jJIEooS0Q7KVdtrkxuRNutHtN9FWHeP88emU2CDCBtrZwhjbH45KHQ97f9pn+DHQtYXjfGCZENIjRMYGzh16wtG1e1a7QoMC0NqXC+jC1azHjoKsLU5s38tMgK4gy6DSIDLZ79kJOd/I2oYNmYTC5zoHpfwBVAEyG5jBjYOrPTI+Sd/0ygJyOc8yh6L0zVBOnI2ogVC1i+faaKgUCANlNc9VCUaAqkCb+rnAjISqnfNO+qVtoWwqO8+2apr1G4DseI4ZCVNbvPIWprVGGrlLz/N8TneyWatkgpa/Yv4rMbVH9uYzOzsF1jbdMo5L11gLys3+2htqdWNq37yZT6l0Rne268oy90tqnC8c4X/TDTEUorY8HStdTWMK2e5qXWvM6Oz1kIFuJ3/heJJ4sRC1ixdm/TF1vSkb09zr+u6X0vQu9V3EshfEXoKordld/z1T7qrOrK7ZsJ49rt6ZxouFqc0/pJpysyyXS9+91573rr9clqXPW1V8fFftf9m2VzXEku0vtb33tT2a8dvX9v+dpI2hk3zp27dI+vb6lBwjfEpGuieJdAfo99ssxv12pG83sb5Lxvrm/jknuUY3J3lMperoplKRzgBXopy4fhLjfHt7SDskya8oSX5HSfIjSkg7JKQdEtIOCWmHhLRDQtohIe2QkHZISDskpB0S0g4JaYeEtENC2iEh7ZCQdkhIOySkHRLSDskfFNqVGPmFFHAAAAAASUVORK5CYII=");
+    background-size: cover;
+}
+
+.container .content{
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    font-weight: 300;
+}
+
+.container .content h3{
+    width: 200px;
+    font-weight: 300;
+    font-size: 30px;
+    padding-bottom: 5px;
+    border-bottom: 4px solid #FFAC1C;
+}
+
+.container .content p{
+    font-size: 22px;
+    margin-top: 20px;
+    margin-bottom: 15px;
+}
+
+.container .content a{
+    list-style-type: none;
+    text-decoration: none;
+}
+
+.container .content button{
+    font-family: 'Londrina Solid', cursive;
+    font-weight: 100;
+    font-size: 20px;
+    color: #FFAC1C;
+    width: 100%;
+    height: 45px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border: none;
+    border-radius: 5px;
+    background-color: #ffac1c26;
+    transition: 0.2s ease-in-out;
+}
+
+.container .content button:hover{
+    background-color: #ffac1c3f;
+    cursor: pointer;
+}
+
+
+</style>
+
+<body>
+
+
+    <!-- Design -->
+
+<div class="container" id="container">
+
+</div>
+
+
+</body>
+
+<!-- Js -->
+
+<script>
+
+    // selecting container id
+    const container = document.querySelector('#container');
+    // request the data
+    const request = new XMLHttpRequest();
+    request.open('GET',"https://restcountries.com/v3.1/name/india");
+    request.send();
+
+
+    // To get request data into your web page
+    request.addEventListener('load', function(){
+        const [data] = JSON.parse(this.responseText)
+        console.log(data.capital);
+        console.log(data.flags);
+
+        // Add Data into Html 
+        const htmldata  = `
+        <div class="img"> </img></div>
+    <div class="content">
+        <h3>${data.capital}</h3>
+        <p>${data.altSpellings}</p>
+        <a href="#">
+            <button>${data.timezones}</button>
+        </a>
+    </div>
+
+
+        `;
+
+        container.insertAdjacentHTML("afterbegin",htmldata)
+
+    })
+
+
+</script>
+
+
+</html>