Skip to content

Commit 7254382

Browse files
jayasurya261jayasurya261
committed
javascript 30 projects files uploaded
0 parents  commit 7254382

File tree

174 files changed

+4083
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

174 files changed

+4083
-0
lines changed

Diff for: ‎Age calculator app/images/calculator.png

9.3 KB
Loading

Diff for: ‎Age calculator app/index.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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>Age calculator app</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut Icon" type="image/png" href="images/calculator.png">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="calculator">
13+
<h1>JavaScript<br><span> Age calculator</span></h1>
14+
<div class="color">
15+
<input type="date" id="input-value">
16+
<button onclick="difference()">Calculate</button>
17+
</div>
18+
<p id="result"></p>
19+
</div>
20+
</div>
21+
<script>
22+
let userInput = document.getElementById("input-value");
23+
userInput.max = new Date().toISOString().split("T")[0];
24+
let result = document.getElementById("result");
25+
function difference(){
26+
let birthDate = new Date(userInput.value);
27+
28+
let d1 = birthDate.getDate();
29+
let m1 = birthDate.getMonth()+1;
30+
let y1 = birthDate.getFullYear();
31+
32+
let today = new Date();
33+
34+
let d2 = today.getDate();
35+
let m2 = today.getMonth()+1;
36+
let y2 = today.getFullYear();
37+
38+
let d3,m3,y3;
39+
40+
y3 = y2-y1;
41+
if(m2>=m1)
42+
{
43+
m3 = m2-m1;
44+
}else{
45+
y3--;
46+
m3 = 12+m2-m1;
47+
}
48+
if(d2>=d1)
49+
{
50+
d3 = d2-d1;
51+
}else{
52+
m3--;
53+
d3 = getDays(y1,m1)+d2-d1;
54+
}
55+
if(m3<0)
56+
{
57+
m = 11;
58+
y3--;
59+
}
60+
console.log(y3,m3,d3);
61+
result.innerHTML = `You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3} days old`;
62+
function getDays(year,month){
63+
return new Date(year,month,0).getDate();
64+
}
65+
}
66+
67+
</script>
68+
</body>
69+
</html>

Diff for: ‎Age calculator app/style.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
*{
3+
margin: 0;
4+
font-family: Arial, Helvetica, sans-serif;
5+
box-sizing: border-box;
6+
7+
}
8+
.container{
9+
width: 100%;
10+
min-height: 100vh;
11+
background: linear-gradient(135deg,#4203a9,#90bafc);
12+
color: antiquewhite;
13+
padding: 10px;
14+
}
15+
.container h1{
16+
max-width: 100%;
17+
18+
}
19+
.calculator{
20+
21+
width: 500px;
22+
23+
margin-top: 200px;
24+
margin-left: 70px;
25+
}
26+
.color{
27+
margin-top: 30px;
28+
background: rgba(225,225,225,0.3);
29+
height: 80px;
30+
border-radius: 5px;
31+
opacity: 80%;
32+
}
33+
.calculator input{
34+
margin-top: 20px;
35+
margin-left: 15px;
36+
width: 365px;
37+
height: 40px;
38+
border-radius: 3px;
39+
border: 0;
40+
opacity: 100%;
41+
cursor: pointer;
42+
43+
}
44+
.calculator button{
45+
background-color: rgb(212, 255, 0);
46+
outline: 0;
47+
border: 0;
48+
border-radius: 3px;
49+
padding: 5px;
50+
width: 90px;
51+
height: 40px;
52+
margin-left: 5px;
53+
cursor: pointer;
54+
}
55+
.calculator h1{
56+
font-size: 60px;
57+
min-width: 500px;
58+
59+
}
60+
.calculator h1 span{
61+
color: rgb(212, 255, 0);
62+
63+
}
64+
65+
66+
67+
p{
68+
padding-top: 20px;
69+
font-size: 20px;
70+
71+
}
72+
#result span{
73+
color: #f6f60e;
74+
}

Diff for: ‎Background Change Effect app/images/arrow.png

1.74 KB
Loading

Diff for: ‎Background Change Effect app/images/background.png

109 Bytes
Loading

Diff for: ‎Background Change Effect app/images/background1.png

18.6 KB
Loading

Diff for: ‎Background Change Effect app/images/original.jpg

455 KB
Loading

Diff for: ‎Background Change Effect app/images/transparent.png

787 KB
Loading

Diff for: ‎Background Change Effect app/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Backround Change Effect app</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut Icon" type="images/png" href="images/background1.png">
9+
</head>
10+
<body>
11+
<div class="container">
12+
13+
<div class="img-box">
14+
<img src="images/transparent.png" width="100%" >
15+
<div class="img-wrap">
16+
<img src="images/original.jpg" id="originalImg">
17+
</div>
18+
<span id="line">
19+
<img src="images/arrow.png" class="arrow">
20+
</span>
21+
</div>
22+
</div>
23+
<script src="script.js">
24+
25+
</script>
26+
</body>
27+
</html>

Diff for: ‎Background Change Effect app/script.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var ImgBox = document.querySelector(".img-box");
2+
var imgWrap = document.querySelector(".img-wrap");
3+
var originalImg = document.getElementById("originalImg");
4+
var line = document.getElementById("line");
5+
6+
originalImg.style.width = ImgBox.offsetWidth+"px";
7+
8+
var leftSpace = ImgBox.offsetLeft;
9+
ImgBox.onmousemove = function(e){
10+
var boxWidth = (e.pageX-leftSpace)+"px";
11+
imgWrap.style.width = boxWidth;
12+
line.style.left = boxWidth;
13+
}

Diff for: ‎Background Change Effect app/style.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
*{
2+
padding: 0;
3+
border: 0;
4+
font-family: Arial, Helvetica, sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
height: 100vh;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
background: #f3fbff;
14+
}
15+
.img-box{
16+
width: 60%;
17+
margin: auto;
18+
line-height: 0;
19+
background-image: url(images/background.png) ;
20+
overflow: hidden;
21+
position: relative;
22+
}
23+
.img-wrap{
24+
width: 20px;
25+
position: absolute;
26+
left: 0;
27+
top: 0;
28+
overflow: hidden;
29+
}
30+
span{
31+
width: 1px;
32+
height: 100%;
33+
cursor: ew-resize;
34+
background: #fff;
35+
position: absolute;
36+
left: 0;
37+
top: 0;
38+
}
39+
.arrow{
40+
width: 40px;
41+
position: absolute;
42+
top: 50%;
43+
margin-left: -20px;
44+
margin-top: -20px;
45+
}

Diff for: ‎Calculator app/.idea/.gitignore

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎Calculator app/.idea/Calculator app.iml

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎Calculator app/.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎Calculator app/images/calculator.png

16 KB
Loading

Diff for: ‎Calculator app/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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>Calculator app</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="shortcut Icon" type="images/png" href="images/calculator.png">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="calculator">
13+
<form>
14+
<div class="display"><input type="text" name="display"></div>
15+
16+
<div>
17+
<input type="button" value="AC" onclick="display.value = ''">
18+
<input type="button" value="DE" onclick="display.value = display.value.toString().slice(0,-1)">
19+
<input type="button" value="." onclick="display.value += '.'">
20+
<input type="button" value="/" onclick="display.value += '/'">
21+
</div>
22+
<div>
23+
<input type="button" value="7" onclick="display.value += '7'">
24+
<input type="button" value="8" onclick="display.value += '8'">
25+
<input type="button" value="9" onclick="display.value += '9'">
26+
<input type="button" value="*" onclick="display.value += '*'">
27+
</div>
28+
<div>
29+
<input type="button" value="4" onclick="display.value += '4'">
30+
<input type="button" value="5" onclick="display.value += '5'">
31+
<input type="button" value="6" onclick="display.value += '6'">
32+
<input type="button" value="-" onclick="display.value += '-'">
33+
</div>
34+
<div>
35+
<input type="button" value="1" onclick="display.value += '1'">
36+
<input type="button" value="2" onclick="display.value += '2'">
37+
<input type="button" value="3" onclick="display.value += '3'">
38+
<input type="button" value="+" onclick="display.value += '+'">
39+
</div>
40+
<div>
41+
<input type="button" value="00" onclick="display.value += '00'">
42+
<input type="button" value="0" onclick="display.value += '0'">
43+
<input type="button" value="=" class="equal" onclick="display.value =eval(display.value)">
44+
</div>
45+
</form>
46+
</div>
47+
</div>
48+
</body>
49+
</html>

Diff for: ‎Calculator app/style.css

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
font-family: Arial, Helvetica, sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
height: 100vh;
10+
background: rgb(115, 148, 194);
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
.calculator{
16+
background: hsl(203, 24%, 19%);
17+
padding: 20px;
18+
border-radius: 10px;
19+
}
20+
.calculator input{
21+
color: white;
22+
border: 0;
23+
outline: 0;
24+
width: 60px;
25+
height: 60px;
26+
border-radius: 10px;
27+
box-shadow: -8px -8px 15px rgba(225,225,225,0.1),5px 5px 15px rgba(0,0,0,0.2);
28+
background: transparent;
29+
font-size: 20px;
30+
cursor: pointer;
31+
margin: 10px
32+
}
33+
.display{
34+
display: flex;
35+
justify-content: flex-end;
36+
margin: 20px 0;
37+
}
38+
.display input{
39+
text-align: right;
40+
flex: 1;
41+
font-size: 45px;
42+
box-shadow: none;
43+
}
44+
.calculator .equal{
45+
width: 145px;
46+
}

Diff for: ‎Circular progress Bar/images/progress-bar.png

15.9 KB
Loading

0 commit comments

Comments
 (0)