Internship assignment completed.

README.md

@@ -1,61 +1,58 @@
-# DanceCase
+# India Map Project
 
-## Objective
+This project is an interactive map of India that displays information about various states when hovered over or clicked. Each state is linked to a specific page that provides more detailed information, such as state-specific images and data.
 
-Create a web page showcasing the diverse folk dances of India, providing information about from every state. The page should be well-organized, visually appealing, and user-friendly.
+## Feature
 
-## Task Overview
+- **Interactive Map**: Hovering over each state highlights it and shows a popup with relevant information.
+- **State-specific Information**: When a state is clicked, users are directed to a page with more detailed data.
+- **Responsive Design**: The map is designed to be responsive, adapting to different screen sizes.
+- **State Image and Name**: A popup appears with the name of the state and an image related to the state when hovered over.
 
-## Homepage: Indian Folk Dance Overview
+## Technologies Used
 
-Design a clean and visually appealing homepage displaying a map of India.
-Each state on the map should be clickable, leading to the respective state's folk dance page.
+- HTML5
+- CSS3
+- JavaScript
+- SVG for the map graphics
 
-## State-wise Folk Dance Pages
+## Installation
 
-### For each state, create a dedicated page containing the following elements
+1. Clone the repository to your local machine:
+    ```bash
+    git clone https://github.com/AdityaSingh-7/State-Dances-of-India.git
+    ```
 
-- State Dance Name: Clearly display the name of the folk dance.
-- Image: Include a high-quality image representing the dance form.
-- Brief History: Provide a concise history of the dance form, highlighting its cultural significance.
-- Trivia: any facts or famous artist name
-- Wiki Page Link: Include a link to the dance form's Wikipedia page for users who want to explore further.
+2. Navigate to the project directory:
+    ```bash
+    cd State Dances of India
+    ```
 
-## Navigation
+3. Open the `index.html` file in your browser to view the project.
 
-### Implement a user-friendly navigation system
+## How to Use
 
-Use a menu or clickable map on the homepage for easy access to state-wise pages.
+1. Open the `index.html` file in a browser.
+2. Hover over any state in the map to see a popup with the state's name and an image.
+3. Click on a state to be redirected to the state's specific page.
 
-Include a "Home" button on each state page for quick navigation back to the homepage.
+## Screenshots
 
-## Design and Layout
+Here are some examples of the India Map and the popup in action:
 
-Ensure the design is neat, organized, and visually appealing.
-Use a consistent layout for all state pages to maintain a cohesive look.
-Optimize images and use a responsive design for a seamless user experience on different devices.
+### Full Map
 
-## Code Quality
+![India Map](/docs/India-map.png)
 
-Write clean and well-documented HTML, CSS, and JavaScript code.
-Ensure the website is compatible with major web browsers.
-Implement responsive design principles for a smooth experience on various devices.
+### State-Page
 
-## Submission Guidelines
+![State-Page](/docs/State-Page.png)
 
-Submit a compressed folder containing all project files, including HTML, CSS, JavaScript, and images.
-Provide a README file with instructions on how to navigate and use the website.
-Include comments in the code to explain the functionality and structure.
 
-## Evaluation Criteria
+## License
 
-Design and User Experience (40%): Neat, visually appealing, and easy-to-navigate pages.
-Content Quality (30%): Accurate and concise information about each folk dance.
-Code Quality (20%): Well-organized and documented code with good coding practices.
-Responsiveness (10%): Ensure the website functions well on different devices.
+This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
 
----
+## Contact
 
-Note: Reach out for clarification or guidance if needed. The goal is to create an informative and enjoyable platform for users to explore the rich tapestry of Indian folk dances.
-
-© 2024 RecursiveZero Private Limited, All rights reserved.
+If you have any questions or suggestions, feel free to create an issue or contact me via email: [adityakumarsingh710@gmail.com].

assets/statepages/Andhra.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Andhra Pradesh - Kuchipudi Dance</title>
+    <link rel="stylesheet" href="/styles/state-styles.css" />
+
+  </head>
+  <body>
+    <!-- Home Button -->
+    <a href="/index.html" class="home-button">
+      <svg width="24" height="24" viewBox="0 0 24 24">
+        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z" />
+      </svg>
+      Home
+    </a>
+
+    <!-- Title -->
+    <h1>Kuchipudi Dance - Andhra Pradesh</h1>
+        <div class="main-container">
+            <div id="state-svg-container">
+                <h3>State Map</h3>
+                <div id="state-svg"></div>
+            </div>
+
+            <div class="right-content">
+                <img src="/assets/images/andhra.jpg" alt="Kuchipudi Dance" />
+                <div class="content-text">
+                    <table class="info-table">
+                        <tr><th colspan="2">Quick Facts</th></tr>
+                        <tr><td>Dance Form</td><td>Kuchipudi</td></tr>
+                        <tr><td>Origin</td><td>Andhra Pradesh, India</td></tr>
+                        <tr><td>Festival</td><td>Sankranti, Various Religious Events</td></tr>
+                        <tr><td>Duration</td><td>Varies</td></tr>
+                        <tr><td>Significance</td><td>Classical Dance Tradition</td></tr>
+                        <tr><td>Formation</td><td>Expressive Dance and Drama</td></tr>
+                        <tr><td>Name Origin</td><td>Named after the village of Kuchipudi</td></tr>
+                    </table>
+                    <a href="https://en.wikipedia.org/wiki/Kuchipudi" target="_blank">Read more about Kuchipudi Dance on Wikipedia</a>
+                </div>
+            </div>
+        </div>
+
+    <!-- JavaScript -->
+    <script src="/js-files/loadSVG.js"></script>
+
+    <script>
+
+      const stateKey = "Andhra"; 
+      const svgPath = `/assets/svg/${stateKey}.svg`;
+
+
+      window.onload = function () {
+        loadStateSVG(svgPath);
+      };
+    </script>
+  </body>
+</html>

assets/statepages/ArunachalPradesh.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Arunachal Pradesh - Buiya Dance</title>
+    <link rel="stylesheet" href="/styles/state-styles.css" />
+  </head>
+  <a href="/index.html" class="home-button">
+    <svg width="24" height="24" viewBox="0 0 24 24">
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z" />
+    </svg>
+    Home
+  </a>
+  <body>
+    <h1>Yak Dance - Arunachal Pradesh</h1>
+    <div class="main-container">
+      <div id="state-svg-container">
+        <h3>State Map</h3>
+        <div id="state-svg"></div>
+      </div>
+
+      <div class="right-content">
+        <img src="/assets/images/arunachal.jpeg" alt="Yak Dance" />
+        <div class="content-text">
+          <table class="info-table">
+            <tr>
+              <th colspan="2">Quick Facts</th>
+            </tr>
+            <tr>
+              <td>Dance Form</td>
+              <td>Yak Dance</td>
+            </tr>
+            <tr>
+              <td>Origin</td>
+              <td>Arunachal Pradesh, India</td>
+            </tr>
+            <tr>
+              <td>Festival</td>
+              <td>Losar, Reh, and other tribal festivals</td>
+            </tr>
+            <tr>
+              <td>Duration</td>
+              <td>Varies</td>
+            </tr>
+            <tr>
+              <td>Significance</td>
+              <td>Celebration of Tribal Culture</td>
+            </tr>
+            <tr>
+              <td>Formation</td>
+              <td>Costume Dance</td>
+            </tr>
+            <tr>
+              <td>Name Origin</td>
+              <td>Inspired by the Yak</td>
+            </tr>
+          </table>
+          <a
+            href="https://en.wikipedia.org/wiki/Arunachal_Pradesh"
+            target="_blank"
+            >Read more about Yak Dance on Wikipedia</a
+          >
+        </div>
+      </div>
+    </div>
+    <script src="/js-files/loadSVG.js"></script>
+
+    <script>
+
+      const stateKey = "ArunachalPradesh"; s
+      const svgPath = `/assets/svg/${stateKey}.svg`;
+
+      // Load the SVG when the page loads
+      window.onload = function () {
+        loadStateSVG(svgPath);
+      };
+    </script>
+  </body>
+</html>

assets/statepages/Assam.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Assam - Bihu Dance</title>
+    <link rel="stylesheet" href="/styles/state-styles.css" />
+  </head>
+  <a href="/index.html" class="home-button">
+    <svg width="24" height="24" viewBox="0 0 24 24">
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z" />
+    </svg>
+    Home
+  </a>
+  <body>
+    <h1>Bihu Dance - Assam</h1>
+    <div class="main-container">
+      <div id="state-svg-container">
+        <h3>State Map</h3>
+        <div id="state-svg"></div>
+      </div>
+
+      <div class="right-content">
+        <img src="/assets/images/andhra.jpg" alt="Bihu Dance" />
+        <div class="content-text">
+          <table class="info-table">
+            <tr>
+              <th colspan="2">Quick Facts</th>
+            </tr>
+            <tr>
+              <td>Dance Form</td>
+              <td>Bihu</td>
+            </tr>
+            <tr>
+              <td>Origin</td>
+              <td>Assam, India</td>
+            </tr>
+            <tr>
+              <td>Festival</td>
+              <td>Bihu (Rongali, Bhogali, Kongali)</td>
+            </tr>
+            <tr>
+              <td>Duration</td>
+              <td>Varies by festival</td>
+            </tr>
+            <tr>
+              <td>Significance</td>
+              <td>Harvest Celebration</td>
+            </tr>
+            <tr>
+              <td>Formation</td>
+              <td>Group Dance</td>
+            </tr>
+            <tr>
+              <td>Name Origin</td>
+              <td>Named after the Bihu festival</td>
+            </tr>
+          </table>
+          <a href="https://en.wikipedia.org/wiki/Bihu" target="_blank"
+            >Read more about Bihu Dance on Wikipedia</a
+          >
+        </div>
+      </div>
+    </div>
+    <script src="/js-files/loadSVG.js"></script>
+
+    <script>
+      const stateKey = "assam";
+      const svgPath = `/assets/svg/${stateKey}.svg`;
+
+      // Load the SVG when the page loads
+      window.onload = function () {
+        loadStateSVG(svgPath);
+      };
+    </script>
+  </body>
+</html>