somu-odoo · prpa-odoo · Mar 13, 2023 · Mar 13, 2023 · Mar 13, 2023 · Mar 13, 2023
diff --git a/Activity/activity.html b/Activity/activity.html
@@ -0,0 +1,17 @@
+<!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>
+<body>
+    <h1>Choose Random Number Between 1 To 10 </h1>
+    Enter Number : <input id="num" type="text" />
+    <p id="random"></p>
+    <span>Trails:</span>
+    <span id ="try"></span>
+    <script src="activity.js"></script>
+</body>
+</html>
diff --git a/Activity/activity.js b/Activity/activity.js
@@ -0,0 +1,20 @@
+let num = document.getElementById("num")
+const r = Math.floor((Math.random()*10)+1);
+console.log(r);
+let a = 0;
+num.addEventListener('change',() => {
+    n1 = num.value;
+    let random = document.getElementById("random");
+    let tryn = document.getElementById("try");
+    if(n1 < r){
+        random.innerHTML = "To Much Lower";
+    }
+    else if(n1 >r){
+        random.innerHTML = "To Much Higher";
+    }
+    else{
+        random.innerHTML = "Perfect Match";
+    }
+    tryn.innerHTML =(a+=1);
+})
+
diff --git a/Activity2/activity2task1.html b/Activity2/activity2task1.html
@@ -0,0 +1,13 @@
+<!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>
+<body>
+    <button type="button" id="btn">Try It</button>
+    <script src="activity2task1.js"></script>
+</body>
+</html>
diff --git a/Activity2/activity2task1.js b/Activity2/activity2task1.js
@@ -0,0 +1,9 @@
+const add ="https://portal.tycoonstats.com/api/demo/1";
+
+btn.addEventListener("click",
+    async () =>{
+        const r = await fetch(add);
+        let data = await r.json();
+        console.log(data);
+    }
+)
diff --git a/Activity2/activity2task2.css b/Activity2/activity2task2.css
@@ -0,0 +1,22 @@
+.card {
+    box-shadow: 0 4px 8px 0 rgba(135, 110, 223, 0.2);
+    max-width: 300px;
+    margin: auto;
+    text-align: center;
+    font-family: arial;
+    background-color: rgb(89, 78, 78);
+  }
+
+  .price {
+    color: rgb(222, 102, 102);
+    font-size: 22px;
+  }
+
+  .center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50%;
+  }
+
+
diff --git a/Activity2/activity2task2.html b/Activity2/activity2task2.html
@@ -0,0 +1,16 @@
+<!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>
+<body>
+
+    <button type="button" id="btn">Show Product</button>
+    <table id="table_data"></table>
+    <script src="activity2task2.js"></script>
+
+</body>
+</html>
diff --git a/Activity2/activity2task2.js b/Activity2/activity2task2.js
@@ -0,0 +1,39 @@
+const product="https://fakestoreapi.com/products";
+
+btn.addEventListener("click",
+    async () =>{
+        const r = await fetch(product);
+        let data = await r.json();
+        console.log(data)
+
+        // let format = 
+        // `<tr>
+        //   <th>NAME</th>
+        //   <th>DESCRIPTION</th>
+        //   <th>PRICE</th>
+        //   <th>IMAGE</th>
+        //  </tr>`;
+
+
+        //  for(i=0;i<10;i++){
+
+        //     format += `<tr> 
+        //                <td>${data[i].title} </td>
+        //                <td>${data[i].description}</td>
+        //                <td>${data[i].price}</td>      
+        //                <td><img style="width:150px;height=150px" src="${data[i].image}"/></td>  
+        //                </tr>`;
+        // }
+        format=``;
+        for(i=0;i<10;i++){ 
+            format+=`<div class="card" style="border-style:solid;width:30%">
+                <img style="width:150px;height=150px" src="${data[i].image}"/>
+                <p>NAME: ${data[i].title}</p><br/>
+                <p>DESCRIPTION: ${data[i].description}</p><br/>
+                <p class="price">PRICE: ${data[i].price}</p>       
+                </div>`
+        }
+
+        document.getElementById("table_data").innerHTML = format;
+        }
+)
diff --git a/Day2/.vscode/settings.json b/Day2/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Day2/Activity2/activity2.html b/Day2/Activity2/activity2.html
@@ -0,0 +1,13 @@
+<!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>
+<body>
+    <script src ="owl.js"></script>
+    <script src ="activity2.js"></script>
+</body>
+</html>
diff --git a/Day2/Activity2/activity2.js b/Day2/Activity2/activity2.js
@@ -0,0 +1,148 @@
+const{Component , mount ,xml,useState,useEnv,reactive}=owl
+let val;
+let r;
+function guessgame(){
+    let n=Math.floor((Math.random()*3)+1);
+    if(n==1){
+        return "rock";
+    }
+    else if(n==2){
+        return "paper";
+    }
+    else{
+        return "sessior";
+    }
+}
+const finalData=()=>{
+    const apple=useEnv();
+    return useState(apple.store);
+}
+const finalWin=()=>{
+    const app=useEnv();
+    return useState(app.tries);
+}
+class userWin{
+    win=0;
+    updateWin(){this.win++};
+    getWin(){return this.win};
+}
+class dataList{
+    count=5;
+    updateCount(){this.count--};
+    getCount(){return this.count};
+}
+
+class Third extends Component{
+    static template=xml`<br/><b><span id="result" style="color:red">Chooes Random Number</span></b><br/><br/>
+    <label style="color:blue">Win:</label><b style="color:blue"><t t-esc="this.res.getWin()"/></b>
+    `
+    setup(){
+
+        this.res=finalWin();  
+
+    }
+
+}
+
+class Second extends Component{
+    static template=xml`<button value="rock" id="rock" t-on-click="check" style="background-color:grey">rock</button>
+    <button value="paper" id="paper" t-on-click="check">paper</button>
+    <button value="scissor" id="sci" t-on-click="check" style="background-color:yellow">scissors</button><br/><br/>
+    <Third/>
+
+    ` 
+    setup(){
+       this.data;
+       this.cap=finalData();
+       this.wap=finalWin();
+    }
+    check(ev){
+
+        if(this.cap.getCount()!=0){
+
+        this.cap.updateCount();
+
+        const guess=guessgame();
+        console.log(guess);
+        val=ev.target.value;
+
+        console.log(val);
+        if(guess=="rock"){
+            if(val=="paper"){
+                this.data="user win";
+                document.getElementById("result").innerHTML="User Win";
+                console.log(this.data);
+                this.wap.updateWin();
+            }
+            else if(val=="scissor"){
+                this.data="computer win";
+                document.getElementById("result").innerHTML="Computer Win";
+                console.log(this.data);
+
+            }
+            else{
+                this.data="tie";
+                document.getElementById("result").innerHTML="Tie";
+                console.log(this.data);
+            }
+        }
+        else if(guess=="paper"){
+            if(val=="scissor"){
+                this.data="user win";
+                document.getElementById("result").innerHTML="User Win";
+                console.log(this.data);
+                this.wap.updateWin();
+            }
+            else if(val=="rock"){
+                this.data="computer win";
+                document.getElementById("result").innerHTML="Computer Win";
+                console.log(this.data);
+            }
+            else{
+                this.data="tie";
+                document.getElementById("result").innerHTML="Tie";
+                console.log(this.data);
+            }    
+        }
+        else{
+            if(val=="rock"){
+                this.data="user win";
+                document.getElementById("result").innerHTML="User Win";
+                console.log(this.data);
+                this.wap.updateWin();
+            }
+            else if(val=="paper"){
+                this.data="computer win";
+                document.getElementById("result").innerHTML="Computer Win";
+                console.log(this.data);
+            }
+            else{
+                this.data="tie";
+                document.getElementById("result").innerHTML="Tie";
+                console.log(this.data);
+            }  
+        }  
+        }
+
+    }
+
+    static components={Third};
+
+}
+class Root extends Component{
+    static template=xml`
+    <Second/>`
+    setup(){
+        this.cap=finalData();
+        this.wap=finalWin();
+    }
+    static components={ Second };
+}
+const createData=()=>{
+    return reactive(new dataList());
+}
+const resWin=()=>{
+    return reactive(new userWin());
+}
+const env={store:createData(),tries:resWin()};
+mount(Root,document.body,{dev:true,env});