Skip to content

Commit 98de8d2

Browse files
ARYAN-CODES-STARARYAN-CODES-STAR
authored
Merge branch 'codemistic:main' into main
2 parents f07c1f9 + 82429c7 commit 98de8d2

1,013 files changed

Lines changed: 185523 additions & 168 deletions

File tree

Some content is hidden

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

‎Age Calculator/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
## Age Calculator
2+
This website is used to calculate age of a person !
3+
## Tech Stack
4+
- Html
5+
- CSS
6+
- JavaScript

‎Age Calculator/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<div class="container">
9+
<div class="input">
10+
<input type="date" id="date">
11+
<button onclick="ageCalc()">Calculate</button>
12+
</div>
13+
<div class="output">
14+
<div>
15+
<span id="years">
16+
17+
</span>
18+
<p>YEARS</p>
19+
</div>
20+
<div>
21+
<span id="months">
22+
23+
</span>
24+
<p>MONTHS</p>
25+
</div>
26+
<div>
27+
<span id="days">
28+
29+
</span>
30+
<p>DAYS</p>
31+
32+
33+
34+
</div>
35+
36+
</div>
37+
<div class="wish" id="wish" >
38+
Happy birthday to you !!!
39+
</div>
40+
</div>
41+
<script type="text/javascript" src="script.js"></script>
42+
</body>
43+
</html>

‎Age Calculator/script.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
const months=[31,28,31,30,31,30,31,31,30,31,30,31];
2+
3+
function ageCalc(){
4+
let today=new Date();
5+
let inputDate= new Date(document.getElementById("date").value);
6+
let birthMonth,birthDate,birthYear;
7+
let birthDetails={
8+
date:inputDate.getDate(),
9+
month:inputDate.getMonth()+1,
10+
year:inputDate.getFullYear()
11+
}
12+
let currentYear=today.getFullYear();
13+
let currentMonth=today.getMonth()+1;
14+
let currentDay=today.getDate();
15+
16+
17+
leapChecker(currentYear);
18+
19+
20+
if(birthDetails.year>currentYear || (birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
21+
(birthDetails.date > currentDay && birthDetails.month == currentMonth && birthDetails.year == currentYear)){
22+
alert("Enter Valid Date");
23+
24+
}
25+
birthYear=currentYear-birthDetails.year;
26+
if(currentMonth>=birthDetails.month){
27+
birthMonth=currentMonth-birthDetails.month;
28+
}
29+
else{
30+
birthYear--;
31+
birthMonth=12+currentMonth-birthDetails.month;
32+
}
33+
if(currentDay>=birthDetails.date){
34+
birthDate=currentDay-birthDetails.date;
35+
36+
}
37+
else{
38+
birthMonth--;
39+
let days=months[currentMonth-2];
40+
birthDate=days+currentDay- birthDetails.date;
41+
if(birthMonth<0){
42+
birthMonth=11;
43+
birthYear--;
44+
}
45+
46+
}
47+
48+
display(birthDate,birthMonth,birthYear);
49+
checkBirthday(birthDetails.date,birthDetails.month,birthDetails.year,currentDay,currentMonth,currentYear);
50+
51+
}
52+
function display(bdate,bmonth,byear){
53+
document.getElementById("years").textContent=byear;
54+
document.getElementById("months").textContent=bmonth;
55+
document.getElementById("days").textContent=bdate;
56+
57+
58+
}
59+
60+
function leapChecker(year){
61+
if(year%4==0 || (year%100==0 && year%400==0)){
62+
months[1]=29;
63+
}
64+
else{
65+
months[1]=28;
66+
}
67+
68+
69+
70+
71+
72+
}
73+
function checkBirthday(bdate,bmonth,byear,currentDay,currentMonth,currentYear){
74+
if(bdate==currentDay && bmonth===currentMonth && byear<currentYear){
75+
let msg=document.getElementById("wish");
76+
msg.className="bday";
77+
78+
}
79+
80+
}

‎Age Calculator/style.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
*,
2+
*:before,
3+
*:after{
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
8+
}
9+
body{
10+
background-color: #ee6cff;
11+
}
12+
.container{
13+
width: 40%;
14+
min-width: 450px;
15+
16+
position: absolute;
17+
transform: translate(-50%,-50%);
18+
left: 50%;
19+
top: 50%;
20+
padding : 50px 30px;
21+
22+
}
23+
.container *{
24+
font-family: sans-serif;
25+
border:none;
26+
outline: none;
27+
}
28+
.input{
29+
background-color: #080808;
30+
padding: 30px 25px;
31+
border-radius: 8px;
32+
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
33+
margin-bottom: 50px;
34+
35+
36+
}
37+
input,button{
38+
height: 50px;
39+
background-color: #ffffff;
40+
color:#080808;
41+
font-weight: 500px;
42+
border-radius: 5px ;
43+
44+
}
45+
46+
input{
47+
width:60%;
48+
padding: 0 20px;
49+
font-size: 14px;
50+
}
51+
button{
52+
width: 30%;
53+
float: right;
54+
}
55+
.output{
56+
width: 100%;
57+
display: flex;
58+
justify-content: space-between;
59+
60+
}
61+
62+
.output div{
63+
height: 100px;
64+
width: 100px;
65+
background-color: #080808;
66+
border-radius: 5px;
67+
color:#fff;
68+
display: grid;
69+
text-align:center;
70+
align-items: center;
71+
padding: 20px 0;
72+
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
73+
}
74+
span{
75+
font-size: 30px;
76+
font-weight: 500;
77+
}
78+
p{
79+
font-size: 14px;
80+
color: #707070;
81+
font-weight: 400;
82+
}
83+
.wish{
84+
visibility: hidden;
85+
86+
}
87+
.bday{
88+
visibility: visible;
89+
height: 60px;
90+
width: 300px;
91+
position: absolute;
92+
top:340px;
93+
left: 120px;
94+
font-weight: 600;
95+
font-size: 20px;
96+
background-color: #cdff87;
97+
border-radius: 15px;
98+
border:3px solid black;
99+
overflow: hidden;
100+
text-align: center;
101+
102+
}

‎Background Color Changer/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### Background Color Changer
2+
3+
### Tech stack
4+
- Html
5+
- css
6+
- JavaScript

‎Background Color Changer/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Color Changer</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<button>CHANGE</button>
9+
<script type="text/javascript" src="script.js"></script>
10+
</body>
11+
</html>

‎Background Color Changer/script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var color= ["#222f3e","#f368e0","#ee5353","#6c55cc","#24ffff","#ff2626","#ffffff","#000000","#7878ff","#cdcdcd","#454545","#909090","#cccddd","#0abde3","#10ac84","#5f27cd"];
2+
var i=0;
3+
document.querySelector("button").addEventListener("click",function(){
4+
i=1<color.length ? ++i : 0;
5+
document.querySelector("body").style.background=color[i]
6+
})

‎Background Color Changer/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: #222f3e;
5+
}
6+
button{
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%,-50%);
11+
padding: 10px;
12+
background-color: #fff;
13+
border:none;
14+
outline: none;
15+
font-size: 16px;
16+
text-transform: uppercase;
17+
cursor: pointer;
18+
}

‎Digital-Clock/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# ⌚Digital-Clock
2+
3+
4+
A basic html-css based digital clock.
5+
6+
![ScreenRec](https://user-images.githubusercontent.com/69838816/135886302-e93d8531-173d-45e3-8bcb-ce8f8bffa8d8.gif)
7+
8+
9+
10+
11+
12+
13+
14+
15+
<table>
16+
<tr>
17+
18+
19+

‎Digital-Clock/css/style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
}
6+
html,body{
7+
/* background: #000; */
8+
margin: 0px;
9+
overflow: hidden;
10+
color: #222;
11+
background: #fff;
12+
}
13+
14+
body.dark-theme {
15+
color: #eee;
16+
background: #121212;
17+
}
18+
body.dark-theme a {
19+
color: #809fff;
20+
}
21+
22+
23+
.wrapper{
24+
height: 100px;
25+
width: 420px;
26+
position: relative;
27+
border: 8px double orange;
28+
border-radius: 10px;
29+
cursor: default;
30+
animation: animate 1.5s linear infinite;
31+
}
32+
.wrapper .display{
33+
position: absolute;
34+
top: 50%;
35+
left: 50%;
36+
transform: translate(-50%, -50%);
37+
z-index: 999;
38+
height: 85px;
39+
width: 450px;
40+
background: transparent;
41+
border-radius: 6px;
42+
text-align: center;
43+
}
44+
.display #time{
45+
line-height: 85px;
46+
color: rgb(0, 0, 0);
47+
font-size: 50px;
48+
font-weight: 600;
49+
letter-spacing: 1px;
50+
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
51+
-webkit-background-clip: text;
52+
-webkit-text-fill-color: transparent;
53+
animation: animate 1.5s linear infinite;
54+
}
55+
.center{
56+
position: absolute;
57+
top: 50%;
58+
left: 50%;
59+
transform: translate(-50%,-50%);
60+
}
61+
62+
@keyframes animate {
63+
100%{
64+
filter: hue-rotate(360deg);
65+
}
66+
}
67+
#TimeZone{
68+
border-color: white;
69+
background-color: black;
70+
color: white;
71+
}
72+
73+
button{
74+
margin: 10px 30%;
75+
padding: 5px 20px;
76+
background: rgb(106, 106, 231);
77+
color: white;
78+
font-size: 16px;
79+
border-radius: 3px;
80+
}
81+
82+
button:hover{
83+
background: rgb(214, 106, 106);
84+
}

0 commit comments

Comments
 (0)