somu-odoo · khpa-odoo · Mar 13, 2023 · Mar 13, 2023 · Mar 14, 2023 · Mar 14, 2023
diff --git a/js-day-1/Activity.html b/js-day-1/Activity.html
@@ -0,0 +1,12 @@
+<html>
+    <head>
+        <title>JS Activity</title>
+    </head>
+    <body>
+        <input type="text" id="data" placeholder="Enter number b/w 1 to 10"/>
+        <button id="check">Guess</button>
+        <p id="result"></p>
+        <div id="trials"></div>
+        <script src="Activity.js"></script>
+    </body>
+</html>
diff --git a/js-day-1/Activity.js b/js-day-1/Activity.js
@@ -0,0 +1,31 @@
+btn = document.getElementById("check");
+input = document.getElementById("data");
+output = document.getElementById("result");
+trials = document.getElementById("trials");
+
+let count = 5;
+const comp = Math.floor(Math.random()*10)+1;
+console.log(comp);
+
+btn.addEventListener('click', () => {
+    trials.innerHTML = "No. of trials remaining : " + (count-1);
+
+    if(comp == input.value){
+        output.innerHTML = "CORRECT!";
+        trials.innerHTML = '';
+    }
+    else if(comp > input.value){
+        output.innerHTML = "LOW";
+        count--;
+    }
+    else{
+        output.innerHTML = "HIGH";
+        count--;
+    }
+
+    input.value = '';
+    if(count<1){
+        btn.style.display = 'none';
+        trials.innerHTML += "<br/><br/>Correct answer was : " + comp;        
+    }
+})
diff --git a/js-day-1/Api_Activity.html b/js-day-1/Api_Activity.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Display API Data</title>
+        <script>            
+            const url = "https://fakestoreapi.com/products";
+
+            // let storeData = fetch(url)
+            //         .then(response => response.json())
+            //         .then(data => console.log(data))
+            //         console.log(storeData);
+
+            async function getapi(url) {
+                // Storing response
+                const response = await fetch(url);
+
+                // Storing data in form of JSON
+                var data = await response.json();
+                console.log(data);
+                if (response) {
+                    hideloader();
+                }
+                show(data);
+            }
+
+            getapi(url);
+
+            // Function to hide the loader
+            function hideloader() {
+                document.getElementById('loading').style.display = 'none';
+            }
+
+            function show(data) {
+                let tab = 
+                    `<tr>
+                    <th>Details</th>
+                    </tr>`;
+
+                // Loop to access all rows 
+
+                data.forEach(r => {                        
+                    tab += `
+                    <tr><td>${r.id} </td><td><img src="${r.image}" alt="product image" width="100" height="100"></td></tr>
+                    <tr><td>${r.category}</td></tr>
+                    <tr><td>${r.price}</td> </tr>
+                    <tr><td>${r.description}</td></tr>
+                    <tr><td>${r.rating.rate}</td></tr>
+                    <tr><td>${r.rating.count}</td></tr>`;
+
+                });
+
+                document.getElementById("products").innerHTML = tab;
+            }
+        </script>
+        <style>
+            #products{
+                font-size: 20px;
+                padding: 30px;
+                border: 3px solid blue;
+                border-radius: 20px;
+            }
+            th{
+                font-size: 35px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="d-flex justify-content-center">
+            <div class="spinner-border" 
+                role="status" id="loading">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <h1 style="text-align: center;font-size: 70px;">Registered Products</h1>
+        <!-- table for showing data -->
+        <table id="products"></table>
+    </body>
+</html>
diff --git a/js-day-2/day2.html b/js-day-2/day2.html
@@ -0,0 +1,6 @@
+<html>
+    <body>
+        <script src="owl.js"></script>
+        <script src="day2.js"></script>
+    </body>
+</html>
diff --git a/js-day-2/day2.js b/js-day-2/day2.js
@@ -0,0 +1,66 @@
+const {Component , mount , xml , useState, reactive, useEnv, onWillRender , onWillStart , onMounted , onWillPatch , onPatched , onRendered , onWillUnmount , onWillDestroy , onError} = owl;
+
+const finalData = () => {
+    const apple = useEnv();
+    return useState(apple.store);
+}
+
+class Datalist{
+    count = 0;
+    updateCount(){this.count++;}
+    getCount(){return this.count;}
+}
+
+class Second extends Component {
+    static template = xml`
+    <b>Second 
+    <t t-esc = "props.drink.tea + ' '" /> 
+    <t t-esc = "props.fruit + ' '" /> 
+    <t t-esc = "'Count : ' + this.bottle.getCount()" /></b>
+    `;
+
+    static props = ["fruit","drink"];
+
+    setup(){
+        this.bottle = finalData();
+    }
+}
+
+class Root extends Component {
+    static template = xml`
+    <b>Hello</b><br/>
+    <Second fruit="abc" drink="cafe"/><br/>
+    <button t-on-click="clickMe">Click!</button>
+    `;
+
+    abc = "apple";
+    static components = { Second };
+
+    setup(){
+        onWillStart(() => console.log("onWillStart Called..."));
+        onWillRender(() => console.log("onWillRender Called..."));
+        onMounted(() => console.log("onMounted Called..."));
+        onRendered(() => console.log("onRendered Called..."));
+        onWillPatch(() => console.log("onWillPatch Called..."));
+        onPatched(() => console.log("onPatched Called..."));
+        // onWillUnmount(() => console.log("onWillUnmount Called..."));
+        // onWillDestroy(() => console.log("onWillDestroy Called..."));
+        // onError(() => console.log("onError Called..."));
+
+        this.cafe = useState({tea: 3,coffee: 4});
+        this.cap = finalData();
+    }
+
+    clickMe(){
+        this.cap.updateCount();
+        console.log("Button is clicked!");
+    }
+}
+
+const createData = () => {
+    return reactive(new Datalist);
+}
+
+const env = {store : createData()};
+
+mount(Root,document.body,{dev: true,env});
diff --git a/js-day-2/guess_game.html b/js-day-2/guess_game.html
@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <style>
+            body{
+                text-align: center;
+                margin-top: 70px;
+            }
+        </style>
+    </head>
+    <body>
+        <script src="owl.js"></script>
+        <script src="guess_game.js"></script>
+    </body>
+</html>
diff --git a/js-day-2/guess_game.js b/js-day-2/guess_game.js
@@ -0,0 +1,102 @@
+const {Component , mount , xml , useState, useEnv, reactive} = owl;
+
+const comp = Math.floor(Math.random()*10)+1;
+let count = 5;
+
+const finalData = () => {
+    const guess = useEnv();
+    return useState(guess.store);
+}
+
+class Input extends Component {
+    static template = xml`
+    <input type="text" id="data" placeholder="Enter number b/w 1 to 10"/>
+    `;
+
+    getInput(){
+        let input = document.getElementById("data");
+        return input;
+    }
+}
+
+class Root extends Component {
+    static template = xml`
+    <Input />
+    <div/><br/>
+    <button id="btn" t-on-click="check">Guess!</button>
+    <div/><br/>
+    <div id="display"></div>
+    `;
+
+    static components = { Input };
+
+    setup(){
+        this.user = finalData();
+    }
+
+    check(){
+        console.log(comp);
+        const display = document.getElementById("display");
+        let userData = this.user.getInput();
+
+        if(comp == userData.value){
+            display.innerHTML = "Correct";
+        }
+        else if(comp > userData.value){
+            display.innerHTML = "Low";
+            count--;
+        }
+        else{
+            display.innerHTML = "High";
+            count--;
+        }
+
+        display.innerHTML += "<br/><br/>No. of trials remaining : " + (count);
+        userData.value = '';
+
+        if(count<1) {
+            display.innerHTML += "<br/><br/>Correct answer was : " + (comp);
+            document.getElementById("btn").style.display='none';
+        }
+    }
+}
+
+const createData = () => {
+    return reactive(new Input);
+}
+
+const env = {store : createData()};
+
+mount(Root,document.body,{dev: true,env});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+