somu-odoo · suva-odoo · Mar 13, 2023 · Mar 13, 2023 · Mar 14, 2023 · Mar 15, 2023
diff --git a/Activity/activity1.css b/Activity/activity1.css
@@ -0,0 +1,13 @@
+input[type=text] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: 2px solid blueviolet;
+    border-radius: 4px;
+
+  }
+  #result{
+    color:red;
+  }
+
diff --git a/Activity/activity1.html b/Activity/activity1.html
@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <title>Activity 1</title>
+    <link rel="stylesheet" href="activity1.css"/>
+  </head>
+  <body>
+      <form>
+        <h2>Guess a number that matches with computer</h2>
+        <h3 id="result"></h3>
+        <p>Number of trials:</p>
+        <p id="trials"></p>
+        <input id="guess" type="text" onchange="guessNumber()"/>
+        <script>
+            let x = Math.floor((Math.random() * 10) + 1);
+            let count=0;
+            document.write("Computer Guess: "+x)
+            function guessNumber(){
+                count++;
+                let num=document.getElementById("guess").value;
+                let result=document.getElementById("result")
+
+                console.log(x)
+                console.log(num)
+                if(num < x){
+                   result.innerHTML="LOWER THAN VALUE"
+                }
+                else if(num > x){
+                   result.innerHTML="HIGHER THAN VALUE"
+
+                }
+                else{
+                   result.innerHTML="CORRECT"
+                   result.style.color='green'
+                }
+              document.getElementById("trials").innerHTML =count
+
+            }
+
+        </script>
+
+      </form>
+  </body>
+
+</html>
+
+
diff --git a/Activity2/fetch_products.css b/Activity2/fetch_products.css
@@ -0,0 +1,14 @@
+#products {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 1px;
+    padding: 2px;
+  }
+
+  #products > div {
+    background-color: rgba(255, 255, 255, 0.8);
+    text-align: center;
+    padding: 2px;
+    font-size: 15px;
+  }
+
diff --git a/Activity2/fetch_products.html b/Activity2/fetch_products.html
@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <title>
+            Fetch API
+        </title>
+        <link rel="stylesheet" href="fetch_products.css"/>
+    </head>
+    <body>
+        <script src="fetch_products.js"></script>
+        <h2>Data</h2>
+        <div id="products" style="display:grid;"></div>
+        <button id="btnnext">Next</button>
+    </body>
+</html>
diff --git a/Activity2/fetch_products.js b/Activity2/fetch_products.js
@@ -0,0 +1,34 @@
+async function getProducts(){
+   const url= "https://fakestoreapi.com/products"
+
+   try{
+    let response = await fetch(url);
+    return await response.json();
+   }catch(error){
+    console.log(error)
+   }
+}
+async function renderProducts() {
+        let products = await getProducts();
+        let html = '';
+        let i=0
+        products.forEach(product => {
+            if(i<10){
+            let htmlSegment = `<div style="height:500px;width:500px;border-style:solid;">
+                                <h2>${product.id} ${product.title}</h2>
+
+                                <img src="${product.image}" style="width:200px;height:200px;">
+
+                                <p>Price:${product.price}</p>
+                                <p>Description:${product.description}</p>
+                            </div>`;
+
+            html += htmlSegment;
+            i++;
+       }
+    });
+
+        document.getElementById("products").innerHTML = html;
+    }
+
+renderProducts();
diff --git a/Day-2_Activity1/activity_day2.html b/Day-2_Activity1/activity_day2.html
@@ -0,0 +1,7 @@
+
+<html>
+  <body>
+      <script src="owl.js"></script>
+      <script src="activity_day2.js"></script>
+  </body>
+</html>
diff --git a/Day-2_Activity1/activity_day2.js b/Day-2_Activity1/activity_day2.js
@@ -0,0 +1,73 @@
+
+const {Component,mount,xml,useState,useEnv,reactive}=owl
+
+const finalData=()=>{
+     const counter=useEnv();
+     return useState(counter.store)
+}
+
+class dataList{
+    count=0;
+    updateCount(){ this.count++; }
+    getCount(){ return this.count; }
+}
+
+
+class Second extends Component{
+    static template=xml`
+    <t t-esc="props.x.x"/><br/>
+    <b>Please Guess the number: </b>
+    <input type="text" t-on-change="check" id="guess"/>
+    <h2 id="result" style="color:red;"></h2>
+    <p>No. of Trials:</p>
+    <p id="trials"></p>
+    `;
+    static props=["x"]
+
+    setup(){
+        this.counter=finalData();
+    }
+    check(evt){
+        this.counter.updateCount();
+
+        let num=evt.target.value;
+        let x=this.props.x.x;
+        let result=document.getElementById("result")
+        if(num <x){
+            result.innerHTML="LOWER THAN GUESS";      
+        }
+        else if(num >x){
+            result.innerHTML="HIGHER THAN GUESS";
+        }
+        else{
+            result.innerHTML="CORRECT GUESS";
+            result.style.color='green'
+        }  
+        document.getElementById("trials").innerHTML=this.counter.getCount();
+
+    }
+
+
+}
+
+class Root extends Component{
+    static template=xml`<b>Computer Guess:</b>
+    <Second x="data"/>
+
+   `;
+    setup(){
+    let x = Math.floor((Math.random() * 10) + 1);
+    console.log(x)
+    this.data=useState({x:x})
+
+    }
+
+    static components={Second};
+
+}
+const createData=()=>{
+    return reactive(new dataList);
+}
+
+const env={store:createData()}
+mount(Root,document.body,{dev:true,env});