Skip to content

Commit 275baaa

Browse files
acharya-technologiesacharya-technologies
authored
Merge branch 'codemistic:main' into main
2 parents cd77a06 + 82429c7 commit 275baaa

64 files changed

Lines changed: 31279 additions & 168 deletions

Some content is hidden

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

‎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+
}

‎Digital-Clock/index.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!-- Hi this is simple digital clock with glowing effect made with a little css and js -->
2+
3+
4+
<!DOCTYPE html>
5+
<html lang="en" dir="ltr">
6+
7+
<head>
8+
<meta charset="utf-8">
9+
<title>Digital Clock</title>
10+
<link rel="stylesheet" href="css/style.css">
11+
</head>
12+
13+
<body class="dark-theme || light-theme">
14+
15+
<canvas id="canvas"></canvas>
16+
<div class="center">
17+
<button class=" btn-toggle">Toggle Dark Mode</button>
18+
19+
<div class="wrapper">
20+
<div class="display">
21+
<div class="timezone">
22+
<select name="TimeZone" id="TimeZone">
23+
24+
</select>
25+
</div>
26+
<div id="time"></div>
27+
</div>
28+
</div>
29+
</div>
30+
31+
main
32+
<script src="script.js"></script>
33+
34+
35+
36+
<script>
37+
38+
// Select the button
39+
const btn = document.querySelector('.btn-toggle');
40+
41+
// Listen for a click on the button
42+
btn.addEventListener('click', function() {
43+
// Then toggle (add/remove) the .dark-theme class to the body
44+
document.body.classList.toggle('dark-theme');
45+
})
46+
47+
48+
console.log("Hello World");
49+
50+
var canvas = document.getElementById("canvas");
51+
var c = canvas.getContext("2d");
52+
var tx = window.innerWidth;
53+
var ty = window.innerHeight;
54+
canvas.width = tx;
55+
canvas.height = ty;
56+
//c.lineWidth= 5;
57+
//c.globalAlpha = 0.5;
58+
59+
var mousex = 0;
60+
var mousey = 0;
61+
62+
addEventListener("mousemove", function() {
63+
mousex = event.clientX;
64+
mousey = event.clientY;
65+
});
66+
67+
68+
var grav = 0.99;
69+
c.strokeWidth=5;
70+
function randomColor() {
71+
return (
72+
"rgba(" +
73+
Math.round(Math.random() * 250) +
74+
"," +
75+
Math.round(Math.random() * 250) +
76+
"," +
77+
Math.round(Math.random() * 250) +
78+
"," +
79+
Math.ceil(Math.random() * 10) / 10 +
80+
")"
81+
);
82+
}
83+
84+
function Ball() {
85+
this.color = randomColor();
86+
this.radius = Math.random() * 20 + 14;
87+
this.startradius = this.radius;
88+
this.x = Math.random() * (tx - this.radius * 2) + this.radius;
89+
this.y = Math.random() * (ty - this.radius);
90+
this.dy = Math.random() * 2;
91+
this.dx = Math.round((Math.random() - 0.5) * 10);
92+
this.vel = Math.random() /5;
93+
this.update = function() {
94+
c.beginPath();
95+
c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
96+
c.fillStyle = this.color;
97+
c.fill();
98+
//c.stroke();
99+
};
100+
}
101+
102+
var bal = [];
103+
for (var i=0; i<50; i++){
104+
bal.push(new Ball());
105+
}
106+
107+
function animate() {
108+
if (tx != window.innerWidth || ty != window.innerHeight) {
109+
tx = window.innerWidth;
110+
ty = window.innerHeight;
111+
canvas.width = tx;
112+
canvas.height = ty;
113+
}
114+
requestAnimationFrame(animate);
115+
c.clearRect(0, 0, tx, ty);
116+
for (var i = 0; i < bal.length; i++) {
117+
bal[i].update();
118+
bal[i].y += bal[i].dy;
119+
bal[i].x += bal[i].dx;
120+
if (bal[i].y + bal[i].radius >= ty) {
121+
bal[i].dy = -bal[i].dy * grav;
122+
} else {
123+
bal[i].dy += bal[i].vel;
124+
}
125+
if(bal[i].x + bal[i].radius > tx || bal[i].x - bal[i].radius < 0){
126+
bal[i].dx = -bal[i].dx;
127+
}
128+
if(mousex > bal[i].x - 20 &&
129+
mousex < bal[i].x + 20 &&
130+
mousey > bal[i].y -50 &&
131+
mousey < bal[i].y +50 &&
132+
bal[i].radius < 70){
133+
//bal[i].x += +1;
134+
bal[i].radius +=5;
135+
} else {
136+
if(bal[i].radius > bal[i].startradius){
137+
bal[i].radius += -5;
138+
}
139+
}
140+
141+
//forloop end
142+
}
143+
//animation end
144+
}
145+
146+
animate();
147+
148+
setInterval(function() {
149+
bal.push(new Ball());
150+
bal.splice(0, 1);
151+
}, 400);
152+
153+
154+
</script>
155+
156+
</body>
157+
158+
</html>

‎Digital-Clock/script.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
2+
const TimeZoneData = {
3+
IST: 5.3,
4+
GMT: 0,
5+
ECT: 1,
6+
EET: 2,
7+
ART: 2,
8+
EAT: 3,
9+
MET: 3.3,
10+
NET: 4,
11+
PLT: 5,
12+
BST: 6,
13+
VST: 7,
14+
CTT: 8,
15+
JST: 9,
16+
ACT: 9.3,
17+
AET: 10,
18+
SST: 11,
19+
NST: 12,
20+
MIT: -11,
21+
HST: -10,
22+
AST: -9,
23+
PST: -8,
24+
PNT: -7,
25+
MST: -7,
26+
CST: -6,
27+
EST: -5,
28+
PRT: -4,
29+
CNT: -3.3,
30+
AGT: -3,
31+
BET: -3,
32+
CAT: -1,
33+
};
34+
let timezone = document.getElementById("TimeZone");
35+
for (key in TimeZoneData) {
36+
timezone.innerHTML += `<option value="${key}">${key}</option>`;
37+
}
38+
39+
setInterval(() => {
40+
const time = document.querySelector(".display #time");
41+
let day_night = "AM";
42+
let TZ = timezone.value;
43+
let date = new Date();
44+
let hours = date.getUTCHours();
45+
console.log(hours);
46+
if (hours > 12) {
47+
hours -= 12;
48+
day_night = "PM";
49+
}
50+
51+
hours += Math.floor(TimeZoneData[TZ]);
52+
let minutes = date.getUTCMinutes();
53+
let minutestoadd = (TimeZoneData[TZ] - Math.floor(TimeZoneData[TZ]));
54+
if (minutestoadd > 0) {
55+
minutestoadd = 30;
56+
}
57+
minutes += minutestoadd;
58+
if (minutes > 60) {
59+
hours += 1;
60+
minutes -= 60;
61+
}
62+
let seconds = date.getUTCSeconds();
63+
64+
let millisec = Math.floor(date.getUTCMilliseconds() / 10).toFixed(0);
65+
66+
67+
if (hours > 12) {
68+
day_night = "AM";
69+
hours = hours - 12;
70+
}
71+
72+
if (seconds < 10) {
73+
seconds = "0" + seconds;
74+
}
75+
if (millisec < 10) {
76+
millisec = "0" + millisec;
77+
}
78+
if (minutes < 10) {
79+
minutes = "0" + minutes;
80+
}
81+
if (hours < 10) {
82+
hours = "0" + Math.abs( hours);
83+
}
84+
time.textContent =
85+
hours + ":" + minutes + ":" + seconds + ":" + millisec + " " + day_night;
86+
});

0 commit comments

Comments
 (0)