Skip to content

Commit f077b2e

Browse files
harshita2216harshita2216
authored
Merge pull request #260 from nagasaisriya/add-relaxerapp
added relaxerapp
2 parents ed3791c + aed3cec commit f077b2e

File tree

5 files changed

+217
-0
lines changed

5 files changed

+217
-0
lines changed

‎Index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
| [Password Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Password%20Generator) | A password generator app to generate strong passwords which can be easily used for authentication. |
8383
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Chess-Game) | A basic website using HTML, CSS, JAVASCRIPT with modern look. |
8484
| [Random Meal Generator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Random%20Meal-generator) | A random meals generator app using HTML, CSS, JAVASCRIPT and an external API. It shows a picture of meal with name, category, ingredients and instructions |
85+
| [Relaxer App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Relaxer%20App) | A relaxer app using HTML, CSS, JAVASCRIPT. A relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out |
8586
| [To Do List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/todolist) |This app allows you to make a list of events you want to do and you can strikeout the events completed.|
8687
| [Weight Converter](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weight%20Converter) |A web page where used can convert weight from kilograms to grams, ounces and pounds.|
8788
| [Restaurant website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Restaurant-website) |A Restuarant website with a simple and user friendly design ad a database linked to it.|
@@ -104,3 +105,4 @@
104105
| [Typing Speed Test](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website)| User can improve his/her typing speed.|
105106
| [Week Day Predictor](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Week%20Day%20Predictor%20App)| This app displays the current day of the week with quotes.|
106107
| [Parallex Website](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/parallex-website)| This is a basic HTML, CSS, JAVASCRIPT website where images of this website has their position fixed that results in giving the parallex look and that is why it is called Parallex Website.|
108+

‎Relaxer App/README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<h1>Relaxer App</h1>
2+
3+
<p>Relaxer App written in HTML, CSS, and JavaScript .</p>
4+
5+
### Use of the Project:
6+
7+
<p>This app helps to relax by telling you when to breathe in, hold and breathe out .</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Just relax!!
29+
30+
<h3> ScreenShots </h3>
31+
32+
<img width="750" alt="breathe-in" src="https://user-images.githubusercontent.com/63009472/126199968-7acb328d-4d15-4134-bb5f-3d11a8e57438.png">
33+
34+
<br>
35+
36+
<img width="750" alt="hold" src="https://user-images.githubusercontent.com/63009472/126199455-b6ff56f5-f9a3-4ec6-a50e-c60957802894.png">
37+
38+
<br>
39+
40+
<img width="750" alt="breathe-out" src="https://user-images.githubusercontent.com/63009472/126199414-4adc04b6-c699-4fc9-8259-50ea18d223b0.png">
41+
42+
<br>
43+
44+

‎Relaxer App/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Relaxer App</title>
10+
11+
</head>
12+
13+
<body>
14+
<h1>Just Relax !!</h1>
15+
<div class="container">
16+
<div class="circle"></div>
17+
<p id="text"></p>
18+
<div class="pointer-container">
19+
<span class="pointer"></span>
20+
</div>
21+
<div class="gradient-circle"></div>
22+
</div>
23+
</body>
24+
<script src="script.js"></script>
25+
</html>
26+

‎Relaxer App/script.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const container = document.querySelector('.container')
2+
const text = document.querySelector('#text')
3+
4+
const totaltime = 7500
5+
const breathetime = (totaltime / 5) * 2
6+
const holdtime = totaltime / 5
7+
8+
breatheanimation()
9+
10+
function breatheanimation(){
11+
text.innerHTML= 'Breathe-In !'
12+
container.className='container grow'
13+
14+
setTimeout(() => {
15+
text.innerText= 'Hold'
16+
setTimeout(()=>{
17+
text.innerText= 'Breathe-Out !'
18+
container.className='container shrink'
19+
},holdtime)
20+
},breathetime)
21+
}
22+
23+
setInterval(breatheanimation,totaltime)
24+

‎Relaxer App/style.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap');
2+
3+
*{
4+
box-sizing: border-box;
5+
}
6+
7+
8+
body{
9+
background: url(https://www.gannett-cdn.com/presto/2018/12/15/USAT/2e7b9863-85ac-4faa-aad3-096fc1826c20-GettyImages-841647034.jpg) no-repeat center center/cover;
10+
color: rgb(243, 250, 235);
11+
font-family: 'Dancing Script',sans-serif;
12+
font-size: large;
13+
font-weight: 500;
14+
min-height: 100vh;
15+
overflow: hidden;
16+
display: flex;
17+
align-items: center;
18+
flex-direction: column;
19+
margin: 0;
20+
21+
}
22+
23+
.container{
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
height: 300px;
28+
width: 300px;
29+
margin: auto;
30+
position: relative;
31+
transform: scale(1);
32+
}
33+
34+
.gradient-circle{
35+
background: conic-gradient(
36+
#5567b7 0%,
37+
#954ca4 40%,
38+
#fff 40%,
39+
#fff 60%,
40+
#53afb3 60%,
41+
#53a0ad 100%
42+
);
43+
height: 320px;
44+
width: 320px;
45+
position: absolute;
46+
top: -10px;
47+
left: -10px;
48+
z-index: -2;
49+
border-radius: 50%;
50+
}
51+
.circle{
52+
background-color: rgb(2, 16, 43);
53+
height: 100%;
54+
width: 100%;
55+
position:absolute;
56+
top: 0;
57+
left: 0;
58+
z-index: -1;
59+
border-radius: 50%;
60+
}
61+
62+
.pointer-container{
63+
position: absolute;
64+
top: -40px;
65+
left: 140px;
66+
width: 20px;
67+
height: 190px;
68+
69+
animation: rotate 7.5s linear forwards infinite;
70+
transform-origin: bottom center;
71+
}
72+
73+
.pointer {
74+
background-color: lavender;
75+
border-radius: 50%;
76+
height: 20px;
77+
width: 20px;
78+
display: block;
79+
}
80+
81+
.container.grow{
82+
animation: grow 3s linear forwards;
83+
}
84+
85+
.container.shrink{
86+
animation: shrink 3s linear forwards;
87+
}
88+
@keyframes rotate {
89+
from{
90+
transform: rotate(0deg);
91+
92+
}
93+
to{
94+
transform: rotate(360deg);
95+
96+
}
97+
}
98+
99+
@keyframes grow {
100+
from{
101+
transform: scale(1);
102+
103+
}
104+
to{
105+
transform: scale(1.2);
106+
107+
}
108+
}
109+
110+
@keyframes shrink {
111+
from{
112+
transform: scale(1.2);
113+
114+
}
115+
to{
116+
transform: scale(1);
117+
118+
}
119+
}
120+
121+

0 commit comments

Comments
 (0)