somu-odoo · mash-odoo · Mar 13, 2023 · Mar 13, 2023 · Mar 14, 2023 · Mar 14, 2023
diff --git a/Workshop Day 1/apiFetch.html b/Workshop Day 1/apiFetch.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Fetching API</title>
+        <script>
+
+            const url = "https://fakestoreapi.com/products";
+            const itemsPerPage = 5;  // Change this to adjust the number of items per page
+            let currentPage = 1;
+            let data = [];
+
+            async function getapi(url) {
+
+                // Storing response
+                const response = await fetch(url);
+
+                // Storing data in form of JSON
+                data = await response.json();
+                console.log(data);
+                if (response) {
+                    hideloader();
+                }
+                show(currentPage);
+            }
+
+            getapi(url);
+
+            // Function to hide the loader
+            function hideloader() {
+                document.getElementById('loading').style.display = 'none';
+            }
+
+            function show(pageNumber) {
+                let start = (pageNumber - 1) * itemsPerPage;
+                let end = start + itemsPerPage;
+                let pageData = data.slice(start, end);
+
+                let tab = 
+                    `<tr>
+                    <th>Id</th>
+                    <th>Category</th>
+                    <th>Price</th>
+                    <th>Description</th>
+                    <th>Rating</th>
+                    <th>Count</th>
+                    <th>Image</th>
+                    </tr>`;
+
+                // Loop to access all rows 
+
+                pageData.forEach(r => {
+
+                    tab += `<tr> 
+                    <td>${r.id} </td>
+                    <td>${r.category}</td>
+                    <td>${r.price}</td> 
+                    <td style="text-align:left">${r.description}</td>
+                    <td>${r.rating.rate} </td>
+                    <td>${r.rating.count} </td>
+                    <td><img src="${r.image}" alt="product image" width="100" height="100"></td>
+                </tr>`;
+
+                });
+
+                document.getElementById("products").innerHTML = tab;
+            }
+
+            function nextPage() {
+                currentPage++;
+                if (currentPage > Math.ceil(data.length / itemsPerPage)) {
+                    currentPage = 1;
+                }
+                show(currentPage);
+            }
+
+        </script>
+        <style>
+            table,td{
+                border: 2px solid black;
+                border-collapse: collapse;
+                text-align: center;
+            }
+            tr:hover{
+                background-color: rgb(192, 233, 249);
+            }
+            #next{
+                margin-top: 20px;
+                margin-left: 800px;
+                height: 40px;
+                width: 80px;
+                border-radius: 10px;
+            }
+            #next:hover{
+                background-color: rgb(18, 137, 153);
+                color: white;
+            }
+        </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>Registered Products</h1>
+        <!-- table for showing data -->
+        <table id="products"></table>
+        <button onclick="nextPage()" id="next">Next</button>
+    </body>
+</html>
diff --git a/Workshop Day 1/numberGuess.html b/Workshop Day 1/numberGuess.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Random Number Guess</title>
+        <script>
+            var rand = Math.floor(Math.random() * 10)+1;
+            var guesses = 3;
+            flag=0;
+
+            function check(){
+
+                let number = document.getElementById("no").value;
+
+                if(number > rand){
+                    document.getElementById("result").innerHTML+="<br/>High!";
+                    console.log(guesses);
+                }
+                else if(number < rand){
+                    document.getElementById("result").innerHTML+="<br/>Low!";
+                    console.log(guesses);
+                }
+                else{
+                    document.getElementById("result").innerHTML+="<br/>Correct!";
+                    document.getElementById("no").disabled = true;
+                    flag=1;
+                }
+                guesses--;
+                if (guesses == 0 && flag==0){
+                    result.innerHTML += "<br>Game over. The correct number was " + rand + "!!";
+                    document.getElementById("no").disabled = true;
+                }
+                document.getElementById("guessesRemaining").innerHTML = "Guesses remaining: " + guesses;
+
+            }
+        </script>
+        <style>
+            .container{
+               text-align: center;
+               padding: 50px;
+               float: left;
+               background-color: aquamarine;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Guess a number</h1>
+            <p id="guessesRemaining">Guesses remaining: 3</p>
+            <p>Guess a number between 1 to 10 : </p>
+            <input type = "text" id = "no">
+            <button onclick="check()" id = "check">Check!</button>
+            <div id = "result">
+        </div>
+    </body>
+</html>
diff --git a/Workshop Day 2/7934c6cf66ceade7c2986687946067b2.jpg b/Workshop Day 2/7934c6cf66ceade7c2986687946067b2.jpg
diff --git a/Workshop Day 2/day2.html b/Workshop Day 2/day2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <script src="owl.js"></script>
+        <script src="day2.js"></script>
+    </body>
+</html>
diff --git a/Workshop Day 2/day2.js b/Workshop Day 2/day2.js
@@ -0,0 +1,107 @@
+const {Component, mount, xml, onWillRender, onWillStart, onMounted, onWillPatch, onRendered, onPatched, onError,
+        onWillUnmount, onWillDestroy, useState, reactive, useEnv} = 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</b><br/>
+        <t t-esc = "props.fruit"/><br/>
+        <t t-esc = "props.cafe.tea"/><br/>
+        <t t-esc = "this.bottle.getCount()"/><br/>
+    `;
+
+    static props = ["fruit","cafe"];
+
+    setup(){
+        this.bottle = finalData();
+    }
+}
+
+class Root extends Component{
+
+    static template = xml`
+            <b>Hello</b><br/>
+            <Second fruit="abc" cafe="cafe"/>
+            <button t-on-click="clickMe">Click!</button>
+        `;
+
+    abc = "apple";
+
+    setup(){
+        onWillRender(() => console.log("Will Render"));
+        onWillStart(() => console.log("Will Start"));
+        onMounted(() => console.log("Mounted"));
+        onWillPatch(() => console.log("Will Patch"));
+        onPatched(() => console.log("Patched"));
+        onRendered(() => console.log("Rendered"));
+        onWillUnmount(() => console.log("Will Unmount"));
+        onWillDestroy(() => console.log("Will Destroy"));
+        onError(() => console.log("Error"));
+
+        this.cafe = useState({tea:3, cofee:4});
+        this.cap = finalData();
+
+    }
+
+    clickMe(){
+        console.log("Clicked");
+        this.cap.updateCount();
+    }
+
+    static components = {Second};
+}
+
+const createData = () => {
+    return reactive(new dataList);
+}
+
+const env = { store : createData() }
+
+mount(Root, document.body, {dev : true, env});
+
+
+//2 components, guess and user input
+
+// const {Component, mount, xml} = owl;
+
+// class Second extends Component{
+//     static template = xml`
+//         <b>Second</b><br/>
+//         <t t-esc = "props.fruit"/><br/>
+//         <t t-esc = "props.veggies"/>
+//     `;
+
+//     static props = ["fruit","veggies"];
+// }
+
+// class Root extends Component{
+
+//     static template = xml`
+//             <b>Hello</b><br/>
+//             <Second fruit="abc" veggies/>
+//         `;
+
+//     abc = "apple";
+
+//     static prop = ["veggies"]
+//     static components = {Second};
+// }
+
+// class Veg extends Component{
+//     static template = xml`
+//             <Root veggies="tomato"/>
+//         `;
+//     static components = {Root};
+// }
+
+// mount(Root, document.body);
diff --git a/Workshop Day 2/numberGuess.js b/Workshop Day 2/numberGuess.js
@@ -0,0 +1,76 @@
+const {Component , mount , xml , useState, useEnv, reactive} = owl;
+
+const rand = Math.floor(Math.random()*10)+1;
+let guesses = 3;
+let flag=0;
+
+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(){
+        const input = document.getElementById("data").value;
+        console.log(input);
+        return input;
+    }
+
+}
+
+class Root extends Component {
+    static template = xml`
+    <h1>Guess the Number</h1>
+    <p>Guess a number between 1 to 10 : </p>
+    <Input />
+    <div></div><br/>
+    <button t-on-click="check">Guess!</button>
+    `;
+
+
+    static components = { Input };
+
+    setup(){
+        this.user = finalData();
+    }
+
+    check(){
+
+        let no = this.user.getInput()
+
+        console.log('clicked');
+
+        console.log('co'+rand);
+
+        if(no > rand){
+            console.log("High");
+        }
+        else if(no < rand){
+            console.log("Low");
+        }
+        else{
+            console.log("Correct");
+            document.getElementById("data").disabled = true;
+            flag=1;
+        }
+
+        guesses--;
+
+        if(guesses==0 && flag==0){
+            console.log("Game over. The correct number was " + rand + "!!")
+            document.getElementById("data").disabled = true;
+        }
+    }
+}
+
+const createData = () => {
+    return reactive(new Input);
+}
+
+const env = {store : createData()};
+
+mount(Root,document.body,{dev: true,env});
diff --git a/Workshop Day 2/numberGuessOWL.html b/Workshop Day 2/numberGuessOWL.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <script src = "owl.js"></script>
+        <script src = "numberGuess.js"></script>
+    </body>
+</html>
+
+