Skip to content

Commit 0a3dd17

Browse files
PrakarshSingh5PrakarshSingh5
committed
Program
1 parent a42dd54 commit 0a3dd17

File tree

3 files changed

+102
-19
lines changed

3 files changed

+102
-19
lines changed

Diff for: ‎index.html

+26-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
11
<!DOCTYPE html>
2-
<html>
3-
2+
<html lang="en">
43
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width">
7-
<title>replit</title>
8-
<link href="style.css" rel="stylesheet" type="text/css" />
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Counter App</title>
8+
<link rel="stylesheet" href="style.css">
99
</head>
10-
1110
<body>
12-
Hello world
13-
<script src="script.js"></script>
11+
<header>
12+
<h1>People Entered</h1>
13+
</header>
14+
<div class="name">
15+
<h2 id="count-el">0</h2>
16+
</div>
17+
18+
<div id="increase">
19+
<button id="increment-btn" onclick="increment()">INCREMENT</button>
20+
</div>
21+
22+
23+
24+
<div id="saving">
25+
<button id="save-btn" onclick="save()">SAVE</button>
26+
</div>
1427

15-
<!--
16-
This script places a badge on your repl's full-browser view back to your repl's cover
17-
page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
18-
teal, blue, blurple, magenta, pink!
19-
-->
20-
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
28+
<p id="save-el">Previous Enteries</p>
2129
</body>
30+
<script src="script.js">
2231

23-
</html>
32+
</script>
33+
</html>

Diff for: ‎script.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
console.log("prakarsh")
2+
let count=0;
3+
let countEl=document.getElementById("count-el")
4+
function increment(){
5+
count=count+1;
6+
countEl.textContent=count;
7+
}
8+
let saveData=document.getElementById("save-el")
9+
10+
function save(){
11+
saveData.textContent+=" "+count+",";
12+
count=0;
13+
countEl.textContent=count
14+
}

Diff for: ‎style.css

+62-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,63 @@
1-
html, body {
2-
height: 100%;
3-
width: 100%;
1+
body{
2+
box-sizing: border-box;
3+
background-color: black;
4+
45
}
6+
h1{
7+
color: white;
8+
font-size: 75px;
9+
}
10+
button{
11+
border: none;
12+
13+
padding-top: 10px;
14+
padding-bottom: 10px;
15+
color: white;
16+
font-weight: bold;
17+
width: 100%;
18+
margin-top: 10px;
19+
margin-bottom: 5px;
20+
background-color: red;
21+
box-shadow: 0 1px 3px 5px blue;
22+
}
23+
#increment-btn{
24+
background: darkred;
25+
26+
}
27+
#save-btn{
28+
background:darkred ;
29+
}
30+
header{
31+
width: 100%;
32+
height: 150px;
33+
box-sizing: border-box;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
border:2px solid black ;
38+
box-shadow: 0 1px 3px 5px blue;
39+
}
40+
p{
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
width: 100%;
45+
height: 30px;
46+
color: white;
47+
border: 2px solid black;
48+
box-shadow: 0 1px 3px 5px blue;
49+
font-size: x-large;
50+
}
51+
.name{
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
55+
width: 100%;
56+
height: 100px;
57+
margin-top: 20px;
58+
margin-bottom: 10px;
59+
color: white;
60+
box-shadow: 0 1px 3px 5px white;
61+
font-size: 90px;
62+
63+
}

0 commit comments

Comments
 (0)