Skip to content

Commit 5486f8f

Browse files
Tejas-SandsTejas-Sands
authored
Merge branch 'TusharKesarwani:main' into main
2 parents 81c7654 + b4d471d commit 5486f8f

214 files changed

Lines changed: 9279 additions & 23 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.

‎Projects/Age Calculator/README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<b>Simple Age Calculator Website</b>
2+
<br>
3+
<br>
4+
This repository contains a simple age calculator website built using HTML, CSS, and JavaScript. The website allows users to calculate their age based on their birthdate.
5+
<br>
6+
<br>
7+
<b>Features</b>
8+
<br>
9+
<br>
10+
-User-friendly interface.<br>
11+
-Input field for entering the birthdate.<br>
12+
-Calculate button to initiate the age calculation.<br>
13+
-Display area to show the calculated age.<br>
14+
<br>
15+
<br>
16+
<b>Technologies Used</b>
17+
<br>
18+
<br>
19+
-<b>HTML</b>: Used for structuring the website.<br>
20+
-<b>CSS</b>: Used for styling the website.<br>
21+
-<b>JavaScript</b>: Used for handling the age calculation logic.<br>
22+
<br>
23+
<br>
24+
**How to Use**
25+
<br>
26+
<br>
27+
1.Clone the repository or download the source code files.<br>
28+
2.Open the index.html file in your preferred web browser.<br>
29+
3.Enter your birthdate in the provided input field in the format YYYY-MM-DD.<br>
30+
4.Click on the "Calculate" button.<br>
31+
5.The calculated age will be displayed in the designated area.<br>
32+

‎Projects/Age Calculator/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Age Calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="calculator">
13+
<h1>Age Calculator</h1>
14+
<div class="input-box">
15+
16+
<input type="date" id="date">
17+
<button onclick="calculateAge()">Calculate</button>
18+
</div>
19+
<p id="result"></p>
20+
</div>
21+
22+
</div>
23+
24+
<script>
25+
let userInput=document.getElementById("date")
26+
userInput.max=new Date().toISOString().split("T")[0];
27+
28+
let result=document.getElementById("result");
29+
30+
function calculateAge(){
31+
let birthDate=new Date(userInput.value);
32+
let d1=birthDate.getDate();
33+
let m1=birthDate.getMonth()+1;
34+
let y1=birthDate.getFullYear();
35+
36+
let today=new Date();
37+
38+
let d2=today.getDate();
39+
let m2=today.getMonth()+1;
40+
let y2=today.getFullYear();
41+
42+
let d3,m3,y3;
43+
44+
y3=y2-y1;
45+
if(m2>=m1){
46+
m3=m2-m1;
47+
}
48+
else{
49+
y3--;
50+
m3=12+m2-m1;
51+
}
52+
if(d2>=d1){
53+
d3=d2-d1;
54+
}
55+
else{
56+
m3--;
57+
d3=getDaysInMonth(y1,m1)+d2-d1;
58+
}
59+
if(m3<0){
60+
m3=11;
61+
y3--;
62+
}
63+
result.innerHTML=`You are <span>${y3}</span> years, <span>${m3}</span> months and <span>${d3}</span> days old `;
64+
65+
66+
67+
68+
}
69+
function getDaysInMonth(year,month){
70+
return new Date(year,month,0).getDate();
71+
}
72+
73+
</script>
74+
</body>
75+
</html>

‎Projects/Age Calculator/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins',sans-serif;
5+
box-sizing: border-box;
6+
}
7+
.container{
8+
width: 100%;
9+
min-height: 100vh;
10+
background: linear-gradient(90deg, rgba(9,9,121,1) 8%, rgba(0,241,255,1) 100%, rgba(0,212,255,1) 100%);
11+
color: #fff;
12+
padding: 10px;
13+
}
14+
.calculator{
15+
width: 100%;
16+
max-width: 600px;
17+
margin-left: 10%;
18+
margin-top: 10%;
19+
}
20+
.calculator h1{
21+
font-size: 60px;
22+
color: #ffff76;
23+
}
24+
.input-box{
25+
margin: 40px 0;
26+
padding: 35px;
27+
border-radius:10px ;
28+
background: rgba(255,255,255,0.3);
29+
display: flex;
30+
align-items: center;
31+
}
32+
.input-box input{
33+
flex: 1;
34+
margin-right: 20px;
35+
padding: 14px 20px;
36+
border: 0;
37+
outline: 0;
38+
font-size: 18px;
39+
border-radius: 5px;
40+
position: relative;
41+
}
42+
.input-box button{
43+
background: #dd1600;
44+
border: 0;
45+
outline: 0;
46+
padding: 15px 30px;
47+
border-radius: 5px;
48+
font-weight: 500;
49+
color: #ffffff;
50+
cursor: pointer;
51+
52+
}
53+
.input-box input::-webkit-calender-picker-indicator{
54+
top: 0;
55+
left: 0;
56+
right: 0;
57+
bottom: 0;
58+
width: auto;
59+
height: auto;
60+
position: absolute;
61+
background-position: cal(100%-10px);
62+
background-size: 30px;
63+
cursor: pointer;
64+
65+
}
66+
#result span{
67+
color: #ffff76;
68+
}
69+
70+

‎Projects/Bookmarker_App/style.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
body {
22
padding-top: 10px;
33
padding-bottom: 20px;
4-
background: linear-gradient(45deg, #ea4f4c 0%, #6d0019 100%);
4+
background: linear-gradient(90deg, #d74946 0%, #6d0019 100%);
5+
56
}
67

78
.header,
@@ -28,7 +29,7 @@ body {
2829
background-color: #222;
2930
border-radius: 0.25rem;
3031
padding: 1.3em;
31-
color: #ea4f4c;
32+
color: #fff;
3233

3334
}
3435

‎Projects/Cafe Website/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Project Info
2+
This is a web application that allows users to search cafes near them. Using Google Maps it shows real time data like location, reviews and opening/closing time. It displays top 10 cafes every week and additionally mentions whether the cafe provides free wifi or not.
3+
4+
# Technologies Used
5+
This project is built using:-
6+
- HTML5 (Structuring)
7+
- CSS3 (Styling)
8+
- Javascript (Server side scripting)
9+
- Git/GitHub (Version control)
10+
- Netlify (Hosting)
11+
12+
# Sample Output
13+
14+
![Screenshot (53)](https://github.com/krutika-ladani/Front-End-Projects/assets/119760273/08854606-18c5-4872-9161-9767813c8e28)
15+
16+
<hr>
17+
18+
![Screenshot (55)](https://github.com/krutika-ladani/Front-End-Projects/assets/119760273/2c31a77c-3976-438e-9d16-7e3694b1fffc)
19+
20+
<hr>
21+
22+
![Screenshot (56)](https://github.com/krutika-ladani/Front-End-Projects/assets/119760273/aca27992-df32-4c19-a567-2a36a5387895)
23+

‎Projects/Coinbase-clone-clean/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Coinbase clone
2+
3+
A clone of the Coinbase landing page, showcasing the key features and services of the Coinbase platform.
4+
5+
6+
## Preview
7+
8+
![preview](image.png)
9+
10+
## Getting Started
11+
12+
These instructions will help you get a copy of the project up and running on your local machine.
13+
14+
### Prerequisites
15+
16+
- Web browser (e.g., Google Chrome, Mozilla Firefox)
17+
18+
### Installation
19+
20+
1. Clone the repository:
21+
22+
```
23+
$ git clone https://github.com/TusharKesarwani/Front-End-Projects.git
24+
```
25+
2. Open the index.html file in your web browser.
26+
27+
## Usage
28+
29+
- Explore the landing page to get an overview of Coinbase and its services.
30+
- Click on the "Sign Up" or "Log In" buttons to access the Coinbase platform.
31+
- Navigate through the different sections to learn more about Coinbase's features, security measures, and supported cryptocurrencies.
32+
- Use the navigation menu to visit specific pages, such as "Pricing," "Earn," or "Learn."
33+
- Interact with any interactive elements, such as buttons or forms, to experience the user interface.
34+
## Contributing
35+
36+
Contributions are welcome! If you find any issues or have suggestions for improvements, please create a new issue.
37+
38+
39+
## Acknowledgements
40+
41+
This project was created with the intention of replicating the design and user experience of the Coinbase landing page. We would like to acknowledge Coinbase for their original design and inspiration.
42+
43+
Note: This is a clone project and not affiliated with or endorsed by Coinbase.

0 commit comments

Comments
 (0)