Skip to content

Commit 029f921

Browse files
SomilRathore01SomilRathore01
committed
2 parents 7f07fc1 + b4d471d commit 029f921

660 files changed

Lines changed: 23566 additions & 32105 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.

‎.DS_Store‎

8 KB
Binary file not shown.

‎CONTRIBUTING.md‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
1-
While on one hand our repository is a good place for beginners to contribute something useful to open source, on the other hand it is also a good place for experienced people to contribute something useful to open source. We welcome contributions from everyone. However some people tend to spam the repository with irrelevant pull requests and get one PR for SWoC 3.0 and other such open source events. We do not want that to happen. So we have a few guidelines that we would like you to follow. In case we find your PR not relevant or spam, we will mark it as invalid and it will not be counted towards SWoC 3.0.
1+
<h1 align="center">Contributors Guide⚡ </h1>
2+
<h3 align="center">Welcome to our open-source project! 😍<br> We appreciate your interest in contributing.😊 <br>This guide will help you get started with the project and make your first contribution.</h3>
3+
4+
5+
6+
<h1 align="center">Creating first Pull Request 🌟</h1>
7+
8+
---
9+
1. Fork this repository.
10+
2. Clone the forked repository.
11+
```css
12+
git clone https://github.com/<your-github-username>/Front-End-Projects.git
13+
```
14+
15+
3. Navigate to the project directory.
16+
```py
17+
cd Front-End-Projects
18+
```
19+
4. Create a new branch.
20+
```css
21+
git checkout -b <your_branch_name>
22+
```
23+
5. Make changes.
24+
6. Stage your changes and commit
25+
```css
26+
git add .
27+
git commit -m "<your_commit_message>"
28+
```
29+
7. Push your local commits to the remote repo.
30+
```css
31+
git push -u origin <your_branch_name>
32+
```
33+
8. Create a Pull Request.
34+
9. Congratulations! 🎉 you've made your contribution.
35+
36+
37+
38+
<h1 align="center">Communication and Support 💬</h1>
39+
<p align="center">Join the project's communication channels to interact with other contributors and seek assistance.</br>If you have any questions or need help, don't hesitate to ask in the project's communication channels or comment on the relevant issue.</p>
40+
41+
<h1 align="center">Code of Conduct 😇</h1>
42+
<p align="center">Please follow our project's code of conduct while contributing.</br>Treat all contributors and users with respect and create a positive and inclusive environment for everyone.</p>
43+
44+
<h1 align="center">License 📄</h1>
45+
<p align="center">The project is licensed under [MIT]. Make sure to review and comply with the license terms.</br>We hope this guide helps you get started with contributing to our open-source project. Thank you for your contribution!</p>
46+
47+
<h1 align="center">Note from Author ❗</h1>
48+
<p align="center">While on one hand our repository is a good place for beginners to contribute something useful to open source, on the other hand it is also a good place for experienced people to contribute something useful to open source.</br>We welcome contributions from everyone. However some people tend to spam the repository with irrelevant pull requests and get one PR for SSOC 2.0 and other such open source events. We do not want that to happen.</br>So we have a few guidelines that we would like you to follow. In case we find your PR not relevant or spam, we will mark it as invalid and it will not be counted towards SSOC 2.0.</p>

‎Projects/Advice Generator/images/bg.jpg‎

351 KB
Loading

‎Projects/Advice Generator/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
<!-- fonts -->
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<!-- css stylesheet -->
14+
<link rel="stylesheet" href="styles.css" />
15+
<!-- title -->
16+
<title>Advice generator app</title>
17+
</head>
18+
<body>
19+
<div id="heading"></div>
20+
21+
<div id="date"></div>
22+
23+
<div id="time"></div>
24+
25+
<div class="container">
26+
<div class="row">
27+
<div class="col">
28+
<div class="advice">
29+
<h1 id="advice"></h1>
30+
</div>
31+
<button id="random" class="btn" type="button" name="button">
32+
More
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<footer>
39+
<div class="attribution">
40+
Made with ❤️ by
41+
<a href="https://github.com/WebdevShefali" target="_blank">Shefali</a>.
42+
</div>
43+
</footer>
44+
<script src="index.js" charset="utf-8"></script>
45+
</body>
46+
</html>

‎Projects/Advice Generator/index.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const API = "https://api.adviceslip.com/advice";
2+
random = document.getElementById("random");
3+
4+
function getAdvice(API) {
5+
fetch(API)
6+
.then((response) => {
7+
return response.json();
8+
})
9+
.then((data) => {
10+
let advice = data.slip["advice"];
11+
document.getElementById("advice").innerText = "“" + advice + "”";
12+
});
13+
}
14+
15+
//To initialize the Advice
16+
window.addEventListener("load", () => {
17+
getAdvice(API);
18+
getTime();
19+
});
20+
21+
random.addEventListener("click", () => {
22+
getAdvice(API);
23+
});
24+
const getTime = () => {
25+
var today = new Date();
26+
var date =
27+
today.getFullYear() + "." + today.getMonth() + "." + today.getDate();
28+
29+
var hr = today.getHours();
30+
var m = today.getMinutes();
31+
var s = today.getSeconds();
32+
m = checkTime(m);
33+
s = checkTime(s);
34+
var time = hr + ":" + m + ":" + s;
35+
36+
if (hr >= 0 && hr < 12) {
37+
document.getElementById("heading").textContent = "Good Morning!";
38+
} else if (hr == 12) {
39+
document.getElementById("heading").textContent = "Good Noon!";
40+
} else if (hr >= 12 && hr <= 17) {
41+
document.getElementById("heading").textContent = "Good Afternoon!";
42+
} else {
43+
document.getElementById("heading").textContent = "Good Evening!";
44+
}
45+
document.getElementById("date").innerText = date;
46+
document.getElementById("time").innerText = time;
47+
setTimeout(getTime, 1000);
48+
};
49+
function checkTime(i) {
50+
if (i < 10) {
51+
i = "0" + i;
52+
} // add zero in front of numbers < 10
53+
return i;
54+
}

‎Projects/Advice Generator/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
font-weight: 800;
8+
background-image: url(images/bg.jpg);
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
overflow: hidden;
12+
}
13+
button:focus {
14+
outline: none !important;
15+
}
16+
17+
body,
18+
.attribution a {
19+
color: #446a46;
20+
}
21+
22+
body,
23+
.btn {
24+
font-family: "Dancing Script", cursive;
25+
}
26+
27+
h1 {
28+
font-size: 2rem;
29+
}
30+
31+
.advice {
32+
height: 100px;
33+
}
34+
35+
#heading {
36+
font-size: 3rem;
37+
margin-top: 1%;
38+
margin-left: 2%;
39+
}
40+
41+
#time,
42+
#date {
43+
margin-top: 0.5%;
44+
font-size: 1.5rem;
45+
margin-left: 5%;
46+
}
47+
48+
.container {
49+
margin-top: 1%;
50+
height: 70vh;
51+
}
52+
53+
.btn {
54+
border-radius: 20px;
55+
border: none;
56+
padding-top: 3px;
57+
margin-top: 35px;
58+
height: 40px;
59+
width: 100px;
60+
color: #fff;
61+
background-color: #446a46;
62+
cursor: pointer;
63+
}
64+
65+
.btn,
66+
footer {
67+
font-size: 20px;
68+
}
69+
70+
footer {
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
footer,
77+
.container {
78+
text-align: center;
79+
}

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

0 commit comments

Comments
 (0)