Skip to content

Commit d7f29e6

Browse files
ajay-dhangarajay-dhangar
committed
tasks added
1 parent cd54b2c commit d7f29e6

File tree

21 files changed

+1072
-161
lines changed

21 files changed

+1072
-161
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
- [x] **Day 1:** Love Calculator App 🧮
44
- [x] **Day 2:** BMI Calculator App 🧮
55
- [x] **Day 3:** Loan Calculator App 💰
6-
- [ ] **Day 4:** Weather App 🌦️
6+
- [x] **Day 4:** Weather App 🌦️
77
- [x] **Day 5:** Counter App 🔢
88
- [ ] **Day 6:** Countdown Timer App ⏳
9-
- [ ] **Day 7:** Palindrome Checker App 🔄
9+
- [x] **Day 7:** Palindrome Checker App 🔄
1010
- [ ] **Day 8:** Random Quote Generator App 📜
1111
- [ ] **Day 9:** To-Do List App 📝
1212
- [ ] **Day 10:** Quiz App 🧠

‎age-calculator/README.md

+151
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# Task 19: Age Calculator
2+
3+
## Description
4+
5+
The Age Calculator is a simple web application that allows users to calculate their age based on their date of birth. This project helps students understand the basics of HTML, CSS, and JavaScript, including working with forms, handling user input, and performing date calculations.
6+
7+
## Screenshots of the Project
8+
9+
![Age Calculator](image.png)
10+
11+
## Objectives
12+
- To practice creating and structuring an HTML document.
13+
- To apply CSS for styling the web page.
14+
- To use JavaScript for manipulating the DOM and performing calculations.
15+
- To understand how to work with dates in JavaScript.
16+
17+
## Technologies Used
18+
- HTML
19+
- CSS
20+
- JavaScript
21+
22+
## Getting Started
23+
Follow these instructions to set up the project on your local machine.
24+
25+
### Prerequisites
26+
- A code editor (e.g., Visual Studio Code)
27+
- A web browser (e.g., Google Chrome)
28+
29+
### Installation
30+
31+
Fork this repository by clicking on the fork button on the top of this page. This will create a copy of this repository in your account. And then follow these steps:
32+
33+
1. Clone the repository to your local machine:
34+
```sh
35+
git clone https://github.com/yourusername/javascript-projects.git
36+
```
37+
2. Navigate to the project directory:
38+
```sh
39+
cd age-calculator
40+
```
41+
42+
## Project Structure
43+
44+
The project files and directories are organized as follows:
45+
46+
```
47+
age-calculator/
48+
│
49+
├── index.html # The main HTML file
50+
├── style.css # The CSS file for styling
51+
└── src.js # The JavaScript file for functionality
52+
```
53+
54+
## Usage
55+
56+
1. Open `index.html` in your web browser.
57+
2. Enter your date of birth in the provided input field.
58+
3. Click the "Calculate Age" button to see your age displayed.
59+
60+
## Code Explanation
61+
62+
### HTML
63+
- The HTML file (`index.html`) contains the basic structure of the web page, including the form for inputting the date of birth and the section for displaying the calculated age.
64+
65+
### CSS
66+
- The CSS file (`style.css`) styles the web page, including the container, form, and result display.
67+
68+
### JavaScript
69+
- The JavaScript file (`src.js`) contains the logic for calculating the age based on the user's input and updating the DOM to display the result.
70+
71+
## Detailed Steps
72+
73+
### HTML (index.html)
74+
- Create a basic HTML structure with a `<!DOCTYPE html>` declaration.
75+
- Add a `meta` tag for character set and viewport settings.
76+
- Include a `title` tag to set the page title.
77+
- Link the CSS file using the `link` tag.
78+
- Create a `div` container for the main content.
79+
- Inside the container, add an `h1` tag for the title.
80+
- Create a form with a label and input for the date of birth and a button to calculate the age.
81+
- Add a `div` to display the result.
82+
83+
### CSS (style.css)
84+
- Style the container to center the content and set a max-width.
85+
- Style the form elements (label, input, button) for a clean appearance.
86+
- Style the result display to make it stand out.
87+
88+
#### JavaScript (src.js)
89+
- Select the necessary DOM elements (input, button, result container).
90+
- Add an event listener to the button to trigger the age calculation.
91+
- Define a function to calculate the age based on the input date and the current date.
92+
- Update the result container with the calculated age.
93+
94+
## Submitting the Project
95+
96+
After setting up the project on your local machine, and writing the necessary code, follow these steps to submit your project:
97+
98+
1. Create a new folder/directory on your local machine in the `javascript-projects/age-calculator` directory. Name it `your-name`.
99+
100+
> For example, if you are using Visual Studio Code, you can create a new folder by clicking on the `New Folder` icon in the `Explorer` sidebar and naming it `age-calculator`.
101+
>
102+
> You folder structure should look like this:
103+
>
104+
> ```
105+
> javascript-projects/
106+
> │
107+
> ├── age-calculator/
108+
> │ ├── your-name/
109+
> │ │ ├── index.html
110+
> │ │ ├── style.css
111+
> │ │ └── src.js
112+
> │
113+
> └── ...
114+
> ```
115+
116+
2. Write the necessary code for the project by following the instructions provided in the project description.
117+
3. Once you have completed the project, push your code to the remote repository on GitHub.
118+
119+
3.1 Create a new branch:
120+
```sh
121+
git checkout -b your-branch-name
122+
```
123+
124+
3.2 Stage your changes:
125+
```sh
126+
git add .
127+
```
128+
129+
3.3 Commit the changes:
130+
```sh
131+
git commit -m "Add project files"
132+
```
133+
134+
3.4 Push the changes to the remote repository:
135+
```sh
136+
git push origin your-branch-name
137+
```
138+
4. Create a pull request on the original repository.
139+
5. Add a title and description to your pull request.
140+
6. Submit the pull request.
141+
7. Congratulations! You have successfully submitted your project.
142+
143+
## Resources
144+
145+
- [W3Schools HTML Tutorial](https://www.w3schools.com/html/)
146+
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
147+
- [W3Schools JavaScript Tutorial](https://www.w3schools.com/js/)
148+
149+
## License
150+
151+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎age-calculator/image.png

332 KB
Loading

‎age-calculator/index.html

-28
This file was deleted.

‎age-calculator/src.js

-22
This file was deleted.

‎age-calculator/style.css

-109
This file was deleted.

0 commit comments

Comments
 (0)