somu-odoo · zepa-odoo · Mar 13, 2023 · Mar 13, 2023 · Mar 14, 2023 · Mar 15, 2023
diff --git a/Activity 2/apidata.html b/Activity 2/apidata.html
@@ -0,0 +1,29 @@
+<!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>
+    <style type="text/css">
+
+    </style>
+</head>
+<body>
+    <input type="button" id="demo" value="data"/>
+    <p id="txtData"></p>
+    <hr/>
+    <h1>Store Product</h1>
+    <div class="row col-sm ">
+    	<div class="col-sm-4" id="testProduct">
+        	<div class="card" style="margin-top:25px;border-radius:12px" >
+            </div>
+        </div>
+    </div>
+    <input type="button" id="btuProduct" value="Product"/>
+	<div id="divProductDemo"></div>
+    <div id="divProduct"></div>
+    <script src="apidata.js"></script>
+
+</body>
+</html>
diff --git a/Activity 2/apidata.js b/Activity 2/apidata.js
@@ -0,0 +1,36 @@
+const urlDemo = "https://portal.tycoonstats.com/api/demo/1";
+const urlProduct = "https://fakestoreapi.com/products";
+const btnDemo = document.getElementById('demo');
+const btnProduct = document.getElementById('btuProduct');
+
+btnDemo.addEventListener("click",
+    async ()=>{
+        const response = await fetch(urlDemo);
+        var data = await response.json();
+        document.getElementById("txtData").innerHTML = data.content ;
+    }
+)
+
+btnProduct.addEventListener("click",
+    async ()=>{
+        const response = await fetch(urlProduct);
+        var data = await response.json();
+        var temp=
+            "<table border='2'><tr style='font-size:20px;'><th>Id</th><th>Title</th><th>Price</th><th>Description</th><th>Category</th><th>Image</th></tr>";
+        var count = 0;
+        data.forEach(function (arrayItem) {
+            count = count+1;
+            if(count<=10){
+                temp = temp.concat("<tr>"+
+                "<td>"+arrayItem.id+"</td>"+
+                "<td>"+arrayItem.title+"</td>"+
+                "<td>"+arrayItem.price+"</td>"+
+                "<td>"+arrayItem.description+"</td>"+
+                "<td>"+arrayItem.category+"</td>"+
+                "<td>"+"<img src='"+arrayItem.image+"' height='200px' width='200px'/>" +"</td>"+
+                "</tr>")
+            }
+        });
+        document.getElementById("divProduct").innerHTML = "</table>"+temp;
+    }
+)
diff --git a/Activity/number_checker.js b/Activity/number_checker.js
@@ -0,0 +1,27 @@
+const btnCheck = document.getElementById('btnCheck');
+
+let count = 0;
+let randomNumber = Math.floor(Math.random() * 10);
+let newText="";
+
+btnCheck.addEventListener("click",()=>{
+	const no = document.getElementById("inputNumber").value;
+	var txt = document.getElementById("txtresult");
+	count = count+1;
+
+	if(no>randomNumber){
+		txt.innerHTML = "Number is greater then random number";
+	}
+	else if(no<randomNumber){
+		txt.innerHTML = "Number is less then random number";
+	}
+	else if(no == randomNumber){
+		console.log(count);
+		newText = "Number is correct with "+count+" trials";
+		alert(newText);
+		txt.innerHTML = ""
+		count = 0;
+		randomNumber = Math.floor(Math.random()*10);
+	}
+
+})
diff --git a/Activity/style.css b/Activity/style.css
@@ -0,0 +1,24 @@
+body{
+	margin: 0px;
+	padding: 0px;
+	background: black;
+
+}
+.container{
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: auto;
+	text-align: center;
+	color: white;
+}
+.btn{
+	background: #c3c3c3;
+	font-size: 20px;
+	margin: 10px;
+	padding: 5px;
+}
+.txt{
+	font-size: 30px;
+}
diff --git a/Activity/template.html b/Activity/template.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Number Checker</title>
+	<link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+
+	<div class="container">
+		<h2>Guess The Number(between 0 to 9)</h2>
+		<input type="number" name="number" id="inputNumber" class="txt" /><br/>
+		<button id="btnCheck" class="btn">Check</button>
+		<p id="txtresult"></p>
+	</div>
+
+
+	<script src="number_checker.js"></script>
+</body>
+</html>
diff --git a/Day 2/Activity 2/spsGame.html b/Day 2/Activity 2/spsGame.html
@@ -0,0 +1,6 @@
+<html>
+    <body>
+        <script src="../owl.js"></script>
+        <script src="spsGame.js"></script>
+    </body>
+</html>
diff --git a/Day 2/Activity 2/spsGame.js b/Day 2/Activity 2/spsGame.js
@@ -0,0 +1,169 @@
+
+const {Component, mount, xml, useState, reactive, useEnv } = owl;
+
+const finalData = () => {
+    const counter = useEnv();
+    return useState(counter.store);
+}
+class DataList{
+    count=0;
+    updateCount(){this.count++;}
+    getCount(){ return this.count;}  
+    scoreCountGuest = 0;
+    scoreCountComputer = 0;
+    matchCount = 0;
+    guestMatchCount = 0;
+    updatescoreCountComputer(){ this.scoreCountComputer++; }
+    getScoreCountComputer(){ return this.scoreCountComputer }
+    updatescoreCountGuest(){ this.scoreCountGuest++; }
+    getScoreCountGuest(){ return this.scoreCountGuest }
+    updatematchCount(){ this.matchCount++ }
+    getmatchCount(){ return this.matchCount }
+    updateGuestMatchCount(){ this.guestMatchCount++ }
+    getGuestMatchCount(){ return this.guestMatchCount }
+
+}
+
+class MatchComponent extends Component{
+    static template=xml`
+    <h3>Matches</h3>
+    <h5 id="matchCountId"></h5>
+    <table border="2px solid black" style="color:white;background:#5CB3FF;width:100%;text-align:center;font-size:20px">
+        <tr>
+            <th>Guest</th>
+            <th>Computer</th>
+        </tr>
+        <tr>
+            <td id="computerMatchId">0</td> 
+            <td id="guestMatchId">0</td>
+        </tr>
+    </table>
+    `;
+}
+
+
+class ScoreComponent extends Component{
+    static template=xml`
+    <h3>Scores</h3>
+    <table border="2px solid black" style="color:white;background:#5CB3FF;width:100%;text-align:center;font-size:20px">
+        <tr>
+            <th>Guest</th>
+            <th>Computer</th>
+        </tr>
+        <tr>
+            <td id="guestId">0</td>
+            <td id="computerId">0</td>
+        </tr>
+    </table>
+    `;
+}
+
+class ResultComponent extends Component{
+    static template=xml`
+    <h3>Result of this trial</h3>
+    <p id="result"></p>
+    `;
+
+}
+
+class Root extends Component{
+    static template=xml`
+        <div style="color:white;background:black;font-size:25px;border:1px solid black;padding:10px;text-align:center;width:50%;margin-left:25%">
+            <h2>Rock Paper Scissors</h2>
+            Enter your Choice:<br/>
+            1. Rock<br/>
+            2. Paper<br/>
+            3. Scissors<br/>
+            <input type="text" id="guess" t-on-change="myChoice" style="text-align:center;font-size:30px;margin:20px 0px 10px 0px;border-radius:20px"/>
+            <ResultComponent />
+            <ScoreComponent />
+            <MatchComponent />
+        </div>
+    `;
+
+    setup(){
+        this.counter = finalData();
+    }
+
+
+    myChoice(ev){
+        let arr = [1,2,3];
+        this.counter.updateCount();
+        if(this.counter.getCount()>5){
+            this.counter.updatematchCount();
+            if(this.counter.scoreCountComputer>this.counter.scoreCountGuest){
+                alert("Sorry, Better luck next time");
+            }
+            else if(this.counter.scoreCountComputer<this.counter.scoreCountGuest){
+                this.counter.updateGuestMatchCount();
+                alert("Congratulations, you are win the match");
+
+            }
+            else if(this.counter.scoreCountComputer == this.counter.scoreCountGuest) {
+                alert("Match Draw, Play again");
+            }
+            document.getElementById('matchCountId').innerHTML = "Total match : " + this.counter.getmatchCount();
+            document.getElementById('computerMatchId').innerHTML = this.counter.getGuestMatchCount();
+            document.getElementById('guestMatchId').innerHTML = this.counter.getmatchCount()-this.counter.getGuestMatchCount();
+            ev.target.value = 0;
+            this.counter.count = 0;
+            this.counter.scoreCountComputer = 0;
+            this.counter.scoreCountGuest = 0;
+            result.innerHTML = "";
+        }
+        else{
+            let computerInput = Math.floor(Math.random() * arr.length) + 1;
+            console.log(computerInput);
+            let userInput = ev.target.value;
+            let result = document.getElementById('result');
+            let guestScore = document.getElementById('guestId');
+            let computerScore = document.getElementById('computerId');
+            if(userInput==computerInput){
+                result.innerHTML = "game is draw.";
+            }
+            else if(userInput== 1 && computerInput==2){
+                result.innerHTML = "game is loss.";
+                this.counter.updatescoreCountComputer();
+            }
+            else if(userInput== 1 && computerInput==3){
+                result.innerHTML = "game is win.";
+                this.counter.updatescoreCountGuest();
+            }
+            else if(userInput== 2 && computerInput==1){
+                result.innerHTML = "game is win.";
+                this.counter.updatescoreCountGuest();
+            }
+            else if(userInput== 2 && computerInput==3){
+                result.innerHTML = "game is loss.";
+                this.counter.updatescoreCountComputer();
+            }
+            else if(userInput== 3 && computerInput==1){
+                result.innerHTML = "game is loss.";
+                this.counter.updatescoreCountComputer();
+            }
+            else if(userInput== 3 && computerInput==2){
+                result.innerHTML = "game is win.";
+                this.counter.updatescoreCountGuest();
+            }
+            else{
+                result.innerHTML = "Enter Valid Input";
+            }
+            guestScore.innerHTML = this.counter.getScoreCountGuest();
+            computerScore.innerHTML = this.counter.getScoreCountComputer();
+        }
+
+
+
+
+    }
+
+    static components = {ResultComponent,ScoreComponent,MatchComponent};
+}
+
+const createData = () => {
+    return reactive(new DataList());
+}
+
+const env = { store: createData() };
+
+mount(Root,document.body,{dev: true, env});