Added 31-10-2024 Solution and 01-11-2024 Question

madhurimarawat · Nov 1, 2024 · 7a56f47 · 7a56f47
1 parent 11e5341
commit 7a56f47
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 0 deletions.
diff --git a/01-11-2024/Question.md b/01-11-2024/Question.md
@@ -0,0 +1,154 @@
+### **Question: Portfolio Webpage Creation, Deployment, and Documentation**
+
+**Difficulty Level:** 🔴 Advanced
+**Domain:** Web Development
+
+### **Objective:**
+
+Create and deploy a personal portfolio webpage using HTML, CSS, JavaScript, and Bootstrap. Along with the webpage, provide two documentation files:
+
+1. `README.md`: General documentation with an overview, design approach, and deployment steps.
+2. `EXPLANATION.md`: A deeper, structured explanation of the portfolio's design choices, project setup, and including links to both the GitHub repository and the live portfolio.
+
+### **Requirements:**
+
+1. **Webpage Design and Layout**:
+
+   - Use **HTML** to structure key sections such as **About**, **Projects**, **Skills**, and **Contact**.
+   - Use **Bootstrap** for responsive design to ensure it looks good on all devices.
+   - Apply **CSS** for custom styling that represents your brand and design preferences.
+   - Use **JavaScript** for interactivity, such as animations, tooltips, or form validation.
+
+2. **Portfolio Content**:
+
+   - **About**: Brief introduction and background about yourself.
+   - **Projects**: Showcase key projects with descriptions, technology stacks, and links.
+   - **Skills**: List relevant skills in a clear layout.
+   - **Contact**: Provide methods to reach you, like social media icons, email link, or contact form.
+
+3. **Documentation Files**:
+
+   - **README.md**:
+     - **File Structure**: Explain each file/folder, including `solution.html`, `css/solution.css`, `js/solution.js`, and `README.md`.
+     - **Design Choices**: Briefly describe the layout, color schemes, and other visual choices.
+     - **Functionality**: List any interactive elements, explaining their purpose.
+     - **Deployment Details**: Describe the deployment steps and provide links to the GitHub repository and live portfolio.
+   - **EXPLANATION.md**:
+     - **Detailed Project Overview**: An in-depth explanation of your design choices, structure, and any unique design elements.
+     - **File Explanations**: Explain the purpose and contents of each file.
+     - **Links**: Include both the GitHub repository and live portfolio link.
+     - **Deployment Summary**: Mention your deployment platform and process, with step-by-step instructions if applicable.
+
+4. **Deployment**:
+
+   - Deploy the portfolio on GitHub Pages, Netlify, or Vercel, making it accessible with a public URL.
+
+5. **File Structure**:
+   - **solution.html**: Main HTML file.
+   - **css/solution.css**: CSS for custom styles.
+   - **js/solution.js**: JavaScript file for interactivity.
+   - **README.md**: High-level documentation.
+   - **EXPLANATION.md**: Detailed documentation with design rationale and project insights.
+
+### **Example Execution:**
+
+1. **Input**:
+
+   - Files: `solution.html`, `css/solution.css`, `js/solution.js`, `README.md`, and `EXPLANATION.md`.
+   - Populate each file with the necessary content, design, and explanations.
+   - Deploy on GitHub Pages or another platform.
+
+2. **Output**:
+   - A live URL where the portfolio is accessible.
+   - Documentation files with GitHub repository and live portfolio links.
+
+**Example Content**:
+
+```html
+<!-- solution.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/solution.css" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    />
+    <title>My Portfolio</title>
+  </head>
+  <body>
+    <!-- Portfolio content goes here -->
+  </body>
+  <script src="js/solution.js"></script>
+</html>
+```
+
+**README.md Example**:
+
+```markdown
+# Portfolio Documentation
+
+## Project Structure
+
+- **solution.html**: Main HTML file containing the structure.
+- **css/solution.css**: Custom CSS file for styling.
+- **js/solution.js**: JavaScript file for interactive features.
+- **README.md**: General documentation.
+- **EXPLANATION.md**: Detailed design and development explanations.
+
+## Design Choices
+
+Used a modern, minimalistic theme with Bootstrap for a responsive layout and a light color scheme for readability and simplicity.
+
+## Functionality
+
+JavaScript features add interactivity, such as tooltips and form validations, to enhance user engagement.
+
+## Repository and Live Links
+
+- **GitHub Repository**: [GitHub Repository Link](https://github.com/username/portfolio)
+- **Live Portfolio**: [Live Portfolio Link](https://username.github.io/portfolio)
+
+## Deployment
+
+The portfolio was deployed using GitHub Pages. Refer to `EXPLANATION.md` for detailed deployment steps.
+```
+
+**EXPLANATION.md Example**:
+
+```markdown
+# Portfolio Explanation
+
+## Overview
+
+This portfolio site is designed to showcase my skills, projects, and background in a clean and organized manner, using responsive design and interactive elements.
+
+## Project Structure
+
+- **solution.html**: Provides the core HTML structure.
+- **css/solution.css**: Custom CSS for personal styling.
+- **js/solution.js**: JavaScript for interactive features.
+- **README.md**: Provides a general overview of the project.
+- **EXPLANATION.md**: Contains a detailed description of design choices, structure, and deployment process.
+
+## Design Choices
+
+The design focuses on simplicity and clarity, with a white background and subtle colors that emphasize key information without distractions.
+
+## Deployment
+
+Deployed using GitHub Pages. To deploy, push changes to the main branch and enable GitHub Pages in the repository settings.
+
+## Repository and Live Links
+
+- **GitHub Repository**: [GitHub Repository Link](https://github.com/username/portfolio)
+- **Live Portfolio**: [Live Portfolio Link](https://username.github.io/portfolio)
+```
+
+### **Resources**:
+
+- **Bootstrap Documentation**: [Bootstrap](https://getbootstrap.com/)
+- **GitHub Pages Guide**: [GitHub Pages](https://pages.github.com/)
+- **Netlify Guide**: [Netlify](https://www.netlify.com/)
diff --git a/31-10-2024/Explanation.md b/31-10-2024/Explanation.md
@@ -0,0 +1,119 @@
+## Explanation
+
+**What’s a programmer’s favorite Diwali ritual?**
+
+```python
+try:
+    lighting diyas!
+except:
+    getting burnt! 🔥
+```
+
+**So be safe, do coding, and light the emoji diyas—they are safe!** 🌟
+
+### Overview
+
+The Diya Harmony Pattern Printer is a simple yet charming program that prints a symmetrical pattern of colored diyas using emojis. The user specifies the number of rows, and the program generates a visually appealing arrangement of emojis representing different colored diyas.
+
+### Code Breakdown
+
+```python
+# Number of Rows
+try:
+    r = int(input("Enter Number of Rows: "))
+```
+
+1. **User Input:**
+   - The program begins by prompting the user to enter the desired number of rows. This value is stored in the variable `r`.
+   - The `try` block is used to catch potential errors when converting the user input to an integer. If the user enters something that cannot be converted (like a string or a special character), it raises a `ValueError`.
+
+```python
+# List of diyas
+diyas = ["🔴", "🟡", "⚪", "🟢", "🔵"]
+```
+
+2. **Emoji List:**
+   - We create a list called `diyas` that contains five different colored diya emojis: Red, Yellow, White, Green, and Blue.
+
+```python
+print()
+```
+
+3. **New Line:**
+   - An empty `print()` statement is used to create a blank line for better output formatting.
+
+```python
+# Loop to Print Pattern
+for i in range(0, r):
+```
+
+4. **Outer Loop:**
+   - This loop iterates from `0` to `r - 1`. The variable `i` represents the current row number.
+
+```python
+    for j in range(0, r):
+```
+
+5. **Inner Loop:**
+   - Nested within the outer loop, this loop also iterates from `0` to `r - 1`. The variable `j` represents the position of the emoji within the current row.
+
+```python
+        print(diyas[(i + j) % len(diyas)], end=" ")
+```
+
+6. **Printing Emojis:**
+   - In this line, we print the emoji for the current position in the row.
+   - The expression `(i + j) % len(diyas)` calculates the index of the emoji to be printed:
+     - `i + j` calculates the current index by summing the row and position values.
+     - The modulus operator `%` is used to wrap around the index, ensuring that it cycles through the available emojis in the list.
+   - The `end=" "` argument in the `print()` function ensures that all emojis in the row are printed on the same line, separated by spaces.
+
+```python
+    print()
+```
+
+7. **New Line for Next Row:**
+   - After completing the inner loop for a particular row, we call `print()` again (without arguments) to move to the next line for the subsequent row's output.
+
+### Handling Invalid Input
+
+```python
+except ValueError:
+    print("Please enter a valid integer for the number of rows.")
+```
+
+- **Error Handling:**
+  - The `except` block catches any `ValueError` that arises when the user inputs a non-integer value.
+  - When an invalid input is detected, the program prints a friendly message: "Please enter a valid integer for the number of rows." This guides the user to provide correct input without crashing the program.
+
+### Pattern Repetition
+
+- If the user enters a value for \( r \) greater than 5, the program will repeat the same pattern using the modulus operation. For example, if \( r = 7 \), the program generates the following output:
+
+#### Example for \( r = 7 \)
+
+- **Input:**
+  ```
+  Enter Number of Rows: 7
+  ```
+- **Output:**
+  ```
+  🔴 🟡 ⚪ 🟢 🔵 🔴 🟡
+  🟡 ⚪ 🟢 🔵 🔴 🟡 ⚪
+  ⚪ 🟢 🔵 🔴 🟡 ⚪ 🟢
+  🟢 🔵 🔴 🟡 ⚪ 🟢 🔵
+  🔵 🔴 🟡 ⚪ 🟢 🔵 🔴
+  🔴 🟡 ⚪ 🟢 🔵 🔴 🟡
+  🟡 ⚪ 🟢 🔵 🔴 🟡 ⚪
+  ```
+
+### Explanation of the Pattern Repetition
+
+- In this example, for \( r = 7 \):
+  - The first row starts with the first emoji (🔴) and continues through all five emojis.
+  - When it reaches the end of the list, it uses the modulus operation to cycle back to the start.
+  - Thus, the sixth and seventh rows repeat the pattern from the beginning, effectively showing that the program reuses the emoji sequence to fill additional rows beyond the fifth. 💡
+
+### Conclusion
+
+This simple program effectively demonstrates the use of loops and modular arithmetic to create a charming pattern with colored diyas represented by emojis. The clear structure and use of Python's list allow for easy modifications and adaptations for other patterns or designs.
diff --git a/31-10-2024/Solution.py b/31-10-2024/Solution.py
@@ -0,0 +1,17 @@
+# Number of Rows
+try:
+    r = int(input("Enter Number of Rows: "))
+
+    # List of diyas
+    diyas = ["🔴", "🟡", "⚪", "🟢", "🔵"]
+
+    print()
+
+    # Loop to Print Pattern
+    for i in range(0, r):
+        for j in range(0, r):
+            print(diyas[(i + j) % len(diyas)], end=" ")
+        print()
+
+except ValueError:
+    print("Please enter a valid integer for the number of rows.")