├── DSA
    ├── DSA Day 1.ipynb
    ├── DSA Day 10.ipynb
    ├── DSA Day 2.ipynb
    ├── DSA Day 3.ipynb
    ├── DSA Day 4.ipynb
    ├── DSA Day 5.ipynb
    ├── DSA Day 6.ipynb
    ├── DSA Day 7.ipynb
    ├── DSA Day 8.ipynb
    └── DSA Day 9.ipynb
├── HTML & CSS
    ├── Task 1.html
    ├── Task 10.html
    ├── Task 11.html
    ├── Task 12.html
    ├── Task 13.html
    ├── Task 14.html
    ├── Task 15.html
    ├── Task 16.html
    ├── Task 17.html
    ├── Task 18.html
    ├── Task 19.html
    ├── Task 2.html
    ├── Task 20.html
    ├── Task 21.html
    ├── Task 22.html
    ├── Task 23.html
    ├── Task 24.html
    ├── Task 25.html
    ├── Task 26.html
    ├── Task 27.html
    ├── Task 28.html
    ├── Task 29.html
    ├── Task 3.html
    ├── Task 30.html
    ├── Task 4.html
    ├── Task 5.html
    ├── Task 6.html
    ├── Task 7.html
    ├── Task 8.html
    └── Task 9.html
├── Internship Project
    ├── Internship Project Documentation.pdf
    ├── Project Screenshots
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   └── 9.png
    ├── __pycache__
    │   ├── database.cpython-312.pyc
    │   └── database.cpython-39.pyc
    ├── app.py
    ├── database.py
    ├── db
    │   └── hireme.db
    ├── pythonfiles
    │   ├── Student_home.py
    │   ├── Student_reset_pass.py
    │   ├── Students_register.py
    │   ├── __init__.py
    │   ├── __pycache__
    │   │   ├── Students_register.cpython-39.pyc
    │   │   ├── __init__.cpython-39.pyc
    │   │   ├── create_job.cpython-39.pyc
    │   │   ├── recruiter_register.cpython-39.pyc
    │   │   ├── recruiterslogin.cpython-39.pyc
    │   │   ├── report.cpython-39.pyc
    │   │   └── students_login.cpython-39.pyc
    │   ├── create_job.py
    │   ├── rec_forgotpassword.py
    │   ├── recruiter_home.py
    │   ├── recruiter_register.py
    │   ├── recruiterslogin.py
    │   ├── report.py
    │   └── students_login.py
    ├── requirements.txt
    ├── static
    │   ├── css
    │   │   ├── create_job.css
    │   │   ├── index.css
    │   │   ├── job_details.css
    │   │   ├── rec_forgot_password.css
    │   │   ├── recruiter_home.css
    │   │   ├── recruiter_job_details.css
    │   │   ├── recruiter_login.css
    │   │   ├── recruiter_register.css
    │   │   ├── report.css
    │   │   ├── student_home.css
    │   │   ├── student_login.css
    │   │   ├── student_register.css
    │   │   └── student_reset_password.css
    │   ├── images
    │   │   └── logo.png
    │   └── js
    │   │   ├── create_job.js
    │   │   ├── index.js
    │   │   ├── job_details.js
    │   │   ├── rec_forgot_password.js
    │   │   ├── recruiter_home.js
    │   │   ├── recruiter_job_details.js
    │   │   ├── recruiter_login.js
    │   │   ├── recruiter_register.js
    │   │   ├── report.js
    │   │   ├── student_home.js
    │   │   ├── student_login.js
    │   │   ├── student_register.js
    │   │   └── student_reset_password.js
    └── templates
    │   ├── create_job.html
    │   ├── index.html
    │   ├── job_details.html
    │   ├── rec_forgot_password.html
    │   ├── recruiter_home.html
    │   ├── recruiter_job_details.html
    │   ├── recruiter_login.html
    │   ├── recruiter_register.html
    │   ├── report.html
    │   ├── student_applications.html
    │   ├── student_home.html
    │   ├── student_login.html
    │   ├── student_register.html
    │   └── student_reset_password.html
├── JavaScript
    ├── T1.html
    ├── T10.html
    ├── T11.html
    ├── T12.html
    ├── T13.html
    ├── T14.html
    ├── T15.html
    ├── T16.html
    ├── T17.html
    ├── T18.html
    ├── T19.html
    ├── T2.html
    ├── T20.html
    ├── T21.html
    ├── T22.html
    ├── T23.html
    ├── T24.html
    ├── T25.html
    ├── T26.html
    ├── T27.html
    ├── T28.html
    ├── T29.html
    ├── T3.html
    ├── T30.html
    ├── T4.html
    ├── T5.html
    ├── T6.html
    ├── T7.html
    ├── T8.html
    └── T9.html
├── Python
    ├── Day 1.ipynb
    ├── Day 10.ipynb
    ├── Day 2.ipynb
    ├── Day 3.ipynb
    ├── Day 4.ipynb
    ├── Day 5.ipynb
    ├── Day 6.ipynb
    ├── Day 7.ipynb
    ├── Day 8.ipynb
    └── Day 9.ipynb
├── README.md
├── SQL
    ├── SQL Day 1.html
    ├── SQL Day 10.html
    ├── SQL Day 2.html
    ├── SQL Day 3.html
    ├── SQL Day 4.html
    ├── SQL Day 5.html
    ├── SQL Day 6.html
    ├── SQL Day 7.html
    ├── SQL Day 8.html
    └── SQL Day 9.html
├── index.html
└── style.css


/HTML & CSS/Task 1.html:
--------------------------------------------------------------------------------
 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>Coming Soon</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |         body {
10 |             margin: 0;
11 |             font-family: Arial, sans-serif;
12 |             background-color: #333333;
13 |             color: white;
14 |             display: flex;
15 |             justify-content: center;
16 |             align-items: center;
17 |             height: 100vh;
18 |         }
19 | 
20 |         .coming-soon-container {
21 |             text-align: center;
22 |         }
23 | 
24 |         .coming-soon-container h1 {
25 |             font-size: 48px;
26 |             margin-bottom: 10px;
27 |         }
28 | 
29 |         .coming-soon-container p {
30 |             font-size: 18px;
31 |             margin-bottom: 20px;
32 |         }
33 | 
34 |         
35 |         .subscribe-form {
36 |             display: inline-block;
37 |         }
38 | 
39 |         .subscribe-form label {
40 |             margin-right: 10px;
41 |             font-size: 16px;
42 |         }
43 | 
44 |         .subscribe-form input[type="email"] {
45 |             padding: 8px;
46 |             font-size: 16px;
47 |             border: 1px solid #cccccc;
48 |             border-radius: 4px;
49 |             margin-right: 10px;
50 |         }
51 | 
52 |         .subscribe-form button {
53 |             padding: 8px 15px;
54 |             font-size: 16px;
55 |             color: white;
56 |             background-color: #007bff;
57 |             border: none;
58 |             border-radius: 4px;
59 |             cursor: pointer;
60 |         }
61 |     </style>
62 | </head>
63 | <body>
64 |     <div class="coming-soon-container">
65 |         <h1>Coming Soon</h1>
66 |         <p>We're launching soon, Stay tuned!</p>
67 |         <form class="subscribe-form">
68 |             <label for="email">Subscribe for updates</label>
69 |             <input type="email" id="email">
70 |             <button type="submit">Subscribe</button>
71 |         </form>
72 |     </div>
73 | </body>
74 | </html>
75 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 10.html:
--------------------------------------------------------------------------------
 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>Glowing Text</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         background-color: #333333;
11 |         height: 100vh;
12 |         justify-content: center;
13 |         display: flex;
14 |         align-items: center;
15 |       }
16 | 
17 |       #glow {
18 |         font-size: 3em;
19 |         font-weight: bold;
20 |         color: #ffffff;
21 |         text-shadow: 
22 |           0 0 10px #ffffff, 
23 |           0 0 20px #f00000, 
24 |           0 0 30px #f00000, 
25 |           0 0 40px #f00000, 
26 |           0 0 50px #f00000, 
27 |           0 0 60px #f00000, 
28 |           0 0 70px #f00000;
29 |       }
30 |     </style>
31 |   </head>
32 |   <body>
33 |     <h1 id="glow">HTML and CSS</h1>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 11.html:
--------------------------------------------------------------------------------
 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>Simple Navbar</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         font-family: Arial, sans-serif;
11 |       }
12 | 
13 |       .navbar {
14 |         background-color: #333333;
15 |         padding: 10px;
16 |         display: flex;
17 |         justify-content: space-between;
18 |         align-items: center;
19 |       }
20 | 
21 |       .logo {
22 |         color: #ffffff;
23 |         font-size: 24px;
24 |         font-weight: bold;
25 |       }
26 | 
27 |       .nav-links {
28 |         list-style: none;
29 |         margin: 0;
30 |         padding: 0;
31 |         display: flex;
32 |         gap: 20px;
33 |       }
34 | 
35 |       .nav-links li {
36 |         display: inline;
37 |       }
38 | 
39 |       .nav-links a {
40 |         color: #ffffff;
41 |         text-decoration: none;
42 |         font-size: 18px;
43 |       }
44 | 
45 |       .nav-links a:hover {
46 |         text-decoration: underline;
47 |       }
48 |     </style>
49 |   </head>
50 |   <body>
51 |     <nav class="navbar">
52 |       <div class="logo">MyWebsite</div>
53 |       <ul class="nav-links">
54 |         <li class="Home"><a href="#Home">Home</a></li>
55 |         <li class="About"><a href="#About">About</a></li>
56 |         <li class="Services"><a href="#Services">Services</a></li>
57 |         <li class="Contact"><a href="#Contact">Contact</a></li>
58 |       </ul>
59 |     </nav>
60 |   </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 12.html:
--------------------------------------------------------------------------------
 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>Error-404</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         padding: 0;
11 |         font-family: Arial, sans-serif;
12 |         background-color: #e74c3c;
13 |         color: white;
14 |         display: flex;
15 |         justify-content: center;
16 |         align-items: center;
17 |         height: 100vh;
18 |       }
19 | 
20 |       .error-container {
21 |         text-align: center;
22 |         width: 100%;
23 |         max-width: 600px;
24 |       }
25 | 
26 |       .error-header {
27 |         background-color: #c0392b;
28 |         padding: 20px;
29 |         font-size: 24px;
30 |         font-weight: bold;
31 |       }
32 | 
33 |       .error-message {
34 |         padding: 20px;
35 |         font-size: 18px;
36 |       }
37 | 
38 |       .back-home {
39 |         display: inline-block;
40 |         margin-top: 20px;
41 |         color: white;
42 |         text-decoration: none;
43 |         border-bottom: 1px solid white;
44 |       }
45 | 
46 |       .back-home:hover {
47 |         color: #f39c12;
48 |         border-color: #f39c12;
49 |       }
50 |     </style>
51 | </head>
52 | <body>
53 |     <div class="error-container">
54 |         <div class="error-header">404 - Page Not Found</div>
55 |         <div class="error-message">
56 |             We're sorry, but the page you requested could not be found.
57 |             <a href="#" class="back-home">Back to Home</a>
58 |         </div>
59 |     </div>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 13.html:
--------------------------------------------------------------------------------
 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>3D Card Flip</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         font-family: Arial, sans-serif;
11 |         display: flex;
12 |         justify-content: center;
13 |         align-items: center;
14 |         height: 100vh;
15 |         background-color: #f0f0f0;
16 |       }
17 | 
18 |       .card {
19 |         width: 200px;
20 |         height: 200px;
21 |         position: relative;
22 |         perspective: 600px;
23 |       }
24 | 
25 |       .card-front, .card-back {
26 |         width: 100%;
27 |         height: 100%;
28 |         position: absolute;
29 |         backface-visibility: hidden;
30 |         display: flex;
31 |         justify-content: center;
32 |         align-items: center;
33 |         font-size: 24px;
34 |         border: 1px solid #cccccc;
35 |         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
36 |         border-radius: 10px;
37 |         background-color: #0000FF;
38 |         color: white;
39 |         transition: transform 0.6s;
40 |       }
41 | 
42 |       .card-front {
43 |         transform: rotateY(0deg);
44 |       }
45 | 
46 |       .card-back {
47 |         transform: rotateY(180deg);
48 |       }
49 | 
50 |       .card:hover .card-front {
51 |         transform: rotateY(180deg);
52 |       }
53 | 
54 |       .card:hover .card-back {
55 |         transform: rotateY(360deg);
56 |       }
57 |     </style>
58 | </head>
59 | <body>
60 |     <div class="card">
61 |         <div class="card-front">Front Side</div>
62 |         <div class="card-back">Back Side</div>
63 |     </div>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 14.html:
--------------------------------------------------------------------------------
 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>Profile Card</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         font-family: Arial, sans-serif;
11 |         display: flex;
12 |         justify-content: center;
13 |         align-items: center;
14 |         height: 100vh;
15 |         background-color: #f4f4f4;
16 |       }
17 | 
18 |       .business-card {
19 |         background-color: white;
20 |         border-radius: 5px;
21 |         padding: 20px;
22 |         width: fit-content;
23 |         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
24 |         text-align: center;
25 |       }
26 | 
27 |       .business-card h1 {
28 |         margin: 0;
29 |         font-size: 24px;
30 |         color: #333333;
31 |       }
32 | 
33 |       .business-card p {
34 |         margin: 0;
35 |         margin-bottom: 10px;
36 |         color: #666666;
37 |       }
38 | 
39 |       .business-card a {
40 |         display: inline-block;
41 |         margin-right: 10px;
42 |         color: #3498db;
43 |         text-decoration: none;
44 |         font-size: 16px;
45 |       }
46 | 
47 |       .business-card a:hover {
48 |         text-decoration: underline;
49 |       }
50 |     </style>
51 | </head>
52 | <body>
53 |     <div class="business-card">
54 |         <h1>John Doe</h1>
55 |         <p id="job">Web Developer</p>
56 |         <p id="contact">Contact: johndoe@example.com</p>
57 |         <a id="linkedin" href="https://www.linkedin.com/in/johndoe">LinkedIn</a>
58 |         <a id="github" href="https://github.com/johndoe">GitHub</a>
59 |     </div>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 15.html:
--------------------------------------------------------------------------------
 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>Collapsible Panel</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 20px;
10 |         font-family: Arial, sans-serif;
11 |       }
12 | 
13 |       .toggle {
14 |         display: none;
15 |       }
16 | 
17 |       .collapsible-header {
18 |         display: block;
19 |         padding: 15px;
20 |         background-color: #007bff;
21 |         color: white;
22 |         cursor: pointer;
23 |         text-align: center;
24 |         border-radius: 5px;
25 |         width: 100%;
26 |       }
27 | 
28 |       .collapsible-content {
29 |         display: none;
30 |         padding: 15px;
31 |         background-color: white;
32 |         border-radius: 5px;
33 |         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
34 |         margin-top: 10px;
35 |       }
36 | 
37 |       .toggle:checked + .collapsible-header + .collapsible-content {
38 |         display: block;
39 |       }
40 |     </style>
41 | </head>
42 | <body>
43 |     <input type="checkbox" id="toggle" class="toggle">
44 |     <label for="toggle" class="collapsible-header">Click to Show/Hide Content</label>
45 |     <div class="collapsible-content">
46 |         <p>This content can be shown or hidden when you click the label above</p>
47 |     </div>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 16.html:
--------------------------------------------------------------------------------
 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>Project Timeline</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             font-family: Arial, sans-serif;
11 |             padding: 20px;
12 |             background-color: #f4f4f4;
13 |         }
14 | 
15 |         .timeline {
16 |             max-width: 600px;
17 |             margin: 0 auto;
18 |         }
19 | 
20 |         .timeline-item {
21 |             background-color: white;
22 |             border-left: 4px solid #3498db;
23 |             padding: 10px;
24 |             margin: 10px 0;
25 |             border-radius: 5px;
26 |             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
27 |         }
28 | 
29 |         .timeline-item h2 {
30 |             margin: 0 0 10px;
31 |             color: #3498db;
32 |             font-size: 18px;
33 |         }
34 | 
35 |         .timeline-item p {
36 |             margin: 5px;
37 |             color: #555555;
38 |             font-size: 14px;
39 |         }
40 |     </style>
41 | </head>
42 | <body>
43 |     <div class="timeline">
44 |         <div class="timeline-item" id="item1">
45 |             <h2 id="title1">Project Initiation</h2>
46 |             <p id="date1">January 1, 2024</p>
47 |             <p id="description1">Initial project planning and team formation.</p>
48 |         </div>
49 | 
50 |         <div class="timeline-item" id="item2">
51 |             <h2 id="title2">Requirements Gathering</h2>
52 |             <p id="date2">February 1, 2024</p>
53 |             <p id="description2">Collecting all the necessary project requirements.</p>
54 |         </div>
55 | 
56 |         <div class="timeline-item" id="item3">
57 |             <h2 id="title3">Design Phase</h2>
58 |             <p id="date3">March 1, 2024</p>
59 |             <p id="description3">Creating wireframes and design prototypes.</p>
60 |         </div>
61 | 
62 |         <div class="timeline-item" id="item4">
63 |             <h2 id="title4">Development</h2>
64 |             <p id="date4">April 1, 2024</p>
65 |             <p id="description4">Coding and implementation of the project.</p>
66 |         </div>
67 | 
68 |         <div class="timeline-item" id="item5">
69 |             <h2 id="title5">Testing & QA</h2>
70 |             <p id="date5">May 1, 2024</p>
71 |             <p id="description5">Conducting tests to ensure quality and performance.</p>
72 |         </div>
73 | 
74 |         <div class="timeline-item" id="item6">
75 |             <h2 id="title6">Project Launch</h2>
76 |             <p id="date6">June 1, 2024</p>
77 |             <p id="description6">Official launch of the project.</p>
78 |         </div>
79 |     </div>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 17.html:
--------------------------------------------------------------------------------
 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>Our Services</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             padding: 0;
11 |             font-family: Arial, sans-serif;
12 |             background-color: #f4f4f4;
13 |         }
14 | 
15 |         .services-section {
16 |             text-align: center;
17 |             padding: 50px;
18 |             background-color: #008080;
19 |             color: white;
20 |         }
21 | 
22 |         .services-section h2 {
23 |             margin-bottom: 30px;
24 |             font-size: 24px;
25 |         }
26 | 
27 |         .services-container {
28 |             display: flex;
29 |             justify-content: center;
30 |             gap: 20px;
31 |         }
32 | 
33 |         .service-box {
34 |             background-color: white;
35 |             color: black;
36 |             border: 1px solid #dddddd;
37 |             padding: 20px;
38 |             width: 250px;
39 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
40 |         }
41 | 
42 |         .service-box h3 {
43 |             margin-bottom: 10px;
44 |             font-size: 18px;
45 |         }
46 | 
47 |         .service-box p {
48 |             margin: 0;
49 |         }
50 |     </style>
51 | </head>
52 | <body>
53 |     <div class="services-section">
54 |         <h2>Our Services</h2>
55 |         <div class="services-container">
56 |             <div class="service-box" id="box1">
57 |                 <h3 id="service1">Service 1</h3>
58 |                 <p id="description1">Description of service 1.</p>
59 |             </div>
60 |             <div class="service-box" id="box2">
61 |                 <h3 id="service2">Service 2</h3>
62 |                 <p id="description2">Description of service 2.</p>
63 |             </div>
64 |         </div>
65 |     </div>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 18.html:
--------------------------------------------------------------------------------
 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>Contact Us</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             padding: 0;
11 |             font-family: Arial, sans-serif;
12 |             background-color: #f4f4f4;
13 |         }
14 | 
15 |         .contact-form {
16 |             max-width: 600px;
17 |             margin: 50px auto;
18 |             padding: 20px;
19 |             background-color: white;
20 |             border-radius: 5px;
21 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22 |         }
23 | 
24 |         .contact-form h2 {
25 |             margin-bottom: 20px;
26 |             text-align: center;
27 |             color: #008080;
28 |         }
29 | 
30 |         .contact-form label {
31 |             display: block;
32 |             margin-bottom: 10px;
33 |             font-size: 16px;
34 |             color: #555;
35 |         }
36 | 
37 |         .contact-form input,
38 |         .contact-form textarea {
39 |             width: 100%;
40 |             padding: 10px;
41 |             margin-bottom: 15px;
42 |             border: 1px solid #ddd;
43 |             border-radius: 5px;
44 |             font-size: 16px;
45 |         }
46 | 
47 |         .contact-form button {
48 |             padding: 10px 20px;
49 |             background-color: #008080;
50 |             color: white;
51 |             border: none;
52 |             border-radius: 5px;
53 |             cursor: pointer;
54 |             font-size: 16px;
55 |         }
56 | 
57 |         .contact-form button:hover {
58 |             background-color: #004d4d;
59 |         }
60 |     </style>
61 | </head>
62 | <body>
63 |     <div class="contact-form">
64 |         <h2>Contact Us</h2>
65 |         <form>
66 |             <label for="name">Name:</label>
67 |             <input type="text" id="name" name="name" required>
68 |             <label for="email">Email:</label>
69 |             <input type="email" id="email" name="email" required>
70 |             <label for="message">Message:</label>
71 |             <textarea id="message" name="message" required></textarea>
72 |             <button type="submit">Send</button>
73 |         </form>
74 |     </div>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 19.html:
--------------------------------------------------------------------------------
 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>Testimonials</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             padding: 0;
11 |             font-family: Arial, sans-serif;
12 |             background-color: #f0f8ff;
13 |         }
14 | 
15 |         .testimonials {
16 |             background-color: #ffffff;
17 |             padding: 2rem;
18 |             margin: 2rem auto;
19 |             max-width: 800px;
20 |             border-radius: 8px;
21 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22 |             border-top: 5px solid #007bff;
23 |         }
24 | 
25 |         .testimonials h2 {
26 |             text-align: center;
27 |             margin-bottom: 1.5rem;
28 |             color: #007bff;
29 |         }
30 | 
31 |         .testimonial-card {
32 |             background-color: #f9f9f9;
33 |             border: 1px solid #dddddd;
34 |             border-radius: 8px;
35 |             padding: 1rem;
36 |             margin-bottom: 1rem;
37 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
38 |         }
39 | 
40 |         .testimonial-text {
41 |             font-style: italic;
42 |             color: #555555;
43 |             margin-bottom: 0.5rem;
44 |         }
45 | 
46 |         .testimonial-author {
47 |             text-align: right;
48 |             font-weight: bold;
49 |             color: #007bff;
50 |         }
51 |     </style>
52 | </head>
53 | <body>
54 |     <section class="testimonials">
55 |         <h2>What Our Clients Say</h2>
56 |         <div class="testimonial-card" id="card1">
57 |             <p class="testimonial-text" id="experience1">"This service was amazing! I highly recommend it to everyone looking for quality and professionalism."</p>
58 |             <p class="testimonial-author" id="client1">- John Doe</p>
59 |         </div>
60 |         <div class="testimonial-card" id="card2">
61 |             <p class="testimonial-text" id="experience2">"I had a great experience. The team was very helpful and the results were excellent."</p>
62 |             <p class="testimonial-author" id="client2">- Jane Smith</p>
63 |         </div>
64 |         <div class="testimonial-card" id="card3">
65 |             <p class="testimonial-text" id="experience3">"Fantastic! The best decision I made for my project. I will definitely use this service again."</p>
66 |             <p class="testimonial-author" id="client3">- Emily Johnson</p>
67 |         </div>
68 |     </section>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 2.html:
--------------------------------------------------------------------------------
 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>Speech Bubble</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       .speech-bubble {
10 |         font-family: Arial, sans-serif;
11 |         position: relative;
12 |         background-color: #3498db;
13 |         border-radius: 50px;
14 |         padding: 20px;
15 |         color: white;
16 |         max-width: 300px;
17 |       }
18 | 
19 |       .speech-bubble::after {
20 |         content: "";
21 |         position: absolute;
22 |         bottom: -20px;
23 |         left: 50%;
24 |         transform: translateX(-50%);
25 |         width: 0;
26 |         height: 0;
27 |         border-left: 20px solid transparent;
28 |         border-right: 20px solid transparent;
29 |         border-top: 20px solid #3498db;
30 |       }
31 |     </style>
32 |   </head>
33 |   <body>
34 |     <div class="speech-bubble">
35 |       Hello! I am a speech bubble.
36 |     </div>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 20.html:
--------------------------------------------------------------------------------
 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>Pricing Table</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             font-family: Arial, sans-serif;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |         }
16 | 
17 |         .pricing-container {
18 |             display: flex;
19 |             gap: 20px;
20 |         }
21 | 
22 |         .plan {
23 |             background-color: white;
24 |             border-radius: 10px;
25 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
26 |             padding: 20px;
27 |             text-align: center;
28 |             width: 200px;
29 |         }
30 | 
31 |         .plan h2 {
32 |             margin-top: 0;
33 |         }
34 | 
35 |         .price {
36 |             font-size: 24px;
37 |             color: #333333;
38 |         }
39 | 
40 |         ul {
41 |             list-style-type: none;
42 |             padding: 0;
43 |         }
44 | 
45 |         li {
46 |             margin: 10px 0;
47 |         }
48 |     </style>
49 | </head>
50 | <body>
51 |     <div class="pricing-container">
52 |         <div class="plan" id="Basicplan">
53 |             <h2 id="plan1">Basic</h2>
54 |             <p class="price" id="Basicprice">$10/month</p>
55 |             <ul id="Basic">
56 |                 <li id="BasicFeature1">Feature 1</li>
57 |                 <li id="BasicFeature2">Feature 2</li>
58 |                 <li id="BasicFeature3">Feature 3</li>
59 |             </ul>
60 |         </div>
61 |         <div class="plan" id="proplan">
62 |             <h2 id="plan2">Pro</h2>
63 |             <p class="price" id="proprice">$20/month</p>
64 |             <ul id="pro">
65 |                 <li id="proFeature1">Feature 1</li>
66 |                 <li id="proFeature2">Feature 2</li>
67 |                 <li id="proFeature3">Feature 3</li>
68 |             </ul>
69 |         </div>
70 |         <div class="plan" id="Premiumplan">
71 |             <h2 id="plan3">Premium</h2>
72 |             <p class="price" id="Premiumprice">$30/month</p>
73 |             <ul id="Premium">
74 |                 <li id="PremiumFeature1">Feature 1</li>
75 |                 <li id="PremiumFeature2">Feature 2</li>
76 |                 <li id="PremiumFeature3">Feature 3</li>
77 |             </ul>
78 |         </div>
79 |     </div>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 21.html:
--------------------------------------------------------------------------------
 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>Feedback Form</title>
 7 |     <style>
 8 |         .feedback-form {
 9 |             max-width: 600px;
10 |             margin: auto;
11 |             padding: 20px;
12 |             border: 1px solid #cccccc;
13 |             border-radius: 10px;
14 |             background-color: #f9f9f9;
15 |         }
16 | 
17 |         .feedback-form h1 {
18 |             text-align: center;
19 |         }
20 | 
21 |         .feedback-form label {
22 |             display: block;
23 |             margin-top: 10px;
24 |         }
25 | 
26 |         .feedback-form input {
27 |             width: 90%;
28 |             padding: 10px;
29 |             margin-top: 5px;
30 |             border: 1px solid #cccccc;
31 |             border-radius: 5px;
32 |         }
33 | 
34 |         .feedback-form textarea {
35 |             width: 90%;
36 |             padding: 10px;
37 |             margin-top: 5px;
38 |             border: 1px solid #cccccc;
39 |             border-radius: 5px;
40 |         }
41 | 
42 |         .feedback-form button {
43 |             display: block;
44 |             width: 90%;
45 |             padding: 10px;
46 |             margin-top: 20px;
47 |             background-color: #4CAF50;
48 |             color: white;
49 |             border: none;
50 |             border-radius: 5px;
51 |             cursor: pointer;
52 |         }
53 | 
54 |         .feedback-form button:hover {
55 |             background-color: #45a049;
56 |         }
57 |     </style>
58 | </head>
59 | <body>
60 |     <form class="feedback-form">
61 |         <h1>Feedback Form</h1>
62 |         
63 |         <label for="name">Name</label>
64 |         <input type="text" id="name" name="name">
65 | 
66 |         <label for="email">Email</label>
67 |         <input type="email" id="email" name="email">
68 | 
69 |         <label for="feedback">Your Feedback</label>
70 |         <textarea id="feedback" name="feedback"></textarea>
71 | 
72 |         <button type="submit">Submit</button>
73 |     </form>
74 | </body>
75 | </html>
76 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 22.html:
--------------------------------------------------------------------------------
 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>Responsive Grid Layout</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             font-family: Arial, sans-serif;
11 |             padding: 0;
12 |             box-sizing: border-box;
13 |         }
14 | 
15 |         .grid-container {
16 |             display: grid;
17 |             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
18 |             gap: 10px;
19 |             padding: 20px;
20 |             background-color: #f4f4f4;
21 |         }
22 | 
23 |         .grid-item {
24 |             background-color: #3498db;
25 |             color: white;
26 |             padding: 20px;
27 |             text-align: center;
28 |             border-radius: 8px;
29 |             font-size: 1.2rem;
30 |         }
31 |     </style>
32 |   </head>
33 |   <body>
34 |     <div class="grid-container">
35 |       <div class="grid-item" id="item1">Item 1</div>
36 |       <div class="grid-item" id="item2">Item 2</div>
37 |       <div class="grid-item" id="item3">Item 3</div>
38 |       <div class="grid-item" id="item4">Item 4</div>
39 |       <div class="grid-item" id="item5">Item 5</div>
40 |       <div class="grid-item" id="item6">Item 6</div>
41 |     </div>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 23.html:
--------------------------------------------------------------------------------
 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>Skewed Sections</title>
 7 |     <style>
 8 |         * {
 9 |             margin: 0;
10 |             padding: 0;
11 |             font-family: Arial, sans-serif;
12 |         }
13 | 
14 |         .skewed-section-1 {
15 |             background: #3498db;
16 |             transform: skewY(-10deg);
17 |             position: relative;
18 |             height: 300px;
19 |             overflow: hidden;
20 |             color: white;
21 |             display: flex;
22 |             align-items: center;
23 |             justify-content: center;
24 |             text-align: center;
25 |         }
26 | 
27 |         .skewed-section-2 {
28 |             background: #e74c3c;
29 |             transform: skewY(10deg);
30 |             position: relative;
31 |             height: 300px;
32 |             overflow: hidden;
33 |             color: white;
34 |             display: flex;
35 |             align-items: center;
36 |             justify-content: center;
37 |             text-align: center;
38 |         }
39 | 
40 |         .skewed-section-3 {
41 |             background: #2ecc71;
42 |             transform: skewY(-10deg);
43 |             position: relative;
44 |             height: 300px;
45 |             overflow: hidden;
46 |             color: white;
47 |             display: flex;
48 |             align-items: center;
49 |             justify-content: center;
50 |             text-align: center;
51 |         }
52 | 
53 |         .content {
54 |             transform: skewY(10deg);
55 |             width: 100%;
56 |             display: flex;
57 |             flex-direction: column;
58 |             align-items: center;
59 |         }
60 | 
61 |         h1 {
62 |             margin-bottom: 10px;
63 |             font-size: 2rem;
64 |         }
65 | 
66 |         p {
67 |             font-size: 1.2rem;
68 |         }
69 |     </style>
70 |   </head>
71 |   <body>
72 |     <section class="skewed-section-1">
73 |       <div class="content" id="skew1">
74 |         <h1 id="skewTitle1">Welcome to My Website</h1>
75 |         <p id="skewDescription1">This is the first skewed section.</p>
76 |       </div>
77 |     </section>
78 |     <section class="skewed-section-2">
79 |       <div class="content" id="skew2">
80 |         <h1 id="skewTitle2">About Us</h1>
81 |         <p id="skewDescription2">This is the second skewed section.</p>
82 |       </div>
83 |     </section>
84 |     <section class="skewed-section-3">
85 |       <div class="content" id="skew3">
86 |         <h1 id="skewTitle3">Contact Us</h1>
87 |         <p id="skewDescription3">This is the third skewed section.</p>
88 |       </div>
89 |     </section>
90 |   </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 24.html:
--------------------------------------------------------------------------------
 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>Expanding Menu</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             font-family: Arial, sans-serif;
11 |             background-color: #f0f0f0;
12 |             padding: 20px;
13 |         }
14 | 
15 |         .menu {
16 |             position: relative;
17 |             width: 200px;
18 |         }
19 | 
20 |         .menu-items {
21 |             display: none;
22 |             list-style: none;
23 |             padding: 0;
24 |             margin: 0;
25 |             border-radius: 5px;
26 |             overflow: hidden;
27 |             background-color: #ffffff;
28 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
29 |         }
30 | 
31 |         .menu-items li {
32 |             border-bottom: 1px solid #0062cc;
33 |         }
34 | 
35 |         .menu-items li:last-child {
36 |             border-bottom: none;
37 |         }
38 | 
39 |         .menu-items a {
40 |             display: block;
41 |             padding: 10px 15px;
42 |             text-decoration: none;
43 |             color: #333;
44 |         }
45 | 
46 |         .menu-items a:hover {
47 |             background-color: #0056b3;
48 |             color: white;
49 |         }
50 | 
51 |         .menu-toggle {
52 |             display: none;
53 |         }
54 | 
55 |         .menu-label {
56 |             display: block;
57 |             background-color: #007bff;
58 |             color: white;
59 |             padding: 10px 15px;
60 |             text-align: center;
61 |             border-radius: 5px;
62 |             cursor: pointer;
63 |         }
64 | 
65 |         .menu-toggle:checked ~ .menu-items {
66 |             display: block;
67 |         }
68 |     </style>
69 | </head>
70 | <body>
71 |     <nav class="menu">
72 |         <input type="checkbox" id="menu-toggle" class="menu-toggle">
73 |         <label for="menu-toggle" class="menu-label">Menu</label>
74 |         <ul class="menu-items">
75 |             <li id="Home"><a href="#Home">Home</a></li>
76 |             <li id="About"><a href="#About">About</a></li>
77 |             <li id="Services"><a href="#Services">Services</a></li>
78 |             <li id="Contact"><a href="#Contact">Contact</a></li>
79 |         </ul>
80 |     </nav>
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 25.html:
--------------------------------------------------------------------------------
 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>Job Listing</title>
 7 |     <style>
 8 |         body {
 9 |           margin: 0;
10 |           font-family: Arial, sans-serif;
11 |           padding: 20px;
12 |           background-color: #f4f4f4;
13 |         }
14 | 
15 |         .job-listing {
16 |           max-width: 600px;
17 |           margin: 0 auto;
18 |           text-align: center;
19 |         }
20 | 
21 |         h1 {
22 |             background-color: #ff5722;
23 |             color: white;
24 |             padding: 20px;
25 |             margin-bottom: 20px;
26 |             border-radius: 4px 4px 0 0;
27 |         }
28 | 
29 |         .job {
30 |           background-color: white;
31 |           border: 1px solid #dddddd;
32 |           padding: 20px;
33 |           margin-bottom: 20px;
34 |           border-radius: 4px;
35 |         }
36 | 
37 |         .job h2 {
38 |           margin-top: 0;
39 |           font-size: 1.5em;
40 |           color: #333333;
41 |         }
42 | 
43 |         .job p {
44 |           margin: 10px 0;
45 |           color: #555555;
46 |         }
47 | 
48 |         button {
49 |             background-color: #ff5722;
50 |             color: white;
51 |             border: none;
52 |             padding: 10px 20px;
53 |             cursor: pointer;
54 |             font-size: 1rem;
55 |             border-radius: 4px;
56 |             margin-top: 10px;
57 |         }
58 | 
59 |         button:hover {
60 |             background-color: #e64a19;
61 |         }
62 |     </style>
63 | </head>
64 | <body>
65 |     <div class="job-listing">
66 |         <h1>Job Openings</h1>
67 |         <div class="job" id="job1">
68 |             <h2 id="title1">Job Title 1</h2>
69 |             <p id="location1"><strong id="loc1">Location:</strong> City, State</p>
70 |             <p id="description1">Description of job 1.</p>
71 |             <button id="apply1">Apply Now</button>
72 |         </div>
73 |         <div class="job" id="job2">
74 |             <h2 id="title2">Job Title 2</h2>
75 |             <p id="location2"><strong id="loc2">Location:</strong> City, State</p>
76 |             <p id="description2">Description of job 2.</p>
77 |             <button id="apply2">Apply Now</button>
78 |         </div>
79 |     </div>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 26.html:
--------------------------------------------------------------------------------
 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>Dashboard Cards</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             height: 100vh;
11 |             margin: 0;
12 |             display: flex;
13 |             justify-content: center;
14 |             align-items: center;
15 |             background-color: #f4f4f4;
16 |         }
17 | 
18 |         .card-container {
19 |             display: flex;
20 |             gap: 20px;
21 |             max-width: 1000px;
22 |             width: 100%;
23 |         }
24 | 
25 |         .card {
26 |             background-color: white;
27 |             border-radius: 8px;
28 |             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
29 |             overflow: hidden;
30 |             flex: 1;
31 |             transition: box-shadow 0.3s ease;
32 |         }
33 | 
34 |         .card:hover {
35 |             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
36 |         }
37 | 
38 |         .card-title {
39 |             background-color: #007bff;
40 |             color: white;
41 |             padding: 15px;
42 |             font-size: 18px;
43 |             font-weight: bold;
44 |         }
45 | 
46 |         .card-content {
47 |             padding: 15px;
48 |             font-size: 14px;
49 |             color: #333;
50 |         }
51 | 
52 |         .read-more {
53 |             display: block;
54 |             text-align: right;
55 |             padding: 10px 15px;
56 |             color: #007bff;
57 |             text-decoration: none;
58 |             font-size: 14px;
59 |             transition: color 0.3s ease;
60 |         }
61 | 
62 |         .read-more:hover {
63 |             color: #0056b3;
64 |         }
65 |     </style>
66 | </head>
67 | <body>
68 |     <div class="card-container">
69 |         <div class="card" id="card1">
70 |             <div class="card-title" id="cardTitle1">Card Title 1</div>
71 |             <div class="card-content" id="cardContent1">Content for the first card. This could be any information you want to display.</div>
72 |             <a href="#card1" class="read-more" id="cardReadmore1">Read More</a>
73 |         </div>
74 |         
75 |         <div class="card" id="card2">
76 |             <div class="card-title" id="cardTitle2">Card Title 2</div>
77 |             <div class="card-content" id="cardContent2">Content for the second card. More details can be added here.</div>
78 |             <a href="#card2" class="read-more" id="cardReadmore2">Read More</a>
79 |         </div>
80 |         
81 |         <div class="card" id="card3">
82 |             <div class="card-title" id="cardTitle3">Card Title 3</div>
83 |             <div class="card-content" id="cardContent3">Content for the third card. More details can be added here.</div>
84 |             <a href="#card3" class="read-more" id="cardReadmore3">Read More</a>
85 |         </div>
86 |     </div>
87 | </body>
88 | </html>
89 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 27.html:
--------------------------------------------------------------------------------
  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>Vertical Tabs</title>
  7 |   <style>
  8 |     body {
  9 |       margin: 0;
 10 |       font-family: Arial, sans-serif;
 11 |       padding: 0;
 12 |       background-color: #f4f4f4;
 13 |     }
 14 | 
 15 |     .tab-container {
 16 |       display: flex;
 17 |       flex-direction: row;
 18 |       height: 100vh;
 19 |       background-color: #ffffff;
 20 |       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 21 |     }
 22 | 
 23 |     .tab-container input[type="radio"] {
 24 |       display: none;
 25 |     }
 26 | 
 27 |     .tab-btn {
 28 |       padding: 15px;
 29 |       cursor: pointer;
 30 |       background-color: #f1f1f1;
 31 |       border: 1px solid #dddddd;
 32 |       text-align: left;
 33 |       transition: background-color 0.3s, color 0.3s;
 34 |       flex: 1;
 35 |     }
 36 | 
 37 |     .tab-btn:hover {
 38 |       background-color: #dddddd;
 39 |     }
 40 | 
 41 |     .tab-content {
 42 |       display: none;
 43 |       flex: 3;
 44 |       padding: 20px;
 45 |       background-color: #ffffff;
 46 |     }
 47 | 
 48 |     #tab1:checked ~ .tab-content#content1 {
 49 |       display: block;
 50 |     }
 51 | 
 52 |     #tab2:checked ~ .tab-content#content2 {
 53 |       display: block;
 54 |     }
 55 | 
 56 |     #tab3:checked ~ .tab-content#content3 {
 57 |       display: block;
 58 |     }
 59 | 
 60 |     #tab4:checked ~ .tab-content#content4 {
 61 |       display: block;
 62 |     }
 63 | 
 64 |     .tab-content h2 {
 65 |       margin-top: 0;
 66 |     }
 67 |   </style>
 68 | </head>
 69 | <body>
 70 |   <div class="tab-container">
 71 |     <!-- Tabs -->
 72 |     <input type="radio" id="tab1" name="tab" checked>
 73 |     <label for="tab1" class="tab-btn">Home</label>
 74 |     <input type="radio" id="tab2" name="tab">
 75 |     <label for="tab2" class="tab-btn">Services</label>
 76 |     <input type="radio" id="tab3" name="tab">
 77 |     <label for="tab3" class="tab-btn">Contact</label>
 78 |     <input type="radio" id="tab4" name="tab">
 79 |     <label for="tab4" class="tab-btn">About</label>
 80 | 
 81 |     <!-- Tab Contents -->
 82 |     <div class="tab-content" id="content1">
 83 |       <h2>Home</h2>
 84 |       <p>Welcome to our website!</p>
 85 |     </div>
 86 | 
 87 |     <div class="tab-content" id="content2">
 88 |       <h2>Services</h2>
 89 |       <p>We offer a variety of services.</p>
 90 |     </div>
 91 | 
 92 |     <div class="tab-content" id="content3">
 93 |       <h2>Contact</h2>
 94 |       <p>Get in touch with us.</p>
 95 |     </div>
 96 | 
 97 |     <div class="tab-content" id="content4">
 98 |       <h2>About</h2>
 99 |       <p>Learn more about our company.</p>
100 |     </div>
101 |   </div>
102 | </body>
103 | </html>
104 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 28.html:
--------------------------------------------------------------------------------
 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>Event Invitation</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;
10 |         font-family: Arial, sans-serif;
11 |         display: flex;
12 |         justify-content: center;
13 |         align-items: center;
14 |         height: 100vh;
15 |         background-color: #f0f0f0;
16 |       }
17 | 
18 |       .invitation-container {
19 |         background-color: white;
20 |         padding: 20px;
21 |         border-radius: 10px;
22 |         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23 |         text-align: center;
24 |         width: 300px;
25 |       }
26 | 
27 |       h1 {
28 |         color: white;
29 |         background-color: #7D3C98;
30 |         padding: 10px;
31 |         border-radius: 10px 10px 0 0;
32 |       }
33 | 
34 |       .event-details h2 {
35 |         color: #7D3C98;
36 |       }
37 | 
38 |       .rsvp-form label {
39 |         color: #7D3C98;
40 |         display: block;
41 |         margin-top: 10px;
42 |       }
43 | 
44 |       .rsvp-form input[type="text"], 
45 |       .rsvp-form input[type="email"] {
46 |         width: 90%;
47 |         padding: 10px;
48 |         margin: 5px 0;
49 |         border: 1px solid #cccccc;
50 |         border-radius: 5px;
51 |       }
52 | 
53 |       .rsvp-form button {
54 |         background-color: #7D3C98;
55 |         color: white;
56 |         padding: 10px;
57 |         border: none;
58 |         border-radius: 5px;
59 |         cursor: pointer;
60 |         width: 100%;
61 |         margin-top: 10px;
62 |       }
63 | 
64 |       .rsvp-form button:hover {
65 |         background-color: #5e2a7b;
66 |       }
67 |     </style>
68 |   </head>
69 |   <body>
70 |     <div class="invitation-container">
71 |       <h1>You're Invited!</h1>
72 |       <div class="event-details">
73 |         <h2>Event Details</h2>
74 |         <p id="date">Date: December 31, 2024</p>
75 |         <p id="time">Time: 7:00 PM</p>
76 |         <p id="loc">Location: 123 Event Street, City</p>
77 |       </div>
78 |       <form class="rsvp-form">
79 |         <label for="name">Name:</label>
80 |         <input type="text" name="name" id="name">
81 |         <br>
82 |         <label for="email">Email:</label>
83 |         <input type="email" name="email" id="email">
84 |         <br>
85 |         <button type="submit">Submit</button>
86 |       </form>
87 |     </div>
88 |   </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 29.html:
--------------------------------------------------------------------------------
 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>Fitness Tracker</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             padding: 0;
11 |             font-family: Arial, sans-serif;
12 |             line-height: 1.6;
13 |             background-color: #f0f0f0;
14 |         }
15 | 
16 |         header {
17 |             background-color: #333333;
18 |             color: #ffffff;
19 |             padding: 1rem;
20 |             text-align: center;
21 |         }
22 | 
23 |         nav ul {
24 |             list-style: none;
25 |             padding: 0;
26 |         }
27 | 
28 |         nav ul li {
29 |             display: inline;
30 |             margin-right: 10px;
31 |         }
32 | 
33 |         nav ul li a {
34 |             color: #ffffff;
35 |             text-decoration: none;
36 |             padding: 5px;
37 |         }
38 | 
39 |         main {
40 |             display: flex;
41 |             flex-wrap: wrap;
42 |             justify-content: space-between;
43 |             padding: 2rem;
44 |         }
45 | 
46 |         .workout {
47 |             background-color: #ffffff;
48 |             padding: 1rem;
49 |             margin-bottom: 2rem;
50 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
51 |             width: 300px;
52 |             text-align: center;
53 |         }
54 | 
55 |         .workout p {
56 |             margin-bottom: 0.5rem;
57 |         }
58 | 
59 |         footer {
60 |             background-color: #333333;
61 |             color: #ffffff;
62 |             text-align: center;
63 |             padding: 1rem;
64 |             position: fixed;
65 |             bottom: 0;
66 |             width: 100%;
67 |         }
68 |     </style>
69 | </head>
70 | <body>
71 |     <header>
72 |         <h1>Fitness Tracker</h1>
73 |         <nav>
74 |             <ul>
75 |                 <li id="Home"><a href="#Home">Home</a></li>
76 |                 <li id="Workouts"><a href="#Workouts">Workouts</a></li>
77 |                 <li id="Nutrition"><a href="#Nutrition">Nutrition</a></li>
78 |                 <li id="Contact"><a href="#Contact">Contact</a></li>
79 |             </ul>
80 |         </nav>
81 |     </header>
82 |     <main>
83 |         <section class="workout" id="workout1">
84 |             <h2 id="workoutHeading1">Workout 1</h2>
85 |             <p id="workoutDescription1">Description of workout 1.</p>
86 |         </section>
87 |         <section class="workout" id="workout2">
88 |             <h2 id="workoutHeading2">Workout 2</h2>
89 |             <p id="workoutDescription2">Description of workout 2.</p>
90 |         </section>
91 |     </main>
92 |     <footer>
93 |         <p>&copy; 2024 Fitness Tracker. All rights reserved.</p>
94 |     </footer>
95 | </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 3.html:
--------------------------------------------------------------------------------
 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>Cookie Consent Popup</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       body {
10 |           margin: 20px;
11 |           font-family: Arial, sans-serif;
12 |       }
13 | 
14 |       #cookie-bar {
15 |           position: fixed;
16 |           bottom: 0;
17 |           left: 0;
18 |           right: 0;
19 |           background-color: #333333;
20 |           color: white;
21 |           padding: 10px;
22 |           text-align: center;
23 |           display: flex;
24 |           justify-content: center;
25 |           align-items: center;
26 |       }
27 | 
28 |       #cookie-text {
29 |           margin-right: 10px;
30 |       }
31 | 
32 |       #got-it-btn {
33 |           background-color: #4CAF50;
34 |           color: white;
35 |           border: none;
36 |           padding: 5px 15px;
37 |           cursor: pointer;
38 |           font-size: 14px;
39 |       }
40 |     </style>
41 | </head>
42 | <body>
43 |     <div id="cookie-bar">
44 |         <span id="cookie-text">This website uses cookies to ensure you get the best experience on our website.</span>
45 |         <button id="got-it-btn">Got it!</button>
46 |     </div>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 30.html:
--------------------------------------------------------------------------------
  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>My Portfolio</title>
  7 |     <style>
  8 |         body {
  9 |             margin: 0;
 10 |             padding: 0;
 11 |             font-family: Arial, sans-serif;
 12 |             line-height: 1.6;
 13 |         }
 14 | 
 15 |         header {
 16 |             background-color: #333333;
 17 |             color: #ffffff;
 18 |             padding: 1rem;
 19 |             display: flex;
 20 |             justify-content: space-between;
 21 |             align-items: center;
 22 |         }
 23 | 
 24 |         header h1 {
 25 |             margin: 0;
 26 |         }
 27 | 
 28 |         nav ul {
 29 |             margin: 0;
 30 |             padding: 0;
 31 |             list-style: none;
 32 |         }
 33 | 
 34 |         nav ul li {
 35 |             display: inline-block;
 36 |             margin-right: 1rem;
 37 |         }
 38 | 
 39 |         nav ul li a {
 40 |             color: #ffffff;
 41 |             text-decoration: none;
 42 |         }
 43 | 
 44 |         section {
 45 |             padding: 2rem;
 46 |             background-color: #f4f4f4;
 47 |         }
 48 | 
 49 |         form {
 50 |             max-width: 400px;
 51 |             margin: 0 auto;
 52 |         }
 53 | 
 54 |         label {
 55 |             display: block;
 56 |             width: 100%;
 57 |             margin-bottom: 1rem;
 58 |         }
 59 | 
 60 |         input {
 61 |             display: block;
 62 |             width: 100%;
 63 |             margin-bottom: 1rem;
 64 |             padding: 10px;
 65 |             border: 1px solid #cccccc;
 66 |             border-radius: 5px;
 67 |         }
 68 | 
 69 |         textarea {
 70 |             display: block;
 71 |             width: 100%;
 72 |             margin-bottom: 1rem;
 73 |             padding: 10px;
 74 |             border: 1px solid #cccccc;
 75 |             border-radius: 5px;
 76 |         }
 77 | 
 78 |         button {
 79 |             display: block;
 80 |             width: 100%;
 81 |             margin-bottom: 1rem;
 82 |             background-color: #333333;
 83 |             color: #ffffff;
 84 |             padding: 0.5rem 1rem;
 85 |             border: none;
 86 |             cursor: pointer;
 87 |             border-radius: 5px;
 88 |         }
 89 |     </style>
 90 | </head>
 91 | <body>
 92 |   <header>
 93 |     <h1>My Portfolio</h1>
 94 |     <nav>
 95 |         <ul>
 96 |             <li id="aboutli"><a href="#about">About</a></li>
 97 |             <li id="projectsli"><a href="#projects">Projects</a></li>
 98 |             <li id="contactli"><a href="#contact">Contact</a></li>
 99 |         </ul>
100 |     </nav>
101 |   </header>
102 |   
103 |   <section id="aboutme">
104 |       <h2 id="about">About Me</h2>
105 |       <p id="aboutDescription">Information about me goes here.</p>
106 |   </section>
107 |   
108 |   <section id="projectsection">
109 |       <h2 id="projects">My Projects</h2>
110 |       <div class="project" id="project1">
111 |           <h3 id="projectHeading1">Project 1</h3>
112 |           <p id="projectDescription1">Description of project 1.</p>
113 |       </div>
114 |       <div class="project" id="project2">
115 |           <h3 id="projectHeading2">Project 2</h3>
116 |           <p id="projectDescription2">Description of project 2.</p>
117 |       </div>
118 |   </section>
119 |   
120 |   <section id="contactus">
121 |       <h2 id="contact">Contact Me</h2>
122 |       <form>
123 |           <label for="name">Name:</label>
124 |           <input type="text" name="name" id="name">
125 |           <label for="email">Email:</label>
126 |           <input type="email" name="email" id="email">
127 |           <label for="message">Message:</label>
128 |           <textarea id="message" name="message" rows="5"></textarea>
129 |           <button type="submit">Send</button>
130 |       </form>
131 |   </section>
132 | </body>
133 | </html>
134 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 4.html:
--------------------------------------------------------------------------------
 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>Overlap Block Layout</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       body {
10 |           margin: 0;
11 |           font-family: Arial, sans-serif;
12 |           display: flex;
13 |           justify-content: center;
14 |           align-items: center;
15 |           height: 100vh;
16 |       }
17 | 
18 |       .container {
19 |           position: relative;
20 |           width: 300px;
21 |           height: 200px;
22 |       }
23 | 
24 |       .block {
25 |           position: absolute;
26 |           width: 150px;
27 |           height: 150px;
28 |           display: flex;
29 |           justify-content: center;
30 |           align-items: center;
31 |           color: white;
32 |           font-size: 18px;
33 |           font-weight: bold;
34 |       }
35 | 
36 |       #block1 {
37 |           background-color: #3498db;
38 |           top: 0;
39 |           left: 0;
40 |       }
41 | 
42 |       #block2 {
43 |           background-color: #e74c3c;
44 |           top: 50px;
45 |           left: 50px;
46 |       }
47 |     </style>
48 | </head>
49 | <body>
50 |     <div class="container">
51 |         <div class="block" id="block1">Block 1</div>
52 |         <div class="block" id="block2">Block 2</div>
53 |     </div>
54 | </body>
55 | </html>
56 | 
57 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 5.html:
--------------------------------------------------------------------------------
 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>Drag and Drop Files</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       body {
10 |           margin: 0;
11 |           font-family: Arial, sans-serif;
12 |           display: flex;
13 |           justify-content: center;
14 |           align-items: center;
15 |           height: 100vh;
16 |           background: linear-gradient(to right, #f3e5f5, #e3f2fd, #e0f2f1);
17 |       }
18 | 
19 |       .upload-container {
20 |           background-color: white;
21 |           padding: 20px;
22 |           border-radius: 10px;
23 |           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24 |           text-align: center;
25 |       }
26 | 
27 |       .upload-area {
28 |           border: 2px dashed #cccccc;
29 |           border-radius: 5px;
30 |           padding: 20px;
31 |           cursor: pointer;
32 |       }
33 | 
34 |       .choose-files-btn {
35 |           background-color: #f0f0f0;
36 |           border: none;
37 |           padding: 10px 20px;
38 |           border-radius: 5px;
39 |           color: #666666;
40 |           font-size: 14px;
41 |           cursor: pointer;
42 |       }
43 | 
44 |       .upload-text {
45 |           color: #999999;
46 |           margin-left: 10px;
47 |           font-size: 14px;
48 |       }
49 |     </style>
50 | </head>
51 | <body>
52 |     <div class="upload-container">
53 |         <div class="upload-area">
54 |             <button class="choose-files-btn">CHOOSE FILES</button>
55 |             <span class="upload-text">or drop files here</span>
56 |         </div>
57 |     </div>
58 | </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 6.html:
--------------------------------------------------------------------------------
 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>YouTube Video Embed</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       body {
10 |           margin: 0;
11 |           font-family: Arial, sans-serif;
12 |           background-color: #f9f9f9;
13 |           display: flex;
14 |           justify-content: center;
15 |           align-items: center;
16 |           height: 100vh;
17 |       }
18 | 
19 |       #video-container {
20 |           width: 80%;
21 |           max-width: 720px;
22 |           aspect-ratio: 16/9;
23 |           background-color: #000000;
24 |           border-radius: 8px;
25 |           overflow: hidden;
26 |           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
27 |       }
28 | 
29 |       #video-container iframe {
30 |           width: 100%;
31 |           height: 100%;
32 |           border: none;
33 |       }
34 |     </style>
35 | </head>
36 | <body>
37 |     <div id="video">
38 |         <h1>Embed the YouTube video</h1>
39 |         <div id="video-container">
40 |             <iframe src="https://www.youtube.com/embed/R0OD5F-WO9A?si=kTRQpPNbK7nK3YQm" allowfullscreen></iframe>
41 |         </div>
42 |     </div>
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 7.html:
--------------------------------------------------------------------------------
 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>Book Review Page</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 |     <style>
 9 |       body {
10 |           margin: 0;
11 |           font-family: Arial, sans-serif;
12 |           display: flex;
13 |           justify-content: center;
14 |           align-items: center;
15 |           height: 100vh;
16 |           background-color: #f0f0f0;
17 |       }
18 | 
19 |       .review-card {
20 |           width: 300px;
21 |           padding: 20px;
22 |           background-color: #ffffff;
23 |           border-radius: 10px;
24 |           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25 |           text-align: center;
26 |       }
27 | 
28 |       .review-heading {
29 |           font-size: 24px;
30 |           margin-bottom: 20px;
31 |           color: #343a40;
32 |       }
33 | 
34 |       .review-content {
35 |           background-color: #fff9e6;
36 |           padding: 15px;
37 |           border-left: 5px solid #ffa500;
38 |           border-radius: 5px;
39 |           text-align: left;
40 |       }
41 | 
42 |       .book-title {
43 |           font-size: 20px;
44 |           color: #007bff;
45 |           margin-bottom: 10px;
46 |       }
47 | 
48 |       .author, .review {
49 |           margin: 5px 0;
50 |       }
51 | 
52 |       .author strong {
53 |           color: #007bff;
54 |       }
55 | 
56 |       .review strong {
57 |           color: #6f42c1;
58 |       }
59 | 
60 |       p {
61 |           margin: 0;
62 |           font-size: 14px;
63 |           color: #333333;
64 |       }
65 |     </style>
66 | </head>
67 | <body>
68 |     <div class="review-card">
69 |         <h2 class="review-heading">Book Review</h2>
70 |         <div class="review-content">
71 |             <h3 class="book-title">Book Title</h3>
72 |             <p class="author">
73 |                 <strong id="authorheading">Author:</strong> Author Name
74 |             </p>
75 |             <p class="review">
76 |                 <strong id="reviewheading">Review:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna nec eros convallis facilisis.
77 |             </p>
78 |         </div>
79 |     </div>
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 8.html:
--------------------------------------------------------------------------------
 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>CSS Grid Layout</title>
 7 |     <style>
 8 |       body {
 9 |         font-family: Arial, sans-serif;
10 |         display: flex;
11 |         justify-content: center;
12 |         align-items: center;
13 |         height: 100vh;
14 |         background-color: white;
15 |         margin: 0;
16 |       }
17 | 
18 |       .grid-container {
19 |         display: grid;
20 |         grid-template-columns: repeat(3, 1fr);
21 |         gap: 10px;
22 |         max-width: 600px;
23 |         width: 100%;
24 |       }
25 | 
26 |       .box {
27 |         padding: 20px;
28 |         border: 1px solid #dddddd;
29 |         font-size: 16px;
30 |         text-align: center;
31 |         background-color: #f9f9f9;
32 |       }
33 |     </style>
34 |   </head>
35 |   <body>
36 |     <div class="grid-container">
37 |       <div class="box" id="book1">Box 1</div>
38 |       <div class="box" id="book2">Box 2</div>
39 |       <div class="box" id="book3">Box 3</div>
40 |       <div class="box" id="book4">Box 4</div>
41 |       <div class="box" id="book5">Box 5</div>
42 |       <div class="box" id="book6">Box 6</div>
43 |     </div>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/HTML & CSS/Task 9.html:
--------------------------------------------------------------------------------
 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>Newsletter Subscription</title>
 7 |     <style>
 8 |         body {
 9 |             margin: 0;
10 |             font-family: Arial, sans-serif;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |             background-color: #f4f4f4;
16 |         }
17 | 
18 |         .newsletter {
19 |             background-color: white;
20 |             padding: 20px;
21 |             border-radius: 8px;
22 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23 |             width: 300px;
24 |             text-align: center;
25 |         }
26 | 
27 |         .newsletter h2 {
28 |             font-size: 1.8em;
29 |             margin-bottom: 20px;
30 |             color: #333333;
31 |         }
32 | 
33 |         .newsletter form {
34 |             display: flex;
35 |             flex-direction: column;
36 |             align-items: stretch;
37 |         }
38 | 
39 |         .newsletter label {
40 |             font-size: 1em;
41 |             text-align: left;
42 |             margin-bottom: 5px;
43 |             color: #333333;
44 |         }
45 | 
46 |         .newsletter input[type="email"] {
47 |             padding: 10px;
48 |             font-size: 1em;
49 |             border: 1px solid #dddddd;
50 |             border-radius: 4px;
51 |             margin-bottom: 20px;
52 |             width: 91%;
53 |         }
54 | 
55 |         .newsletter button {
56 |             padding: 10px;
57 |             font-size: 1em;
58 |             background-color: #007bff;
59 |             color: white;
60 |             border: none;
61 |             border-radius: 4px;
62 |             cursor: pointer;
63 |             width: 100%;
64 |         }
65 |     </style>
66 |   </head>
67 |   <body>
68 |     <div class="newsletter">
69 |       <h2>Subscribe to Our Newsletter</h2>
70 |       <form>
71 |         <label for="email">Email:</label>
72 |         <input type="email" id="email" name="email">
73 |         <button type="submit">Submit</button>
74 |       </form>
75 |     </div>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/Internship Project/Internship Project Documentation.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Internship Project Documentation.pdf


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/1.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/2.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/3.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/4.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/5.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/6.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/7.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/8.png


--------------------------------------------------------------------------------
/Internship Project/Project Screenshots/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/Project Screenshots/9.png


--------------------------------------------------------------------------------
/Internship Project/__pycache__/database.cpython-312.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/__pycache__/database.cpython-312.pyc


--------------------------------------------------------------------------------
/Internship Project/__pycache__/database.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/__pycache__/database.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/database.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | 
 3 | def init_db():
 4 |     conn = sqlite3.connect('db/hireme.db')
 5 |     cursor = conn.cursor()
 6 | 
 7 |     # Makse sure to paste your sql create query of students inside the literals('''''')
 8 |     cursor.execute('''CREATE TABLE IF NOT EXISTS students (
 9 |     usn TEXT PRIMARY KEY NOT NULL,
10 |     student_name TEXT NOT NULL,
11 |     contact_number TEXT NOT NULL,
12 |     college_name TEXT NOT NULL,
13 |     branch TEXT NOT NULL,
14 |     skills TEXT,
15 |     email_id TEXT NOT NULL,
16 |     password TEXT NOT NULL);
17 |     ''')
18 |     # Makse sure to paste your sql create query of recruiters inside the literals('''''')
19 |     cursor.execute('''CREATE TABLE IF NOT EXISTS recruiters(
20 | id INTEGER PRIMARY KEY AUTOINCREMENT,
21 | username TEXT NOT NULL,
22 | password TEXT NOT NULL,
23 | first_name TEXT NOT NULL,
24 | last_name TEXT NOT NULL,
25 | company TEXT NOT NULL,
26 | phone_number TEXT NOT NULL,
27 | email_id TEXT NOT NULL);
28 |     ''')
29 | 
30 |     # Makse sure to paste your sql create query of jobs inside the literals('''''')
31 | 
32 |     cursor.execute('''CREATE TABLE IF NOT EXISTS jobs(
33 |  id  INTEGER PRIMARY KEY AUTOINCREMENT,
34 |  job_role TEXT NOT NULL,
35 |  company TEXT NOT NULL,
36 |  package TEXT NOT NULL,
37 |  job_description TEXT NOT NULL);
38 |  ''')
39 | 
40 |     # Makse sure to paste your sql create query of student_applications inside the literals('''''')
41 | 
42 |     cursor.execute('''CREATE TABLE IF NOT EXISTS student_applications(
43 |   id INTEGER PRIMARY KEY AUTOINCREMENT,
44 |   usn TEXT NOT NULL,
45 |   job_id INTEGER NOT NULL,
46 |   status TEXT DEFAULT 'applied',
47 |   FOREIGN KEY (usn) REFERENCES students(usn),
48 |   FOREIGN KEY (job_id) REFERENCES jobs(id),
49 |   UNIQUE(usn,job_id));
50 | ''')
51 | 
52 |     conn.commit()
53 |     conn.close()
54 | 


--------------------------------------------------------------------------------
/Internship Project/db/hireme.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/db/hireme.db


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/Student_home.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | def get_jobs_by_application_status(usn):
 3 |     conn1 = sqlite3.connect('db/hireme.db')
 4 |     cursor1 = conn1.cursor()
 5 |     cursor1.execute(''' SELECT jobs.*, CASE WHEN student_applications.job_id IS NOT NULL THEN 'applied' ELSE 'not applied' END AS status FROM jobs LEFT JOIN student_applications ON jobs.id = student_applications.job_id AND student_applications.usn = ?''', (usn,))
 6 |     jobs = cursor1.fetchall()
 7 |     conn1.close()
 8 |     categorized_jobs = {  
 9 |         "not_applied": [dict(id=job[0], job_role=job[1], company=job[2], package=job[3], job_description=job[4]) for job in jobs if job[-1] == 'not applied'],  
10 |         "applied": [dict(id=job[0], job_role=job[1], company=job[2], package=job[3], job_description=job[4]) for job in jobs if job[-1] == 'applied']}  
11 |     return categorized_jobs 
12 | def apply_job(usn, job_id):
13 |     conn2 = sqlite3.connect('db/hireme.db')
14 |     cursor2 = conn2.cursor()
15 |     cursor2.execute('''INSERT INTO student_applications (usn, job_id)VALUES (?, ?)''', (usn, job_id))
16 |     conn2.commit()
17 |     conn2.close()
18 | def fetch_job_details(job_id):
19 |     conn3 = sqlite3.connect('db/hireme.db')
20 |     cursor3 = conn3.cursor()
21 |     cursor3.execute('SELECT * FROM jobs WHERE id =?', (job_id,))
22 |     job = cursor3.fetchone()
23 |     conn3.close()
24 |     if job:
25 |         return  {
26 |         "job_role": job[1], 
27 |         "company": job[2],
28 |         "package": job[3],
29 |         "job_description": job[4]} 
30 |     else:
31 |         return None 
32 |         


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/Student_reset_pass.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | from flask import jsonify, session
 3 | def update_student_password(usn, email, new_password):
 4 |     conn = sqlite3.connect('db/hireme.db')
 5 |     cursor = conn.cursor()
 6 |     cursor.execute('SELECT * FROM students WHERE usn = ? AND email_id = ?', (usn, email))
 7 |     student = cursor.fetchone()
 8 |     if student:
 9 |         cursor.execute('UPDATE students SET password = ? WHERE usn = ?', (new_password, usn))
10 |         conn.commit()
11 |         conn.close()
12 |         return jsonify({'success': True, 'message': 'Password updated successfully'}), 200
13 |     else:
14 |         conn.close()
15 |         return jsonify({'success': False, 'message': 'Invalid USN or Email ID'}), 404
16 | 


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/Students_register.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | from flask import jsonify
 3 | def register_student(usn, name, email, password, confirmPassword, skills, branch, college_name, phone_number):
 4 |     print(name)
 5 |     conn = sqlite3.connect('db/hireme.db')
 6 |     cursor = conn.cursor()     
 7 |     cursor.execute('SELECT * FROM students WHERE usn = ?',(usn,))
 8 |     student = cursor.fetchone()
 9 |     if student:
10 |         conn.close()
11 |         return jsonify({'redirected': False, 'message': 'User already exists'})
12 |     else:
13 |         if password == confirmPassword:
14 |             cursor.execute('''INSERT INTO students (usn, student_name, contact_number, college_name, branch, skills, email_id, password) VALUES (?, ?, ?, ?, ?, ?, ?, ?) ''',(usn, name, phone_number, college_name, branch, skills, email, password))
15 |             conn.commit()
16 |             conn.close()
17 |             return jsonify({'redirected': True, 'url': '/student_login'})
18 |         else:
19 |             return jsonify({'redirected': False, 'message': 'Passwords do not match'})
20 |             
21 |             
22 |             
23 |     
24 |     
25 | 


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__init__.py


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/Students_register.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/Students_register.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/__init__.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/__init__.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/create_job.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/create_job.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/recruiter_register.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/recruiter_register.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/recruiterslogin.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/recruiterslogin.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/report.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/report.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/__pycache__/students_login.cpython-39.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/pythonfiles/__pycache__/students_login.cpython-39.pyc


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/create_job.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | 
 3 | 
 4 | def add_job(job_role, company, package, job_description):
 5 |     conn2 = sqlite3.connect('db/hireme.db')
 6 |     cursor2 = conn2.cursor()
 7 |     cursor2.execute('''INSERT INTO jobs (job_role, company, package, 
 8 |                     job_description) VALUES (?, ?, ?, ?)''', 
 9 |                         (job_role, company, package, job_description))
10 |     conn2.commit()
11 |     conn2.close()
12 | 


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/rec_forgotpassword.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | from flask import jsonify
 3 | def update_password(username, new_password):
 4 |     conn = sqlite3.connect('db/hireme.db')
 5 |     cursor = conn.cursor()
 6 |     cursor.execute("SELECT * FROM recruiters WHERE username = ? OR email_id = ?", (username, username))
 7 |     recruiter = cursor.fetchone()
 8 |     if recruiter:
 9 |         cursor.execute("UPDATE recruiters SET password = ? WHERE username = ? OR email_id = ?", (new_password, username, username))
10 |         conn.commit()
11 |         conn.close()
12 |         return jsonify({'success': True, 'message': 'Password updated successfully', 'url': '/recruiter_login'})
13 |     else:
14 |         conn.close()
15 |         return jsonify({'success': False, 'message': 'User not found'})
16 |         


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/recruiter_home.py:
--------------------------------------------------------------------------------
1 | import sqlite3
2 | def get_all_jobs():
3 |     conn1 = sqlite3.connect('db/hireme.db')
4 |     cursor1 = conn1.cursor()
5 |     cursor1.execute('SELECT * FROM jobs')
6 |     jobs = cursor1.fetchall()
7 |     conn1.close()
8 |     return jobs
9 |     


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/recruiter_register.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, request, jsonify
 2 | import sqlite3
 3 | def register_recruiter(username, firstname, lastname, email, password, confirmPassword, company, phone_number):
 4 |     conn = sqlite3.connect('db/hireme.db')
 5 |     cursor = conn.cursor()
 6 |     cursor.execute("SELECT * FROM recruiters WHERE username = ?", (username,))
 7 |     recruiter = cursor.fetchone()
 8 |     if recruiter:
 9 |         conn.close()
10 |         return jsonify({'redirected': False, 'message': 'User already exists'})
11 |     else:
12 |         if password == confirmPassword:
13 |             cursor.execute('''INSERT INTO recruiters (username, first_name, last_name, email_id, password, company, phone_number)VALUES (?, ?, ?, ?, ?, ?, ?)''',(username, firstname, lastname, email, password, company, phone_number))
14 |             conn.commit()
15 |             conn.close()
16 |             return jsonify({'redirected': True, 'url': '/recruiter_login'})
17 |         else:
18 |             return jsonify({'redirected': False, 'message': 'Passwords do not match'})
19 |             
20 |         
21 |     
22 |     
23 |     
24 |     
25 | 


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/recruiterslogin.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | from flask import jsonify
 3 | 
 4 | def check_recruiter_login(username, password):
 5 |     conn = sqlite3.connect('db/hireme.db')
 6 |     cursor = conn.cursor()
 7 | 
 8 |     cursor.execute('SELECT * FROM recruiters WHERE username = ? AND password = ?', (username, password))
 9 |     recruiter = cursor.fetchone()
10 | 
11 |     conn.close()
12 | 
13 |     if recruiter:
14 |         return jsonify({'redirected': True, 'url': '/recruiter_home'})
15 |     else:
16 |         return jsonify({'redirected': False})
17 | 


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/report.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | def generate_report():
 3 |     conn = sqlite3.connect('db/hireme.db')
 4 |     cursor = conn.cursor()
 5 |     jobsdata = cursor.execute('SELECT * FROM jobs').fetchall()
 6 |     appliedData = cursor.execute('SELECT * FROM student_applications').fetchall()
 7 |     studentData = cursor.execute('SELECT * FROM students').fetchall()
 8 |     conn.close()
 9 |     report_data = []
10 |     for app in appliedData:
11 |         student = next((s for s in studentData if s[0] == app[1]), None)
12 |         job = next((j for j in jobsdata if j[0] == app[2]), None)
13 |         if student and job:
14 |             report_data.append({
15 |                 'student_name': student[1],
16 |                 'college': student[3],
17 |                 'job_role': job[1],
18 |                 'company': job[2],
19 |                 'package': job[3],
20 |                 'status': app[3]})
21 |                 return report_data
22 |     
23 |     


--------------------------------------------------------------------------------
/Internship Project/pythonfiles/students_login.py:
--------------------------------------------------------------------------------
 1 | import sqlite3
 2 | from flask import jsonify, session
 3 | def check_student_login(usn, password):
 4 |     conn = sqlite3.connect('db/hireme.db')
 5 |     cursor = conn.cursor()
 6 |     cursor.execute('SELECT * FROM students WHERE usn = ? AND password = ?', (usn, password))
 7 |     student = cursor.fetchone()
 8 |     if student:
 9 |         session['usn'] = usn
10 |         session['student_name'] = student[1]
11 |         conn.close()
12 |         return jsonify({'redirected': True, 'url': '/student_home'})
13 |     else:
14 |         conn.close()
15 |         return jsonify({'redirected': False})
16 |     


--------------------------------------------------------------------------------
/Internship Project/requirements.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/requirements.txt


--------------------------------------------------------------------------------
/Internship Project/static/css/create_job.css:
--------------------------------------------------------------------------------
  1 | /* Body */
  2 | body {
  3 |     font-family: 'Mallanna', sans-serif;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     display: flex;
  7 |     height: 100vh;
  8 |     font-size: 18px;
  9 |   }
 10 |   
 11 |   /* Header */
 12 |   header {
 13 |     width: 100%;
 14 |     height: 60px;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     align-items: center;
 18 |     border-bottom: 1px solid #cccccc;
 19 |     padding: 0 20px;
 20 |     box-sizing: border-box;
 21 |     position: fixed;
 22 |     top: 0;
 23 |     background-color: #ffffff;
 24 |     z-index: 1000;
 25 |     font-size: 20px;
 26 |   }
 27 |   
 28 |   /* Header Container */
 29 |   .header-container {
 30 |     display: flex;
 31 |     align-items: center;
 32 |   }
 33 |   
 34 |   /* Search Job Input */
 35 |   #search-job {
 36 |     padding: 8px;
 37 |     margin-right: 10px;
 38 |     font-size: 18px;
 39 |   }
 40 |   
 41 |   /* Aside */
 42 |   aside {
 43 |     width: 200px;
 44 |     background-color: #f8f8f8;
 45 |     border-right: 1px solid #cccccc;
 46 |     height: calc(100vh - 60px);
 47 |     box-sizing: border-box;
 48 |     padding-top: 60px;
 49 |     position: fixed;
 50 |     top: 60px;
 51 |     font-size: 18px;
 52 |   }
 53 |   
 54 |   /* Nav, Ul, Li */
 55 |   nav ul {
 56 |     list-style-type: none;
 57 |     padding: 0;
 58 |   }
 59 |   
 60 |   nav ul li {
 61 |     padding: 12px 20px;
 62 |   }
 63 |   
 64 |   /* Nav, Ul, Li, A */
 65 |   nav ul li a {
 66 |     text-decoration: none;
 67 |     color: black;
 68 |     display: block;
 69 |     font-size: 18px;
 70 |   }
 71 |   
 72 |   /* Nav, Ul, Li, A Hover */
 73 |   nav ul li a:hover {
 74 |     background-color: #dddddd;
 75 |   }
 76 |   
 77 |   /* Main */
 78 |   main {
 79 |     flex-grow: 1;
 80 |     padding: 20px;
 81 |     box-sizing: border-box;
 82 |     margin-left: 200px;
 83 |     margin-top: 60px;
 84 |     font-size: 18px;
 85 |   }
 86 |   
 87 |   /* Form */
 88 |   form {
 89 |     display: flex;
 90 |     flex-direction: column;
 91 |     max-width: 400px;
 92 |   }
 93 |   
 94 |   /* Label */
 95 |   label {
 96 |     margin-top: 12px;
 97 |     font-size: 18px;
 98 |   }
 99 |   
100 |   /* Input[type="text"] */
101 |   input[type="text"] {
102 |     width: 100%;
103 |     padding: 12px;
104 |     margin-top: 5px;
105 |     border: 1px solid #cccccc;
106 |     border-radius: 4px;
107 |     font-size: 18px;
108 |   }
109 |   
110 |   /* Textarea */
111 |   textarea {
112 |     width: 100%;
113 |     padding: 12px;
114 |     margin-top: 5px;
115 |     border: 1px solid #cccccc;
116 |     border-radius: 4px;
117 |     font-size: 18px;
118 |     height: 120px;
119 |   }
120 |   
121 |   /* Button[type="submit"] */
122 |   button[type="submit"] {
123 |     width: 120px;
124 |     padding: 12px;
125 |     background-color: #f0e68c;
126 |     border: none;
127 |     cursor: pointer;
128 |     margin-top: 12px;
129 |     align-self: flex-start;
130 |     font-size: 18px;
131 |   }
132 |   
133 |   /* Button[type="submit"]:hover */
134 |   button[type="submit"]:hover {
135 |     background-color: #e6c349;
136 |   }
137 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/job_details.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Mallanna', sans-serif;
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing: border-box;
 6 |   }
 7 |   
 8 |   header {
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: space-between;
12 |     padding: 10px 20px;
13 |     background-color: #f5f5f5;
14 |     border-bottom: 1px solid #dddddd;
15 |   }
16 |   
17 |   h1 {
18 |     margin: 0;
19 |     font-size: 24px;
20 |     font-weight: bold;
21 |   }
22 |   
23 |   .container {
24 |     display: flex;
25 |     height: calc(100vh - 60px);
26 |   }
27 |   
28 |   .sidebar {
29 |     width: 200px;
30 |     padding: 20px;
31 |     background-color: #f5f5f5;
32 |     border-right: 1px solid #dddddd;
33 |   }
34 |   
35 |   .sidebar h2 {
36 |     margin: 0;
37 |     font-size: 18px;
38 |     font-weight: bold;
39 |   }
40 |   
41 |   .job-details {
42 |     flex: 1;
43 |     padding: 20px;
44 |   }
45 |   
46 |   .job-details h2 {
47 |     margin-top: 0;
48 |   }
49 |   
50 |   button {
51 |     padding: 10px 20px;
52 |     background-color: #007bff;
53 |     color: #ffffff;
54 |     border: none;
55 |     border-radius: 5px;
56 |     cursor: pointer;
57 |   }
58 |   
59 |   button:hover {
60 |     background-color: #0056b3;
61 |   }
62 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/rec_forgot_password.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Mallanna', sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |     background-color: #f5f5f5;
  7 |     font-size: 18px;
  8 |   }
  9 |   
 10 |   header {
 11 |     text-align: center;
 12 |     margin-top: 5%;
 13 |   }
 14 |   
 15 |   header h1 {
 16 |     margin: 0;
 17 |     font-size: 32px;
 18 |   }
 19 |   
 20 |   main {
 21 |     display: flex;
 22 |     justify-content: center;
 23 |     align-items: center;
 24 |     height: calc(100vh - 20%);
 25 |     text-align: center;
 26 |   }
 27 |   
 28 |   .form-container {
 29 |     background-color: #D7EBEF;
 30 |     border: 1px solid black;
 31 |     padding: 40px;
 32 |     margin-top: 0;
 33 |     border-radius: 10px;
 34 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 35 |     width: 400px;
 36 |   }
 37 |   
 38 |   .form-group {
 39 |     margin-bottom: 20px;
 40 |     text-align: left;
 41 |   }
 42 |   
 43 |   label {
 44 |     margin-bottom: 5px;
 45 |     font-weight: bold;
 46 |     color: #333333;
 47 |     font-size: 20px;
 48 |   }
 49 |   
 50 |   input[type="text"] {
 51 |     width: 100%;
 52 |     padding: 12px;
 53 |     font-size: 20px;
 54 |     border: 1px solid #cccccc;
 55 |     border-radius: 5px;
 56 |     box-sizing: border-box;
 57 |   }
 58 |   
 59 |   input[type="password"] {
 60 |     width: 100%;
 61 |     padding: 12px;
 62 |     font-size: 20px;
 63 |     border: 1px solid #cccccc;
 64 |     border-radius: 5px;
 65 |     box-sizing: border-box;
 66 |   }
 67 |   
 68 |   
 69 |   input[type="text"]:focus {
 70 |     border-color: #007bff;
 71 |     outline: none;
 72 |   }
 73 |   input[type="password"]:focus {
 74 |     border-color: #007bff;
 75 |     outline: none;
 76 |   }
 77 |   
 78 |   
 79 |   hr {
 80 |     border: 1px solid #cccccc;
 81 |     margin: 20px 0;
 82 |   }
 83 |   
 84 |   button {
 85 |     background-color: #007bff;
 86 |     color: #ffffff;
 87 |     border: none;
 88 |     padding: 12px 20px;
 89 |     font-size: 18px;
 90 |     cursor: pointer;
 91 |     border-radius: 5px;
 92 |     width: 100%;
 93 |   }
 94 |   
 95 |   button:hover {
 96 |     background-color: #0056b3;
 97 |   }
 98 |   
 99 |   p {
100 |     margin-top: 20px;
101 |     font-size: 20px;
102 |     color: #000000;
103 |     font-weight: bold;
104 |     text-align: center;
105 |   }
106 |   
107 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/recruiter_home.css:
--------------------------------------------------------------------------------
  1 | /* Body Styles */
  2 | body {
  3 |     font-family: 'Mallanna', sans-serif;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |   }
  8 |   
  9 |   /* Header Styles */
 10 |   header {
 11 |     display: flex;
 12 |     align-items: center;
 13 |     justify-content: space-between;
 14 |     padding: 10px 20px;
 15 |     background-color: #f5f5f5;
 16 |     border-bottom: 1px solid #dddddd;
 17 |   }
 18 |   
 19 |   /* Header Container Styles */
 20 |   .header-container {
 21 |     display: flex;
 22 |     align-items: center;
 23 |     width: 100%;
 24 |   }
 25 |   
 26 |   /* h1 Styles */
 27 |   h1 {
 28 |     margin: 0;
 29 |     font-size: 24px;
 30 |     font-weight: bold;
 31 |   }
 32 |   
 33 |   /* Logout Button Styles */
 34 |   #logout-btn {
 35 |     padding: 5px 10px;
 36 |     background-color: #007bff;
 37 |     color: #ffffff;
 38 |     border: none;
 39 |     border-radius: 5px;
 40 |     cursor: pointer;
 41 |     margin-left: 85%;
 42 |   }
 43 |   
 44 |   /* Main Section Styles */
 45 |   main {
 46 |     display: flex;
 47 |     height: calc(100vh - 60px);
 48 |   }
 49 |   
 50 |   /* Sidebar Styles */
 51 |   .sidebar {
 52 |     width: 200px;
 53 |     padding: 20px;
 54 |     background-color: #f5f5f5;
 55 |     border-right: 1px solid #dddddd;
 56 |   }
 57 |   
 58 |   /* Sidebar h2 Styles */
 59 |   .sidebar h2 {
 60 |     margin: 0;
 61 |     font-size: 18px;
 62 |     font-weight: bold;
 63 |   }
 64 |   
 65 |   /* Content Section Styles */
 66 |   .content {
 67 |     flex: 1;
 68 |     padding: 20px;
 69 |   }
 70 |   
 71 |   /* Table Styles */
 72 |   table {
 73 |     width: 100%;
 74 |     border-collapse: collapse;
 75 |     margin-bottom: 20px;
 76 |   }
 77 |   
 78 |   /* Table Header Styles */
 79 |   th {
 80 |     padding: 10px;
 81 |     border: 1px solid #dddddd;
 82 |     text-align: left;
 83 |     background-color: #f5f5f5;
 84 |   }
 85 |   
 86 |   /* Table Data Cell Styles */
 87 |   td {
 88 |     padding: 10px;
 89 |     border: 1px solid #dddddd;
 90 |     text-align: left;
 91 |   }
 92 |   
 93 |   /* Report Link Styles */
 94 |   #reports {
 95 |     text-decoration: underline;
 96 |     margin-top: 10%;
 97 |     cursor: pointer;
 98 |   }
 99 |   
100 |   /* Create Job Button Styles */
101 |   #create-job-btn {
102 |     padding: 10px 20px;
103 |     background-color: #007bff;
104 |     color: #ffffff;
105 |     border: none;
106 |     border-radius: 5px;
107 |     cursor: pointer;
108 |   }
109 |   
110 |   /* Back to Index Button Styles */
111 |   #back-to-index {
112 |     position: fixed;
113 |     bottom: 20px;
114 |     right: 20px;
115 |   }
116 |   
117 |   /* Description Column Styles */
118 |   td.description {
119 |     text-align: center;
120 |   }
121 |   
122 |   /* View Button Styles */
123 |   .view-btn {
124 |     padding: 5px 10px;
125 |     background-color: #007bff;
126 |     color: #ffffff;
127 |     border: none;
128 |     border-radius: 5px;
129 |     cursor: pointer;
130 |   }
131 |   
132 |   /* View Button Hover Styles */
133 |   .view-btn:hover {
134 |     background-color: #0056b3;
135 |   }
136 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/recruiter_job_details.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Mallanna';
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing: border-box;
 6 |   }
 7 |   
 8 |   header {
 9 |     display: flex;
10 |     align-items: center;
11 |     justify-content: space-between;
12 |     padding: 10px 20px;
13 |     background-color: #f5f5f5;
14 |     border-bottom: 1px solid #dddddd;
15 |   }
16 |   
17 |   h1 {
18 |     margin: 0;
19 |     font-size: 24px;
20 |     font-weight: bold;
21 |   }
22 |   
23 |   .container {
24 |     display: flex;
25 |     height: calc(100vh - 60px);
26 |   }
27 |   
28 |   .sidebar {
29 |     width: 200px;
30 |     padding: 20px;
31 |     background-color: #f5f5f5;
32 |     border-right: 1px solid #dddddd;
33 |   }
34 |   
35 |   .sidebar h2 {
36 |     margin: 0;
37 |     font-size: 18px;
38 |     font-weight: bold;
39 |   }
40 |   
41 |   .job-details {
42 |     flex: 1;
43 |     padding: 20px;
44 |   }
45 |   
46 |   .job-details h2 {
47 |     margin-top: 0;
48 |   }
49 |   
50 |   button {
51 |     padding: 10px 20px;
52 |     background-color: #007bff;
53 |     color: #ffffff;
54 |     border: none;
55 |     border-radius: 5px;
56 |     cursor: pointer;
57 |   }
58 |   
59 |   button:hover {
60 |     background-color: #0056b3;
61 |   }
62 |   
63 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/recruiter_login.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Mallanna', sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |     background-color: #f5f5f5;
  7 |   }
  8 |   
  9 |   header {
 10 |     text-align: center;
 11 |     margin-top: 5%;
 12 |   }
 13 |   
 14 |   header h1 {
 15 |     margin: 0;
 16 |     font-size: 24px;
 17 |   }
 18 |   
 19 |   main {
 20 |     display: flex;
 21 |     justify-content: center;
 22 |     align-items: center;
 23 |     height: calc(75vh - 80px);
 24 |     text-align: center;
 25 |   }
 26 |   
 27 |   .login-container {
 28 |     background-color: #D7EBEF;
 29 |     border: 1px solid black;
 30 |     padding: 40px;
 31 |     margin-top: 1%;
 32 |     border-radius: 10px;
 33 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 34 |     width: 400px;
 35 |   }
 36 |   
 37 |   .form-group {
 38 |     margin-bottom: 20px;
 39 |     text-align: left;
 40 |     padding-bottom: 5%;
 41 |   }
 42 |   
 43 |   label {
 44 |     margin-bottom: 5px;
 45 |     padding-bottom: 5%;
 46 |     font-weight: bold;
 47 |     color: #333333;
 48 |   }
 49 |   
 50 |   input[type="text"],
 51 |   input[type="password"] {
 52 |     width: 100%;
 53 |     padding: 10px;
 54 |     border: 1px solid #cccccc;
 55 |     border-radius: 5px;
 56 |     box-sizing: border-box;
 57 |   }
 58 |   
 59 |   input[type="text"]:focus,
 60 |   input[type="password"]:focus {
 61 |     border-color: #007bff;
 62 |     outline: none;
 63 |   }
 64 |   
 65 |   hr {
 66 |     border: 1px solid #cccccc;
 67 |     margin: 20px 0;
 68 |   }
 69 |   
 70 |   .form-group-buttons {
 71 |     display: flex;
 72 |     justify-content: space-between;
 73 |     gap: 10px;
 74 |     padding-bottom: 30%;
 75 |   }
 76 |   
 77 |   button {
 78 |     background-color: #007bff;
 79 |     color: #ffffff;
 80 |     border: none;
 81 |     padding: 10px 20px;
 82 |     cursor: pointer;
 83 |     border-radius: 5px;
 84 |     width: 100%;
 85 |     flex: 1;
 86 |     margin: 0 5px;
 87 |   }
 88 |   
 89 |   button:hover {
 90 |     background-color: #0056b3;
 91 |   }
 92 |   
 93 |   p {
 94 |     margin-top: 20px;
 95 |     font-size: 18px;
 96 |     color: #000000;
 97 |     font-weight: bold;
 98 |     text-align: center;
 99 |   }
100 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/recruiter_register.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: 'Mallanna';
 3 |     background-color: #ffffff;
 4 |     display: flex;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     height: 100vh;
 8 |     margin:0;
 9 |   }
10 |   .form-container{
11 |     background-color:#D7EBEF;
12 |     padding: 5%;
13 |     border-radius: 10px;
14 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
15 |     width:800px;
16 |     height: 700px;
17 |   }
18 |   form {
19 |     display: flex;
20 |     flex-direction: column;
21 |   }
22 |   .form-row{
23 |     display: flex;
24 |     justify-content: space-between;
25 |   }
26 |   .form-column{
27 |     display: flex;
28 |     flex-direction: column;
29 |     width: 48%;
30 |   }
31 |   .form-group{
32 |     display: flex;
33 |     align-items: center;
34 |     margin-bottom: 15%;
35 |     margin-right: 5%;
36 |   }
37 |   #confirm_pass_group{
38 |     margin-top: 48%;
39 |   }
40 |   label{
41 |     width: 40%;
42 |     margin-right: 10px;
43 |     text-align: left;
44 |     font-weight: bold;
45 |   }
46 |   input{
47 |     width: 60%;
48 |     padding: 8px;
49 |     background-color:#EBF5F7;
50 |     border: 1px solid #cccccc;
51 |     border-radius: 5px;
52 |   }
53 |   select {
54 |     width: 60%;
55 |     padding: 8px;
56 |     background-color:#EBF5F7;
57 |     border: 1px solid #cccccc;
58 |     border-radius: 5px;
59 |   } 
60 |   hr{
61 |     margin: 20px 0;
62 |   }
63 |   button{
64 |     width: 20%;
65 |     padding: 10px;
66 |     background-color:#2B64D9;
67 |     color:white;
68 |     border: none;
69 |     border-radius: 5px;
70 |     cursor: pointer;
71 |     margin-left:40%;
72 |     margin-bottom: 5%;
73 |   }
74 |   button:hover{
75 |     background-color:  #003ec4;
76 |   }
77 |   p{
78 |     font-weight: bold;
79 |     text-align: center;
80 |     margin-top:5%;
81 |     font-size: 22px;
82 |     color:#555555;
83 |   }
84 |   h1{
85 |     text-align: center;
86 |     margin-left: 10%;
87 |     margin-bottom: 7%;
88 |   }


--------------------------------------------------------------------------------
/Internship Project/static/css/report.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Mallanna', sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |   }
  7 |   
  8 |   header {
  9 |     display: flex;
 10 |     align-items: center;
 11 |     justify-content: space-between;
 12 |     padding: 10px 20px;
 13 |     background-color: #f5f5f5;
 14 |     border-bottom: 1px solid #dddddd;
 15 |   }
 16 |   
 17 |   .header-container {
 18 |     display: flex;
 19 |     align-items: center;
 20 |     width: 100%;
 21 |   }
 22 |   
 23 |   h1 {
 24 |     margin: 0;
 25 |     font-size: 24px;
 26 |     font-weight: bold;
 27 |   }
 28 |   
 29 |   #logout-btn {
 30 |     padding: 5px 10px;
 31 |     background-color: #007bff;
 32 |     color: #ffffff;
 33 |     border: none;
 34 |     border-radius: 5px;
 35 |     cursor: pointer;
 36 |     margin-left: auto;
 37 |   }
 38 |   
 39 |   main {
 40 |     display: flex;
 41 |     height: calc(100vh - 60px);
 42 |   }
 43 |   
 44 |   .sidebar {
 45 |     width: 200px;
 46 |     padding: 20px;
 47 |     background-color: #f5f5f5;
 48 |     border-right: 1px solid #dddddd;
 49 |   }
 50 |   
 51 |   .sidebar h2 {
 52 |     margin: 0;
 53 |     font-size: 18px;
 54 |     font-weight: bold;
 55 |   }
 56 |   
 57 |   .content {
 58 |     flex: 1;
 59 |     padding: 20px;
 60 |   }
 61 |   
 62 |   h2 {
 63 |     font-size: 22px;
 64 |     margin-bottom: 20px;
 65 |   }
 66 |   
 67 |   table {
 68 |     width: 100%;
 69 |     border-collapse: collapse;
 70 |     margin-bottom: 20px;
 71 |   }
 72 |   
 73 |   th {
 74 |     padding: 10px;
 75 |     border: 1px solid #dddddd;
 76 |     text-align: left;
 77 |     background-color: #f5f5f5;
 78 |   }
 79 |   
 80 |   td {
 81 |     padding: 10px;
 82 |     border: 1px solid #dddddd;
 83 |     text-align: left;
 84 |   }
 85 |   
 86 |   #back-to-index {
 87 |     display: inline-block;
 88 |     padding: 10px 20px;
 89 |     background-color: #007bff;
 90 |     color: #ffffff;
 91 |     border: none;
 92 |     border-radius: 5px;
 93 |     cursor: pointer;
 94 |     position: absolute;
 95 |     bottom: 20px;
 96 |     right: 20px;
 97 |   }
 98 |   
 99 |   #back-to-index:hover {
100 |     background-color: #0056b3;
101 |   }
102 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/student_home.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     font-family: Arial, sans-serif;
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |   }
  7 |   
  8 |   header{
  9 |     display: flex;
 10 |     align-items: center;
 11 |     justify-content: space-between;
 12 |     padding: 10px 20px;
 13 |     background-color: #f5f5f5;
 14 |     border-bottom: 1px solid #dddddd;
 15 |   }
 16 |   
 17 |   .header-container{
 18 |     display: flex;
 19 |     align-items: center;
 20 |     width:100%;
 21 |   }
 22 |   
 23 |   h1{
 24 |     margin: 0;
 25 |     font-size: 24px;
 26 |     font-weight: bold;
 27 |   }
 28 |   
 29 |   .search-bar{
 30 |     padding: 5px;
 31 |     font-size: 16px;
 32 |   }
 33 |   #logout-btn{
 34 |     padding: 5px 10px;
 35 |     background-color: #007bff;
 36 |     color: #ffffff;
 37 |     border: none;
 38 |     border-radius: 5px;
 39 |     cursor: pointer;
 40 |     margin-left: 85%;
 41 |   }
 42 |   
 43 |   main{
 44 |     display: flex;
 45 |     height:calc(100vh - 60px); 
 46 |   }
 47 |   
 48 |   .sidebar {
 49 |     width: 200px;
 50 |     padding: 20px;
 51 |     background-color: #f5f5f5 ;
 52 |     border-right: 1px solid #dddddd;
 53 |   }
 54 |   
 55 |   .sidebar h2{
 56 |     margin: 0;
 57 |     font-size: 18px;
 58 |     font-weight: bold;
 59 |   }
 60 |   
 61 |   .content{
 62 |     flex:1;
 63 |     padding: 20px;
 64 |   }
 65 |   
 66 |   #back-to-index{
 67 |     position: fixed;
 68 |     bottom: 20px;
 69 |     right: 20px;
 70 |   } 
 71 |   
 72 |   .job-list{
 73 |     margin-bottom: 20px;
 74 |   }
 75 |   
 76 |   .job-card{
 77 |     display: flex;
 78 |     justify-content: space-between;
 79 |     align-items: center;
 80 |     padding: 10px;
 81 |     margin-bottom: 10px;
 82 |     border: 1px solid #dddddd;
 83 |     border-radius: 5px;
 84 |     background-color: #ffffff;
 85 |   }
 86 |   
 87 |   .job-card div{
 88 |     flex:1;
 89 |     padding: 0 10px;
 90 |   }
 91 |   
 92 |    .job-card button{
 93 |      padding: 5px 10px;
 94 |      background-color: #007bff;
 95 |      color:#ffffff;
 96 |      border: none;
 97 |      border-radius: 5px;
 98 |      cursor: pointer;
 99 |    }
100 |   
101 |   .job-card button:hover{
102 |     background-color: #0056b3;
103 |   }
104 |   
105 |   .job-list h3{
106 |     margin-bottom: 10px;
107 |     font-size: 18px;
108 |     font-weight: bold;
109 |     color: #007bff;
110 |   }
111 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/student_login.css:
--------------------------------------------------------------------------------
  1 | /* Body CSS */
  2 | body {
  3 |     font-family: Arial, sans-serif;
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     background-color: #f5f5f5;
  8 | }
  9 | 
 10 | /* Header CSS */
 11 | header {
 12 |     text-align: center;
 13 |     margin-top: 5%;
 14 | }
 15 | 
 16 | /* Header h1 CSS */
 17 | header h1 {
 18 |     margin: 0;
 19 |     font-size: 24px;
 20 | }
 21 | 
 22 | /* Main CSS */
 23 | main {
 24 |     display: flex;
 25 |     justify-content: center;
 26 |     align-items: center;
 27 |     height: calc(75vh - 80px);
 28 |     text-align: center;
 29 | }
 30 | 
 31 | /* Login Container CSS */
 32 | .login-container {
 33 |     background-color: #D7EBEF;
 34 |     border: 1px solid black;
 35 |     padding: 40px;
 36 |     margin-top: 1%;
 37 |     border-radius: 10px;
 38 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 39 |     width: 400px;
 40 | }
 41 | 
 42 | /* Form Group CSS */
 43 | .form-group {
 44 |     margin-bottom: 20px;
 45 |     text-align: left;
 46 |     padding-bottom: 5%;
 47 | }
 48 | 
 49 | /* Label CSS */
 50 | label {
 51 |     margin-bottom: 5px;
 52 |     padding-bottom: 5%;
 53 |     font-weight: bold;
 54 |     color: #333333;
 55 | }
 56 | 
 57 | /* Input[type="text"] CSS */
 58 | input[type="text"],
 59 | input[type="password"] {
 60 |     width: 100%;
 61 |     padding: 10px;
 62 |     border: 1px solid #cccccc;
 63 |     border-radius: 5px;
 64 |     box-sizing: border-box;
 65 | }
 66 | 
 67 | /* Input Focus CSS */
 68 | input[type="text"]:focus,
 69 | input[type="password"]:focus {
 70 |     border-color: #007bff;
 71 |     outline: none;
 72 | }
 73 | 
 74 | /* HR CSS */
 75 | hr {
 76 |     border: 1px solid #cccccc;
 77 |     margin: 20px 0;
 78 | }
 79 | 
 80 | /* Form Group Buttons CSS */
 81 | .form-group-buttons {
 82 |     display: flex;
 83 |     justify-content: space-between;
 84 |     gap: 10px;
 85 |     padding-bottom: 30%;
 86 | }
 87 | 
 88 | /* Button CSS */
 89 | button {
 90 |     background-color: #007bff;
 91 |     color: #ffffff;
 92 |     border: none;
 93 |     padding: 10px 20px;
 94 |     cursor: pointer;
 95 |     border-radius: 5px;
 96 |     width: 100%;
 97 |     flex: 1;
 98 |     margin: 0 5px;
 99 | }
100 | 
101 | /* Button Hover CSS */
102 | button:hover {
103 |     background-color: #0056b3;
104 | }
105 | 
106 | /* Paragraph CSS */
107 | p {
108 |     margin-top: 20px;
109 |     font-size: 18px;
110 |     color: #000000;
111 |     font-weight: bold;
112 |     text-align: center;
113 | }
114 | 


--------------------------------------------------------------------------------
/Internship Project/static/css/student_register.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     font-family:'Mallanna';
  3 |     background-color:#ffffff;
  4 |     display:flex;
  5 |     justify-content:center;
  6 |     align-items:center;
  7 |     height:100vh;
  8 |     margin:0; 
  9 |   }
 10 |   .form-container{
 11 |     background-color:#D7EBEF;
 12 |     padding: 5%;
 13 |     border-radius: 10px;
 14 |     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 15 |     width: 800px;
 16 |     height: 700px; 
 17 |   }
 18 |   form{
 19 |     display:flex;
 20 |     flex-direction: column;
 21 |   }
 22 |   .form-row{
 23 |     display: flex;
 24 |     justify-content:space-between;
 25 |   }
 26 |   .form-column {
 27 |     display: flex;
 28 |     flex-direction: column;
 29 |     width: 48%;
 30 |   }
 31 |   .form-group{
 32 |     display: flex;
 33 |     align-items: center;
 34 |     margin-bottom: 15%;
 35 |     margin-right: 5%;
 36 |   }
 37 |   
 38 |   .form-group-skills{
 39 |     display: flex;
 40 |     align-items: center;
 41 |     margin-bottom: 2%;
 42 |     margin-left: 2%;
 43 |     margin-right: 5%;
 44 |   }  
 45 |   .form-group-skills select {
 46 |     width: 66%;
 47 |   }
 48 |   label {
 49 |     width:40%;
 50 |     margin-right: 10px;
 51 |     text-align: left;
 52 |     font-weight: bold;
 53 |   }
 54 |   input{
 55 |     width:60%;
 56 |     padding: 8px;
 57 |     background-color: #EBF5F7;
 58 |     border: 1px solid #cccccc;
 59 |     border-radius: 5px;
 60 |   }
 61 |   select{
 62 |     width:60%;
 63 |     padding: 8px;
 64 |     background-color: #EBF5F7;
 65 |     border: 1px solid #cccccc;
 66 |     border-radius: 5px;
 67 |   } 
 68 |   hr{
 69 |     margin: 20px 0;
 70 |   }
 71 |   button{
 72 |     width: 20%;
 73 |     padding: 10px;
 74 |     background-color: #2B64D9;
 75 |     color:white;
 76 |     border: none;
 77 |     border-radius: 5px;
 78 |     cursor: pointer;
 79 |     margin-left: 40%;
 80 |     margin-bottom: 5%;
 81 |   }
 82 |   button:hover{
 83 |     background-color: #003ec4;
 84 |   }
 85 |   p{
 86 |     font-weight: bold;
 87 |     text-align: center;
 88 |     margin-top: 5%;
 89 |     font-size: 22px;
 90 |     color: #555555;
 91 |   }
 92 |   h1{
 93 |     text-align: center;
 94 |     margin-left: 10%;
 95 |     margin-bottom: 7%;
 96 |   }
 97 |   small{
 98 |     margin-left: 50%;
 99 |     padding-bottom: 32%;
100 |   }
101 |   
102 |   
103 |   
104 |   


--------------------------------------------------------------------------------
/Internship Project/static/css/student_reset_password.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Mallanna';
  3 |     margin: 0;
  4 |     padding: 0;
  5 |     box-sizing: border-box;
  6 |     background-color: #f5f5f5;
  7 |   }
  8 |   
  9 |   header {
 10 |     text-align: center;
 11 |     margin-top: 5%;
 12 |   }
 13 |   
 14 |   header h1 {
 15 |     margin: 0;
 16 |     font-size: 24px;
 17 |   }
 18 |   
 19 |   main {
 20 |     display: flex;
 21 |     justify-content: center;
 22 |     align-items: center;
 23 |     height: calc(75vh - 80px);
 24 |     text-align: center;
 25 |   }
 26 |   
 27 |   .reset-container {
 28 |     background-color: #D7EBEF;
 29 |     border: 1px solid black;
 30 |     padding: 40px;
 31 |     margin-top: 1%;
 32 |     border-radius: 10px;
 33 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 34 |     width: 400px;
 35 |   }
 36 |   
 37 |   .form-group {
 38 |     margin-bottom: 20px;
 39 |     text-align: left;
 40 |   }
 41 |   
 42 |   label {
 43 |     margin-bottom: 5px;
 44 |     font-weight: bold;
 45 |     color: #333333;
 46 |   }
 47 |   
 48 |   input[type="text"] {
 49 |     width: 100%;
 50 |     padding: 10px;
 51 |     border: 1px solid #cccccc;
 52 |     border-radius: 5px;
 53 |     box-sizing: border-box;
 54 |   }
 55 |   
 56 |   input[type="password"] {
 57 |     width: 100%;
 58 |     padding: 10px;
 59 |     border: 1px solid #cccccc;
 60 |     border-radius: 5px;
 61 |     box-sizing: border-box;
 62 |   }
 63 |   
 64 |   input[type="text"]:focus {
 65 |     border-color: #007bff;
 66 |     outline: none;
 67 |   }
 68 |   
 69 |   input[type="password"]:focus {
 70 |     border-color: #007bff;
 71 |     outline: none;
 72 |   }
 73 |   
 74 |   hr {
 75 |     border: 1px solid #cccccc;
 76 |     margin: 20px 0;
 77 |   }
 78 |   
 79 |   .form-group-buttons {
 80 |     text-align: center;
 81 |   }
 82 |   
 83 |   button {
 84 |     background-color: #007bff;
 85 |     color: #ffffff;
 86 |     border: none;
 87 |     padding: 10px 20px;
 88 |     cursor: pointer;
 89 |     border-radius: 5px;
 90 |     width: 100%;
 91 |   }
 92 |   
 93 |   button:hover {
 94 |     background-color: #0056b3;
 95 |   }
 96 |   
 97 |   p {
 98 |     margin-top: 20px;
 99 |     font-size: 18px;
100 |     color: #000000;
101 |     font-weight: bold;
102 |   }
103 |   


--------------------------------------------------------------------------------
/Internship Project/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/static/images/logo.png


--------------------------------------------------------------------------------
/Internship Project/static/js/create_job.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     // Retrieve the form element by its id
 3 |     const createJobForm = document.getElementById('createJobForm');
 4 |   
 5 |     // Add a submit event listener to the form
 6 |     createJobForm.addEventListener('submit', function(event) {
 7 |       // Prevent the default form submission
 8 |       event.preventDefault();
 9 |   
10 |       // Retrieve form values
11 |       const jobRole = document.getElementById('jobRole').value;
12 |       const company = document.getElementById('company').value;
13 |       const package = document.getElementById('package').value;
14 |       const jobDescription = document.getElementById('jobDescription').value;
15 |   
16 |       // Fetch request to submit the job data
17 |       fetch('/api/jobs', {
18 |         method: 'POST',
19 |         headers: {
20 |           'Content-Type': 'application/json'
21 |         },
22 |         body: JSON.stringify({
23 |           job_role: jobRole,
24 |           company: company,
25 |           package: package,
26 |           job_description: jobDescription
27 |         })
28 |       })
29 |       .then(response => response.json())
30 |       .then(data => {
31 |         // Check if the job creation was successful
32 |         if (data.success) {
33 |           alert('Job created successfully');
34 |           window.location.href = '/recruiter_home';
35 |         } else {
36 |           alert('Failed to create job');
37 |         }
38 |       })
39 |       .catch(error => {
40 |         console.error('Error:', error);
41 |       });
42 |     });
43 |   });
44 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/index.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     function handleButtonClick (event ) {
 3 |       window.location.href = event.target.getAttribute('url');
 4 |     }
 5 |       document.getElementById('student-login-btn').addEventListener('click', handleButtonClick);
 6 |       document.getElementById('recruiter-login-btn').addEventListener('click', handleButtonClick);
 7 |       document.getElementById('start-career-btn').addEventListener('click', handleButtonClick);
 8 |    });
 9 |    
10 |     
11 |     


--------------------------------------------------------------------------------
/Internship Project/static/js/job_details.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const backButton = document.getElementById('back-to-home');
 3 |     backButton.addEventListener('click', function() {
 4 |       window.location.href = '/student_home';
 5 |     }); const jobId = window.location.pathname.split('/').pop();
 6 |     fetch(`/api/job_details/${jobId}`)  
 7 |     .then(response => response.json())
 8 |       .then(job => {
 9 |         document.getElementById('jobRole').textContent = `Job Role: ${job.job_role}`;
10 |         document.getElementById('company').textContent = `Company: ${job.company}`;
11 |         document.getElementById('package').textContent = `Package: ${job.package}`;
12 |         document.getElementById('jobDescription').textContent = `Job Description: ${job.job_description}`;
13 |       }) .catch(error => {
14 |         console.error('Error fetching job details:', error);
15 |         document.getElementById('jobRole').textContent = 'Error fetching job details';
16 |       });
17 |   }
18 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/rec_forgot_password.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('forgot_password_form').addEventListener('submit', function(event) {
 2 |     event.preventDefault();
 3 |     const formData = {
 4 |       username: document.getElementById('username').value,
 5 |       new_password: document.getElementById('new_password').value,
 6 |       confirm_password: document.getElementById('confirm_password').value
 7 |     }; fetch('/forgot_password', {
 8 |       method: 'POST',
 9 |       headers: {
10 |         'Content-Type': 'application/json',
11 |       },
12 |     body: JSON.stringify(formData)
13 |     }) .then(response => response.json())
14 |     .then(data => {
15 |       if (data.success) {
16 |         alert('Password reset successfully!');
17 |         window.location.href = '/recruiter_login';
18 |       } else {
19 |         alert('Error: ' + data.message);
20 |       }}) .catch(error => {
21 |       console.error('Error:', error);
22 |       alert('An unexpected error occurred. Please try again.');
23 |     });
24 |   });
25 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/recruiter_home.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const report = document.getElementById('reports');
 3 |   
 4 |     report.addEventListener('click', function(event) {
 5 |       event.preventDefault();
 6 |       window.location.href = '/report';
 7 |     });
 8 |   
 9 |     fetch('/api/jobs')
10 |       .then(response => response.json())
11 |       .then(data => {
12 |         const jobsTable = document.getElementById('jobsTable').getElementsByTagName('tbody')[0];
13 |   
14 |         data.forEach(job => {
15 |           const row = jobsTable.insertRow();
16 |           row.insertCell(0).textContent = job[0];
17 |           row.insertCell(1).textContent = job[1];
18 |           row.insertCell(2).textContent = job[2];
19 |           row.insertCell(3).textContent = job[3];
20 |   
21 |           const descriptionCell = row.insertCell(4);
22 |           descriptionCell.classList.add('description');
23 |   
24 |           const viewButton = document.createElement('button');
25 |           viewButton.classList.add('view-btn');
26 |           viewButton.textContent = 'View';
27 |   
28 |           viewButton.onclick = () => {
29 |             window.location.href = `/recruiter/job/${job[0]}`;
30 |           };
31 |   
32 |           descriptionCell.appendChild(viewButton);
33 |         });
34 |       });
35 |   
36 |     document.getElementById('create-job-btn').addEventListener('click', function() {
37 |       window.location.href = '/create_job_page';
38 |     });
39 |   
40 |     document.getElementById('logout-btn').addEventListener('click', function() {
41 |       window.location.href = '/';
42 |     });
43 |   });
44 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/recruiter_job_details.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const backButton = document.getElementById('back-to-home')
 3 |     backButton.addEventListener('click', function() {
 4 |       window.location.href = '/recruiter_home'
 5 |     }) const jobId = window.location.pathname.split('/').pop()
 6 |     fetch(`/api/job_details/${jobId}`)
 7 |     .then(response => response.json())
 8 |     .then(job => {
 9 |       document.getElementById('jobRole').textContent = `Job Role: ${job.job_role}`
10 |       document.getElementById('company').textContent = `Company: ${job.company}`
11 |       document.getElementById('package').textContent = `Package: ${job.package}`
12 |       document.getElementById('jobDescription').textContent = `Job Description: ${job.job_description}`;
13 |     }) .catch(error => {
14 |       console.error('Error fetching job details:', error)
15 |       document.getElementById('jobRole').textContent = 'Error fetching job details'
16 |     })
17 |   }
18 |                             


--------------------------------------------------------------------------------
/Internship Project/static/js/recruiter_login.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     const loginForm = document.querySelector('#recruiterLoginForm');
 3 |     const signupButton = document.getElementById('signupButton');
 4 |     const forgotButton = document.getElementById('forgotButton');
 5 |   
 6 |     loginForm.addEventListener('submit', function(event) {
 7 |       event.preventDefault();
 8 |       const username = document.getElementById('username').value;
 9 |       const password = document.getElementById('password').value;
10 |   
11 |       fetch('/recruiter_login', {
12 |         method: 'POST',
13 |         headers: {
14 |           'Content-Type': 'application/json'
15 |         },
16 |         body: JSON.stringify({
17 |           username: username,
18 |           password: password
19 |         })
20 |       })
21 |       .then(response => response.json())
22 |       .then(data => {
23 |         if (data.redirected) {
24 |           window.location.href = data.url;
25 |         } else {
26 |           alert('Login failed. Please check your credentials.');
27 |         }
28 |       })
29 |       .catch(error => {
30 |         console.error('Error:', error);
31 |       });
32 |     });
33 |   
34 |     signupButton.addEventListener('click', function(event) {
35 |       event.preventDefault();
36 |       console.log('it is clicked');
37 |       window.location.href = '/recruiter_register';
38 |     });
39 |   
40 |     forgotButton.addEventListener('click', function(event) {
41 |       event.preventDefault();
42 |       window.location.href = '/rec_forgot_password';
43 |     });
44 |   });
45 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/recruiter_register.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('recruiter_register').addEventListener('submit', function(event) {
 2 |     event.preventDefault(); 
 3 |     const formData= { 
 4 |       username: document.getElementById('username').value,
 5 |       firstname: document.getElementById('firstname').value,
 6 |       lastname: document.getElementById('lastname').value,
 7 |       email: document.getElementById('email').value, 
 8 |       password: document.getElementById('password').value, 
 9 |       confirm_password: document.getElementById('confirm_password').value,
10 |       company: document.getElementById('company').value,
11 |       phone_number: document.getElementById('phone_number').value 
12 |     } 
13 |     fetch('/recruiter_register', { 
14 |       method: 'POST', 
15 |       headers: { 
16 |         'Content-Type': 'application/json' ,
17 |       },  body: JSON.stringify(formData)
18 |    }).then(response => response.json())
19 |       .then(data => {
20 |           if (data.redirected) {
21 |               alert('Recruiter registered successfully!');  
22 |               window.location.href = data.url;
23 |           } else {
24 |               alert('Error: ' + data.message);
25 |           }  }).catch(error => {
26 |           console.error('Error:', error);
27 |           alert('An unexpected error occurred. Please try again.');
28 |       }); 
29 |   });
30 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/report.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', () => {
 2 |     const reportTable = document.querySelector('#reportTable tbody');
 3 |     const backbutton = document.getElementById('back-to-index');
 4 |     const logoutButton = document.getElementById('logout-btn');
 5 |     fetch('/api/report')
 6 |       .then(response => response.json())
 7 |       .then(data => {
 8 |         data.forEach(item => {
 9 |           const row = document.createElement('tr');
10 |           row.innerHTML = `
11 |           <td>${item.student_name}</td>
12 |           <td>${item.college}</td>
13 |           <td>${item.job_role}</td>
14 |           <td>${item.company}</td>
15 |           <td>${item.package}</td>
16 |           <td>${item.status}</td>
17 |           `; reportTable.appendChild(row);
18 |         });}) backbutton.addEventListener('click', function(event) {
19 |       event.preventDefault();
20 |       window.location.href = '/recruiter_home';})
21 |     logoutButton.addEventListener('click', function(event) {
22 |       event.preventDefault();
23 |       window.location.href = '/';
24 |     });
25 |   });
26 |   
27 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/student_home.js:
--------------------------------------------------------------------------------
 1 | function createJobCard(job, isApplied) {
 2 |     const jobCard = document.createElement('div');
 3 |     jobCard.className = 'job-card';
 4 |     jobCard.innerHTML = `
 5 |     <div>${job.job_role}</div> 
 6 |     <div>Company: ${job.company}</div>
 7 |     <div>Package: ${job.package}</div>
 8 |     <button style='margin-right: 10px;' onclick='viewJob(${job.id})'>View</button>`; 
 9 |     if (!isApplied) {
10 |       jobCard.innerHTML += `<button onclick='applyJob(${job.id})'>Apply</button>`;
11 |     }return jobCard;
12 |   }document.addEventListener('DOMContentLoaded', function() {
13 |     const usn = localStorage.getItem('usn'); 
14 |     if (!usn) {
15 |       window.location.href = '/student_login';
16 |       return; 
17 |     }fetch('/api/jobs_by_status')
18 |     .then(response => response.json())
19 |     .then(data => {
20 |       if (data.error) {
21 |         alert(data.error);
22 |         window.location.href = '/student_login';
23 |         return;
24 |       }const jobsNotApplied = data.not_applied;
25 |       const jobsApplied = data.applied;
26 |       const jobsTableNotApplied = document.getElementById('jobsTableNotApplied');
27 |       const jobsTableApplied = document.getElementById('jobsTableApplied');
28 |        jobsNotApplied.forEach(job => {
29 |          const jobCard = createJobCard(job, false);
30 |          jobsTableNotApplied.appendChild(jobCard);
31 |        });jobsApplied.forEach(job => {
32 |          const jobCard = createJobCard(job, true);
33 |          jobsTableApplied.appendChild(jobCard);
34 |        });document.getElementById('studentName').innerText = sessionStorage.getItem('student_name');
35 |     }).catch(error => console.error('Error fetching jobs:', error));
36 |     document.getElementById('logout-btn').addEventListener('click', function() {
37 |       fetch('/logout')
38 |       .then(() => {
39 |         localStorage.removeItem('usn');
40 |         window.location.href = '/';
41 |       }).catch(error => console.error('Error logging out:', error));});});
42 |   function viewJob(jobId) {
43 |     window.location.href = `/job/${jobId}`;
44 |   }  function applyJob(jobId) {
45 |     fetch('/api/apply_job', { 
46 |       method: 'POST',
47 |       headers:{ 
48 |        'Content-Type': 'application/json' 
49 |         },body: JSON.stringify({ job_id: jobId })
50 |     }).then(response => response.json())
51 |          .then(data => {
52 |           if (data.success) {
53 |            alert('Applied successfully!');
54 |              window.location.reload();
55 |           } else {
56 |             alert('Failed to apply.');
57 |          }}).catch(error => console.error('Error applying for job:', error));  
58 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/student_login.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 |     // Retrieve the login form, signup button, and forgot button
 3 |     const loginForm = document.querySelector('#loginForm');
 4 |     const signupButton = document.getElementById('signupButton');
 5 |     const forgotButton = document.getElementById('forgotButton');
 6 | 
 7 |     // Add submit event listener to the login form
 8 |     loginForm.addEventListener('submit', function(event) {
 9 |         event.preventDefault(); // Prevent the default form submission
10 | 
11 |         // Retrieve the values of the input fields
12 |         const usn = document.getElementById('usn').value;
13 |         const password = document.getElementById('password').value;
14 | 
15 |         // Send a POST request with the login data
16 |         fetch('/login', {
17 |             method: 'POST',
18 |             headers: {
19 |                 'Content-Type': 'application/json'
20 |             },
21 |             body: JSON.stringify({
22 |                 usn: usn,
23 |                 password: password
24 |             })
25 |         })
26 |         .then(response => response.json())  // Parse the response as JSON
27 |         .then(data => {
28 |             if (data.redirected) {  // Check if the user is redirected
29 |                 localStorage.setItem('usn', usn);  // Store the USN in localStorage
30 |                 window.location.href = data.url;  // Redirect to the URL
31 |             } else {
32 |                 alert('Login failed. Please check your credentials.');  // Show error alert
33 |             }
34 |         })
35 |         .catch(error => {
36 |             console.error('Error:', error);  // Log any errors to the console
37 |         });
38 |     });
39 | 
40 |     // Signup button click event listener
41 |     signupButton.addEventListener('click', function(event) {
42 |         console.log('it is clicked');  // Log to the console
43 |         event.preventDefault();  // Prevent the default button behavior
44 |         window.location.href = '/student_register';  // Redirect to the signup page
45 |     });
46 | 
47 |     // Forgot password button click event listener
48 |     forgotButton.addEventListener('click', function(event) {
49 |         event.preventDefault();  // Prevent the default button behavior
50 |         window.location.href = '/reset-password-page';  // Redirect to the reset password page
51 |     });
52 | });
53 | 


--------------------------------------------------------------------------------
/Internship Project/static/js/student_register.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('student_register').addEventListener('submit', function(event) {
 2 |     event.preventDefault();
 3 |     const formData= {
 4 |       usn: document.getElementById('usn').value,
 5 |       name: document.getElementById('name').value,
 6 |       email: document.getElementById('email').value,
 7 |       password: document.getElementById('password').value,
 8 |       confirm_password: document.getElementById('confirm_password').value,
 9 |       skills: document.getElementById('skills').value,
10 |       branch: document.getElementById('branch').value,
11 |       college_name: document.getElementById('college_name').value,
12 |       phone_number: document.getElementById('phone_number').value 
13 |     } 
14 |     fetch('/student_register', {
15 |       method: 'POST',
16 |       headers: { 
17 |         'Content-Type': 'application/json' ,
18 |       },  body: JSON.stringify(formData)
19 |    }).then(response => response.json())
20 |       .then(data => {
21 |           if (data.redirected) {
22 |               alert('Student registered successfully!');
23 |               window.location.href = data.url;
24 |           } else {
25 |               console.log("something happened");
26 |               alert('Error: ' + data.message);
27 |           }  }).catch(error => {
28 |           console.error('Error:', error);
29 |           alert('An unexpected error occurred. Please try again.');
30 |       }); 
31 |   });
32 |   


--------------------------------------------------------------------------------
/Internship Project/static/js/student_reset_password.js:
--------------------------------------------------------------------------------
 1 | document.getElementById('resetPasswordBtn').addEventListener('click', function() {
 2 |     const usn = document.getElementById('usn').value;
 3 |     const email = document.getElementById('email').value;
 4 |     const newPassword = document.getElementById('new_password').value;
 5 |     if (!usn || !email || !newPassword) {
 6 |       alert("Please fill in all fields.");
 7 |       return;
 8 |     } const data = {
 9 |       usn: usn,
10 |       email: email,
11 |       new_password: newPassword
12 |     }; fetch('/reset-password', {
13 |       method: 'POST',
14 |       headers: {
15 |         'Content-Type': 'application/json'
16 |       }, body: JSON.stringify(data)
17 |     }) .then(response => response.json())
18 |     .then(data => {
19 |       if (data.success) {
20 |         alert('Password reset successfully!');
21 |         window.location.href = '/student_login';
22 |         } else {
23 |         alert('Error: ' + data.message);
24 |         }}) .catch(error => {
25 |       console.error('Error:', error);
26 |       alert('An error occurred while resetting your password.');
27 |         }
28 |                    


--------------------------------------------------------------------------------
/Internship Project/templates/create_job.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>Create Job</title>
 6 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/create_job.css') }}">
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <div class="header-container">
11 |         <h1>Hireme</h1>
12 |       </div>
13 |     </header>
14 |     
15 |     <aside>
16 |       <nav>
17 |         <ul>
18 |           <li>Job</li>
19 |           <li>Report</li>
20 |         </ul>
21 |       </nav>
22 |     </aside>
23 |     
24 |     <main>
25 |       <form id="createJobForm">
26 |         <label for="jobRole">Job Role:</label>
27 |         <input type="text" id="jobRole" name="jobRole">
28 |         <br>
29 |         
30 |         <label for="company">Company:</label>
31 |         <input type="text" id="company" name="company">
32 |         <br>
33 |         
34 |         <label for="package">Package:</label>
35 |         <input type="text" id="package" name="package">
36 |         <br>
37 |         
38 |         <label for="jobDescription">Job Description:</label>
39 |         <textarea id="jobDescription" name="jobDescription"></textarea>
40 |         <br>
41 |         
42 |         <button type="submit">Submit</button>
43 |       </form>
44 |     </main>
45 |     
46 |     <script src="{{ url_for('static', filename='js/create_job.js') }}"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/Internship Project/templates/index.html:
--------------------------------------------------------------------------------
 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>HireMe</title>
 7 |   <link rel='stylesheet' href="{{ url_for('static',filename='css/index.css') }}">
 8 | </head> 
 9 | <body>
10 |   <header>
11 |     <h1>HireMe</h1>
12 |     <div class='login-buttons'>
13 |       <button id='student-login-btn' >Student Login</button>
14 |      
15 |       <button id='recruiter-login-btn'>Recruiter Login</button>
16 |     </div>
17 |   </header>
18 |   <main>
19 |     <section class='hero'>
20 |       <img src="{{ url_for('static',filename='images/logo.png') }}" alt='Career with Exskilence Logo'>
21 |       <div class="negative">
22 |         <h3>Find jobs with HireMe</h3>
23 |         <p>We will hire you based on your skills</p>
24 |       </div>
25 |     </section>
26 |     <section class='trusted-companies'>
27 |       <h3>Top companies trust us</h3>
28 |       <div class='companies'>
29 |         <span>Deloitee</span>
30 |         <span>Meeshoo</span>
31 |         <span>TCS</span>
32 |         <span>CGI</span>
33 |         <span>ITS</span>
34 |         <span>HCL</span>
35 |         <span>Infosys</span>
36 |         <span>L&T</span>
37 |         <span>ApnaC</span>
38 |         <span>TPS</span>
39 |         <span>Figma</span>
40 |       </div>
41 |     </section>
42 |     <section class='stats'>
43 |       <div class='stats-parent-container'>
44 |         <div class='stats-container'>
45 |           <div class='stat-item'>
46 |             <div class='stat-number'>10+</div>
47 |             <div class='stat-description'>Companies Hired</div>
48 |           </div>
49 |           <div class='stat-item'>
50 |             <div class='stat-number'>50+</div>
51 |             <div class='stat-description'>Active students</div>
52 |           </div>
53 |         </div>
54 |         <div class='start-career'>
55 |           <h4>Start your career with HireMe Today!</h4>
56 |           <button id='start-career-btn' >CLICK HERE TO LOGIN</button>
57 |           
58 |         </div>
59 |       </div>
60 |     </section>
61 |   </main>
62 |   <script src="{{ url_for('static',filename='js/index.js') }}"></script> 
63 | </body>
64 | </html> 


--------------------------------------------------------------------------------
/Internship Project/templates/job_details.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/job_details.css') }}">
 6 |     <title>Job Details</title>
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <h1>Hireme</h1>
11 |     </header>
12 |     <main class="container">
13 |       <div class="sidebar">
14 |         <h2>Job</h2>
15 |       </div>
16 |       <div class="job-details">
17 |         <h2 id="jobRole"></h2>
18 |         <p id="company"></p>
19 |         <p id="package"></p>
20 |         <p id="jobDescription"></p>
21 |         <button id="back-to-home">Back</button>
22 |       </div>
23 |     </main>
24 |     <script src="{{ url_for('static', filename='js/job_details.js') }}"></script>
25 |   </body>
26 | </html>
27 | 
28 | 


--------------------------------------------------------------------------------
/Internship Project/templates/rec_forgot_password.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>Forgot Password</title>
 6 |     <link href="https://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
 7 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/rec_forgot_password.css') }}">
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <h1><u>Reset Your Password?</u></h1>
12 |     </header>
13 |     <main>
14 |       <div class="form-container">
15 |         <form id="forgot_password_form" action="/forgot_password" method="POST">
16 |           <div class="form-group">
17 |             <label for="username">Username</label>
18 |             <input type="text" id="username" name="username">
19 |           </div>
20 |           <div class="form-group">
21 |             <label for="new_password">New Password</label>
22 |             <input type="password" id="new_password" name="new_password">
23 |           </div>
24 |           <div class="form-group">
25 |             <label for="confirm_password">Confirm Password</label>
26 |             <input type="password" id="confirm_password" name="confirm_password">
27 |           </div>
28 |           <hr>
29 |           <button type="submit">Reset Password</button>
30 |         </form>
31 |       </div>
32 |     </main>
33 |     <footer>
34 |       <p></p>
35 |     </footer>
36 |     <script src="{{ url_for('static', filename='js/rec_forgot_password.js') }}"></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Internship Project/templates/recruiter_home.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>Recruiter Home</title>
 6 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/recruiter_home.css') }}">
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <div class="header-container">
11 |         <h1>HireMe</h1>
12 |         <button id="logout-btn">Logout</button>
13 |       </div>
14 |     </header>
15 |     <main>
16 |       <div class="sidebar">
17 |         <h2>Jobs</h2>
18 |         <h2 id="reports">Report</h2>
19 |       </div>
20 |       <div class="content">
21 |         <table id="jobsTable" border="1">
22 |           <thead>
23 |             <tr>
24 |               <th>ID</th>
25 |               <th>Job Role</th>
26 |               <th>Company</th>
27 |               <th>Package</th>
28 |               <th>Job Description</th>
29 |             </tr>
30 |           </thead>
31 |           <tbody>
32 |             <!-- Rows will be added dynamically here -->
33 |           </tbody>
34 |         </table>
35 |         <button id="create-job-btn">Create New Job</button>
36 |       </div>
37 |     </main>
38 |     <script src="{{ url_for('static', filename='js/recruiter_home.js') }}"></script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Internship Project/templates/recruiter_job_details.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/recruiter_job_details.css') }}">
 6 |     <title>Job Details</title>
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <h1>HireMe</h1>
11 |     </header>
12 |     <main class="container">
13 |       <div class="sidebar">
14 |         <h2>Job</h2>
15 |       </div>
16 |       <div class="job-details">
17 |         <h2 id="jobRole"></h2>
18 |           <p id="company"></p>
19 |           <p id="package"></p>
20 |           <p id="jobDescription"></p>
21 |           <button id="back-to-home">Back</button>
22 |       </div>
23 |     </main>
24 |     <script src="{{ url_for('static', filename='js/recruiter_job_details.js') }}"></script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Internship Project/templates/recruiter_login.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>HireMe - Recruiter Login</title>
 6 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/recruiter_login.css') }}">
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <h1><u>Welcome to HireMe</u></h1>
11 |     </header>
12 |     <main>
13 |       <div class="login-container">
14 |         <form id="recruiterLoginForm">
15 |           <div class="form-group">
16 |             <label for="username">Username:</label>
17 |             <input type="text" id="username" name="username">
18 |           </div>
19 |           <div class="form-group">
20 |             <label for="password">Password:</label>
21 |             <input type="password" id="password" name="password">
22 |           </div>
23 |           <hr>
24 |           <div class="form-group-buttons">
25 |             <button type="submit">LOGIN</button>
26 |             <button type="button" id="signupButton">SIGNUP</button>
27 |             <button type="button" id="forgotButton">FORGOT PASSWORD</button>
28 |           </div>
29 |           <p>Start your recruiting journey with HireMe, Today!</p>
30 |         </form>
31 |       </div>
32 |     </main>
33 |     <script src="{{ url_for('static', filename='js/recruiter_login.js') }}"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Internship Project/templates/recruiter_register.html:
--------------------------------------------------------------------------------
 1 | <html lang='en'>
 2 |   <head>
 3 |     <meta charset='UTF-8'>
 4 |     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 5 |     <title>Recruiter Registration</title>
 6 |      <link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet'>
 7 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/recruiter_register.css') }}">
 8 |   </head>
 9 |   <body>
10 |     <main> 
11 |       <div>
12 |         <h1>
13 |           <u>Hello</u><u>Welcome to HireMe</u>
14 |         </h1>
15 |       </div>
16 |       <div class='form-container'>
17 |         <form id='recruiter_register' action='/recruiter_register' method='POST'> 
18 |           <div class='form-row'>
19 |             <div class='form-column'>
20 |               <div class='form-group' >
21 |                 <label for='username'>Username</label>
22 |                 <input type='text' id='username' name='username'> 
23 |               </div>
24 |               <div class='form-group' >
25 |                 <label for='firstname'>First Name</label>
26 |                 <input type='text' id='firstname' name='firstname'> 
27 |               </div>
28 |               <div class='form-group' >
29 |                 <label for='lastname'>Last Name</label>
30 |                 <input type='text' id='lastname' name='lastname'> 
31 |               </div>
32 |                <div class='form-group' >
33 |                 <label for='email'>Email</label>
34 |                 <input type='email' id='email' name='email'> 
35 |               </div>
36 |                <div class='form-group' >
37 |                 <label for='password'>Set password</label>
38 |                 <input type='password' id='password' name='password'> 
39 |               </div>
40 |             </div>
41 |             <div calss='form-column'>
42 |               <div class='form-group' >
43 |                 <label for='phone_number'>Contact Number</label>
44 |                 <input type='text' id='phone_number' name='phone_number'>  
45 |               </div>
46 |               <div class='form-group' >
47 |                 <label for='company'>Company</label>
48 |                 <input type='text' id='company' name='company'>  
49 |               </div> 
50 |               <div class='form-group' id='confirm_pass_group'>
51 |                 <label for='confirm_password'>Confirm Password</label>
52 |                 <input type='password' id='confirm_password' name='confirm_password'> 
53 |               </div>
54 |             </div>
55 |           </div>
56 |           <hr>
57 |           <button type='submit'>SIGNUP</button>
58 |         </form>
59 |       </div>
60 |       <footer>
61 |         <p>Start your recruiting journey with HireMe, Today!</p>
62 |       </footer>
63 |     </main>
64 |     <script src="{{ url_for('static', filename='js/recruiter_register.js') }}"></script> 
65 |   </body>
66 | </html>


--------------------------------------------------------------------------------
/Internship Project/templates/report.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>Job Reports</title>
 6 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/report.css') }}">
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <div class="header-container">
11 |       <h1>HireMe Reports</h1>
12 |       <button id="logout-btn">Logout</button>
13 |     </div>
14 |     </header>
15 |   <main>
16 |     <div class="sidebar">
17 |       <h2>Reports</h2>
18 |     </div>
19 |     <div class="content">
20 |       <h2>Job Application Report</h2>
21 |       <table id="reportTable" border="1">
22 |         <thead>
23 |           <tr>
24 |             <th>Student Name</th>
25 |             <th>College</th>
26 |             <th>Job Role</th>
27 |             <th>Company</th>
28 |             <th>Package</th>
29 |             <th>Application Status</th>
30 |           </tr>
31 |         </thead>
32 |         <tbody></tbody>
33 |       </table>
34 |     </div>
35 |     <button id="back-to-index">Back</button>
36 |   </main>
37 |   <script src="{{ url_for('static', filename='js/report.js') }}"></script>
38 |   </body>
39 | </html>
40 | 
41 | 


--------------------------------------------------------------------------------
/Internship Project/templates/student_applications.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Karthikg1908/Full-Stack-Python-Developer-Intern/bd9396edc13b6200a5d90e4d1d096af4e927e737/Internship Project/templates/student_applications.html


--------------------------------------------------------------------------------
/Internship Project/templates/student_home.html:
--------------------------------------------------------------------------------
 1 | <html lang='en'>
 2 |   <head>
 3 |     <meta charset='UTF-8'>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5 |     <title>Student Home</title>
 6 |     <link rel="stylesheet" href="{{ url_for('static',filename='css/student_home.css') }}">
 7 |   </head>
 8 |   <body>
 9 |     <header>
10 |       <div class='header-container'>
11 |         <h1>HireMe</h1>
12 |         <button id='logout-btn'>Logout</button>
13 |       </div>
14 |     </header> 
15 |     <main>
16 |       <div class='sidebar'>
17 |         <h2>Jobs</h2>
18 |       </div>
19 |       <div class='content'>
20 |         <div class='job-list' id='jobsTableNotApplied'>
21 |           <h3>Jobs to Apply</h3>
22 |         </div>
23 |         <div class='job-list' id='jobsTableApplied'>
24 |           <h3>Jobs Applied</h3>
25 |         </div> 
26 |       </div>
27 |     </main>  
28 |     <script src="{{ url_for('static',filename='js/student_home.js') }}"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Internship Project/templates/student_login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>HireMe - Student Login</title>
 8 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/student_login.css') }}">
 9 | </head>
10 | 
11 | <body>
12 |     <header>
13 |         <h1><u>Welcome to HireMe</u></h1>
14 |     </header>
15 | 
16 |     <main>
17 |         <div class="login-container">
18 |             <form id="loginForm">
19 |                 <div class="form-group">
20 |                     <label for="usn">Student ID</label>
21 |                     <input type="text" id="usn" name="usn">
22 |                 </div>
23 | 
24 |                 <div class="form-group">
25 |                     <label for="password">Password</label>
26 |                     <input type="password" id="password" name="password">
27 |                 </div>
28 | 
29 |                 <hr>
30 | 
31 |                 <div class="form-group-buttons">
32 |                     <button type="submit">LOGIN</button>
33 |                     <button type="button" id="signupButton">SIGNUP</button>
34 |                     <button type="button" id="forgotButton">Forgot Password</button>
35 |                 </div>
36 |             </form>
37 |         </div>
38 |     </main>
39 | 
40 |     <p>Start your career with HireMe, Today!</p>
41 | 
42 |     <script src="{{ url_for('static', filename='js/student_login.js') }}"></script>
43 | </body>
44 | 
45 | </html>
46 | 


--------------------------------------------------------------------------------
/Internship Project/templates/student_register.html:
--------------------------------------------------------------------------------
 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>Student Registration</title>
 7 |     <link href="https://fonts.googleapis.com/css?family=Mallanna" rel="stylesheet">
 8 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/student_register.css') }}">
 9 | </head>
10 | <body>
11 |     <main>
12 |         <div>
13 |             <h1>
14 |                 <u>Hello</u>
15 |                 <u>Welcome to HireMe</u>
16 |             </h1>
17 |         </div>
18 |         <div class="form-container">
19 |             <form id="student_register" action="/student_register" method="POST">
20 |                 <div class="form-row">
21 |                     <div class="form-column">
22 |                         <div class="form-group">
23 |                             <label for="name">Student Name</label>
24 |                             <input type="text" id="name" name="name">
25 |                         </div>
26 |                         <div class="form-group">
27 |                             <label for="college_name">College Name</label>
28 |                             <input type="text" id="college_name" name="college_name">
29 |                         </div>
30 |                         <div class="form-group">
31 |                             <label for="usn">USN</label>
32 |                             <input type="text" id="usn" name="usn">
33 |                         </div>
34 |                         <div class="form-group">
35 |                             <label for="email">Email ID</label>
36 |                             <input type="email" id="email" name="email">
37 |                         </div>
38 |                         <div class="form-group">
39 |                             <label for="password">Set password</label>
40 |                             <input type="password" id="password" name="password">
41 |                         </div>
42 |                     </div>
43 |                     <div class="form-column">
44 |                         <div class="form-group">
45 |                             <label for="phone_number">Contact Number</label>
46 |                             <input type="text" id="phone_number" name="phone_number">
47 |                         </div>
48 |                         <div class="form-group">
49 |                             <label for="branch">Branch</label>
50 |                             <input type="text" id="branch" name="branch">
51 |                         </div>
52 |                         <div class="form-group-skills">
53 |                             <label for="skills">Skills</label>
54 |                             <select id="skills" name="skills" class="opion">
55 |                                 <option value="">Select your skills</option>
56 |                                 <option value="python">Python</option>
57 |                                 <option value="java">Java</option>
58 |                                 <option value="javascript">Javascript</option>
59 |                                 <option value="csharp">C#</option>
60 |                                 <option value="sql">SQL</option>
61 |                             </select>
62 |                         </div>
63 |                         <small>Select only one skill</small>
64 |                         <div class="form-group">
65 |                             <label for="confirm_password">Confirm Password</label>
66 |                             <input type="password" id="confirm_password" name="confirm_password">
67 |                         </div>
68 |                     </div>
69 |                 </div>
70 |                 <hr>
71 |                 <button type="submit">SIGNUP</button>
72 |             </form>
73 |         </div>
74 |         <footer>
75 |             <p>Start your career with HireMe, Today!</p>
76 |         </footer>
77 |     </main>
78 |     <script src="{{ url_for('static', filename='js/student_register.js') }}"></script>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/Internship Project/templates/student_reset_password.html:
--------------------------------------------------------------------------------
 1 | <html lang = "en">
 2 |   <head>
 3 |     <meta charset = "UTF-8">
 4 |     <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
 5 |     <title> Reset Password</title>
 6 |     <link rel = "stylesheet" href = "{{ url_for('static', filename='css/student_reset_password.css') }}">
 7 |     <link rel ="stylesheet" href = "https://fonts.googleapis.com/css?family=Mallanna">
 8 |   </head>
 9 |   <body>
10 |     <header>
11 |       <h1>
12 |         <u>
13 |           Reset Your Password
14 |         </u>
15 |       </h1>
16 |     </header>
17 |     <main>
18 |       <div class = "reset-container">
19 |         <form id = "resetPasswordForm">
20 |           <div class="form-group">
21 |             <label for="usn">Student ID</label>
22 |             <input type="text" id="usn" name="usn">
23 |           </div>
24 |           
25 |           <div class="form-group">
26 |             <label for="email">Email ID</label>
27 |             <input type="text" id="email" name="email">
28 |           </div>
29 | 
30 |           <div class="form-group">
31 |             <label for="new_password">New Password</label>
32 |             <input type="password" id="new_password" name="new_password">
33 |           </div>
34 |           <hr>
35 |           <div class="form-group-buttons">
36 |             <button type="button" id="resetPasswordBtn">Reset Password</button>
37 |           </div>
38 |         </form>
39 |       </div>
40 |        <p>Get back on track with HireMe</p>
41 |     </main>
42 |     <script src="{{ url_for('static', filename='js/student_reset_password.js') }}"></script>
43 |   </body>
44 | </html>
45 | 
46 | 


--------------------------------------------------------------------------------
/JavaScript/T1.html:
--------------------------------------------------------------------------------
 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>Background Color Picker</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             display: flex;
11 |             justify-content: center;
12 |             align-items: center;
13 |             height: 100vh;
14 |             background-color: #f9f9f9;
15 |             margin: 0;
16 |         }
17 | 
18 |         .color-picker {
19 |             text-align: center;
20 |             padding: 20px;
21 |         }
22 | 
23 |         input[type="color"] {
24 |             width: 50px;
25 |             height: 50px;
26 |             border: none;
27 |             border-radius: 50%;
28 |             cursor: pointer;
29 |         }
30 | 
31 |         #colorDisplay {
32 |             font-size: 1.5em;
33 |             margin-top: 20px;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 | 
39 |     <div class="color-picker">
40 |         <h1>Background Color Picker</h1>
41 |         <input type="color" id="colorInput" value="#ff0000">
42 |         <div id="colorDisplay"></div>
43 |     </div>
44 | 
45 |     <script>
46 |         const colorInput = document.getElementById('colorInput');
47 |         const colorDisplay = document.getElementById('colorDisplay');
48 |         
49 |         colorInput.addEventListener('input', () => {
50 |             const selectedColor = colorInput.value;
51 |             colorDisplay.textContent = selectedColor.toUpperCase();
52 |             document.body.style.backgroundColor = selectedColor;
53 |         });
54 |     </script>
55 | 
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/JavaScript/T10.html:
--------------------------------------------------------------------------------
 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>To-Do List</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .todo-list {
17 |             text-align: center;
18 |         }
19 |         input, button {
20 |             margin: 10px;
21 |             padding: 10px;
22 |             font-size: 1em;
23 |         }
24 |         button {
25 |             border: none;
26 |             border-radius: 5px;
27 |             background-color: #007bff;
28 |             color: #fff;
29 |             cursor: pointer;
30 |         }
31 |         button:hover {
32 |             background-color: #0056b3;
33 |         }
34 |         #taskList {
35 |             list-style-type: none;
36 |             padding: 0;
37 |         }
38 |         #taskList li {
39 |             margin-bottom: 5px;
40 |             padding: 5px;
41 |             background-color: #f0f0f0;
42 |             border-radius: 5px;
43 |         }
44 |     </style>
45 | </head>
46 | <body>
47 | 
48 |     <div class="todo-list">
49 |         <h1>To-Do List</h1>
50 |         <input type="text" id="taskInput" placeholder="Enter task">
51 |         <button onclick="addTask()">Add Task</button>
52 |         <ul id="taskList"></ul>
53 |     </div>
54 | 
55 |     <script>
56 |         function addTask() {
57 |             const taskInput = document.getElementById('taskInput');
58 |             const taskText = taskInput.value.trim();
59 |             if (taskText === '') {
60 |                 alert('Please enter a task');
61 |                 return;
62 |             }
63 |             const taskList = document.getElementById('taskList');
64 |             const newTask = document.createElement('li');
65 |             newTask.textContent = taskText;
66 |             taskList.appendChild(newTask);
67 |             taskInput.value = '';
68 |         }
69 |     </script>
70 | 
71 | </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/JavaScript/T11.html:
--------------------------------------------------------------------------------
 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>Name Reverser</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #f5f5f5;
15 |             font-family: Arial, sans-serif;
16 |         }
17 |         .container {
18 |             text-align: center;
19 |         }
20 |         input {
21 |             padding: 10px;
22 |             width: 300px;
23 |             font-size: 16px;
24 |             border: 1px solid #ccc;
25 |             border-radius: 5px;
26 |         }
27 |         button {
28 |             padding: 10px 15px;
29 |             margin-left: 10px;
30 |             font-size: 16px;
31 |             cursor: pointer;
32 |             background-color: #28a745;
33 |             color: white;
34 |             border: none;
35 |             border-radius: 5px;
36 |         }
37 |         button:hover {
38 |             background-color: #218838;
39 |         }
40 |         p {
41 |             margin-top: 20px;
42 |             font-size: 18px;
43 |         }
44 |     </style>
45 | </head>
46 | <body>
47 |     <div class="container">
48 |         <h1>Name Reverser</h1>
49 |         <input id="nameInput" type="text" placeholder="Enter your name">
50 |         <button id="reverseButton">Reverse Name</button>
51 |         <p id="reversedOutput"></p>
52 |     </div>
53 | 
54 |     <script>
55 |         document.getElementById('reverseButton').onclick = () => {
56 |             const name = document.getElementById('nameInput').value;
57 |             document.getElementById('reversedOutput').textContent = name.split('').reverse().join('');
58 |         }
59 |     </script>
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/JavaScript/T12.html:
--------------------------------------------------------------------------------
 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>Music Playlist</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #f0f0f0;
15 |             font-family: Arial, sans-serif;
16 |         }
17 |         .music-playlist {
18 |             text-align: center;
19 |             width: 80%;
20 |             max-width: 600px;
21 |         }
22 |         input {
23 |             padding: 10px;
24 |             margin: 10px 0;
25 |             width: 80%;
26 |         }
27 |         button {
28 |             background-color: #1155CC;
29 |             color: white;
30 |             border-radius: 10px;
31 |             padding: 10px 20px;
32 |             font-size: 16px;
33 |             cursor: pointer;
34 |         }
35 |         ul {
36 |             list-style-type: none;
37 |             padding: 0;
38 |         }
39 |         li {
40 |             padding: 10px;
41 |             border: 1px solid #ddd; 
42 |             margin-top: 5px;
43 |         }
44 |     </style>
45 | </head>
46 | <body>
47 |     <div class="music-playlist">
48 |         <h1>Music Playlist</h1>
49 |         <input type="text" id="song-name" placeholder="Enter song name">
50 |         <button id="add-song">Add Song</button>
51 |         <ul id="playlist"></ul>
52 |     </div>
53 | 
54 |     <script>
55 |         const songInput = document.getElementById('song-name');
56 |         const playlist = document.getElementById('playlist');
57 | 
58 |         document.getElementById('add-song').addEventListener('click', () => {
59 |             const songName = songInput.value.trim();
60 |             if (songName) {
61 |                 const li = document.createElement('li');
62 |                 li.textContent = songName;
63 |                 playlist.appendChild(li);
64 |                 songInput.value = '';
65 |             }
66 |         });
67 |     </script>
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/JavaScript/T13.html:
--------------------------------------------------------------------------------
  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>Calculator</title>
  7 |     <style>
  8 |         .calculator {
  9 |             width: 200px;
 10 |             margin: 50px auto;
 11 |             padding: 10px;
 12 |             border-radius: 10px;
 13 |             background-color: #f2f2f2;
 14 |             box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
 15 |         }
 16 |         #display {
 17 |             width: 90%;
 18 |             height: 50px;
 19 |             text-align: right;
 20 |             font-size: 24px;
 21 |             padding: 10px;
 22 |             margin-bottom: 10px;
 23 |             border: none;
 24 |             background-color: #e0e0e0;
 25 |             border-radius: 5px;
 26 |         }
 27 |         .buttons {
 28 |             display: grid;
 29 |             grid-template-columns: repeat(4, 1fr);
 30 |             grid-gap: 10px;
 31 |         }
 32 |         button {
 33 |             width: 100%;
 34 |             padding: 15px;
 35 |             font-size: 18px;
 36 |             border: none;
 37 |             background-color: #3498db;
 38 |             color: white;
 39 |             border-radius: 5px;
 40 |             cursor: pointer;
 41 |             transition: background-color 0.3s;
 42 |         }
 43 |         button:hover {
 44 |             background-color: #2980b9;
 45 |         }
 46 |         button:active {
 47 |             background-color: #1f618d;
 48 |         }
 49 |         button:focus {
 50 |             outline: none;
 51 |         }
 52 |         button:nth-child(4n) {
 53 |             background-color: #f39c12;
 54 |         }
 55 |         button:nth-child(4n):hover {
 56 |             background-color: #e67e22;
 57 |         }
 58 |         button:nth-child(4n):active {
 59 |             background-color: #d35400;
 60 |         } 
 61 |     </style>
 62 | </head>
 63 | <body>
 64 | 
 65 |     <div class="calculator">
 66 |         <input type="text" id="display" disabled>
 67 |         <div class="buttons">
 68 |             <button onclick="appendNumber('1')">1</button>
 69 |             <button onclick="appendNumber('2')">2</button>
 70 |             <button onclick="appendNumber('3')">3</button>
 71 |             <button onclick="appendOperator('+')">+</button>
 72 |             <button onclick="appendNumber('4')">4</button>
 73 |             <button onclick="appendNumber('5')">5</button>
 74 |             <button onclick="appendNumber('6')">6</button>
 75 |             <button onclick="appendOperator('-')">-</button>
 76 |             <button onclick="appendNumber('7')">7</button>
 77 |             <button onclick="appendNumber('8')">8</button>
 78 |             <button onclick="appendNumber('9')">9</button>
 79 |             <button onclick="appendOperator('*')">*</button>
 80 |             <button onclick="appendNumber('0')">0</button>
 81 |             <button onclick="clearDisplay()">C</button>
 82 |             <button onclick="calculateResult()">=</button>
 83 |             <button onclick="appendOperator('/')">/</button>
 84 |         </div>
 85 |     </div>
 86 | 
 87 |     <script>
 88 |         let display = document.getElementById('display');
 89 |         
 90 |         function appendNumber(number) {
 91 |             display.value += number;    
 92 |         }
 93 | 
 94 |         function appendOperator(operator) {
 95 |             display.value += ' ' + operator + ' ';
 96 |         }
 97 | 
 98 |         function clearDisplay() {
 99 |             display.value = '';
100 |         }
101 | 
102 |         function calculateResult() {
103 |             try {
104 |                 display.value = eval(display.value);
105 |             } catch (error) {
106 |                 display.value = 'Error';
107 |             }
108 |         }
109 |     </script>
110 | 
111 | </body>
112 | </html>
113 | 


--------------------------------------------------------------------------------
/JavaScript/T14.html:
--------------------------------------------------------------------------------
 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>Random Joke Generator</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #f4f4f4;
15 |             font-family: Arial, sans-serif; 
16 |         }
17 |         .joke-generator { 
18 |             text-align: center;
19 |             width: 80%;
20 |             max-width: 600px;
21 |         }
22 |         button {
23 |             background-color: #1155CC;
24 |             color: white;
25 |             border-radius: 10px; 
26 |             padding: 10px 20px;
27 |             font-size: 16px;
28 |             cursor: pointer;
29 |         }
30 |         p {
31 |             margin-top: 20px;
32 |             font-size: 18px;
33 |         }
34 |     </style>
35 | </head>
36 | <body>
37 | 
38 |     <div class="joke-generator">
39 |         <h1>Random Joke Generator</h1>
40 |         <button id="get-joke">Get a Joke</button>
41 |         <p id="joke"></p>
42 |     </div>
43 | 
44 |     <script>
45 |         const jokes = [
46 |             "Why do not scientists trust atoms? Because they make up everything!",
47 |             "How does a penguin build its house? Igloos it together!",
48 |             "Why was the math book sad? Because it had too many problems.",
49 |             "Why do not skeletons fight each other? They do not have the guts.",
50 |             "What do you call fake spaghetti? An impasta!"
51 |         ];
52 | 
53 |         document.getElementById('get-joke').addEventListener('click', () => {
54 |             const randomIndex = Math.floor(Math.random() * jokes.length);
55 |             document.getElementById('joke').textContent = jokes[randomIndex];
56 |         });
57 |     </script>
58 | 
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/JavaScript/T15.html:
--------------------------------------------------------------------------------
  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>Mad Libs Game</title>
  7 |     <style>
  8 |         body {
  9 |             display: flex;
 10 |             justify-content: center;
 11 |             align-items: center;
 12 |             height: 100vh; 
 13 |             background-color: #f9f9f9;
 14 |             font-family: Arial, sans-serif;
 15 |             margin: 0;
 16 |         }
 17 |         .mad-libs-game {
 18 |             text-align: center;
 19 |         }
 20 |         form {
 21 |             margin-top: 20px;
 22 |             display: flex;
 23 |             flex-direction: column;
 24 |             align-items: center;
 25 |         }
 26 |         .form-group {
 27 |             display: flex;
 28 |             flex-direction: column;
 29 |             align-items: flex-start;
 30 |             margin: 10px 0;
 31 |         }
 32 |         label {
 33 |             margin-bottom: 5px;
 34 |             font-weight: bold;
 35 |         }
 36 |         input {
 37 |             padding: 10px;
 38 |             font-size: 1em;
 39 |             width: 300px;
 40 |         }
 41 |         button {
 42 |             margin-top: 20px;
 43 |             padding: 10px 20px;
 44 |             font-size: 1em;
 45 |             border: none;
 46 |             border-radius: 5px;
 47 |             background-color: #007bff;
 48 |             color: #fff;
 49 |             cursor: pointer;
 50 |         }
 51 |         button:hover {
 52 |             background-color: #0056b3;
 53 |         }
 54 |         #story {
 55 |             margin-top: 20px;
 56 |             font-size: 1.2em;
 57 |         }
 58 |     </style>
 59 | </head>
 60 | <body>
 61 | 
 62 |     <div class="mad-libs-game">
 63 |         <h1>Mad Libs Game</h1>
 64 |         <form id="madLibsForm" onsubmit="generateStory(event)">
 65 |             <div class="form-group">
 66 |                 <label for="noun">Noun:</label>
 67 |                 <input type="text" id="noun" name="noun" required>
 68 |             </div>
 69 |             <div class="form-group">
 70 |                 <label for="verb">Verb:</label>
 71 |                 <input type="text" id="verb" name="verb" required>
 72 |             </div>
 73 |             <div class="form-group">
 74 |                 <label for="adjective">Adjective:</label>
 75 |                 <input type="text" id="adjective" name="adjective" required>
 76 |             </div>
 77 |             <div class="form-group">
 78 |                 <label for="adverb">Adverb:</label>
 79 |                 <input type="text" id="adverb" name="adverb" required>
 80 |             </div>
 81 |             <button type="submit">Generate Story</button>
 82 |         </form>
 83 |         <div id="story"></div>
 84 |     </div>
 85 | 
 86 |     <script>
 87 |         function generateStory(event) {
 88 |             event.preventDefault();
 89 |             const noun = document.getElementById('noun').value.trim();
 90 |             const verb = document.getElementById('verb').value.trim();
 91 |             const adjective = document.getElementById('adjective').value.trim();
 92 |             const adverb = document.getElementById('adverb').value.trim();
 93 | 
 94 |             if (noun === '' || verb === '' || adjective === '' || adverb === '') {
 95 |                 alert('Please fill in all fields');
 96 |                 return;
 97 |             }
 98 | 
 99 |             const story = `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb} ${adverb}.`;
100 |             document.getElementById('story').textContent = story;
101 |         }
102 |     </script>
103 | 
104 | </body>
105 | </html>
106 | 


--------------------------------------------------------------------------------
/JavaScript/T16.html:
--------------------------------------------------------------------------------
 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>Word Counter</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             display: flex;
11 |             flex-direction: column;
12 |             align-items: center;
13 |             background-color: #f4f4f4;
14 |             height: 100vh;
15 |             margin: 0;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         h1 {
20 |             margin-bottom: 20px;
21 |         }
22 |         textarea {
23 |             width: 100%;
24 |             max-width: 600px;
25 |             height: 200px;
26 |             padding: 10px;
27 |             font-size: 16px;
28 |             border: 1px solid #ccc;
29 |             border-radius: 4px;
30 |         }
31 |         p {
32 |             font-size: 1.2em;
33 |             margin-top: 10px;
34 |         }
35 |     </style>
36 | </head>
37 | <body>
38 | 
39 |     <h1>Word Counter</h1>
40 |     <textarea id="textInput" placeholder="Type or paste text here..."></textarea>
41 |     
42 |     <p>Word Count: 
43 |         <span id="wordCount">0</span>
44 |     </p>
45 |     
46 |     <p>Character Count:
47 |         <span id="charCount">0</span>
48 |     </p>
49 | 
50 |     <script>
51 |         const textInput = document.getElementById('textInput');
52 |         const wordCount = document.getElementById('wordCount');
53 |         const charCount = document.getElementById('charCount');
54 | 
55 |         textInput.addEventListener('input', () => {
56 |             const text = textInput.value;
57 |             wordCount.textContent = text.split(/\s+/).filter(word => word).length; // Count words
58 |             charCount.textContent = text.length; // Count characters
59 |         });
60 |     </script>
61 | 
62 | </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/JavaScript/T17.html:
--------------------------------------------------------------------------------
 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>Age Calculator</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: #f2f2f2;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |             margin: 0;
16 |         }
17 |         .container {
18 |             background-color: white;
19 |             padding: 20px;
20 |             border-radius: 8px;
21 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22 |             text-align: center;
23 |         }
24 |         input[type="date"] {
25 |             padding: 10px;
26 |             border: 1px solid #ccc;
27 |             border-radius: 4px;
28 |         }
29 |         button {
30 |             background-color: #4CAF50;
31 |             color: white;
32 |             border: none;
33 |             padding: 10px 20px;
34 |             text-align: center;
35 |             text-decoration: none;
36 |             display: inline-block;
37 |             font-size: 16px;
38 |             margin: 10px 0;
39 |             cursor: pointer;
40 |             border-radius: 4px;
41 |         }
42 |         button:hover {
43 |             background-color: #45a049;
44 |         }
45 |         #result {
46 |             font-size: 18px;
47 |             font-weight: bold;
48 |         }
49 |     </style>
50 | </head>
51 | <body>
52 | 
53 |     <div class="container">
54 |         <h1>Age Calculator</h1>
55 |         <label for="birthdate">Enter your birthdate:</label>
56 |         <input type="date" id="birthdate">
57 |         <button id="calculate">Calculate Age</button>
58 |         <p id="result"></p>
59 |     </div>
60 | 
61 |     <script>
62 |         document.getElementById('calculate').addEventListener('click', function() {
63 |             const birthdateInput = document.getElementById('birthdate').value;
64 |             const resultElement = document.getElementById('result');
65 |             if (!birthdateInput) {
66 |                 resultElement.textContent = 'Please enter a valid birthdate';
67 |                 return;
68 |             }
69 |             const birthdate = new Date(birthdateInput);
70 |             const today = new Date();
71 |             let age = today.getFullYear() - birthdate.getFullYear();
72 |             const monthDifference = today.getMonth() - birthdate.getMonth();
73 |             if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthdate.getDate())) {
74 |                 age--;
75 |             }
76 |             resultElement.textContent = `You are ${age} years old`;
77 |         });
78 |     </script>
79 | 
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/JavaScript/T18.html:
--------------------------------------------------------------------------------
 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>Pomodoro Timer</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .pomodoro-timer {
17 |             text-align: center;
18 |         }
19 |         #timer {
20 |             font-size: 4em;
21 |             margin: 20px 0;
22 |         }
23 |         button {
24 |             padding: 10px 20px;
25 |             font-size: 1em;
26 |             margin: 10px;
27 |             border: none;
28 |             border-radius: 5px;
29 |             background-color: #007bff;
30 |             color: #fff;
31 |             cursor: pointer;
32 |         }
33 |         button:hover {
34 |             background-color: #0056b3;
35 |         }
36 |     </style>
37 | </head>
38 | <body>
39 |     <div class="pomodoro-timer">
40 |         <h1>Pomodoro Timer</h1>
41 |         <div id="timer">25:00</div>
42 |         <button onclick="startTimer()">Start</button>
43 |         <button onclick="stopTimer()">Stop</button>
44 |     </div>
45 | 
46 |     <script>
47 |         let timerInterval;
48 |         let minutes = 25;
49 |         let seconds = 0;
50 | 
51 |         function updateTimer() {
52 |             const timerElement = document.getElementById('timer');
53 |             if (seconds === 0) {
54 |                 if (minutes === 0) {
55 |                     clearInterval(timerInterval);
56 |                     alert('Pomodoro session complete!');
57 |                     return;
58 |                 }
59 |                 minutes--;
60 |                 seconds = 59;
61 |             } else {
62 |                 seconds--;
63 |             }
64 |             timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
65 |         }
66 | 
67 |         function startTimer() {
68 |             timerInterval = setInterval(updateTimer, 1000);
69 |         }
70 | 
71 |         function stopTimer() {
72 |             clearInterval(timerInterval);
73 |         }
74 |     </script>
75 | </body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/JavaScript/T19.html:
--------------------------------------------------------------------------------
 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>TEMPERATURE CONVERTER</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 | 
17 |         .temperature-converter {
18 |             text-align: center;
19 |         }
20 | 
21 |         input, select, button {
22 |             margin: 10px;
23 |             padding: 10px;
24 |             font-size: 1em;
25 |         }
26 | 
27 |         button {
28 |             border: none;
29 |             border-radius: 5px;
30 |             background-color: #007bff;
31 |             color: #fff;
32 |             cursor: pointer;
33 |         }
34 | 
35 |         button:hover {
36 |             background-color: #0056b3;
37 |         }
38 | 
39 |         #result {
40 |             margin-top: 20px;
41 |             font-size: 1.2em;
42 |         }
43 |     </style>
44 | </head>
45 | <body>
46 |     <div class="temperature-converter">
47 |         <h1>TEMPERATURE CONVERTER</h1>
48 |         <input type="number" id="temperature" placeholder="Enter temperature">
49 |         <select id="unit">
50 |             <option value="celsius">Celsius</option>
51 |             <option value="fahrenheit">Fahrenheit</option>
52 |         </select>
53 |         <button onclick="convertTemperature()">Convert</button>
54 |         <div id="result"></div>
55 |     </div>
56 | 
57 |     <script>
58 |         function convertTemperature() {
59 |             const temperatureInput = document.getElementById('temperature');
60 |             const unit = document.getElementById('unit').value;
61 |             const temperature = parseFloat(temperatureInput.value);
62 |             if (isNaN(temperature)) {
63 |                 document.getElementById('result').textContent = 'Please enter a valid temperature';
64 |                 return;
65 |             }
66 |             let convertedTemperature;
67 |             let convertedUnit;
68 |             if (unit === 'celsius') {
69 |                 convertedTemperature = (temperature * 9 / 5) + 32;
70 |                 convertedUnit = 'Fahrenheit';
71 |             } else {
72 |                 convertedTemperature = (temperature - 32) * 5 / 9;
73 |                 convertedUnit = 'Celsius';
74 |             }
75 |             document.getElementById('result').textContent = `${temperature} ${unit} is ${convertedTemperature.toFixed(1)} ${convertedUnit}`;
76 |         }
77 |     </script>
78 | </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/JavaScript/T2.html:
--------------------------------------------------------------------------------
 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>Hex to RGB Converter</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: #f2f2f2;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |             margin: 0;
16 |         }
17 | 
18 |         .container {
19 |             background-color: white;
20 |             padding: 20px;
21 |             border-radius: 8px;
22 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23 |             text-align: center;
24 |         }
25 | 
26 |         input[type="text"] {
27 |             padding: 10px;
28 |             border: 1px solid #ccc;
29 |             border-radius: 4px;
30 |         }
31 | 
32 |         button {
33 |             background-color: #4CAF50;
34 |             color: white;
35 |             border: none;
36 |             padding: 10px 20px;
37 |             text-align: center;
38 |             text-decoration: none;
39 |             display: inline-block;
40 |             font-size: 16px;
41 |             margin: 10px 0;
42 |             cursor: pointer;
43 |             border-radius: 4px;
44 |         }
45 | 
46 |         button:hover {
47 |             background-color: #45a049;
48 |         }
49 | 
50 |         #result {
51 |             font-size: 18px;
52 |             font-weight: bold;
53 |         }
54 |     </style>
55 | </head>
56 | <body>
57 | 
58 |     <div class="container">
59 |         <h1>Hex to RGB Converter</h1>
60 |         <label for="hexInput">Enter hex color code:</label>
61 |         <input type="text" id="hexInput" placeholder="#FFFFFF">
62 |         <button id="convertButton">Convert</button>
63 |         <p id="result"></p>
64 |     </div>
65 | 
66 |     <script>
67 |         document.getElementById('convertButton').addEventListener('click', function() {
68 |             const hexInput = document.getElementById('hexInput').value;
69 |             const resultElement = document.getElementById('result');
70 |             
71 |             if (!/^#([0-9A-Fa-f]{6})$/.test(hexInput)) {
72 |                 resultElement.textContent = 'Please enter a valid hex color code (eg: #FFFFFF)';
73 |                 return;
74 |             }
75 |             
76 |             const hex = hexInput.slice(1);
77 |             const r = parseInt(hex.slice(0, 2), 16);
78 |             const g = parseInt(hex.slice(2, 4), 16);
79 |             const b = parseInt(hex.slice(4, 6), 16);
80 |             
81 |             resultElement.textContent = `RGB: ${r}, ${g}, ${b}`;
82 |         });
83 |     </script>
84 | 
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/JavaScript/T20.html:
--------------------------------------------------------------------------------
 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>Notes App</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             display: flex;
11 |             flex-direction: column;
12 |             align-items: center;
13 |             background-color: #f4f4f4;
14 |             height: 100vh;
15 |             margin: 0;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         h1 {
20 |             margin-bottom: 20px;
21 |         }
22 |         input {
23 |             padding: 10px;
24 |             margin-bottom: 10px;
25 |             width: 200px;
26 |         }
27 |         button {
28 |             padding: 10px 20px;
29 |             background-color: #007bff;
30 |             color: white;
31 |             border: none;
32 |             border-radius: 4px;
33 |             cursor: pointer;
34 |         }
35 |         button:hover {
36 |             background-color: #0056b3;
37 |         }
38 |         ul {
39 |             list-style-type: none;
40 |             padding: 0;
41 |             width: 100%;
42 |             max-width: 300px;
43 |         }
44 |         li {
45 |             background-color: white;
46 |             padding: 10px;
47 |             margin-bottom: 10px;
48 |             border-radius: 4px;
49 |             box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
50 |             display: flex;
51 |             justify-content: space-between;
52 |             align-items: center;
53 |         }
54 |         li button {
55 |             background-color: red;
56 |             border: none;
57 |             color: white;
58 |             padding: 5px 10px;
59 |             border-radius: 4px;
60 |             cursor: pointer;
61 |         }
62 |         li button:hover {
63 |             background-color: darkred;
64 |         }
65 |     </style>
66 | </head>
67 | <body>
68 |     <h1>Notes App</h1>
69 |     <input type="text" id="noteInput" placeholder="Enter note">
70 |     <button id="addNote">Add Note</button>
71 |     <ul id="notesList"></ul>
72 | 
73 |     <script>
74 |         const noteInput = document.getElementById('noteInput');
75 |         const addNote = document.getElementById('addNote');
76 |         const notesList = document.getElementById('notesList');
77 | 
78 |         const createNoteItem = (text) => {
79 |             const li = document.createElement('li');
80 |             li.textContent = text;
81 |             const deleteButton = document.createElement('button');
82 |             deleteButton.textContent = 'Delete';
83 |             deleteButton.addEventListener('click', () => notesList.removeChild(li));
84 |             li.appendChild(deleteButton);
85 |             return li;
86 |         };
87 | 
88 |         const addNewNote = () => {
89 |             const noteText = noteInput.value.trim();
90 |             if (!noteText) return;
91 |             notesList.appendChild(createNoteItem(noteText));
92 |             noteInput.value = '';
93 |         };
94 | 
95 |         addNote.addEventListener('click', addNewNote);
96 |     </script>
97 | </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/JavaScript/T21.html:
--------------------------------------------------------------------------------
 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>Rock Paper Scissors</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 | 
17 |         .rps-game {
18 |             text-align: center;
19 |         }
20 | 
21 |         .choices {
22 |             margin: 20px 0;
23 |         }
24 | 
25 |         button {
26 |             padding: 10px 20px;
27 |             font-size: 1em;
28 |             margin: 0 10px;
29 |             border: none;
30 |             border-radius: 5px;
31 |             background-color: #007bff;
32 |             color: #fff;
33 |             cursor: pointer;
34 |         }
35 | 
36 |         button:hover {
37 |             background-color: #0056b3;
38 |         }
39 | 
40 |         #result {
41 |             margin-top: 20px;
42 |             font-size: 1.2em;
43 |         }
44 |     </style>
45 | </head>
46 | <body>
47 |     <div class="rps-game">
48 |         <h1>Rock Paper Scissors</h1>
49 |         <div class="choices">
50 |             <button onclick="playGame('rock')">Rock</button>
51 |             <button onclick="playGame('paper')">Paper</button>
52 |             <button onclick="playGame('scissors')">Scissors</button>
53 |         </div>
54 |         <div id="result"></div>
55 |     </div>
56 | 
57 |     <script>
58 |         function playGame(playerChoice) {
59 |             const choices = ['rock', 'paper', 'scissors'];
60 |             const randomIndex = Math.floor(Math.random() * choices.length);
61 |             const computerChoice = choices[randomIndex];
62 |             let result;
63 | 
64 |             if (playerChoice === computerChoice) {
65 |                 result = 'It is a tie!';
66 |             } else if (
67 |                 (playerChoice === 'rock' && computerChoice === 'scissors') ||
68 |                 (playerChoice === 'paper' && computerChoice === 'rock') ||
69 |                 (playerChoice === 'scissors' && computerChoice === 'paper')) {
70 |                 result = 'You win!';
71 |             } else {
72 |                 result = 'You lose!';
73 |             }
74 | 
75 |             document.getElementById('result').textContent = `You chose ${playerChoice}. Computer chose ${computerChoice}. ${result}`;
76 |         }
77 |     </script>
78 | </body>
79 | </html>
80 | 


--------------------------------------------------------------------------------
/JavaScript/T22.html:
--------------------------------------------------------------------------------
 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>Shopping List</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 | 
17 |         .shopping-list {
18 |             text-align: center;
19 |         }
20 | 
21 |         input, button {
22 |             margin: 10px;
23 |             padding: 10px;
24 |             font-size: 1em;
25 |         }
26 | 
27 |         button {
28 |             border: none;
29 |             border-radius: 5px;
30 |             background-color: #007bff;
31 |             color: #fff;
32 |             cursor: pointer;
33 |         }
34 | 
35 |         button:hover {
36 |             background-color: #0056b3;
37 |         }
38 | 
39 |         ul {
40 |             list-style-type: none;
41 |             padding: 0;
42 |         }
43 | 
44 |         li {
45 |             margin: 10px;
46 |             padding: 10px;
47 |             background-color: #f0f0f0;
48 |             border-radius: 5px;
49 |         }
50 | 
51 |         li:hover {
52 |             background-color: #e0e0e0;
53 |         }
54 |     </style>
55 | </head>
56 | <body>
57 | 
58 |     <div class="shopping-list">
59 |         <h1>Shopping List</h1>
60 |         <form id="addItemForm" onsubmit="addItem(event)">
61 |             <input type="text" id="item" placeholder="Add an item">
62 |             <button type="submit">Add</button>
63 |         </form>
64 |         <ul id="shoppingItems"></ul>
65 |     </div>
66 | 
67 |     <script>
68 |         function addItem(event) {
69 |             event.preventDefault();
70 |             const itemInput = document.getElementById('item');
71 |             const itemName = itemInput.value.trim();
72 |             if (itemName === '') {
73 |                 alert('Please enter an item name.');
74 |                 return;
75 |             }
76 |             const shoppingList = document.getElementById('shoppingItems');
77 |             const li = document.createElement('li');
78 |             li.textContent = itemName;
79 |             shoppingList.appendChild(li);
80 |             itemInput.value = '';
81 |         }
82 |     </script>
83 | 
84 | </body>
85 | </html>
86 | 
87 | 


--------------------------------------------------------------------------------
/JavaScript/T23.html:
--------------------------------------------------------------------------------
 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>Expense Tracker</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 | 
17 |         .expense-tracker {
18 |             text-align: center;
19 |         }
20 | 
21 |         input, button {
22 |             margin: 10px;
23 |             padding: 10px;
24 |             font-size: 1em;
25 |         }
26 | 
27 |         button {
28 |             border: none;
29 |             border-radius: 5px;
30 |             background-color: #007bff;
31 |             color: #fff;
32 |             cursor: pointer;
33 |         }
34 | 
35 |         button:hover {
36 |             background-color: #0056b3;
37 |         }
38 | 
39 |         #expenseList {
40 |             list-style-type: none;
41 |             padding: 0;
42 |         }
43 | 
44 |         #expenseList li {
45 |             margin-bottom: 5px;
46 |         }
47 | 
48 |         #totalExpenses {
49 |             font-size: 1.2em;
50 |             margin-top: 10px;
51 |         }
52 |     </style>
53 | </head>
54 | <body>
55 |     <div class="expense-tracker">
56 |         <h1>Expense Tracker</h1>
57 |         <input type="text" id="expenseDescription" placeholder="Expense description">
58 |         <input type="number" id="expenseAmount" placeholder="Expense amount">
59 |         <button onclick="addExpense()">Add Expense</button>
60 |         <ul id="expenseList"></ul>
61 |         <div id="totalExpenses">Total: $0.00</div>
62 |     </div>
63 | 
64 |     <script>
65 |         let totalExpenses = 0;
66 |         function addExpense() {
67 |             const description = document.getElementById('expenseDescription').value;
68 |             const amount = parseInt(document.getElementById('expenseAmount').value);
69 |             if (!description || isNaN(amount) || amount <= 0) {
70 |                 alert('Please enter a valid description and amount');
71 |                 return;
72 |             }
73 |             const expenseList = document.getElementById('expenseList');
74 |             const newExpense = document.createElement('li');
75 |             newExpense.textContent = `${description}: $${amount.toFixed(2)}`;
76 |             expenseList.appendChild(newExpense);
77 |             totalExpenses += amount;
78 |             document.getElementById('totalExpenses').textContent = `Total: $${totalExpenses.toFixed(2)}`;
79 |             document.getElementById('expenseDescription').value = '';
80 |             document.getElementById('expenseAmount').value = '';
81 |         }
82 |     </script>
83 | </body>
84 | </html>
85 | 
86 | 


--------------------------------------------------------------------------------
/JavaScript/T24.html:
--------------------------------------------------------------------------------
 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>BMI Calculator</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .bmi-calculator {
17 |             text-align: center;
18 |         }
19 |         input, button {
20 |             margin: 10px;
21 |             padding: 10px;
22 |             font-size: 1em;
23 |         }
24 |         button {
25 |             border: none;
26 |             border-radius: 5px;
27 |             background-color: #007bff;
28 |             color: #fff;
29 |             cursor: pointer;
30 |         }
31 |         button:hover {
32 |             background-color: #0056b3;
33 |         }
34 |         #result {
35 |             margin-top: 20px;
36 |             font-size: 1.2em;
37 |         }
38 |     </style>
39 | </head>
40 | <body>
41 |     <div class="bmi-calculator">
42 |         <h1>BMI Calculator</h1>
43 |         <input type="number" id="weight" placeholder="Weight (kg)">
44 |         <input type="number" id="height" placeholder="Height (cm)">
45 |         <button onclick="calculateBMI()">Calculate BMI</button>
46 |         <div id="result"></div>
47 |     </div>
48 |     <script>
49 |         function calculateBMI() {
50 |             const weight = parseFloat(document.getElementById('weight').value);
51 |             const height = parseFloat(document.getElementById('height').value) / 100;
52 |             if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
53 |                 document.getElementById('result').textContent = 'Please enter valid weight and height';
54 |                 return;
55 |             }
56 |             const bmi = weight / (height * height);
57 |             const bmiResult = `Your BMI: ${bmi.toFixed(1)}`;
58 |             let bmiCategory;
59 |             if (bmi < 18.5) {
60 |                 bmiCategory = 'Underweight';
61 |             } else if (bmi < 24.9) {
62 |                 bmiCategory = 'Normal weight';
63 |             } else if (bmi < 29.9) {
64 |                 bmiCategory = 'Overweight';
65 |             } else {
66 |                 bmiCategory = 'Obese';
67 |             }
68 |             document.getElementById('result').textContent = `${bmiResult} (${bmiCategory})`;
69 |         }
70 |     </script>
71 | </body>
72 | </html>
73 | 
74 | 


--------------------------------------------------------------------------------
/JavaScript/T25.html:
--------------------------------------------------------------------------------
 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>Timer</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .countdown-container {
17 |             text-align: center;
18 |         }
19 |         input {
20 |             display: block;
21 |             width: 200px;
22 |             padding: 10px;
23 |             margin: 10px auto;
24 |             border: 1px solid #007bff;
25 |             border-radius: 5px;
26 |         }
27 |         button {
28 |             padding: 10px 20px;
29 |             font-size: 1em;
30 |             border: none;
31 |             border-radius: 5px;
32 |             background-color: #007bff;
33 |             color: #fff;
34 |             cursor: pointer;
35 |         }
36 |         button:hover {
37 |             background-color: #0056b3;
38 |         }
39 |         #countdown {
40 |             margin-top: 20px;
41 |             font-size: 2em;
42 |         }
43 |     </style>
44 | </head>
45 | <body>
46 |     <div class="countdown-container">
47 |         <h1>Countdown Timer</h1>
48 |         <input type="number" id="minutes" placeholder="Enter minutes">
49 |         <button onclick="startTimer()">Start Timer</button>
50 |         <div id="countdown"></div>
51 |     </div>
52 |     <script>
53 |         let countdownInterval;
54 |         function startTimer() {
55 |             const minutes = parseInt(document.getElementById('minutes').value);
56 |             if (isNaN(minutes)) {
57 |                 alert('Please enter a valid number of minutes');
58 |                 return;
59 |             }
60 |             const countdownElement = document.getElementById('countdown');
61 |             let timeRemaining = minutes * 60;
62 |             countdownInterval = setInterval(() => {
63 |                 const minutes = Math.floor(timeRemaining / 60);
64 |                 const seconds = timeRemaining % 60;
65 |                 countdownElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
66 |                 if (timeRemaining === 0) {
67 |                     clearInterval(countdownInterval);
68 |                     countdownElement.textContent = 'Time is up!';
69 |                 }
70 |                 timeRemaining--;
71 |             }, 1000);
72 |         }
73 |     </script>
74 | </body>
75 | </html>
76 | 
77 | 


--------------------------------------------------------------------------------
/JavaScript/T26.html:
--------------------------------------------------------------------------------
 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>Flashcards</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .flashcards {
17 |             text-align: center;
18 |         }
19 |         #flashcard {
20 |             width: 400px;
21 |             height: 200px;
22 |             background-color: #007bff;
23 |             color: #fff;
24 |             font-size: 1.5em;
25 |             display: flex;
26 |             justify-content: center;
27 |             align-items: center;
28 |             border-radius: 5px;
29 |             margin: 20px auto;
30 |             text-wrap: balance;
31 |         }
32 |         button {
33 |             margin: 10px;
34 |             padding: 10px 20px;
35 |             font-size: 1em;
36 |             border: none;
37 |             border-radius: 5px;
38 |             background-color: #007bff;
39 |             color: #fff;
40 |             cursor: pointer;
41 |         }
42 |         button:hover {
43 |             background-color: #0056b3;
44 |         }
45 |     </style>
46 | </head>
47 | <body>
48 |     <div class="flashcards">
49 |         <h1>Flashcards</h1>
50 |         <div id="flashcard"></div>
51 |         <button onclick="showAnswer()">Show Answer</button>
52 |         <button onclick="nextCard()">Next Card</button>
53 |     </div>
54 |     
55 |     <script>
56 |         const flashcards = [
57 |             { question: 'What is the capital of France?', answer: 'Paris' },
58 |             { question: 'What is the largest planet in our solar system?', answer: 'Jupiter' },
59 |             { question: 'Who wrote Romeo and Juliet?', answer: 'William Shakespeare' },
60 |             { question: 'What year did World War II end?', answer: '1945' },
61 |             { question: 'What is the symbol for the chemical element Oxygen?', answer: 'O' }
62 |         ];
63 |         let currentCard = 0;
64 |         let showingAnswer = false;
65 | 
66 |         function showCard() {
67 |             const flashcard = document.getElementById('flashcard');
68 |             flashcard.textContent = showingAnswer ? flashcards[currentCard].answer : flashcards[currentCard].question;
69 |         }
70 | 
71 |         function showAnswer() {
72 |             showingAnswer = true;
73 |             showCard();
74 |         }
75 | 
76 |         function nextCard() {
77 |             currentCard = (currentCard + 1) % flashcards.length;
78 |             showingAnswer = false;
79 |             showCard();
80 |         }
81 | 
82 |         window.onload = showCard;
83 |     </script>
84 | </body>
85 | </html>
86 | 
87 | 


--------------------------------------------------------------------------------
/JavaScript/T27.html:
--------------------------------------------------------------------------------
 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>Number Guessing Game</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .number-guessing-game {
17 |             text-align: center;
18 |         }
19 |         input, button {
20 |             margin: 10px;
21 |             padding: 10px;
22 |             font-size: 1em;
23 |         }
24 |         button {
25 |             border: none;
26 |             border-radius: 5px;
27 |             background-color: #007bff;
28 |             color: #fff;
29 |             cursor: pointer;
30 |         }
31 |         button:hover {
32 |             background-color: #0056b3;
33 |         }
34 |         #message {
35 |             margin-top: 10px;
36 |             font-size: 1.2em;
37 |         }
38 |     </style>
39 | </head>
40 | <body>
41 |     <div class="number-guessing-game">
42 |         <h1>Number Guessing Game</h1>
43 |         <p>Guess a number between 1 and 100:</p>
44 |         <input type="number" id="guess" min="1" max="100">
45 |         <button onclick="checkGuess()">Check</button>
46 |         <div id="message"></div>
47 |         <button onclick="resetGame()">Reset</button>
48 |     </div>
49 | 
50 |     <script>
51 |         let secretNumber;
52 |         let attempts = 0;
53 | 
54 |         function startGame() {
55 |             secretNumber = Math.floor(Math.random() * 100) + 1;
56 |             attempts = 0;
57 |             document.getElementById('message').textContent = '';
58 |         }
59 | 
60 |         function checkGuess() {
61 |             const guess = parseInt(document.getElementById('guess').value);
62 |             if (isNaN(guess) || guess < 1 || guess > 100) {
63 |                 document.getElementById('message').textContent = 'Please enter a number between 1 and 100';
64 |                 return;
65 |             }
66 |             attempts++;
67 |             if (guess === secretNumber) {
68 |                 document.getElementById('message').textContent = `Congratulations! You guessed the number in ${attempts} attempts`;
69 |             } else if (guess < secretNumber) {
70 |                 document.getElementById('message').textContent = 'Too low! Try again';
71 |             } else {
72 |                 document.getElementById('message').textContent = 'Too high! Try again';
73 |             }
74 |         }
75 | 
76 |         function resetGame() {
77 |             document.getElementById('guess').value = '';
78 |             document.getElementById('message').textContent = '';
79 |             startGame();
80 |         }
81 | 
82 |         window.onload = startGame;
83 |     </script>
84 | </body>
85 | </html>
86 | 
87 | 


--------------------------------------------------------------------------------
/JavaScript/T3.html:
--------------------------------------------------------------------------------
 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>Countdown to Event</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #e3e4e6;
15 |             font-family: Arial, sans-serif;
16 |         }
17 | 
18 |         .countdown-event {
19 |             text-align: center;
20 |         }
21 | 
22 |         input {
23 |             border-radius: 5px;
24 |             border-color: #073045;
25 |             padding: 15px;
26 |             margin-bottom: 10px;
27 |         }
28 | 
29 |         button {
30 |             background-color: #0688b4;
31 |             color: white;
32 |             border-radius: 10px;
33 |             border-color: #073045;
34 |             padding: 10px 20px;
35 |             font-size: 16px;
36 |             cursor: pointer;
37 |         }
38 | 
39 |         #days-left {
40 |             font-size: 24px;
41 |             margin-top: 20px;
42 |         }
43 |     </style>
44 | </head>
45 | <body>
46 | 
47 |     <div class="countdown-event">
48 |         <h1>Countdown to Event</h1>
49 |         <input type="date" id="event-date">
50 |         <button id="start-countdown">Start Countdown</button>
51 |         <p id="days-left"></p>
52 |     </div>
53 | 
54 |     <script>
55 |         document.getElementById('start-countdown').addEventListener('click', () => {
56 |             const eventDate = new Date(document.getElementById('event-date').value);
57 |             const today = new Date();
58 |             const timeDiff = eventDate - today;
59 |             const daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
60 | 
61 |             if (daysLeft >= 0) {
62 |                 document.getElementById('days-left').textContent = `${daysLeft} days left until the event!`;
63 |             } else {
64 |                 document.getElementById('days-left').textContent = `The event has passed`;  
65 |             }
66 |         });
67 |     </script>
68 | 
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/JavaScript/T30.html:
--------------------------------------------------------------------------------
 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>Stopwatch</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             background-color: #f9f9f9;
14 |             font-family: Arial, sans-serif;
15 |         }
16 |         .stopwatch {
17 |             text-align: center;
18 |         }
19 |         #display {
20 |             font-size: 3em;
21 |             margin-bottom: 20px;
22 |         }
23 |         button {
24 |             margin: 10px;
25 |             padding: 10px 20px;
26 |             font-size: 1em;
27 |             border: none;
28 |             border-radius: 5px;
29 |             background-color: #007bff;
30 |             color: #fff;
31 |             cursor: pointer;
32 |         }
33 |         button:hover {
34 |             background-color: #0056b3;
35 |         }
36 |     </style>
37 | </head>
38 | <body>
39 |     <div class="stopwatch">
40 |         <h1>Stopwatch</h1>
41 |         <p id="display">00:00:00</p>
42 |         <button id="startStopButton" onclick="startStop()">Start</button>
43 |         <button onclick="reset()">Reset</button>
44 |     </div>
45 | 
46 |     <script>
47 |         let timer;
48 |         let startTime;
49 |         let running = false;
50 |         let elapsedTime = 0;
51 | 
52 |         function pad(num) {
53 |             return num.toString().padStart(2, '0');
54 |         }
55 | 
56 |         function displayTime(time) {
57 |             const milliseconds = Math.floor(time % 1000 / 10);
58 |             const seconds = Math.floor(time / 1000 % 60);
59 |             const minutes = Math.floor(time / 60000 % 60);
60 |             const hours = Math.floor(time / 3600000);
61 |             const display = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
62 |             document.getElementById('display').textContent = display;
63 |         }
64 | 
65 |         function updateTime() {
66 |             const currentTime = Date.now();
67 |             elapsedTime = currentTime - startTime;
68 |             displayTime(elapsedTime);
69 |         }
70 | 
71 |         function reset() {
72 |             clearInterval(timer);
73 |             running = false;
74 |             elapsedTime = 0;
75 |             document.getElementById('startStopButton').textContent = 'Start';
76 |             displayTime(elapsedTime);
77 |         }
78 | 
79 |         function startStop() {
80 |             if (!running) {
81 |                 startTime = Date.now() - elapsedTime;
82 |                 timer = setInterval(updateTime, 10);
83 |                 document.getElementById('startStopButton').textContent = 'Stop';
84 |             } else {
85 |                 clearInterval(timer);
86 |                 document.getElementById('startStopButton').textContent = 'Start';
87 |             }
88 |             running = !running;
89 |         }
90 | 
91 |         window.onload = displayTime(elapsedTime);
92 |     </script>
93 | </body>
94 | </html>
95 | 
96 | 


--------------------------------------------------------------------------------
/JavaScript/T4.html:
--------------------------------------------------------------------------------
 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>Name Formatter</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: #f2f2f2;
11 |             display: flex;
12 |             justify-content: center;
13 |             align-items: center;
14 |             height: 100vh;
15 |             margin: 0;
16 |         }
17 | 
18 |         .container {
19 |             background-color: white;
20 |             padding: 20px;
21 |             border-radius: 8px;
22 |             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23 |             text-align: center;
24 |         }
25 | 
26 |         input[type="text"] {
27 |             padding: 10px;
28 |             border: 1px solid #ccc;
29 |             border-radius: 4px;
30 |         }
31 | 
32 |         button {
33 |             background-color: #4CAF50;
34 |             color: white;
35 |             border: none;
36 |             padding: 10px 20px;
37 |             text-align: center;
38 |             text-decoration: none;
39 |             display: inline-block;
40 |             font-size: 16px;
41 |             margin: 10px 0;
42 |             cursor: pointer;
43 |             border-radius: 4px;
44 |         }
45 | 
46 |         button:hover {
47 |             background-color: #45a049;
48 |         }
49 | 
50 |         #result {
51 |             font-size: 18px;
52 |             font-weight: bold;
53 |         }
54 |     </style>
55 | </head>
56 | <body>
57 | 
58 |     <div class="container">
59 |         <h1>Name Formatter</h1>
60 |         <label for="nameInput">Enter a name:</label>
61 |         <input type="text" id="nameInput" placeholder="Enter name">
62 |         <button id="formatButton">Format Name</button>
63 |         <p id="result"></p>
64 |     </div>
65 | 
66 |     <script>
67 |         document.getElementById('formatButton').addEventListener('click', function() {
68 |             const nameInput = document.getElementById('nameInput').value;
69 |             const resultElement = document.getElementById('result');
70 |             
71 |             if (!nameInput) {
72 |                 resultElement.textContent = 'Please enter a name';
73 |                 return;
74 |             }
75 |             
76 |             const formattedName = nameInput.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
77 |             resultElement.textContent = `Formatted Name: ${formattedName}`;
78 |         });
79 |     </script>
80 | 
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/JavaScript/T5.html:
--------------------------------------------------------------------------------
  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>Login Form</title>
  7 |     <style>
  8 |         body {
  9 |             font-family: Arial, sans-serif;
 10 |             background-color: #f4f4f4;
 11 |             padding-top: 10px;
 12 |             display: flex;
 13 |             justify-content: center;
 14 |             align-items: center;
 15 |             height: 90vh;
 16 |             margin: 0;
 17 |         }
 18 | 
 19 |         .auth-form {
 20 |             background-color: #fff;
 21 |             border-radius: 8px;
 22 |             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 23 |             padding: 20px;
 24 |             width: 300px;
 25 |         }
 26 | 
 27 |         h1 {
 28 |             text-align: center;
 29 |             margin-bottom: 20px;
 30 |             color: #333;
 31 |         }
 32 | 
 33 |         .form-group {
 34 |             margin-bottom: 15px;
 35 |         }
 36 | 
 37 |         label {
 38 |             display: block;
 39 |             margin-bottom: 5px;
 40 |             font-weight: bold;
 41 |         }
 42 | 
 43 |         input[type="text"],
 44 |         input[type="password"] {
 45 |             width: 100%;
 46 |             padding: 10px;
 47 |             border: 1px solid #ccc;
 48 |             border-radius: 4px;
 49 |             box-sizing: border-box;
 50 |         }
 51 | 
 52 |         input[type="text"]:focus,
 53 |         input[type="password"]:focus {
 54 |             border-color: #007BFF;
 55 |             outline: none;
 56 |         }
 57 | 
 58 |         button {
 59 |             width: 100%;
 60 |             padding: 10px;
 61 |             background-color: #007BFF;
 62 |             color: #fff;
 63 |             border: none;
 64 |             border-radius: 4px;
 65 |             cursor: pointer;
 66 |             font-size: 16px;
 67 |         }
 68 | 
 69 |         button:hover {
 70 |             background-color: #0056b3;
 71 |         }
 72 | 
 73 |         #authMessage {
 74 |             margin-top: 15px;
 75 |             text-align: center;
 76 |             color: #d9534f;
 77 |         }
 78 |     </style>
 79 | </head>
 80 | <body>
 81 | 
 82 |     <div class="auth-form">
 83 |         <h1>Login</h1>
 84 | 
 85 |         <div class="form-group">
 86 |             <label for="username">Username:</label>
 87 |             <input type="text" id="username" placeholder="Enter username">
 88 |         </div>
 89 | 
 90 |         <div class="form-group">
 91 |             <label for="password">Password:</label>
 92 |             <input type="password" id="password" placeholder="Enter password">
 93 |         </div>
 94 | 
 95 |         <button onclick="authenticate()">Login</button>
 96 | 
 97 |         <div id="authMessage"></div>
 98 |     </div>
 99 | 
100 |     <script>
101 |         function authenticate() {
102 |             const username = document.getElementById('username').value.trim();
103 |             const password = document.getElementById('password').value.trim();
104 |             const authMessage = document.getElementById('authMessage');
105 | 
106 |             if (username === 'user' && password === 'password') {
107 |                 authMessage.textContent = 'Authentication successful!';
108 |                 authMessage.style.color = 'green';
109 |             } else {
110 |                 authMessage.textContent = 'Authentication failed. Please check your username and password.';
111 |                 authMessage.style.color = '#d9534f';
112 |             }
113 | 
114 |             document.getElementById('username').value = '';
115 |             document.getElementById('password').value = '';
116 |         }
117 |     </script>
118 | 
119 | </body>
120 | </html>
121 | 


--------------------------------------------------------------------------------
/JavaScript/T6.html:
--------------------------------------------------------------------------------
 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>Pattern Generator</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #fff;
15 |             font-family: Arial, sans-serif;
16 |         }
17 | 
18 |         .pattern-generator {
19 |             text-align: center;
20 |             width: 80%;
21 |             max-width: 500px;
22 |         }
23 | 
24 |         input {
25 |             padding: 10px;
26 |             margin: 10px 0;
27 |             width: 100%;
28 |         }
29 | 
30 |         button {
31 |             background-color: #007BFF;
32 |             color: #fff;
33 |             border-radius: 4px;
34 |             padding: 10px 20px;
35 |             font-size: 16px;
36 |             cursor: pointer;
37 |         }
38 | 
39 |         #pattern {
40 |             margin-top: 20px;
41 |         }
42 |     </style>
43 | </head>
44 | <body>
45 | 
46 |     <div class="pattern-generator">
47 |         <h1>Pattern Generator</h1>
48 |         <input type="number" id="size" placeholder="Enter size" min="1" required>
49 |         <button id="generate">Generate Pattern</button>
50 |         <div id="pattern"></div>
51 |     </div>
52 | 
53 |     <script>
54 |         document.getElementById('generate').addEventListener('click', () => {
55 |             const size = parseInt(document.getElementById('size').value);
56 |             if (isNaN(size) || size < 1) {
57 |                 document.getElementById('pattern').textContent = 'Invalid size';
58 |                 return;
59 |             }
60 |             let pattern = '';
61 |             for (let i = 0; i < size; i++) {
62 |                 pattern += '*'.repeat(i + 1) + '<br>';
63 |             }
64 |             document.getElementById('pattern').innerHTML = pattern;
65 |         });
66 |     </script>
67 | 
68 | </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/JavaScript/T7.html:
--------------------------------------------------------------------------------
 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>Weather App</title>
 7 |     <style>
 8 |         body {
 9 |             display: flex;
10 |             justify-content: center;
11 |             align-items: center;
12 |             height: 100vh;
13 |             margin: 0;
14 |             background-color: #eef0f1;
15 |             font-family: Arial, sans-serif;
16 |         }
17 | 
18 |         .weather-app {
19 |             text-align: center;
20 |         }
21 | 
22 |         input {
23 |             padding: 10px;
24 |             width: 200px;
25 |             margin-bottom: 10px;
26 |         }
27 | 
28 |         button {
29 |             background-color: #1155CC;
30 |             color: white;
31 |             border-radius: 10px;
32 |             padding: 10px 20px;
33 |             font-size: 16px;
34 |             cursor: pointer;
35 |         }
36 | 
37 |         #weather-result {
38 |             margin-top: 20px;
39 |             font-size: 18px;
40 |         }
41 |     </style>
42 | </head>
43 | <body>
44 | 
45 |     <div class="weather-app">
46 |         <h1>Weather App</h1>
47 |         <input type="text" id="city" placeholder="Enter city">
48 |         <button id="get-weather">Get Weather</button>
49 |         <div id="weather-result"></div>
50 |     </div>
51 | 
52 |     <script>
53 |         const weatherData = {
54 |             'New York': 'Sunny, 25 deg C',
55 |             'London': 'Cloudy, 18 deg C',
56 |             'Tokyo': 'Rainy, 22 deg C'
57 |         };
58 | 
59 |         document.getElementById('get-weather').addEventListener('click', () => {
60 |             const city = document.getElementById('city').value.trim();
61 |             const result = weatherData[city] || 'Weather data not available';
62 |             document.getElementById('weather-result').textContent = result;
63 |         });
64 |     </script>
65 | 
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/JavaScript/T8.html:
--------------------------------------------------------------------------------
 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>Change Text Example</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             text-align: center;
11 |             margin-top: 50px;
12 |         }
13 | 
14 |         h1 {
15 |             font-size: 2em;
16 |             color: #333;
17 |         }
18 | 
19 |         button {
20 |             padding: 10px 20px;
21 |             margin: 10px;
22 |             font-size: 1em;
23 |             cursor: pointer;
24 |             background-color: #4CAF50;
25 |             color: white;
26 |             border: none;
27 |             border-radius: 5px;
28 |             transition: background-color 0.3s ease;
29 |         }
30 | 
31 |         button:hover {
32 |             background-color: #45a049;
33 |         }
34 |     </style>
35 | </head>
36 | <body>
37 | 
38 |     <h1 id="text">Hello User!</h1>
39 |     <button id="person1-btn">Person 1</button>
40 |     <button id="person2-btn">Person 2</button>
41 | 
42 |     <script>
43 |         function greetPerson1() {
44 |             var content = document.getElementById('text');
45 |             content.innerText = 'Hello Person 1';
46 |         }
47 | 
48 |         function greetPerson2() {
49 |             var content = document.getElementById('text');
50 |             content.innerText = 'Hello Person 2';
51 |         }
52 | 
53 |         document.getElementById('person1-btn').addEventListener('click', greetPerson1);
54 |         document.getElementById('person2-btn').addEventListener('click', greetPerson2);
55 |     </script>
56 | 
57 | </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------