From 2919afd85362bbb79ed7862e8bf6bef0d068c1f4 Mon Sep 17 00:00:00 2001 From: Abhishek Singh Date: Fri, 3 Dec 2021 15:38:32 +0530 Subject: [PATCH 1/3] added js to calculator --- .../Bootstrap Practice/public/index.html | 3 +- .../Bootstrap Practice/public/script.js | 54 ++++++++++++++++++ .../JS-Assignment/Calculator/index.html | 56 +++++++++++++++++++ .../JS-Assignment/Calculator/script.js | 54 ++++++++++++++++++ .../JS-Assignment/Calculator/style.css | 49 ++++++++++++++++ 5 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Calculator/index.html create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Calculator/script.js create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Calculator/style.css diff --git a/Abhishek-Singh-Tanwar/Bootstrap Practice/public/index.html b/Abhishek-Singh-Tanwar/Bootstrap Practice/public/index.html index b3f3522..c311baf 100644 --- a/Abhishek-Singh-Tanwar/Bootstrap Practice/public/index.html +++ b/Abhishek-Singh-Tanwar/Bootstrap Practice/public/index.html @@ -50,6 +50,7 @@ - + + \ No newline at end of file diff --git a/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js b/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js new file mode 100644 index 0000000..f7c3042 --- /dev/null +++ b/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js @@ -0,0 +1,54 @@ +var output=""; +let equalBtn=document.querySelector('.equal-sign'); +let keyPad=document.querySelector('.calculator-keys'); +let outputScreen=document.querySelector('.calculator-screen'); + + +keyPad.addEventListener('click',function(e){ + + if(e.target.value =='+'){ + + output+='+'; + outputScreen.value=output; + + }else if(e.target.value == '-'){ + + output+='-'; + outputScreen.value=output; + + }else if(e.target.value =='*'){ + + output+='*'; + outputScreen.value=output; + + }else if(e.target.value == '/'){ + + output+='/'; + outputScreen.value=output; + + } + else if(e.target.value == 'all-clear'){ + + output=''; + outputScreen.value=output; + + }else{ + if(e.target.value!='='){ + output+=e.target.value; + outputScreen.value=output; + } + + } +}) + +equalBtn.addEventListener('click',function(e){ + + + let result=eval(output); + console.log(result); + output=result; + + + outputScreen.value=output; + +}) diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/index.html b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/index.html new file mode 100644 index 0000000..c311baf --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/index.html @@ -0,0 +1,56 @@ + + + + + + + Calculator + + + + + +
+ +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + \ No newline at end of file diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/script.js b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/script.js new file mode 100644 index 0000000..f7c3042 --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/script.js @@ -0,0 +1,54 @@ +var output=""; +let equalBtn=document.querySelector('.equal-sign'); +let keyPad=document.querySelector('.calculator-keys'); +let outputScreen=document.querySelector('.calculator-screen'); + + +keyPad.addEventListener('click',function(e){ + + if(e.target.value =='+'){ + + output+='+'; + outputScreen.value=output; + + }else if(e.target.value == '-'){ + + output+='-'; + outputScreen.value=output; + + }else if(e.target.value =='*'){ + + output+='*'; + outputScreen.value=output; + + }else if(e.target.value == '/'){ + + output+='/'; + outputScreen.value=output; + + } + else if(e.target.value == 'all-clear'){ + + output=''; + outputScreen.value=output; + + }else{ + if(e.target.value!='='){ + output+=e.target.value; + outputScreen.value=output; + } + + } +}) + +equalBtn.addEventListener('click',function(e){ + + + let result=eval(output); + console.log(result); + output=result; + + + outputScreen.value=output; + +}) diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/style.css b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/style.css new file mode 100644 index 0000000..2eb044e --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Calculator/style.css @@ -0,0 +1,49 @@ +html { + font-size: 62.5%; + box-sizing: border-box; + } + + + + .calculator { + border: 1px solid #ccc; + border-radius: 7px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + } + + .calculator-screen { + width: 100%; + height: 80px; + border: none; + background-color: #252525; + color: #fff; + text-align: right; + padding-right: 20px; + padding-left: 10px; + font-size: 4rem; + } + + button { + height: 60px; + font-size: 2rem!important; + } + + .equal-sign { + height: 98%; + grid-area: 2 / 4 / 6 / 5; + } + + .calculator-keys { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 20px; + padding: 20px; + } + .btn{ + box-shadow:0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 /12%); + padding: 0.84rem 2.14rem; + } \ No newline at end of file From d18efb629f729cabc114ed1135637f53a3819327 Mon Sep 17 00:00:00 2001 From: Abhishek Singh Date: Sat, 4 Dec 2021 13:44:14 +0530 Subject: [PATCH 2/3] added tic tac toe --- .../Bootstrap Practice/public/script.js | 54 ----- .../JS-Assignment/Tic-Tac-Toe/index.html | 52 +++++ .../JS-Assignment/Tic-Tac-Toe/script.js | 216 ++++++++++++++++++ .../JS-Assignment/Tic-Tac-Toe/style.css | 61 +++++ 4 files changed, 329 insertions(+), 54 deletions(-) delete mode 100644 Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/index.html create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/script.js create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/style.css diff --git a/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js b/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js deleted file mode 100644 index f7c3042..0000000 --- a/Abhishek-Singh-Tanwar/Bootstrap Practice/public/script.js +++ /dev/null @@ -1,54 +0,0 @@ -var output=""; -let equalBtn=document.querySelector('.equal-sign'); -let keyPad=document.querySelector('.calculator-keys'); -let outputScreen=document.querySelector('.calculator-screen'); - - -keyPad.addEventListener('click',function(e){ - - if(e.target.value =='+'){ - - output+='+'; - outputScreen.value=output; - - }else if(e.target.value == '-'){ - - output+='-'; - outputScreen.value=output; - - }else if(e.target.value =='*'){ - - output+='*'; - outputScreen.value=output; - - }else if(e.target.value == '/'){ - - output+='/'; - outputScreen.value=output; - - } - else if(e.target.value == 'all-clear'){ - - output=''; - outputScreen.value=output; - - }else{ - if(e.target.value!='='){ - output+=e.target.value; - outputScreen.value=output; - } - - } -}) - -equalBtn.addEventListener('click',function(e){ - - - let result=eval(output); - console.log(result); - output=result; - - - outputScreen.value=output; - -}) diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/index.html b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/index.html new file mode 100644 index 0000000..3c5f6bf --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/index.html @@ -0,0 +1,52 @@ + + + + + + + Tic-Tac-Toe + + + +
+ +
+ + +

TIC TAC TOE

+

Game starts by just Tap on + box

First Player starts as + Player 1
And
Second + Player as Player 2 +

+ + + + + + +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+ + + + \ No newline at end of file diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/script.js b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/script.js new file mode 100644 index 0000000..817cb8d --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/script.js @@ -0,0 +1,216 @@ +let gameBoard=document.querySelector('.game-board'); + + + +gameBoard.addEventListener('click',function(e){ + + var c1,c2,c3,c4,c5,c6,c7,c8,c9; + + c1=document.querySelector('#c-1').innerText; + c2=document.querySelector('#c-2').innerText; + c3=document.querySelector('#c-3').innerText; + c4=document.querySelector('#c-4').innerText; + c5=document.querySelector('#c-5').innerText; + c6=document.querySelector('#c-6').innerText; + c7=document.querySelector('#c-7').innerText; + c8=document.querySelector('#c-8').innerText; + c9=document.querySelector('#c-9').innerText; + + if((c1=='x')&&(c2=='x')&&(c3=='x')){ + + + window.alert('Player X won'); + + }else if((c1=='x')&&(c4=='x')&&(c7=='x')){ + window.alert('Player X won'); + + }else if((c7=='x')&&(c8=='x')&&(c9=='x')){ + window.alert('Player X won'); + + }else if((c3=='x')&&(c6=='x')&&(c9=='x')){ + window.alert('Player X won'); + + }else if((c1=='x')&&(c5=='x')&&(c9=='x')){ + window.alert('Player X won'); + + }else if((c3=='x')&&(c5=='x')&&(c7=='x')){ + window.alert('Player X won'); + + }else if((c2=='x')&&(c5=='x')&&(c8=='x')){ + window.alert('Player X won'); + + }else if((c4=='x')&&(c5=='x')&&(c6=='x')){ + window.alert('Player X won'); + + } + //checking for player 2 + if((c1=='0')&&(c2=='0')&&(c3=='0')){ + + + window.alert('Player X won'); + + }else if((c1=='0')&&(c4=='0')&&(c7=='0')){ + window.alert('Player 2 won'); + + }else if((c7=='0')&&(c8=='0')&&(c9=='0')){ + window.alert('Player 2 won'); + + }else if((c3=='0')&&(c6=='0')&&(c9=='0')){ + window.alert('Player 2 won'); + + }else if((c1=='0')&&(c5=='0')&&(c9=='0')){ + window.alert('Player 2 won'); + + }else if((c3=='0')&&(c5=='0')&&(c7=='0')){ + window.alert('Player 2 won'); + }else if((c2=='0')&&(c5=='0')&&(c8=='0')){ + window.alert('Player2 won'); + + }else if((c4=='0')&&(c5=='0')&&(c6=='0')){ + window.alert('Player 2 won'); + + } + // if match tie + + else if ((c1 == 'x' || c1 == '0') && (c2 == 'x' + || c2 == '0') && (c3 == 'x' || c3 == '0') && + (c4 == 'x' || c4 == '0') && (c5 == 'x' || + c5 == '0') && (c6 == 'x' || c6 == '0') && + (c7 == 'x' || c7 == '0') && (c8 == 'x' || + c8 == '0') && (c9 == 'x' || c9 == '0')) { + console.log("aaaaaaaaa0"); + + window.alert('Match Tie'); +} + +}) + +function resetGameBoard(){ + + document.querySelector('#c-1').innerText=''; + document.querySelector('#c-2').innerText=''; + document.querySelector('#c-3').innerText=''; + document.querySelector('#c-4').innerText=''; + document.querySelector('#c-5').innerText=''; + document.querySelector('#c-6').innerText=''; + document.querySelector('#c-7').innerText=''; + document.querySelector('#c-8').innerText=''; + document.querySelector('#c-9').innerText=''; + +} + +flag = 1; +function func1() { + if (flag == 1) { + document.querySelector('#c-1').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-1').innerText='0'; + + flag = 1; + } +} + +function func2() { + if (flag == 1) { + document.querySelector('#c-2').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-2').innerText='0'; + + flag = 1; + } +} + +function func3() { + if (flag == 1) { + document.querySelector('#c-3').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-3').innerText='0'; + + flag = 1; + } +} + +function func4() { + if (flag == 1) { + document.querySelector("#c-4").innerText='x'; + + flag = 0; + } + else { + document.querySelector("#c-4").innerText='0'; + + flag = 1; + } +} + +function func5() { + if (flag == 1) { + document.querySelector("#c-5").innerText='x'; + + flag = 0; + }else{ + document.querySelector("#c-5").innerText='0'; + flag=1; + + } +} + +function func6() { + if (flag == 1) { + document.querySelector('#c-6').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-6').innerText='0'; + + flag = 1; + } +} + +function func7() { + if (flag == 1) { + document.querySelector('#c-7').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-7').innerText='0'; + + flag = 1; + } +} + +function func8() { + if (flag == 1) { + + flag = 0; + } + else { + document.querySelector('#c-8').innerText='0'; + + flag = 1; + } +} + +function func9() { + if (flag == 1) { + document.querySelector('#c-9').innerText='x'; + + flag = 0; + } + else { + document.querySelector('#c-9').innerText='0'; + + flag = 1; + } +} \ No newline at end of file diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/style.css b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/style.css new file mode 100644 index 0000000..a1e78d0 --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/Tic-Tac-Toe/style.css @@ -0,0 +1,61 @@ +* { + box-sizing: border-box; + margin: 0px; + padding: 0px; +} + +.container { + min-height: 100vh; + width: 100vw; + background: antiquewhite; + display: flex; + flex-direction: row; +} + +.rules { + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-size: 30px; +} + +.tic-tac-toe { + width: 50%; + padding: 200px; + /* display: grid; */ + /* background: cadetblue; */ + /* display: flex; */ + /* display: grid; */ + /* align-items: center; */ + /* justify-content: center; */ + grid-gap: -70px; + /* grid-gap: 2px; */ + /* grid-template-columns: repeat(3, 1fr); */ +} + +.game-board { + height: 300px; + width: 300px; + display: grid; + grid-gap: 6px; + grid-template-columns: repeat(3, 1fr); +} + +.tic-tac-toe div { + + font-size: 2rem; + + justify-content: center; + text-align: center; + /* width: 80px; */ + /* height: 52px; */ + /* margin: auto; */ + border: 1px solid gray; + /* border-radius: 6px; */ + /* font-size: 30px; */ + /* text-align: center; */ + /* grid-gap: 2px; */ + /* grid-template-columns: repeat(3, 1fr); */ +} From fb0d272ef2ad75e00e389b4e6322a4ed1ff98d03 Mon Sep 17 00:00:00 2001 From: Abhishek Singh Date: Sat, 4 Dec 2021 21:54:29 +0530 Subject: [PATCH 3/3] added todo app --- .../JS-Assignment/todo/index.html | 29 +++++ .../JS-Assignment/todo/script.js | 78 ++++++++++++ .../JS-Assignment/todo/style.css | 116 ++++++++++++++++++ 3 files changed, 223 insertions(+) create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/todo/index.html create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/todo/script.js create mode 100644 Abhishek-Singh-Tanwar/JS-Assignment/todo/style.css diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/todo/index.html b/Abhishek-Singh-Tanwar/JS-Assignment/todo/index.html new file mode 100644 index 0000000..e49ea95 --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/todo/index.html @@ -0,0 +1,29 @@ + + + + + + + Todo App + + + + +
+
Todo App
+
+ + +
+
    + + +
+
+ You Have pending task + +
+
+ + + \ No newline at end of file diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/todo/script.js b/Abhishek-Singh-Tanwar/JS-Assignment/todo/script.js new file mode 100644 index 0000000..49b107f --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/todo/script.js @@ -0,0 +1,78 @@ +const inputBox=document.querySelector('.inputField input'); +const addBtn=document.querySelector('.inputField button'); +const todoList=document.querySelector('.todoList'); +const clearAllBtn=document.querySelector('.clear-all'); + + +inputBox.addEventListener('keyup',function(){ + + let userData=inputBox.value; + + if(userData.trim()!=0){ + addBtn.classList.add('active'); + }else{ + addBtn.classList.remove('active'); + } + +}) + +function showTask(){ + var getLocalStorage=localStorage.getItem('todos'); + if(getLocalStorage==null){ + + listArr=[] + }else{ + + listArr=JSON.parse(getLocalStorage); + + } + const pendingCount=document.querySelector('.pending'); + pendingCount.textContent=listArr.length; + let newLiTag=''; + listArr.forEach((element,index) => { + newLiTag +=`
  • ${element}
    • ` + }); + todoList.innerHTML=newLiTag; + + +} + +function deleteTask(index){ + + let getLocalStorage=localStorage.getItem('todos'); + listArr=JSON.parse(getLocalStorage); + listArr.splice(index,1); + + + localStorage.setItem('todos',JSON.stringify(listArr)); + showTask(); +} + + + +addBtn.addEventListener('click',function(){ + let userData=inputBox.value; + inputBox.value=""; + var getLocalStorage=localStorage.getItem('todos'); + if(getLocalStorage==null){ + listArr=[] + + }else{ + + listArr=JSON.parse(getLocalStorage); + + } + listArr.push(userData); + localStorage.setItem('todos',JSON.stringify(listArr)); + showTask(); + +}) + +clearAllBtn.addEventListener('click',function(){ + listArr=[]; + + localStorage.setItem('todos',JSON.stringify(listArr)); + showTask(); + +}) + diff --git a/Abhishek-Singh-Tanwar/JS-Assignment/todo/style.css b/Abhishek-Singh-Tanwar/JS-Assignment/todo/style.css new file mode 100644 index 0000000..123be21 --- /dev/null +++ b/Abhishek-Singh-Tanwar/JS-Assignment/todo/style.css @@ -0,0 +1,116 @@ +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + +} +body{ + height: 100vh; + width: 100%; + background: lightseagreen; + +} +.wrapper{ + + margin: 120px auto; + max-width: 400px; + width: 100%; + border-radius:5px ; + padding: 25px; + background: #fff; + +} +.wrapper header{ + font-size: 30px; + font-weight: 600; + + +} +.wrapper .inputField{ + display: flex; + height: 45px; + width: 100%; + +} +.inputField input{ + width: 85%; + height: 100%; + border: 1px solid #ccc; + font-size: 17px; + border-radius: 3px; + padding-left: 15px; + +} +.inputField button{ + width:60px; + height: 100%; + border: none; + outline: none; + font-size:22px; + cursor: pointer; + border-radius: 3px; + margin-left:5px; + background: #8E49E8; + opacity: 0.6; + pointer-events: none; +} +.inputField button.active{ + opacity: 1; + pointer-events: auto; +} + +.wrapper .todoList{ + max-height: 250px; + overflow-y: auto; + + +} +.todoList li{ + list-style: none; + height: 45px; + line-height: 45px; +position: relative; + border-radius: 3px; + margin-bottom: 8px; + padding: 0 15px; + cursor: default; + overflow: hidden; +} +.todoList li span{ + position: absolute; + right:-45px ; + color: #fff; + width: 45px; + text-align: center; + background: #e74c3c; + border-radius: 0 3px 3px 0; + cursor: pointer; +transition: all 0.3s ease; + +} +.todoList li:hover span{ + right: 0px; +} + +.wrapper .fotter{ + display: flex; + width:100%; + align-items: center; + margin-top: 20px; + justify-content: space-between; + + +} +.footer button{ + + + border: none; + outline: none; + background: #8E49E8; + color: #fff; + font-size:16px; + cursor: pointer; + border-radius: 3px; + padding: 6px 10px; + +} \ No newline at end of file