Skip to content

Commit b9c011c

Browse files
abhyuday1212abhyuday1212
authored
Merge branch 'TusharKesarwani:main' into mybranch
2 parents e1d1e7e + 84cb465 commit b9c011c

69 files changed

Lines changed: 4145 additions & 36 deletions

Some content is hidden

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

‎Projects/Alarm clock/assets/clock.png‎

21 KB
Loading

‎Projects/Alarm clock/assets/digital_alarm.mp3‎

203 KB
Binary file not shown.

‎Projects/Alarm clock/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>Alarm Clock</title>
7+
<link href="style.css" rel="stylesheet" type="text/css" />
8+
</head>
9+
<body>
10+
<div class="wrapper">
11+
<img src="./assets/clock.png" alt="clock" />
12+
<h1>00:00:00</h1>
13+
<div class="content">
14+
<div class="column">
15+
<select>
16+
<option value="Hour" selected hidden>Hour</option>
17+
</select>
18+
</div>
19+
<div class="column">
20+
<select>
21+
<option value="Min" selected hidden>Min</option>
22+
</select>
23+
</div>
24+
<div class="column">
25+
<select>
26+
<option value="AM/PM" selected hidden>AM/PM</option>
27+
</select>
28+
</div>
29+
</div>
30+
<button>Set Alarm</button>
31+
</div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Projects/Alarm clock/readme.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Alarm Clock Project
2+
3+
This Alarm Clock project is a simple web application built using HTML, CSS, and JavaScript. It allows users to set alarms and get notified when the alarm time is reached.
4+
5+
![Alarm Clock](./assets/clock.png)
6+
7+
## Table of Contents
8+
9+
- [Installation](#installation)
10+
- [Usage](#usage)
11+
- [Features](#features)
12+
- [Contributing](#contributing)
13+
- [License](#license)
14+
15+
## Installation
16+
17+
1. Clone the repository:
18+
19+
```bash
20+
git clone https://github.com/Abhilasha-Sagar/Front-End-Projects.git
21+
```
22+
23+
2. Open the project folder:
24+
25+
```bash
26+
cd Projects
27+
cd Alarm clock
28+
```
29+
30+
3. Open the `index.html` file in a web browser.
31+
32+
## Usage
33+
34+
1. Set the alarm time by selecting the desired hour, minute, and AM/PM from the dropdown menus.
35+
2. Click the "Set Alarm" button to activate the alarm.
36+
3. When the alarm time is reached, a digital alarm sound will play.
37+
38+
## Features
39+
40+
- Set custom alarm times with hour, minute, and AM/PM selection.
41+
- User-friendly interface with a clock display.
42+
- Sound notification when the alarm time is reached.
43+
- Ability to clear or reset the alarm.
44+
45+
## Contributing
46+
47+
Contributions to this project are welcome. To contribute, follow these steps:
48+
49+
1. Fork the repository.
50+
2. Create a new branch: `git checkout -b feature/new-feature`.
51+
3. Make your changes and commit them: `git commit -m 'Add new feature'`.
52+
4. Push to the feature branch: `git push origin feature/new-feature`.
53+
5. Create a pull request detailing your changes.
54+
55+
## License
56+
57+
This project is licensed under the [MIT License](LICENSE).
58+
59+
## Acknowledgments
60+
61+
- Font Awesome - Used clock icon in the project.
62+
- SoundBible - Digital alarm sound used for the alarm.
63+
- CodingNepal

‎Projects/Alarm clock/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const currentTime = document.querySelector("h1");
2+
const selectMenu = document.querySelectorAll("select");
3+
const setAlarmBtn = document.querySelector("button");
4+
const content = document.querySelector(".content");
5+
6+
let alarmTime, isAlarmSet = false,
7+
ringtone = new Audio("./assets/digital_alarm.mp3");
8+
9+
for(let i=12; i>0; i--){
10+
i = i < 10 ? "0" + i : i;
11+
let option = `<option value="${i}">${i}</option>`;
12+
selectMenu[0].firstElementChild.insertAdjacentHTML("afterend",option);
13+
}
14+
15+
for(let i=59; i>=0; i--){
16+
i = i < 10 ? "0" + i : i;
17+
let option = `<option value="${i}">${i}</option>`;
18+
selectMenu[1].firstElementChild.insertAdjacentHTML("afterend",option);
19+
}
20+
21+
for(let i=2; i>0; i--){
22+
let ampm = i == 1 ? "AM" : "PM"
23+
let option = `<option value="${ampm}">${ampm}</option>`;
24+
selectMenu[2].firstElementChild.insertAdjacentHTML("afterend",option);
25+
}
26+
27+
setInterval(()=>{
28+
let date = new Date(),
29+
h = date.getHours(),
30+
m = date.getMinutes(),
31+
s = date.getSeconds(),
32+
ampm = "AM";
33+
34+
if(h >= 12){
35+
h = h-12;
36+
ampm = "PM";
37+
}
38+
39+
h = h == 0 ? h=12 : h;
40+
h = h<10 ? "0" + h : h;
41+
m = m<10 ? "0" + m : m;
42+
s = s<10 ? "0" + s : s;
43+
44+
currentTime.innerText = `${h}:${m}:${s} ${ampm}`;
45+
if(alarmTime === `${h}:${m} ${ampm}`){
46+
ringtone.play();
47+
ringtone.loop = true;
48+
}
49+
})
50+
51+
function setAlarm(){
52+
if(isAlarmSet){
53+
alarmTime = "";
54+
ringtone.pause();
55+
content.classList.remove("disable");
56+
setAlarmBtn.innerText = "Set Alarm";
57+
return isAlarmSet = false;
58+
}
59+
let time = `${selectMenu[0].value}:${selectMenu[1].value} ${selectMenu[2].value}`;
60+
if(time.includes("Hour") || time.includes("Min") || time.includes("AM/PM")){
61+
return alert("Please, select a valid time to set alarm!");
62+
}
63+
isAlarmSet = true;
64+
alarmTime = time;
65+
content.classList.add("disable");
66+
setAlarmBtn.innerText = "Clear Alarm";
67+
}
68+
69+
setAlarmBtn.addEventListener("click",setAlarm);

‎Projects/Alarm clock/style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body, .wrapper, .content{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
body{
15+
padding: 0 10px;
16+
min-height: 100vh;
17+
background: #4A98F7;
18+
}
19+
.wrapper{
20+
width: 440px;
21+
padding: 30px 30px 38px;
22+
background: #fff;
23+
border-radius: 10px;
24+
flex-direction: column;
25+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
26+
}
27+
.wrapper img{
28+
max-width: 103px;
29+
}
30+
.wrapper h1{
31+
font-size: 38px;
32+
font-weight: 500;
33+
margin: 30px 0;
34+
}
35+
.wrapper .content{
36+
width: 100%;
37+
justify-content: space-between;
38+
}
39+
.content.disable{
40+
cursor: no-drop;
41+
}
42+
43+
.content .column{
44+
padding: 0 10px;
45+
border-radius: 5px;
46+
border: 1px solid #bfbfbf;
47+
width: calc(100% / 3 - 5px);
48+
}
49+
.content.disable .column{
50+
opacity: 0.6;
51+
pointer-events: none;
52+
}
53+
.column select{
54+
width: 100%;
55+
height: 53px;
56+
border: none;
57+
outline: none;
58+
background: none;
59+
font-size: 19px;
60+
}
61+
.wrapper button{
62+
width: 100%;
63+
border: none;
64+
outline: none;
65+
color: #fff;
66+
cursor: pointer;
67+
font-size: 20px;
68+
padding: 17px 0;
69+
margin-top: 20px;
70+
border-radius: 5px;
71+
background: #4A98F7;
72+
}

‎Projects/Analog Clock/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@
1212
<div class="hand hour-hand"></div>
1313
<div class="hand min-hand"></div>
1414
<div class="hand second-hand" ></div>
15-
<div class="number number1">1</div>
16-
<div class="number number2">2</div>
17-
<div class="number number3">3</div>
18-
<div class="number number4">4</div>
19-
<div class="number number5">5</div>
20-
<div class="number number6">6</div>
21-
<div class="number number7">7</div>
22-
<div class="number number8">8</div>
23-
<div class="number number9">9</div>
24-
<div class="number number10">10</div>
25-
<div class="number number11">11</div>
26-
<div class="number number12">12</div>
15+
<div class="number number1"><div class="inner1">1</div></div>
16+
<div class="number number2"><div class="inner2">2</div></div>
17+
<div class="number number3"><div class="inner3">3</div></div>
18+
<div class="number number4"><div class="inner4">4</div></div>
19+
<div class="number number5"><div class="inner5">5</div></div>
20+
<div class="number number6"><div class="inner6">6</div></div>
21+
<div class="number number7"><div class="inner7">7</div></div>
22+
<div class="number number8"><div class="inner8">8</div></div>
23+
<div class="number number9"><div class="inner9">9</div></div>
24+
<div class="number number10"><div class="inner10">10</div></div>
25+
<div class="number number11"><div class="inner11">11</div></div>
26+
<div class="number number12"><div class="inner12">12</div></div>
2727
</div>
2828
</div>
2929
<script src="script.js"></script>

‎Projects/Analog Clock/style.css‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,20 @@ html {
3838
width: 100%;
3939
height: 100%;
4040
transform: translateY(-3px); /*account for the height of the clock hands*/
41+
transform: rotate(180deg);
4142
}
4243

4344
.clock-face::after {
4445
content: '';
45-
background-color: #000;
46+
background-color: #000000;
4647
width: 25px;
4748
height: 25px;
4849
position: absolute;
49-
top: 50%;
50+
top: 50.8%;
5051
left: 50%;
5152
transform: translate(-50%,-50%);
5253
border-radius: 50%;
53-
z-index: 11;
54+
z-index: 10;
5455
}
5556

5657
.number {
@@ -63,17 +64,31 @@ html {
6364
color: #fff;
6465
}
6566

66-
.number1 { --rotate: 30deg; }
67-
.number2 { --rotate: 60deg; }
68-
.number3 { --rotate: 90deg; }
69-
.number4 { --rotate: 120deg; }
70-
.number5 { --rotate: 150deg; }
71-
.number6 { --rotate: 180deg; }
72-
.number7 { --rotate: 210deg; }
73-
.number8 { --rotate: 240deg; }
74-
.number9 { --rotate: 270deg; }
75-
.number10 { --rotate: 300deg; }
76-
.number11 { --rotate: 330deg; }
67+
.number1 { --rotate: 210deg; }
68+
.number2 { --rotate: 240deg; }
69+
.number3 { --rotate: 270deg; }
70+
.number4 { --rotate: 300deg; }
71+
.number5 { --rotate: 330deg; }
72+
.number6 { --rotate: 360deg; }
73+
.number7 { --rotate: 30deg; }
74+
.number8 { --rotate: 60deg; }
75+
.number9 { --rotate: 90deg; }
76+
.number10 { --rotate: 120deg; }
77+
.number11 { --rotate: 150deg; }
78+
.number12 { --rotate: 180deg; }
79+
80+
.inner1 { transform: rotate(-30deg); }
81+
.inner2 { transform: rotate(-60deg); }
82+
.inner3 { transform: rotate(-90deg); }
83+
.inner4 { transform: rotate(-120deg); }
84+
.inner5 { transform: rotate(-150deg); }
85+
.inner6 { transform: rotate(-180deg); }
86+
.inner7 { transform: rotate(-210deg); }
87+
.inner8 { transform: rotate(-240deg); }
88+
.inner9 { transform: rotate(-270deg); }
89+
.inner10 { transform: rotate(-300deg); }
90+
.inner11 { transform: rotate(-330deg); }
91+
7792

7893
.hand {
7994
--rotation: 0;
@@ -89,15 +104,23 @@ html {
89104
}
90105
.hand.hour-hand {
91106
width: 40%;
92-
height: 10px;
107+
height: 7px;
108+
border-radius: 8px 8px 8px 8px ;
109+
z-index: 11;
93110
}
94111

95112
.hand.min-hand {
96113
width: 45%;
97114
height: 7px;
115+
border-radius: 8px 8px 8px 8px ;
116+
z-index: 11;
98117
}
99118

100119
.hand.second-hand {
120+
content: '';
101121
background: rgb(179, 16, 94);
122+
border-radius: 8px 8px 8px 8px ;
123+
z-index: 12;
124+
width: 50%;
102125
}
103126

‎Projects/Apple-UI-Clone/img/apple-card-logo.png‎

20.2 KB
Loading

‎Projects/Apple-UI-Clone/img/apple-card.jpg‎

28.8 KB
Loading

0 commit comments

Comments
 (0)