Skip to content

Commit 3d2bc1f

Browse files
kilsw1chkilsw1ch
committed
0
0 parents  commit 3d2bc1f

File tree

4 files changed

+292
-0
lines changed

4 files changed

+292
-0
lines changed

‎carrom.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
body{
7+
font-size: 4rem;
8+
}
9+
10+
/* .material-icons{
11+
font-size: 50px;
12+
} */
13+
14+
.p1{
15+
position:absolute;
16+
width: 50%;
17+
height: 50%;
18+
background-color: #FDFD96;
19+
text-align: center;
20+
}
21+
22+
.p2{
23+
position:absolute;
24+
left:50%;
25+
width: 50%;
26+
height: 50%;
27+
background-color: #FFB3BA;
28+
text-align: center;
29+
}
30+
31+
.p3{
32+
position:absolute;
33+
top:50%;
34+
width: 50%;
35+
height: 50%;
36+
background-color: #B8E2B8;
37+
text-align: center;
38+
}
39+
40+
.p4{
41+
position:absolute;
42+
top:50%;
43+
left:50%;
44+
width: 50%;
45+
height: 50%;
46+
background-color: #A7C6ED;
47+
text-align: center;
48+
}
49+
50+
p{
51+
52+
margin-top:10%;
53+
}
54+
55+
input{
56+
57+
/* margin-top:10%; */
58+
59+
}
60+
61+
.p1 span, .p2 span, .p3 span, .p4 span{
62+
63+
display: inline-block;
64+
margin-top:50%;
65+
}
66+
67+
button{
68+
69+
position: absolute;
70+
left:35%;
71+
top:60%;
72+
73+
border: none;
74+
border-radius: 50%;
75+
76+
height: 150px;
77+
width:150px;
78+
79+
background-color: #000;
80+
81+
font-size: 5rem;
82+
color: #fff;
83+
text-align: center;
84+
85+
padding: 10px;
86+
}
87+
88+
.totaldiv{
89+
90+
position: absolute;
91+
left: 44%;
92+
top: 47%;
93+
94+
width: 120px;
95+
height: 120px;
96+
97+
border-radius: 50%;
98+
background-color: #fff;
99+
100+
color: #000;
101+
text-align: center;
102+
line-height: 2;
103+
}
104+
105+
.resetbtn{
106+
107+
background-color: #000;
108+
color: #fff;
109+
110+
left: 42%;
111+
top: 90%;
112+
113+
span{
114+
font-size: 4rem;
115+
}
116+
}

‎carrom.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html>
2+
3+
<head>
4+
5+
<title>carrom</title>
6+
<link rel="stylesheet" href="carrom.css">
7+
8+
<link rel="icon" href="media/icon.png">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10+
</head>
11+
12+
<body>
13+
14+
<div class="p1" id="p1">
15+
<p>baba</p>
16+
<!-- <input type="text" placeholder="Player 1"> -->
17+
<span id="p1score">0</span>
18+
<button id="p1dec">-</button>
19+
</div>
20+
21+
<div class="p2" id="p2">
22+
<p>dada</p>
23+
<span id="p2score">0</span>
24+
<button id="p2dec">-</button>
25+
</div>
26+
27+
<div class="p3" id="p3">
28+
<p>rohan</p>
29+
<span id="p3score">0</span>
30+
<button id="p3dec">-</button>
31+
</div>
32+
33+
<div class="p4" id="p4">
34+
<p>ma</p>
35+
<span id="p4score">0</span>
36+
<button id="p4dec">-</button>
37+
</div>
38+
39+
<div class="totaldiv">
40+
<span id="displayedtotal">19</span>
41+
</div>
42+
43+
<button class="resetbtn" id="resetbtn"><span class="material-icons">replay</span></button>
44+
</body>
45+
46+
<script src="carrom.js"></script>
47+
48+
</html>

‎carrom.js‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
const p1 = document.getElementById('p1')
2+
const p2 = document.getElementById('p2')
3+
const p3 = document.getElementById('p3')
4+
const p4 = document.getElementById('p4')
5+
6+
const p1scoreDisplay = document.getElementById('p1score');
7+
const p2scoreDisplay = document.getElementById('p2score');
8+
const p3scoreDisplay = document.getElementById('p3score');
9+
const p4scoreDisplay = document.getElementById('p4score');
10+
11+
let p1score = 0;
12+
let p2score = 0;
13+
let p3score = 0;
14+
let p4score = 0;
15+
16+
const p1dec = document.getElementById('p1dec')
17+
const p2dec = document.getElementById('p2dec')
18+
const p3dec = document.getElementById('p3dec')
19+
const p4dec = document.getElementById('p4dec')
20+
21+
const total=document.getElementById('displayedtotal');
22+
let totalscore = 19;
23+
24+
const reset=document.getElementById('resetbtn');
25+
26+
p1.addEventListener('click', function() {
27+
28+
p1score++;
29+
p1scoreDisplay.textContent = p1score;
30+
31+
totalscore--;
32+
total.innerText=totalscore;
33+
});
34+
35+
p2.addEventListener('click', function() {
36+
37+
p2score++;
38+
p2scoreDisplay.textContent = p2score;
39+
40+
totalscore--;
41+
total.innerText=totalscore;
42+
});
43+
44+
p3.addEventListener('click', function() {
45+
46+
p3score++;
47+
p3scoreDisplay.textContent = p3score;
48+
49+
totalscore--;
50+
total.innerText=totalscore;
51+
});
52+
53+
p4.addEventListener('click', function() {
54+
55+
p4score++;
56+
p4scoreDisplay.textContent = p4score;
57+
58+
totalscore--;
59+
total.innerText=totalscore;
60+
});
61+
62+
p1dec.addEventListener('click', function(){
63+
64+
if(p1score!=0){
65+
66+
p1score = p1score-2;
67+
p1scoreDisplay.textContent = p1score;
68+
69+
if(totalscore!=0){
70+
totalscore=totalscore+2;
71+
total.innerText=totalscore;
72+
}
73+
}
74+
})
75+
76+
p2dec.addEventListener('click', function(){
77+
78+
if(p2score!=0){
79+
80+
p2score=p2score-2;
81+
p2scoreDisplay.textContent = p2score;
82+
83+
if(totalscore!=0){
84+
totalscore=totalscore+2;
85+
total.innerText=totalscore;
86+
}
87+
}
88+
})
89+
90+
p3dec.addEventListener('click', function(){
91+
92+
if(p3score!=0){
93+
94+
p3score=p3score-2;
95+
p3scoreDisplay.textContent = p3score;
96+
97+
if(totalscore!=0){
98+
totalscore=totalscore+2;
99+
total.innerText=totalscore;
100+
}
101+
}
102+
})
103+
104+
p4dec.addEventListener('click', function(){
105+
106+
if(p4score!=0){
107+
108+
p4score=p4score-2;
109+
p4scoreDisplay.textContent = p4score;
110+
111+
if(totalscore!=0){
112+
totalscore=totalscore+2;
113+
total.innerText=totalscore;
114+
}
115+
}
116+
})
117+
118+
reset.addEventListener('click', function(){
119+
120+
totalscore = 19;
121+
122+
p1scoreDisplay.textContent = 0;
123+
p2scoreDisplay.textContent = 0;
124+
p3scoreDisplay.textContent = 0;
125+
p4scoreDisplay.textContent = 0;
126+
127+
total.innerText=totalscore;
128+
})

‎media/icon.png‎

2.31 MB
Loading

0 commit comments

Comments
 (0)