Skip to content

Commit 8942198

Browse files
RohitSharma50RohitSharma50
committed
Tic-Tac-Toe
1 parent ac0ebc4 commit 8942198

File tree

5 files changed

+148
-9
lines changed

5 files changed

+148
-9
lines changed

‎Meme generator/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<nav class="nav-bar">
1414
<a href="/index.html">Home</a>
1515
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
16-
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
16+
<a target="_blank" href="https://github.com/RohitSharma50/">Github</a>
1717

1818
</nav>
1919
<div class="content">

‎Tic-Tac-Toe/index.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.nav-bar {
2+
display: flex;
3+
flex-wrap: wrap;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 1rem;
7+
margin-bottom: 5px;
8+
gap: 1rem;
9+
border-bottom: solid 1px #aaa;
10+
background-color: #aaa;
11+
}
12+
13+
nav a {
14+
min-width: 9rem;
15+
border-radius: 0.3rem;
16+
border: solid black;
17+
background-color: aliceblue;
18+
text-align: center;
19+
text-decoration-line: none;
20+
padding: 5px;
21+
}
22+
23+
*{
24+
25+
margin:0;
26+
padding: 0;
27+
28+
}
29+
.container{
30+
height: 60vmin;
31+
width: 60vmin;
32+
display: flex;
33+
flex-wrap: wrap;
34+
gap: 1.5vmin;
35+
margin: 5vmin auto;
36+
background-color: #886666;
37+
justify-content: center;
38+
align-items: center;
39+
border-radius: 2vmin;
40+
}
41+
42+
.btn{
43+
height: 18vmin;
44+
width: 18vmin;
45+
border-radius: 2vmin;
46+
background-color: rgb(248, 248, 248);
47+
font-size: 8vmin;
48+
49+
text-decoration: none;
50+
color:chocolate;
51+
}
52+
.resetBtn{
53+
display: flex;
54+
margin: 3vmin auto;
55+
height: 4vmin;
56+
padding: 2vmin;
57+
align-items: center;
58+
background-color: darkcyan;
59+
border-radius: 5vmin;
60+
}

‎Tic-Tac-Toe/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tic-TAc-toe</title>
7+
<link rel="stylesheet" href="index.css">
8+
</head>
9+
<body>
10+
<nav class="nav-bar">
11+
<a href="/index.html">Home</a>
12+
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
13+
<a target="_blank" href="https://github.com/RohitSharma50/Javascript_Machine_coding">Github</a>
14+
15+
</nav>
16+
<div class="container">
17+
<button class="btn"></button>
18+
<button class="btn"></button>
19+
<button class="btn"></button>
20+
<button class="btn"></button>
21+
<button class="btn"></button>
22+
<button class="btn"></button>
23+
<button class="btn"></button>
24+
<button class="btn"></button>
25+
<button class="btn"></button>
26+
27+
</div>
28+
<div><button class="resetBtn">Restart</button>
29+
</div>
30+
31+
<script src="index.js" defer></script>
32+
</body>
33+
</html>

‎Tic-Tac-Toe/index.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
2+
const box= document.querySelectorAll('.btn');
3+
const resetBtn= document.querySelector('.resetBtn');
4+
5+
6+
const winPatterns=[
7+
[0,1,2],
8+
[3,4,5],
9+
[6,7,8],
10+
[0,3,6],
11+
[1,4,7],
12+
[2,5,8],
13+
[0,4,8],
14+
[2,4,6]
15+
];
16+
17+
18+
let user=true;
19+
box.forEach((box) =>{
20+
box.addEventListener('click', ()=>{
21+
if(user) {
22+
box.innerText='X';
23+
user=false;
24+
}
25+
else{
26+
box.innerText='0';
27+
user=true;
28+
}
29+
box.disabled=true;
30+
31+
checkWinner();
32+
});
33+
});
34+
function checkWinner(){
35+
for(let pattern of winPatterns){
36+
let pos1=box[pattern[0]].innerText ;
37+
let pos2=box[pattern[1]].innerText ;
38+
let pos3=box[pattern[2]].innerText ;
39+
40+
if(pos1!=''&& pos2!='' && pos3!='') {
41+
if(pos1===pos2 && pos2 ===pos3){
42+
alert( 'winner is' + ' '+ pos1);
43+
}
44+
}
45+
}
46+
}
47+
resetBtn.addEventListener('click', ()=>{
48+
window.location.href=window.location.href;
49+
})

‎index.html

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<nav class="nav-bar">
1414
<a href="/index.html">Home</a>
1515
<a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared">Youtube channel</a>
16-
<a target="_blank" href="https://github.com/RohitSharma50">Github</a>
16+
<a target="_blank" href="https://github.com/RohitSharma50/Javascript_Machine_coding">Github</a>
1717

1818
</nav>
1919
<main>
@@ -25,13 +25,10 @@ <h1>Javascript-Challanges</h1>
2525
<a class="project-link" href="./File uploader/index.html">Project 4 - File Uploader 🤨</a>
2626
<a class="project-link" href="./Light-Dark Mode/index.html">Project 5 - Light & Dark Mode👻</a>
2727
<a class="project-link" href="./Meme generator/index.html">Project 6 - Meme Generator 🧠</a>
28-
<a class="project-link" href="./todo-list/index.html">Project 7 -Todo-List 👀</a>
29-
<a class="project-link" href="./8-typer/index.html">Project 8 - 📚
30-
</a>
31-
<a class="project-link" href="./9-mouseCircle/index.html">Project 9 - 📚
32-
</a>
33-
<a class="project-link" href="./10-emoji/index.html">Project 10 - Emoji 🫥
34-
</a>
28+
<a class="project-link" href="./todo-list/index.html">Project 7 - Todo-List 👀</a>
29+
<a class="project-link" href="./Tic-Tac-Toe/index.html">Project 8 - Tic-Tac- Toe 📚 </a>
30+
<a class="project-link" href="./9-mouseCircle/index.html">Project 9 - 📚 </a>
31+
<a class="project-link" href="./10-emoji/index.html">Project 10 - Emoji 🫥 </a>
3532
</div>
3633
</main>
3734
</body>

0 commit comments

Comments
 (0)