├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ ├── feature_request.md │ └── new_lesson.md ├── CNAME ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── favicon.ico ├── images ├── feedback.png ├── lesson.png ├── logo.svg └── task.png ├── index.html ├── pages ├── about.html ├── challenge.html ├── faq.html ├── feedback.html └── learn.html ├── scripts ├── feedback.js └── script.js └── styles ├── about.css ├── faq.css ├── feedback.css ├── hamburger_menu.css └── styles.css /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Fix a Bug 🪱 3 | about: Have you found a bug? 4 | title: "[BUG] Title of the bug" 5 | labels: "bug,hacktoberfest" 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **How are you going to fix it?** 14 | A short and clear idea of you. 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: General Questions 4 | url: https://github.com/mathpylearn/discussions 5 | about: Post here if you have any issues or suggestions! 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Feature 🧮 3 | about: Suggest an idea for this project 4 | title: "[FEATURE] Title of the feature request" 5 | labels: "enhancement,hacktoberfest" 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe your idea here.** 11 | A clear and concise description of your idea. 12 | 13 | **Anything you'd like to add.** 14 | Could be anything :) 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new_lesson.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Lesson 🔡 3 | about: Have you got a nice idea for a lesson? 4 | title: "[CLASS] Title of your Lesson" 5 | labels: "lesson,hacktoberfest" 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Summary** 11 | A short description of the lesson you're going to make. 12 | 13 | **Details** 14 | How is it related to math and python? 15 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | magicmath.co -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in the **mathpylearn** project and community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community, especially during Hacktoberfest, where we encourage new contributors to join and feel supported. 8 | 9 | ## Our Standards 10 | 11 | Examples of behavior that contributes to a positive environment for our community include: 12 | 13 | - Demonstrating empathy and kindness toward other people 14 | - Being respectful of differing opinions, viewpoints, and experiences 15 | - Giving and gracefully accepting constructive feedback 16 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 17 | - Focusing on what is best not just for us as individuals, but for the overall community 18 | 19 | Examples of unacceptable behavior include: 20 | 21 | - The use of sexualized language or imagery, and sexual attention or advances of any kind 22 | - Trolling, insulting or derogatory comments, and personal or political attacks 23 | - Public or private harassment 24 | - Publishing others' private information, such as a physical or email address, without their explicit permission 25 | - Other conduct which could reasonably be considered inappropriate in a professional setting 26 | 27 | ## Our Responsibilities 28 | 29 | Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, especially during Hacktoberfest to ensure a positive experience for all contributors. 32 | 33 | ## Scope 34 | 35 | This Code of Conduct applies within all project spaces, and it also applies when an individual is officially representing the project or its community in public spaces. Examples of representing our project include using an official project email address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 36 | 37 | ## Enforcement 38 | 39 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [YOUR EMAIL HERE]. All complaints will be reviewed and investigated promptly and fairly. 40 | 41 | All project team members are obligated to respect the privacy and security of the reporter of any incident. 42 | 43 | ## Enforcement Guidelines 44 | 45 | Project maintainers will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 46 | 47 | ### 1. Correction 48 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 49 | **Consequence**: A private, written warning from project maintainers, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 50 | 51 | ### 2. Warning 52 | **Community Impact**: A violation through a single incident or series of actions. 53 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 54 | 55 | ### 3. Temporary Ban 56 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. 57 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 58 | 59 | ### 4. Permanent Ban 60 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 61 | **Consequence**: A permanent ban from any sort of public interaction within the community. 62 | 63 | ## Attribution 64 | 65 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 66 | 67 | --- 68 | 69 | By following this Code of Conduct, we can ensure a welcoming and inclusive environment during Hacktoberfest and beyond, encouraging new contributors to engage with the project and the community. Thank you for helping make **mathpylearn** a positive space for all! -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to [mathpylearn] 🚀 2 | 3 | Thank you for considering contributing to [mathpylearn]! We appreciate your interest in helping make this project better. 4 | 5 | ## Table of Contents 6 | 7 | - [How Can I Contribute?](#how-can-i-contribute) 8 | - [Reporting Bugs](#reporting-bugs-) 9 | - [Requesting Features](#requesting-features-) 10 | - [Submitting Changes](#submitting-changes-) 11 | - [Pull Request Guidelines](#pull-request-guidelines-) 12 | 13 | - [License](#license-) 14 | 15 | 16 | ## How Can I Contribute? 🌟 17 | 18 | ### Reporting Bugs 🐛 19 | 20 | If you come across a bug or an issue with [WorkVed], please take the following steps: 21 | 22 | 1. **Search** the [issue tracker](https://github.com/codingkatty/mathpylearn to check if the issue has already been reported. If it has, feel free to add any additional information or subscribe to the existing issue. 23 | 24 | 2. **Create a New Issue** if the issue hasn't been reported yet, with a descriptive title and a clear description of the problem. Include any relevant details such as operating system, browser version, and steps to reproduce the issue. 25 | 26 | ### Requesting Features ✨ 27 | 28 | If you have an idea for a new feature or improvement, please follow these steps: 29 | 30 | 1. **Search** the [issue tracker](https://github.com/codingkatty/mathpylearn) to check if the feature request already exists. If it does, you can comment on the existing request to provide more information or express your interest. 31 | 32 | 2. **Create a New Issue** if the feature request doesn't exist, with a clear and concise title and a detailed description of the feature or enhancement you're proposing. Explain why it's valuable and how it aligns with the project's goals. 33 | 34 | ### Submitting Changes 🛠️ 35 | 36 | If you want to contribute code changes, follow these steps: 37 | 38 | 1. **Fork the repository** to your own GitHub account. 39 | 40 | 2. **Clone your forked repository** to your local machine. 41 | ```bash 42 | git clone https://github.com/codingkatty/mathpylearn 43 | ``` 44 | 45 | 3. **Create a new branch** for your changes. 46 | ```bash 47 | git checkout -b feature/your-feature-name 48 | ``` 49 | 50 | 4. **Make your changes**, following the style guide and ensuring that your code adheres to the project's coding standards. 51 | 52 | 5. **Commit your changes** with a descriptive commit message. 53 | ```bash 54 | git commit -m "Add new feature: your feature name" 55 | ``` 56 | 57 | 6. **Push your changes** to your forked repository on GitHub. 58 | ```bash 59 | git push origin feature/your-feature-name 60 | ``` 61 | 62 | 7. **Open a pull request (PR)** on the [original repository] and provide a detailed description of your changes. 63 | 64 | ### Alternatively contribute using GitHub Desktop 🖥️ 65 | 66 | 1. **Open GitHub Desktop**: 67 | Launch GitHub Desktop and log in to your GitHub account if you haven't already. 68 | 69 | 2. **Clone the Repository**: 70 | - If you haven't cloned the repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository." 71 | - Choose the repository from the list of repositories on GitHub and clone it to your local machine. 72 | 73 | 3. **Switch to the Correct Branch**: 74 | - Ensure you are on the branch that you want to submit a pull request for. 75 | - If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch. 76 | 77 | 4. **Make Changes**: 78 | Make your changes to the code or files in the repository using your preferred code editor. 79 | 80 | 5. **Commit Changes**: 81 | - In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit. 82 | - Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to " button to commit your changes to the local branch. 83 | 84 | 6. **Push Changes to GitHub**: 85 | After committing your changes, click the "Push origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub. 86 | 87 | 7. **Create a Pull Request**: 88 | - Go to the GitHub website and navigate to your fork of the repository. 89 | - You should see a button to "Compare & pull request" between your fork and the original repository. Click on it. 90 | 91 | 8. **Review and Submit**: 92 | - On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request. 93 | - Once you're satisfied, click the "Create pull request" button to submit your pull request. 94 | 95 | 9. **Wait for Review**: 96 | Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the repository. 97 | 98 | 99 | ### Pull Request Guidelines 📋 100 | 101 | To ensure a smooth review process, please follow these guidelines when submitting a pull request: 102 | 103 | - Your code should be well-documented and include clear comments where necessary. 104 | - Run any relevant tests to ensure that your changes don't introduce new issues. 105 | - Ensure your code follows the project's coding standards and style guide. 106 | - Keep your pull request focused on a single feature or bug fix. 107 | - Provide a clear and concise title and description for your pull request. 108 | 109 | 110 | ## License 📜 111 | 112 | By contributing to [mathpylearn], you agree that your contributions will be licensed under the project's [LICENSE](LICENSE.md). 113 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 candy 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Math 4 Python 🧮 2 | 3 | We welcome contributions to Math4Python, a project dedicated to teaching the fundamentals of Python programming through essential mathematical operations. Your contributions will help create an engaging learning platform that equips users with the skills to efficiently use math in data processing and other practical scenarios. 4 | 5 | 📆 Progress Updates 6 | - 7/10/2024 9:28 PM: Started with some AI generated stuff. The site structure is made... abit. 7 | - 10/10/2024 1:42 PM: Small tweaks were made. 8 | - 11~12/10/2024: Many PRs were created and merged! 9 | 10 | [Math 4 Python Link](https://magicmath.co) 11 | 12 | --- 13 | 14 | ## Project Overview 15 | **Math4Python** is an interactive educational platform that simplifies learning Python through mathematical concepts. Whether you're a beginner or seeking to refine your coding skills, our tutorials focus on basic arithmetic operations—addition, subtraction, multiplication, division, exponentiation, and modulo—and their use in programming. 16 | 17 | ### Why Math4Python Matters 18 | In today’s data-driven world, understanding the synergy between math and programming is vital. **Math4Python** bridges this gap by offering: 19 | - **Simplified Learning**: Breaking down complex math concepts into easy-to-understand lessons that cater to both beginners and those sharpening their skills. 20 | - **Real-World Applications**: Showing how math operations are used in real-life programming scenarios like data processing and analysis. 21 | - **Engaging Challenges**: Offering interactive coding exercises that allow learners to apply their knowledge and build confidence. 22 | 23 | ## Features 24 | - **Interactive Tutorials**: Step-by-step lessons focused on core mathematical operations and their implementation in Python. 25 | - **Practical Examples**: Real-world coding examples that demonstrate the application of math in data-related tasks. 26 | - **Quizzes & Challenges**: Engaging exercises to solidify learners' understanding of Python's math operations. 27 | - **Integrated Code Editor**: A built-in coding environment that enables learners to practice right inside the lessons. 28 | 29 | These tutorials teach basic python and math (+, -, *, /, **, % etc). 30 | 31 | ## Contributing to Math4Python 32 | We welcome all contributions that help improve this platform! Here are ways you can get involved: 33 | 34 | ### Create New Lessons 🔡 35 | Develop educational content covering both basic and advanced math operations in Python. Focus on real-world applications to make learning more relevant and effective for users. 36 | 37 | ### Design Coding Challenges ⌨️ 38 | Craft engaging challenges that encourage users to apply their knowledge of Python math operations. These can range from beginner-friendly exercises to more complex problem-solving scenarios. 39 | 40 | ### Improve UI/UX or Design 🖌️ 41 | Enhance the user interface and overall experience. Your design input can help make navigation smoother and the platform more visually appealing, improving the learning experience. 42 | 43 | ### Fix Bugs 🪱 44 | Help ensure the platform runs smoothly by identifying and fixing bugs. Regular testing and maintenance are crucial to keep the platform reliable for all users. 45 | 46 | ### Propose New Features ✨ 47 | Have an idea for a new feature? We’re open to suggestions! Let's collaborate to bring the most innovative ideas to life on **Math4Python**. 48 | 49 | ## Why Contribute? 🎉 50 | By contributing to **Math4Python**, you are helping build a valuable resource for learners to master Python programming through the lens of mathematics. Together, we can create a platform that makes math and programming accessible, fun, and practical. 51 | 52 | Join us in this exciting journey to help others master Python and math! 53 | 54 | --- 55 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingkatty/mathpylearn/c874b6a0aa1fe6c1f847a43327d70643b79672c8/favicon.ico -------------------------------------------------------------------------------- /images/feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingkatty/mathpylearn/c874b6a0aa1fe6c1f847a43327d70643b79672c8/images/feedback.png -------------------------------------------------------------------------------- /images/lesson.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingkatty/mathpylearn/c874b6a0aa1fe6c1f847a43327d70643b79672c8/images/lesson.png -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codingkatty/mathpylearn/c874b6a0aa1fe6c1f847a43327d70643b79672c8/images/task.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | Math 4 Python - Learn and Challenge Your Math Skills 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Home 22 | About 23 | Learn 24 | Challenge 25 | FAQs 26 |
27 |
28 | 32 |
33 |
34 | 35 |
36 |

Welcome to Math 4 Python

37 |

Learn Python programming with a focus on mathematical concepts and problem-solving.

38 |

Key Features

39 | 40 |
41 | 42 | 43 |
44 | Interactive Lessons 45 |
46 |

Interactive Lessons

47 |
48 |
49 |
50 |

Learn Python through hands-on, interactive coding exercises.

51 |
52 |
53 | 54 | 55 |
56 | Math Challenges 57 |
58 |

Math-focused Challenges

59 |
60 | 61 | 62 | 63 | 64 | 65 |
66 |

Solve mathematical problems using Python to reinforce your skills.

67 |
68 |
69 | 70 | 71 |
72 | Real-time Feedback 73 |
74 |

Real-time Feedback

75 |
76 | Code validated successfully! 77 |
78 |

Get instant feedback on your code and track your progress.

79 |
80 |
81 | 82 | 83 |
84 | Peer Ranking 85 |
86 |

Peer Ranking

87 |
88 |

Your Rank: 5th

89 |
90 |

See how you rank among your peers in coding challenges.

91 |
92 |

Achievements:

93 | Beginner Badge 94 | Intermediate Badge 95 | Advanced Badge 96 |
97 |
98 |
99 | 100 | 101 |
102 | Video Tutorials 103 |
104 |

Video Tutorials

105 |

Access a library of video tutorials that cover various Python concepts.

106 |
107 |
108 | 109 | 110 |
111 | Mentorship 112 |
113 |

Mentorship

114 |

Connect with mentors to guide you through your learning journey.

115 |
116 |
117 |
118 | 119 |
120 |

Start learning Today!

121 |

Ready to dive into the world of math and Python? Click below to get started!

122 | Get Started 123 |
124 |
125 | 126 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /pages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | About Math 4 Python 9 | 10 | 11 | 12 | 13 | 15 | 18 | 115 | 116 | 117 | 118 | 119 |
120 | 121 |
122 | Home 123 | About 124 | Learn 125 | Challenge 126 | FAQs 127 |
128 | 129 |
130 | 134 | 135 | 136 | 137 | 138 | 139 |
140 |
141 | 142 |
143 | 146 | 147 |
148 |

Our Mission

149 |

At Math 4 Python, we are dedicated to combining the power of Python programming with key mathematical 150 | concepts. Our platform focuses on helping learners enhance their problem-solving skills through 151 | interactive coding experiences that emphasize math applications.

152 |
153 | 154 |
155 |

Who Is It For?

156 |

Whether you are a beginner in Python or a math enthusiast looking to apply coding to real-world problems, 157 | Math 4 Python offers an engaging and structured learning path. Our platform caters to students, 158 | professionals, and hobbyists aiming to build or enhance their coding and mathematical skills.

159 |
160 | 161 |
162 |

What We Offer

163 |
164 |
165 |

Interactive Lessons

166 |

Learn Python through hands-on coding exercises that reinforce key programming concepts.

167 |
168 |
169 |

Math-focused Challenges

170 |

Apply Python to solve mathematical problems and improve your coding and analytical abilities.

171 |
172 |
173 |

Real-time Feedback

174 |

Get instant feedback on your code to track your progress and stay on the right learning path.

175 |
176 |
177 |
178 | 179 |
180 |

Why Choose Math 4 Python?

181 |

We provide a unique approach to learning by blending coding with math, offering practical, real-world 182 | challenges that make the learning process engaging and effective.

183 |
184 | 185 |
186 |

Contact Us

187 |

If you have any questions or would like more information, feel free to reach out to us at https://magicmath.co/.

189 |
190 |
191 | 192 | 227 | 228 | 231 | 232 | 233 | 234 | 252 | 253 | 254 | 255 | -------------------------------------------------------------------------------- /pages/challenge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math 4 Python - Challenges 8 | 9 | 10 | 11 | 12 | 14 | 15 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | Home 25 | About 26 | Learn 27 | Challenge 28 | FAQs 29 |
30 | 31 |
32 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 |

Python Challenges

47 |

Welcome to the challenges section! Test your skills with various coding challenges.

48 |
49 |

Challenge Progress

50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 | 82 | 83 |
84 |

Challenge Description

85 |

Select a challenge from the list to view its description and instructions.

86 |
87 | 88 |
89 |
90 | 91 | 92 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /pages/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Math 4 Python - FAQs 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | Home 24 | About 25 | Learn 26 | Challenge 27 | FAQs 28 |
29 | 30 |
31 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 43 |
44 |

Frequently Asked Questions

45 |
46 | 47 |
48 | 52 | 53 |
54 |

Math 4 Python is an interactive learning platform designed to teach Python programming with a 55 | focus on mathematical concepts. You'll get to solve real-world math problems using Python and 56 | build a strong foundation in both subjects.

57 |
58 |
59 | 60 |
61 | 65 | 66 |
67 |

You don't need any prior programming experience! All you need is an internet connection, a 68 | browser, and a willingness to learn. The platform provides an interactive coding environment, so 69 | no software installation is required.

70 |
71 |
72 | 73 |
74 | 78 | 79 |
80 |

Absolutely! Our platform is designed to cater to beginners as well as those with some programming 81 | experience. We start with the basics and gradually progress to more advanced topics, ensuring a 82 | smooth learning curve for all users.

83 |
84 |
85 | 86 |
87 | 91 | 92 |
93 |

Our platform features an in-browser Python interpreter. You can write and execute Python code 94 | directly in your web browser without the need for any local installations. This allows for 95 | immediate feedback and a seamless learning experience.

96 |
97 |
98 | 99 |
100 | 104 | 105 |
106 |

Currently, we don't have a built-in progress saving feature. However, we recommend keeping notes 107 | of the lessons you've completed and any code you've written. We're working on implementing a 108 | user account system in the future to allow progress tracking.

109 |
110 |
111 | 112 |
113 | 117 | 118 |
119 |

We cover a wide range of mathematical concepts, including basic arithmetic, algebra, geometry, 120 | trigonometry, calculus, and statistics. Each concept is introduced alongside relevant Python 121 | programming techniques, allowing you to see the practical applications of math in coding.

122 |
123 |
124 | 125 |
126 | 130 | 131 |
132 |

We strive to add new lessons and challenges regularly. Our team is constantly working on 133 | developing new content to keep the learning experience fresh and engaging. We recommend checking 134 | back often or following our social media channels for updates on new content.

135 |
136 |
137 | 138 |
139 | 143 | 144 |
145 |

While we don't currently have a built-in forum, we encourage users to join our community on 146 | platforms like Discord or Reddit. These spaces are great for discussing problems, sharing 147 | solutions, and connecting with other learners. Links to these communities can be found on our 148 | homepage.

149 |
150 |
151 | 152 |
153 | 157 | 158 |
159 |

Absolutely! Math 4 Python is an excellent resource for supplementing your school or university 160 | coursework. While it shouldn't replace your formal education, it can provide additional 161 | practice, alternative explanations, and practical applications of the concepts you're learning 162 | in class.

163 |
164 |
165 | 166 |
167 | 171 | 172 |
173 |

Currently, Math 4 Python is a web-based platform optimized for desktop and mobile browsers. We 174 | don't have a dedicated mobile app at the moment, but our website is responsive and works well on 175 | mobile devices. We're considering developing a mobile app in the future based on user demand. 176 |

177 |
178 | 179 |
180 | 181 |
182 |
183 | 184 | 219 | 220 | 221 | 224 | 225 | 226 | 238 | 239 | 240 | 241 | -------------------------------------------------------------------------------- /pages/feedback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math4Python Feedback Form 8 | 9 | 10 | 11 | 12 |
13 |

Feedback Form

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 30 | 31 | 32 | 33 | 34 | 35 |

36 | 37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /pages/learn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math 4 Python - Learn 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 |
30 | Home 31 | About 32 | Learn 33 | Challenge 34 | FAQs 35 |
36 | 37 |
38 | 42 | 43 | 44 | 45 | 46 |
47 | 48 |
49 | 50 |
51 |

Python Lessons

52 |

Welcome to the Python lessons! Choose a lesson below to get started.

53 |
54 | 55 |

56 |
57 | 58 |
59 |
60 | 72 |
73 | 74 |
75 |
76 |
77 | 78 |
81 | 84 |
85 | 86 |
87 |

Code Input :

88 |
89 | 90 |

Output :

91 |
92 |
93 |
94 |
95 | 96 |
97 | 98 | 99 |
100 |
101 |
102 |

Lesson Progress

103 |
104 |
105 |
106 |
107 | 108 |
109 |
110 |
111 | 112 |
113 | 114 |
115 |
116 | 117 | 152 | 153 | 154 | 155 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /scripts/feedback.js: -------------------------------------------------------------------------------- 1 | function handleSubmit() { 2 | const name = document.getElementById('name').value; 3 | const email = document.getElementById('email').value; 4 | const rating = document.getElementById('rating').value; 5 | const comments = document.getElementById('comments').value; 6 | const responseMessage = document.getElementById('responseMessage'); 7 | 8 | if (!name || !email || !rating || !comments) { 9 | responseMessage.textContent = 'Please fill in all the fields.'; 10 | responseMessage.classList.add('error'); 11 | return false; 12 | } 13 | 14 | responseMessage.textContent = `Thank you, ${name}, for your feedback!`; 15 | responseMessage.classList.remove('error'); 16 | return false; // Prevents form submission for demo purposes 17 | } 18 | function goBack() { 19 | window.location.href = "https://magicmath.co/"; // Redirect to index.html 20 | } -------------------------------------------------------------------------------- /scripts/script.js: -------------------------------------------------------------------------------- 1 | let editor; 2 | let pyodide; 3 | let currentLesson; 4 | let currentContentType; 5 | 6 | // Add these lines at the beginning of the file 7 | let userProgress = JSON.parse(localStorage.getItem("userProgress")) || { 8 | lessons: {}, 9 | challenges: {}, 10 | }; 11 | 12 | function updateProgress(type, item) { 13 | if (type === "lesson") { 14 | userProgress.lessons[item] = true; 15 | } else if (type === "challenge") { 16 | userProgress.challenges[item] = true; 17 | } 18 | localStorage.setItem("userProgress", JSON.stringify(userProgress)); 19 | updateProgressBar(); 20 | } 21 | 22 | function updateProgressBar() { 23 | const lessonProgress = document.getElementById("lesson-progress"); 24 | const challengeProgress = document.getElementById("challenge-progress"); 25 | const lessonResetBtn = document.getElementById("lesson-reset-btn"); 26 | const challengeResetBtn = document.getElementById("challenge-reset-btn"); 27 | 28 | if (lessonProgress) { 29 | const completedLessons = Object.values(userProgress.lessons).filter( 30 | Boolean 31 | ).length; 32 | const totalLessons = document.querySelectorAll(".lesson-list li").length; 33 | const lessonPercentage = (completedLessons / totalLessons) * 100; 34 | lessonProgress.style.width = `${lessonPercentage}%`; 35 | lessonProgress.textContent = `${Math.round(lessonPercentage)}%`; 36 | 37 | // Show reset button if there's any progress 38 | if (lessonResetBtn) { 39 | lessonResetBtn.style.display = 40 | completedLessons > 0 ? "inline-block" : "none"; 41 | } 42 | } 43 | 44 | if (challengeProgress) { 45 | const completedChallenges = Object.values(userProgress.challenges).filter( 46 | Boolean 47 | ).length; 48 | const totalChallenges = 49 | document.querySelectorAll("#challenge-list li").length; 50 | const challengePercentage = (completedChallenges / totalChallenges) * 100; 51 | challengeProgress.style.width = `${challengePercentage}%`; 52 | challengeProgress.textContent = `${Math.round(challengePercentage)}%`; 53 | 54 | // Show reset button if there's any progress 55 | if (challengeResetBtn) { 56 | challengeResetBtn.style.display = 57 | completedChallenges > 0 ? "inline-block" : "none"; 58 | } 59 | } 60 | } 61 | 62 | // Add this function to your script.js file 63 | function resetProgress(type) { 64 | if (type === "lesson") { 65 | userProgress.lessons = {}; 66 | } else if (type === "challenge") { 67 | userProgress.challenges = {}; 68 | } 69 | localStorage.setItem("userProgress", JSON.stringify(userProgress)); 70 | updateProgressBar(); 71 | } 72 | 73 | async function initPyodide() { 74 | try { 75 | pyodide = await loadPyodide(); 76 | console.log("Pyodide loaded successfully"); 77 | } catch (error) { 78 | console.error("Failed to load Pyodide:", error); 79 | } 80 | } 81 | 82 | // Call this function when the page loads 83 | window.addEventListener("load", initPyodide); 84 | 85 | function showEditor(lesson) { 86 | currentLesson = lesson; 87 | currentContentType = "lesson"; // Set the content type to 'lesson' 88 | document.getElementById("editor-container").style.display = "flex"; 89 | if (!editor) { 90 | editor = ace.edit("editor"); 91 | editor.setTheme("ace/theme/twilight"); 92 | editor.session.setMode("ace/mode/python"); 93 | editor.setOptions({ 94 | fontSize: "18px", 95 | }); 96 | 97 | // Enable basic autocompletion 98 | editor.setOptions({ 99 | enableBasicAutocompletion: true, 100 | enableLiveAutocompletion: true, 101 | enableSnippets: true, 102 | }); 103 | 104 | // Define custom keywords for auto-completion 105 | const customKeywords = [ 106 | "import", 107 | "from", 108 | "class", 109 | "def", 110 | "return", 111 | "for", 112 | "while", 113 | "if", 114 | "elif", 115 | "else", 116 | "try", 117 | "except", 118 | "finally", 119 | "with", 120 | "as", 121 | "lambda", 122 | "print", 123 | "input", 124 | "len", 125 | "str", 126 | "int", 127 | "float", 128 | "bool", 129 | "list", 130 | "dict", 131 | "set", 132 | "tuple", 133 | "open", 134 | "range", 135 | ]; 136 | const customCompleter = { 137 | getCompletions: function (editor, session, pos, prefix, callback) { 138 | if (prefix.length === 0) { 139 | return callback(null, []); 140 | } 141 | const completions = customKeywords.map(function (keyword) { 142 | return { 143 | caption: keyword, 144 | value: keyword, 145 | meta: "keyword", 146 | }; 147 | }); 148 | callback(null, completions); 149 | }, 150 | }; 151 | 152 | // Add the custom completer to ACE's completers 153 | ace.require("ace/ext/language_tools").addCompleter(customCompleter); 154 | } 155 | 156 | // Update the editor content based on the lesson chosen 157 | if (lesson === "Hello World") { 158 | editor.setValue( 159 | `\ 160 | # Lesson: Hello World in Python 161 | # The print() function is used to display output to the console. 162 | print("Hello, World!")`, 163 | 1 164 | ); 165 | } else if (lesson === "Variables") { 166 | editor.setValue( 167 | `\ 168 | # Lesson: Variables in Python 169 | # Variables are used to store data. 170 | x = 10 # This is an integer variable 171 | name = "Alice" # This is a string variable 172 | print(x, name)`, 173 | 1 174 | ); 175 | } else if (lesson === "Conditionals") { 176 | editor.setValue( 177 | `\ 178 | # Lesson: Conditionals in Python 179 | # Conditionals allow you to make decisions in your code. 180 | x = 10 181 | if x > 5: 182 | print("x is greater than 5") 183 | else: 184 | print("x is not greater than 5")`, 185 | 1 186 | ); 187 | } else if (lesson === "Loops") { 188 | editor.setValue( 189 | `\ 190 | # Lesson: Loops in Python 191 | # Loops allow you to repeat code multiple times. 192 | for i in range(5): 193 | print(f"This is iteration {i+1}")`, 194 | 1 195 | ); 196 | } else if (lesson === "Functions") { 197 | editor.setValue( 198 | `\ 199 | # Lesson: Functions in Python 200 | # Functions allow you to group code that performs a specific task. 201 | def greet(name): 202 | return f"Hello, {name}!" 203 | 204 | print(greet("Alice"))`, 205 | 1 206 | ); 207 | } else if (lesson === "Sets") { 208 | // New lesson added here 209 | editor.setValue( 210 | `\ 211 | # Lesson: Sets in Python 212 | # Sets are collections of unique elements. 213 | my_set = {1, 2, 3, 4, 5} 214 | print("Original set:", my_set) 215 | 216 | # Adding an element 217 | my_set.add(6) 218 | print("After adding 6:", my_set) 219 | 220 | # Removing an element 221 | my_set.remove(3) 222 | print("After removing 3:", my_set) 223 | 224 | # Checking if an element exists 225 | if 2 in my_set: 226 | print("2 is in the set") 227 | 228 | # Set operations 229 | another_set = {4, 5, 6, 7} 230 | union_set = my_set.union(another_set) 231 | print("Union of sets:", union_set) 232 | 233 | intersection_set = my_set.intersection(another_set) 234 | print("Intersection of sets:", intersection_set)`, 235 | 1 236 | ); 237 | } else if (lesson === "Dictionary") { 238 | editor.setValue( 239 | `\ 240 | # Lesson: Dictionaries in Python 241 | # Dictionaries store key-value pairs. 242 | # Keys must be unique and can be of different data types. 243 | 244 | # Creating a dictionary 245 | student = { 246 | "name": "Alice", 247 | "age": 22, 248 | "major": "Computer Science" 249 | } 250 | 251 | # Accessing dictionary values using keys 252 | print("Student's name:", student["name"]) 253 | print("Student's age:", student["age"]) 254 | 255 | # Adding a new key-value pair 256 | student["grade"] = "A" 257 | print("Updated student dictionary:", student) 258 | 259 | # Modifying an existing value 260 | student["age"] = 23 261 | print("After modifying age:", student) 262 | 263 | # Removing a key-value pair 264 | del student["major"] 265 | print("After removing major:", student) 266 | 267 | # Looping through dictionary keys and values 268 | for key, value in student.items(): 269 | print(f"{key}: {value}") 270 | 271 | # Checking if a key exists 272 | if "name" in student: 273 | print("The student's name is:", student["name"]) 274 | 275 | # Using the get() method to access values safely 276 | major = student.get("major", "No major specified") 277 | print("Student's major:", major)`, 278 | 1 279 | ); 280 | } else if (lesson === "Lists") { 281 | editor.setValue( 282 | `\ 283 | # 1. Creating a list with integers 284 | my_list = [1, 2, 3, 4, 5] 285 | 286 | # Creating a list with mixed data types 287 | mixed_list = [1, "hello", 3.14, True] 288 | 289 | # Creating an empty list 290 | empty_list = [] 291 | 292 | # 2. Accessing the first element 293 | first_element = my_list[0] 294 | print("First Element", first_element) # Output: 1 295 | 296 | # Accessing the last element 297 | last_element = my_list[-1] 298 | print("Last Element", last_element) # Output: 5 299 | 300 | # 3. Lists are mutable, so you can change the value of elements. 301 | # Modifying the second element 302 | my_list[1] = 20 303 | print("After modifying the second element:", my_list) # Output: [1, 20, 3, 4, 5] 304 | 305 | # 4. Basic Operations 306 | # 4.1 Appending an element 307 | my_list.append(100) 308 | print("Appending 100:", my_list) # Output: [1, 20, 3, 4, 5, 100] 309 | 310 | # 4.2 Inserting an element at a specific position 311 | my_list.insert(1, 6) 312 | print("Inserting 6 at position 1:", my_list) # Output: [1, 6, 20, 3, 4, 5, 100] 313 | 314 | # 4.3 Removing a specific element by value 315 | my_list.remove(3) 316 | print("Removing 3:", my_list) # Output: [1, 6, 20, 4, 5, 100] 317 | 318 | # 4.4 Removing an element by index 319 | my_list.pop(1) 320 | print("Removing element at index 1:", my_list) # Output: [1, 20, 4, 5, 100] 321 | 322 | # 4.5 Removing the last element 323 | my_list.pop() 324 | print("Removing the last element:", my_list) # Output: [1, 20, 4, 5]`, 325 | 1 326 | ); 327 | } else if (lesson === "Tuples") { 328 | editor.setValue( 329 | `\ 330 | # 1. Creating Tuples 331 | # Creating a tuple with integers 332 | my_tuple = (1, 2, 3, 4, 5) 333 | 334 | # Creating a tuple with mixed data types 335 | mixed_tuple = (1, "hello", 3.14, True) 336 | 337 | # Creating a tuple with a single item (note the comma) 338 | single_item_tuple = (10,) 339 | 340 | # Creating an empty tuple 341 | empty_tuple = () 342 | 343 | # 2. Accessing elements 344 | my_tuple = (10, 20, 30, 40, 50) 345 | 346 | # Accessing the first element 347 | first_element = my_tuple[0] 348 | print("First Element:", first_element) # Output: 10 349 | 350 | # Accessing the last element 351 | last_element = my_tuple[-1] 352 | print("Last Element:", last_element) # Output: 50 353 | 354 | # 3. Tuples are immutable 355 | my_tuple = (1, 2, 3) 356 | 357 | # Trying to modify an element (this will raise an error) 358 | # my_tuple[1] = 100 # Uncommenting this line will cause a TypeError 359 | 360 | 361 | # 4. Basic Operations 362 | # 4.1 Concatenating two tuples 363 | tuple1 = (1, 2, 3) 364 | tuple2 = (4, 5, 6) 365 | result_tuple = tuple1 + tuple2 366 | print("Concatenation of tuple1 and tuple2:", result_tuple) # Output: (1, 2, 3, 4, 5, 6) 367 | 368 | # 4.2 Repeating the tuple 369 | my_tuple = (1, 2, 3) 370 | repeated_tuple = my_tuple * 3 371 | print("Repeated Tuple", repeated_tuple) # Output: (1, 2, 3, 1, 2, 3, 1, 2, 3) 372 | 373 | # 4.3 Slicing 374 | # Slicing the first 3 elements 375 | my_tuple = (10, 20, 30, 40, 50, 60) 376 | print("Slicing", my_tuple[:3]) # Output: (10, 20, 30) 377 | 378 | # Slicing from the third element to the end 379 | print(my_tuple[2:]) # Output: (30, 40, 50, 60) 380 | 381 | # Slicing a range of elements 382 | print(my_tuple[1:4]) # Output: (20, 30, 40) 383 | 384 | # 4.4 Unpacking the tuple 385 | my_tuple = (10, 20, 30) 386 | a, b, c = my_tuple 387 | print("Unpacking", a) # Output: 10 388 | print(b) # Output: 20 389 | print(c) # Output: 30`, 390 | 1 391 | ); 392 | } else if (lesson === "TryExcept") { 393 | editor.setValue( 394 | `\ 395 | # Example 1 396 | try: 397 | result = 10 / 0 # Risky code 398 | except ZeroDivisionError: 399 | print("Cannot divide by zero!") # Handling the exception 400 | 401 | # Example 2 402 | try: 403 | age = 17 404 | if age < 18: 405 | raise ValueError("You must be at least 18 years old.") 406 | except ValueError as e: 407 | print(e)`, 408 | 1 409 | ); 410 | } 411 | updateProgress("lesson", lesson); 412 | } 413 | 414 | async function runCode() { 415 | // Clear the terminal 416 | clearTerminal(); 417 | 418 | // Get the code from the editor 419 | const code = editor.getValue(); 420 | const terminal = document.getElementById("terminal"); 421 | 422 | // Run the code using Pyodide 423 | try { 424 | await pyodide 425 | .runPythonAsync( 426 | `\ 427 | import sys 428 | from io import StringIO 429 | 430 | # Create a buffer to capture stdout 431 | output_buffer = StringIO() 432 | sys.stdout = output_buffer 433 | 434 | try: 435 | # Run the user code 436 | ${code 437 | .split("\n") 438 | .map((line) => " " + line) 439 | .join("\n")} 440 | except Exception as e: 441 | print(f"Error: {e}") 442 | 443 | # Reset stdout and get the output 444 | sys.stdout = sys.__stdout__ 445 | output = output_buffer.getvalue() 446 | output 447 | ` 448 | ) 449 | .then((output) => { 450 | terminal.innerHTML += output; 451 | }); 452 | } catch (err) { 453 | terminal.innerHTML += `Error:\n${err}\n`; 454 | } 455 | } 456 | 457 | function clearTerminal() { 458 | document.getElementById("terminal").innerHTML = ""; 459 | } 460 | 461 | // Theme toggle function 462 | document.getElementById("theme-toggle").addEventListener("click", () => { 463 | document.body.classList.toggle("dark-theme"); 464 | updateThemeIcon(); 465 | }); 466 | 467 | function updateThemeIcon() { 468 | const themeToggle = document.getElementById("theme-toggle"); 469 | const sunIcon = themeToggle.querySelector(".fa-sun"); 470 | const moonIcon = themeToggle.querySelector(".fa-moon"); 471 | 472 | if (getTheme() === "dark") { 473 | themeToggle.title = "Switch to light theme"; 474 | sunIcon.style.display = "inline-block"; 475 | moonIcon.style.display = "none"; 476 | } else { 477 | themeToggle.title = "Switch to dark theme"; 478 | sunIcon.style.display = "none"; 479 | moonIcon.style.display = "inline-block"; 480 | } 481 | } 482 | 483 | // Add these functions at the beginning of your script.js file 484 | 485 | function setTheme(theme) { 486 | localStorage.setItem("theme", theme); 487 | document.body.classList.toggle("dark-theme", theme === "dark"); 488 | updateThemeIcon(); 489 | } 490 | 491 | function getTheme() { 492 | return localStorage.getItem("theme") || "light"; 493 | } 494 | 495 | // Modify the existing theme toggle event listener 496 | document.addEventListener("DOMContentLoaded", () => { 497 | const themeToggle = document.getElementById("theme-toggle"); 498 | if (themeToggle) { 499 | themeToggle.addEventListener("click", () => { 500 | const newTheme = getTheme() === "light" ? "dark" : "light"; 501 | setTheme(newTheme); 502 | }); 503 | } 504 | 505 | // Apply the stored theme when the page loads 506 | setTheme(getTheme()); 507 | }); 508 | 509 | // Challenge color 510 | 511 | // script.js 512 | document.querySelectorAll("#challenge-list a").forEach((link) => { 513 | link.addEventListener("click", function (e) { 514 | e.preventDefault(); // Prevent the default behavior 515 | 516 | // Remove the 'clicked' class from all links 517 | document 518 | .querySelectorAll("#challenge-list a") 519 | .forEach((link) => link.classList.remove("clicked")); 520 | 521 | // Add the 'clicked' class to the clicked link 522 | this.classList.add("clicked"); 523 | }); 524 | }); 525 | 526 | function viewChallenge(challenge) { 527 | console.log("View Challenge:", challenge); 528 | // Additional logic for viewing the challenge can go here 529 | updateProgress("challenge", challenge); 530 | } 531 | 532 | // Initial theme setting 533 | document.addEventListener("DOMContentLoaded", () => { 534 | updateThemeIcon(); 535 | }); 536 | 537 | // genrate random quetions 538 | 539 | const questions = [ 540 | "Write a Python function to find the factorial of a number.", 541 | "Write a Python program to check if a string is a palindrome.", 542 | "Write a Python function to calculate the sum of numbers in a list.", 543 | "Write a Python program to print the Fibonacci sequence.", 544 | "Write a Python function to sort a list of numbers.", 545 | // Add more questions as needed 546 | ]; 547 | function generateQuestion() { 548 | currentContentType = "practice_question"; 549 | const randomIndex = Math.floor(Math.random() * questions.length); 550 | currentContent = questions[randomIndex]; // Store the current question text 551 | document.getElementById("random-question").innerText = currentContent; 552 | if (editor) { 553 | editor.setValue( 554 | `# Question: ${currentContent}\n\n# Write your Python code here:\n`, 555 | 1 556 | ); 557 | } 558 | } 559 | 560 | // Call this function on page load if you want to display a question initially 561 | // generateQuestion(); 562 | 563 | // For the challenge page 564 | 565 | function viewChallenge(challengeName) { 566 | const description = document.getElementById("challenge-description"); 567 | 568 | switch (challengeName) { 569 | case "Basic Math Challenge": 570 | description.innerHTML = `\ 571 |

Basic Math Challenge

572 |

Test your skills in basic arithmetic operations. Solve the problems below:

573 | 579 | `; 580 | break; 581 | case "Logic Challenge": 582 | description.innerHTML = `\ 583 |

Logic Challenge

584 |

Use your logical thinking to solve these puzzles:

585 | 589 | `; 590 | break; 591 | case "String Manipulation": 592 | description.innerHTML = ` 593 |

String Manipulation Challenge

594 |

Put your string handling skills to the test! This challenge will assess your ability to manipulate and transform strings using various operations:

595 | 600 | `; 601 | break; 602 | case "File Handling Challenge": 603 | description.innerHTML = ` 604 |

File Handling Challenge

605 |

Put your file handling skills to the test! This challenge will assess your ability to read from and write to files, as well as manipulate their contents.:

606 | 611 | `; 612 | break; 613 | case "Data Structures Challenge": 614 | description.innerHTML = `\ 615 |

Data Structures Challenge

616 |

Apply your knowledge of data structures in these coding problems:

617 | 621 | `; 622 | break; 623 | case "Dynamic Pogramming Challenge": 624 | description.innerHTML = ` 625 |

Dynamic Programming Challenge

626 |

Put your dynamic programming skills to the test!. Tackle the tasks below:

627 | 634 | 635 | `; 636 | break; 637 | case "Object-Oriented Programming": 638 | description.innerHTML = ` 639 |

Object-Oriented Programming Challenge

640 |

Test your object-oriented programming skills! This challenge will evaluate your ability to design and implement classes and objects. Take on the tasks below:

641 | 647 | `; 648 | break; 649 | case "Recursion": 650 | description.innerHTML = ` 651 |

Recursion Challenge

652 |

Challenge yourself with recursion! Take on the tasks below:

653 | 660 | 661 | `; 662 | break; 663 | case "Search Algorithm": 664 | description.innerHTML = ` 665 |

Search Algorithm Challenge

666 |

Test your search algorithm skills! Solve the tasks below:

667 | 674 | 675 | 676 | `; 677 | break; 678 | case "Array": 679 | description.innerHTML = ` 680 |

Array Challenge

681 |

Put your array skills to the test! Complete the tasks below:

682 | 689 | 690 | `; 691 | break; 692 | case "Graph": 693 | description.innerHTML = ` 694 |

Graph Algorithms Challenge

695 |

Test your graph algorithm skills! This challenge will assess your ability to traverse graphs and find shortest paths. Solve the tasks below:

696 | 703 | 704 | `; 705 | break; 706 | default: 707 | description.innerHTML = `

Select a challenge to view its description.

`; 708 | } 709 | updateProgress("challenge", challengeName); 710 | } 711 | 712 | // FAQ Accordion 713 | document.addEventListener("DOMContentLoaded", function () { 714 | var acc = document.getElementsByClassName("accordion"); 715 | var i; 716 | 717 | for (i = 0; i < acc.length; i++) { 718 | acc[i].addEventListener("click", function () { 719 | this.classList.toggle("active"); 720 | var panel = this.nextElementSibling; 721 | if (panel.style.maxHeight) { 722 | panel.style.maxHeight = null; 723 | } else { 724 | panel.style.maxHeight = panel.scrollHeight + "px"; 725 | } 726 | }); 727 | } 728 | updateProgressBar(); 729 | }); 730 | 731 | document.addEventListener("DOMContentLoaded", () => { 732 | 733 | const lessonResetBtn = document.getElementById("lesson-reset-btn"); 734 | const challengeResetBtn = document.getElementById("challenge-reset-btn"); 735 | 736 | if (lessonResetBtn) { 737 | lessonResetBtn.addEventListener("click", () => resetProgress("lesson")); 738 | } 739 | 740 | if (challengeResetBtn) { 741 | challengeResetBtn.addEventListener("click", () => 742 | resetProgress("challenge") 743 | ); 744 | } 745 | 746 | updateProgressBar(); 747 | }); 748 | 749 | function checkWindowSize() { 750 | const navLinks = document.querySelector(".nav-links"); 751 | const icon = document.querySelector(".icon"); 752 | 753 | if (window.innerWidth > 992) { 754 | navLinks.style.display = "flex"; 755 | icon.style.display = "none"; 756 | } else { 757 | navLinks.style.display = "none"; 758 | icon.style.display = "block"; 759 | } 760 | } 761 | 762 | window.addEventListener("resize", checkWindowSize); 763 | // window.addEventListener('load', checkWindowSize); 764 | 765 | function openMobileMenu() { 766 | const navLinks = document.querySelector(".nav-links"); 767 | const menuIcon = document.querySelector(".fa-bars"); 768 | const closeIcon = document.querySelector(".fa-times"); 769 | 770 | // Check if navLinks are currently displayed 771 | if (navLinks.style.display === "flex" || navLinks.style.display === "") { 772 | // Hide navLinks and show menuIcon 773 | navLinks.style.display = "none"; 774 | menuIcon.style.display = "inline-block"; 775 | closeIcon.style.display = "none"; 776 | } else { 777 | // Show navLinks and hide menuIcon 778 | navLinks.style.display = "flex"; 779 | menuIcon.style.display = "none"; 780 | closeIcon.style.display = "inline-block"; 781 | } 782 | } 783 | 784 | function checkWindowSize() { 785 | const navLinks = document.querySelector('.nav-links'); 786 | const icon = document.querySelector('.icon'); 787 | 788 | if (window.innerWidth > 992) { 789 | navLinks.style.display = 'flex'; 790 | icon.style.display = 'none'; 791 | } else { 792 | navLinks.style.display = 'none'; 793 | icon.style.display = 'block'; 794 | } 795 | } 796 | 797 | window.addEventListener('resize', checkWindowSize); 798 | // window.addEventListener('load', checkWindowSize); 799 | 800 | function openMobileMenu() { 801 | const navLinks = document.querySelector('.nav-links'); 802 | const menuIcon = document.querySelector(".fa-bars"); 803 | const closeIcon = document.querySelector(".fa-times"); 804 | 805 | if (navLinks.style.display === "flex") { 806 | navLinks.style.display = "none"; 807 | menuIcon.style.display = 'inline-block'; 808 | closeIcon.style.display = 'none'; 809 | } else { 810 | navLinks.style.display = "flex"; 811 | menuIcon.style.display = 'none'; 812 | closeIcon.style.display = 'inline-block'; 813 | } 814 | } 815 | 816 | //This function should check currentContentType to decide how to reset the editor. 817 | function resetEditor() { 818 | // Check the type of content currently loaded 819 | if (currentContentType === "lesson") { 820 | // If it's a lesson, reset to the original lesson content 821 | showEditor(currentLesson); 822 | } else if (currentContentType === "practice_question") { 823 | // If it's a practice question, clear the editor but keep the question visible 824 | if (editor && currentContent) { 825 | editor.setValue( 826 | `# Question: ${currentContent}\n\n# Write your Python code here:\n`, 827 | 1 828 | ); 829 | } 830 | } 831 | } 832 | 833 | //reset-button 834 | document.addEventListener("DOMContentLoaded", function () { 835 | document.getElementById("reset-code").addEventListener("click", resetEditor); 836 | }); 837 | 838 | document.getElementById("copy-code").addEventListener("click", () => { 839 | const code = editor.getValue(); 840 | navigator.clipboard 841 | .writeText(code) 842 | .then(() => { 843 | const copyMessage = document.getElementById("copy-message"); 844 | copyMessage.style.display = "block"; 845 | setTimeout(() => { 846 | copyMessage.style.display = "none"; 847 | }, 1000); 848 | }) 849 | .catch((err) => { 850 | console.error("Failed to copy text: ", err); 851 | }); 852 | }); -------------------------------------------------------------------------------- /styles/about.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | font-family: 'Arial', sans-serif; 9 | line-height: 1.6; 10 | background-color: #f7f9fc; 11 | color: white; 12 | } 13 | 14 | header { 15 | background: #4a4e69; 16 | color: white; 17 | padding: 20px 0; 18 | text-align: center; 19 | } 20 | 21 | header nav ul { 22 | list-style-type: none; 23 | padding: 0; 24 | } 25 | 26 | header nav ul li { 27 | display: inline; 28 | margin: 0 15px; 29 | } 30 | 31 | header nav ul li a { 32 | color: white; 33 | text-decoration: none; 34 | font-weight: bold; 35 | transition: color 0.3s; 36 | } 37 | 38 | header nav ul li a:hover { 39 | text-decoration: underline; 40 | color: #d9d9d9; 41 | } 42 | 43 | h1 { 44 | margin: 0; 45 | font-size: 2.5em; 46 | } 47 | 48 | .intro, .benefits, .features, .testimonials, .cta { 49 | padding: 20px; 50 | background: #ffffff; 51 | margin: 20px; 52 | border-radius: 5px; 53 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 54 | transition: transform 0.3s, box-shadow 0.3s; 55 | } 56 | 57 | .intro:hover, .benefits:hover, .features:hover, .testimonials:hover, .cta:hover { 58 | transform: translateY(-5px); 59 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 60 | } 61 | 62 | .intro { 63 | border-left: 5px solid #4a4e69; 64 | } 65 | 66 | h2, h3 { 67 | margin-bottom: 15px; 68 | color: #4a4e69; 69 | } 70 | 71 | ul { 72 | list-style-type: none; 73 | padding: 0; 74 | } 75 | 76 | ul li { 77 | margin-bottom: 10px; 78 | padding-left: 20px; 79 | position: relative; 80 | } 81 | 82 | ul li:before { 83 | content: "✔"; 84 | color: #4a4e69; 85 | position: absolute; 86 | left: 0; 87 | } 88 | 89 | blockquote { 90 | margin: 20px 0; 91 | padding: 10px; 92 | background: #f0f4f8; 93 | border-left: 5px solid #4a4e69; 94 | font-style: italic; 95 | } 96 | 97 | .section p{ 98 | color: #555; 99 | } 100 | 101 | /* Style for the cards */ 102 | .cards { 103 | display: flex; 104 | justify-content: space-around; 105 | margin-top: 20px; 106 | } 107 | blockquote p { 108 | margin: 0; 109 | } 110 | 111 | .cta { 112 | text-align: center; 113 | background: #4a4e69; 114 | color: white; 115 | border-radius: 5px; 116 | } 117 | 118 | .cta-button { 119 | display: inline-block; 120 | padding: 10px 20px; 121 | margin-top: 15px; 122 | background: #ffffff; 123 | color: #4a4e69; 124 | text-decoration: none; 125 | border-radius: 5px; 126 | transition: background 0.3s, color 0.3s, transform 0.3s; 127 | } 128 | 129 | .cta-button:hover { 130 | background: #4a4e69; 131 | color: white; 132 | transform: translateY(-2px); 133 | } 134 | 135 | footer { 136 | text-align: center; 137 | padding: 10px 0; 138 | background: #4a4e69; 139 | color: white; 140 | position: relative; 141 | bottom: 0; 142 | width: 100%; 143 | } 144 | 145 | footer nav ul { 146 | list-style-type: none; 147 | padding: 0; 148 | margin: 10px 0 0 0; 149 | } 150 | 151 | footer nav ul li { 152 | display: inline; 153 | margin: 0 15px; 154 | } 155 | 156 | footer nav ul li a { 157 | color: white; 158 | text-decoration: none; 159 | transition: color 0.3s; 160 | } 161 | 162 | footer nav ul li a:hover { 163 | text-decoration: underline; 164 | color: #d9d9d9; 165 | } -------------------------------------------------------------------------------- /styles/faq.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | font-family: "Roboto", sans-serif; 7 | } 8 | 9 | .wrapper { 10 | max-width: 75%; 11 | margin: auto; 12 | } 13 | 14 | .wrapper > p, 15 | .wrapper > h1 { 16 | margin: 1.5rem 0; 17 | text-align: center; 18 | } 19 | 20 | .wrapper > h1 { 21 | letter-spacing: 3px; 22 | } 23 | 24 | .accordion { 25 | background-color: white; 26 | color: rgba(0, 0, 0, 0.8); 27 | cursor: pointer; 28 | font-size: 1.2rem; 29 | width: 100%; 30 | padding: 2rem 2.5rem; 31 | border: none; 32 | outline: none; 33 | transition: 0.4s; 34 | display: flex; 35 | justify-content: space-between; 36 | align-items: center; 37 | font-weight: bold; 38 | } 39 | 40 | .accordion i { 41 | font-size: 1.6rem; 42 | } 43 | 44 | .active, 45 | .accordion:hover { 46 | background-color: #f1f7f5; 47 | } 48 | 49 | .pannel { 50 | padding: 0 2rem 2.5rem 2rem; 51 | background-color: white; 52 | overflow: hidden; 53 | background-color: #f1f7f5; 54 | display: none; 55 | } 56 | 57 | .pannel p { 58 | color: rgba(0, 0, 0, 0.7); 59 | font-size: 1.2rem; 60 | line-height: 1.4; 61 | } 62 | 63 | .faq { 64 | border: 1px solid rgba(0, 0, 0, 0.2); 65 | margin: 10px 0; 66 | } 67 | 68 | .faq.active { 69 | border: none; 70 | } -------------------------------------------------------------------------------- /styles/feedback.css: -------------------------------------------------------------------------------- 1 | /* Global styles */ 2 | * { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | font-family: 'Poppins', sans-serif; 10 | background: linear-gradient(135deg, #f3f4f7 0%, #d7e2f2 100%); 11 | background-attachment: fixed; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | padding: 20px; 17 | color: #333; 18 | } 19 | 20 | /* Feedback form container */ 21 | .feedback-container { 22 | background-color: #ffffff; 23 | border-radius: 16px; 24 | box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); 25 | padding: 30px; 26 | max-width: 480px; 27 | width: 100%; 28 | text-align: center; 29 | transition: transform 0.3s ease; 30 | animation: slideIn 1s ease-in-out; 31 | } 32 | 33 | /* Slide-in animation */ 34 | @keyframes slideIn { 35 | 0% { opacity: 0; transform: translateY(50px); } 36 | 100% { opacity: 1; transform: translateY(0); } 37 | } 38 | 39 | h2 { 40 | font-size: 26px; 41 | color: #34495e; 42 | margin-bottom: 25px; 43 | font-weight: 600; 44 | letter-spacing: 1px; 45 | } 46 | 47 | /* Form styling */ 48 | form { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: flex-start; 52 | } 53 | 54 | label { 55 | margin: 10px 0 5px; 56 | color: #2c3e50; 57 | font-weight: 500; 58 | font-size: 15px; 59 | } 60 | 61 | input, select, textarea { 62 | width: 100%; 63 | padding: 12px; 64 | border: 1px solid #dfe6e9; 65 | border-radius: 10px; 66 | margin-bottom: 20px; 67 | font-size: 16px; 68 | background-color: #f7f9fc; 69 | outline: none; 70 | transition: border-color 0.3s ease; 71 | } 72 | 73 | input:focus, select:focus, textarea:focus { 74 | border-color: #2980b9; 75 | } 76 | 77 | /* Textarea specifics */ 78 | textarea { 79 | resize: vertical; 80 | min-height: 120px; 81 | } 82 | 83 | /* Button styling */ 84 | button { 85 | padding: 12px 20px; 86 | width: 100%; 87 | background-color: #2980b9; 88 | color: #ffffff; 89 | border: none; 90 | border-radius: 12px; 91 | font-size: 18px; 92 | font-weight: 600; 93 | cursor: pointer; 94 | transition: background-color 0.3s ease, transform 0.2s ease; 95 | } 96 | 97 | button:hover { 98 | background-color: #3498db; 99 | transform: scale(1.05); 100 | } 101 | 102 | button:active { 103 | background-color: #1f618d; 104 | transform: scale(1); 105 | } 106 | 107 | /* Response message */ 108 | .response-message { 109 | margin-top: 20px; 110 | font-size: 18px; 111 | font-weight: 500; 112 | color: #2ecc71; 113 | } 114 | 115 | .error { 116 | color: #e74c3c; 117 | } 118 | 119 | /* Responsive design */ 120 | @media (max-width: 768px) { 121 | .feedback-container { 122 | padding: 25px; 123 | max-width: 100%; 124 | } 125 | 126 | h2 { 127 | font-size: 24px; 128 | } 129 | 130 | button { 131 | font-size: 16px; 132 | } 133 | } 134 | 135 | /* Subtle Background Pattern */ 136 | body::before { 137 | content: ''; 138 | position: absolute; 139 | top: 0; 140 | left: 0; 141 | width: 100%; 142 | height: 100%; 143 | background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); 144 | opacity: 0.1; 145 | z-index: -1; 146 | } -------------------------------------------------------------------------------- /styles/hamburger_menu.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: center; 5 | justify-content: space-between; 6 | padding: 10px 20px; 7 | background-color: #2c3e50; 8 | color: white; 9 | } 10 | 11 | .nav-links { 12 | display: flex; 13 | gap: 15px; 14 | } 15 | 16 | .nav-links a { 17 | color: white; 18 | text-decoration: none; 19 | padding: 8px 12px; 20 | border-radius: 4px; 21 | } 22 | 23 | .reset-btn { 24 | background-color: #dc3545; 25 | } 26 | 27 | .btn { 28 | padding: 10px 20px; 29 | border: none; 30 | border-radius: 5px; 31 | color: white; 32 | font-size: 16px; 33 | cursor: pointer; 34 | transition: background-color 0.3s ease; 35 | display: flex; 36 | align-items: center; 37 | } 38 | 39 | .copy-btn { 40 | background-color: #007bff; 41 | } 42 | 43 | .copy-btn:hover { 44 | background-color: #0056b3; 45 | } 46 | 47 | .btn i { 48 | margin-right: 8px; 49 | } 50 | 51 | .button-container { 52 | display: flex; 53 | justify-content: center; 54 | gap: 10px; 55 | } 56 | 57 | .nav-links a.active, 58 | .nav-links a:hover { 59 | background-color: #575757; 60 | } 61 | 62 | .reset-btn:hover { 63 | background-color: #c82333; 64 | } 65 | 66 | .theme-toggle-wrapper { 67 | display: flex; 68 | align-items: center; 69 | gap: 10px; 70 | margin-right: 10px; 71 | } 72 | 73 | .icon { 74 | color: #fff; 75 | display: none; 76 | } 77 | 78 | .logo img { 79 | width: 40px; 80 | } 81 | 82 | /* Responsive Styles */ 83 | @media (max-width: 992px) { 84 | .nav-links { 85 | width: 40vw; 86 | flex-direction: column; 87 | position: absolute; 88 | top: 65px; 89 | left: 0; 90 | background-color: #2c3e50; 91 | padding: 10px; 92 | border-radius: 8px; 93 | transition-property: width; 94 | transition-duration: 1s; 95 | } 96 | 97 | .nav-links a { 98 | width: unset !important; 99 | } 100 | 101 | .navbar { 102 | position: relative; 103 | } 104 | 105 | .icon { 106 | display: block; 107 | } 108 | 109 | .nav-links.show { 110 | display: flex; 111 | } 112 | } -------------------------------------------------------------------------------- /styles/styles.css: -------------------------------------------------------------------------------- 1 | /* General Body Styles */ 2 | body { 3 | font-family: "Poppins", sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | background-color: #eef2f7; 7 | /* Softer, modern background */ 8 | color: white; 9 | /* Darker text */ 10 | transition: background-color 0.3s ease, color 0.3s ease; 11 | line-height: 1.6; 12 | } 13 | 14 | /* Navbar Styles */ 15 | .navbar { 16 | background-color: #333; 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 15px 30px; 21 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 22 | /* Soft shadow for a floating effect */ 23 | position: sticky; 24 | top: 0; 25 | z-index: 1000; 26 | } 27 | 28 | .navbar .nav-links { 29 | display: flex; 30 | gap: 20px; 31 | } 32 | 33 | #theme-toggle { 34 | width: 5em; 35 | position: relative; 36 | height: 3.8em; 37 | border: 3px ridge #149cea; 38 | outline: none; 39 | background-color: transparent; 40 | color: white; 41 | transition: 1s; 42 | border-radius: 0.3em; 43 | font-size: 16px; 44 | font-weight: bold; 45 | cursor: pointer; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | text-decoration: none; 50 | font-family: Georgia, "Times New Roman", Times, serif; 51 | font-size: large; 52 | margin-right: 7px; 53 | } 54 | 55 | .navbar a { 56 | width: 7em; 57 | position: relative; 58 | height: 3.5em; 59 | border: 3px ridge #149cea; 60 | outline: none; 61 | background-color: transparent; 62 | color: white; 63 | transition: 1s; 64 | border-radius: 0.3em; 65 | font-size: 16px; 66 | font-weight: bold; 67 | cursor: pointer; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | text-decoration: none; 72 | font-family: Georgia, "Times New Roman", Times, serif; 73 | font-size: large; 74 | } 75 | 76 | .navbar a:hover::before, 77 | .navbar a:hover::after { 78 | transform: scale(0); 79 | } 80 | 81 | .navbar a:hover { 82 | box-shadow: inset 0px 0px 25px #1479ea; 83 | } 84 | 85 | /* Theme Toggle Alignment Fix */ 86 | .theme-toggle { 87 | margin-left: auto; 88 | /* Pushes the toggle button to the far right */ 89 | display: flex; 90 | justify-content: flex-end; 91 | align-items: center; 92 | } 93 | 94 | .theme-toggle img { 95 | width: 24px; 96 | height: 24px; 97 | cursor: pointer; 98 | } 99 | 100 | /* Logo */ 101 | .navbar .logo img { 102 | height: 40px; 103 | width: auto; 104 | } 105 | 106 | .content-home { 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | flex-direction: column; 111 | } 112 | 113 | /* Content Styles */ 114 | .content { 115 | padding: 60px 20px; 116 | max-width: 1200px; 117 | margin: 0 auto; 118 | background-color: #fff; 119 | border-radius: 12px; 120 | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); 121 | /* Stronger shadow for modern look */ 122 | transition: background-color 0.3s ease; 123 | animation: fadeIn 1.2s ease-in-out; 124 | /* Smooth content load animation */ 125 | margin-bottom: 35px; 126 | color: black; 127 | } 128 | 129 | .content .heading-text { 130 | font-size: 18px; 131 | } 132 | 133 | @keyframes fadeIn { 134 | from { 135 | opacity: 0; 136 | transform: translateY(20px); 137 | } 138 | 139 | to { 140 | opacity: 1; 141 | transform: translateY(0); 142 | } 143 | } 144 | 145 | h1, 146 | h2, 147 | h3, 148 | h4 { 149 | color: black; 150 | font-weight: 700; 151 | /* Bolder titles */ 152 | } 153 | 154 | h1 { 155 | font-size: 36px; 156 | } 157 | 158 | h2 { 159 | font-size: 30px; 160 | font-weight: 600; 161 | } 162 | 163 | /* Features Section */ 164 | .features { 165 | display: flex; 166 | flex-wrap: wrap; 167 | gap: 20px; 168 | margin-top: 40px; 169 | width: 100%; 170 | } 171 | 172 | .feature { 173 | background: linear-gradient(135deg, #fff, #f0f4f8); 174 | padding: 30px; 175 | border-radius: 12px; 176 | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); 177 | transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Added background transition */ 178 | text-align: center; 179 | width: 300px; 180 | } 181 | 182 | .feature img { 183 | width: 100px; /* Ensure all images have a uniform size */ 184 | height: auto; 185 | margin-bottom: 20px; 186 | object-fit: contain; /* Prevent image distortion */ 187 | } 188 | 189 | .feature:hover { 190 | transform: translateY(-8px); 191 | box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); 192 | /* Lift on hover */ 193 | background: linear-gradient( 194 | 135deg, 195 | #e0f7fa, 196 | #b2ebf2 197 | ); /* Change background on hover */ 198 | } 199 | 200 | .feature h3 { 201 | color: #007bff; 202 | margin-bottom: 10px; 203 | transition: color 0.3s ease; /* Added transition for color */ 204 | } 205 | 206 | .feature:hover h3 { 207 | color: #ff5733; /* Change title color on hover */ 208 | } 209 | 210 | .feature p { 211 | color: #666; 212 | transition: color 0.3s ease; /* Added transition for paragraph color */ 213 | } 214 | 215 | .feature:hover p { 216 | color: #333; /* Darker text on hover */ 217 | } 218 | 219 | /* Responsive Design for Features */ 220 | @media (max-width: 768px) { 221 | .features { 222 | grid-template-columns: 1fr; 223 | text-align: center; 224 | } 225 | } 226 | 227 | .call-to-action { 228 | display: flex; 229 | justify-content: center; 230 | align-items: center; 231 | flex-direction: column; 232 | } 233 | 234 | .call-to-action h2 { 235 | margin: 30px 0 10px 0 !important; 236 | } 237 | 238 | .call-to-action p { 239 | margin: 10px 0 10px 0; 240 | } 241 | 242 | /* Call-to-Action Button */ 243 | .cta-button { 244 | display: inline-block; 245 | padding: 14px 36px; 246 | background-color: #007bff; 247 | color: white; 248 | border-radius: 50px; 249 | font-size: 16px; 250 | text-decoration: none; 251 | box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4); 252 | transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s; 253 | margin-top: 20px; 254 | } 255 | 256 | .cta-button:hover { 257 | background-color: #0056b3; 258 | transform: translateY(-3px); 259 | box-shadow: 0 6px 20px rgba(0, 123, 255, 0.6); 260 | } 261 | 262 | #generate-question-button { 263 | padding: 5px 10px; 264 | background: #dc3545; 265 | border: none; 266 | border-radius: 8px; 267 | color: #fff; 268 | cursor: pointer; 269 | } 270 | 271 | /* Responsive Editor and Terminal */ 272 | #editor-container { 273 | display: flex; 274 | flex-direction: column; 275 | gap: 20px; 276 | margin-top: 40px; 277 | background-color: #f9f9f9; 278 | padding: 20px; 279 | border-radius: 12px; 280 | box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); 281 | } 282 | 283 | #editor { 284 | width: 100%; 285 | height: 400px; 286 | border: 2px solid #ccc; 287 | border-radius: 8px; 288 | padding: 15px; 289 | font-size: 16px; 290 | line-height: 1.6; 291 | } 292 | 293 | #terminal-container { 294 | display: flex; 295 | flex-direction: column; 296 | width: 100%; 297 | } 298 | 299 | #terminal { 300 | width: 100%; 301 | height: 350px; 302 | background-color: #222; 303 | color: #f0f0f0; 304 | border-radius: 8px; 305 | padding: 15px; 306 | overflow-y: auto; 307 | font-family: "Roboto Mono", monospace; 308 | } 309 | 310 | /* Button Styles */ 311 | #run-button, 312 | #clear-button { 313 | padding: 12px 24px; 314 | background-color: #007bff; 315 | color: white; 316 | border-radius: 6px; 317 | border: none; 318 | margin-right: 10px; 319 | cursor: pointer; 320 | transition: background-color 0.3s ease, transform 0.3s ease; 321 | } 322 | 323 | .progress-wrap { 324 | display: flex; 325 | align-items: center; 326 | flex-direction: row; 327 | gap: 20px; 328 | } 329 | 330 | .lesson-list a { 331 | text-decoration: none; 332 | } 333 | 334 | .lesson-list a:hover { 335 | text-decoration: underline; 336 | } 337 | 338 | #lesson-reset-btn { 339 | padding: 12px 14px; 340 | border: none; 341 | border-radius: 8px; 342 | color: #fff; 343 | } 344 | 345 | #clear-button { 346 | background-color: #dc3545; 347 | } 348 | 349 | #run-button:hover, 350 | #clear-button:hover { 351 | transform: scale(1.05); 352 | } 353 | 354 | #clear-button:hover { 355 | background-color: #c82333; 356 | } 357 | 358 | /* Dark Theme */ 359 | body.dark-theme { 360 | background-color: #1b1b1b; 361 | /* Darker background */ 362 | color: #e0e0e0; 363 | /* Light text */ 364 | } 365 | 366 | body.dark-theme .navbar { 367 | background-color: #222; 368 | } 369 | 370 | body.dark-theme .content { 371 | background-color: #282828; 372 | color: #e0e0e0; 373 | } 374 | 375 | body.dark-theme .feature { 376 | background: linear-gradient(135deg, #292929, #353535); 377 | color: #e0e0e0; 378 | } 379 | 380 | body.dark-theme h1, 381 | body.dark-theme h2, 382 | body.dark-theme h3, 383 | body.dark-theme h4 { 384 | color: #e0e0e0; 385 | } 386 | 387 | body.dark-theme #editor { 388 | background-color: #1e1e1e; 389 | color: #cfcfcf; 390 | } 391 | 392 | body.dark-theme #terminal { 393 | background-color: #1e1e1e; 394 | color: #cfcfcf; 395 | } 396 | 397 | /* Call-to-Action in Dark Theme */ 398 | body.dark-theme .cta-button { 399 | background-color: #007bff; 400 | } 401 | 402 | /* Responsive Design */ 403 | @media (max-width: 768px) { 404 | .navbar { 405 | flex-direction: column; 406 | align-items: flex-start; 407 | } 408 | 409 | .nav-links { 410 | margin-top: 1rem; 411 | } 412 | 413 | .features { 414 | grid-template-columns: 1fr; 415 | } 416 | 417 | .learn-container, 418 | .challenge-container { 419 | flex-direction: column; 420 | } 421 | 422 | .lesson-list, 423 | #challenge-list { 424 | flex: none; 425 | width: 100%; 426 | } 427 | 428 | #editor-container { 429 | flex-direction: column; 430 | } 431 | 432 | #editor, 433 | #terminal-container { 434 | width: 100%; 435 | } 436 | } 437 | 438 | a.clicked { 439 | color: #e94560; 440 | font-weight: bold; 441 | } 442 | 443 | /* Add these new styles to your existing styles.css file */ 444 | 445 | /* Challenge Page Styles */ 446 | 447 | .progress-container { 448 | margin-bottom: 1.5rem; 449 | } 450 | 451 | .progress-wrap { 452 | display: flex; 453 | flex-direction: row; 454 | } 455 | 456 | #challenge-reset-btn { 457 | padding: 12px 14px; 458 | border-radius: 8px; 459 | border: none; 460 | color: #fff; 461 | } 462 | 463 | .challenge-container { 464 | display: flex; 465 | gap: 2rem; 466 | padding-left: 1.5rem; 467 | background-color: #ecf0f1; 468 | border-radius: 8px; 469 | } 470 | 471 | #challenge-list { 472 | flex: 0 0 300px; 473 | background-color: #ecf0f1; 474 | padding: 1rem; 475 | } 476 | 477 | #challenge-list li { 478 | margin-bottom: 0.5rem; 479 | } 480 | 481 | #challenge-list a { 482 | display: flex; 483 | align-items: center; 484 | padding: 0.5rem 1rem; 485 | color: #2c3e50; 486 | text-decoration: none; 487 | border-radius: 4px; 488 | transition: background-color 0.3s, color 0.3s; 489 | } 490 | 491 | #challenge-list a:hover { 492 | background-color: #3498db; 493 | color: #fff; 494 | } 495 | 496 | #challenge-list i { 497 | margin-right: 0.5rem; 498 | } 499 | 500 | .challenge-description { 501 | flex: 1; 502 | background-color: #fff; 503 | padding: 1.5rem; 504 | border-radius: 8px; 505 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 506 | } 507 | 508 | /* FAQ Page Styles */ 509 | .faq-container { 510 | max-width: 800px; 511 | margin: 0 auto; 512 | } 513 | 514 | .faq-item { 515 | margin-bottom: 1rem; 516 | border: 1px solid #e0e0e0; 517 | border-radius: 8px; 518 | overflow: hidden; 519 | } 520 | 521 | .accordion { 522 | background-color: #f9f9f9; 523 | color: #333; 524 | cursor: pointer; 525 | padding: 1rem; 526 | width: 100%; 527 | text-align: left; 528 | font-size: 1.1rem; 529 | border: none; 530 | outline: none; 531 | transition: 0.4s; 532 | display: flex; 533 | justify-content: space-between; 534 | align-items: center; 535 | font-weight: bold; 536 | } 537 | 538 | .accordion:hover, 539 | .accordion.active { 540 | background-color: #e0e0e0; 541 | } 542 | 543 | .panel { 544 | padding: 0 1rem; 545 | background-color: white; 546 | max-height: 0; 547 | overflow: hidden; 548 | transition: max-height 0.2s ease-out; 549 | } 550 | 551 | .panel p { 552 | margin: 1rem 0; 553 | } 554 | 555 | /* Enhance existing styles */ 556 | .content h2 { 557 | display: flex; 558 | align-items: center; 559 | margin-bottom: 1.5rem; 560 | } 561 | 562 | .content h2 i { 563 | margin-right: 0.5rem; 564 | color: #3498db; 565 | } 566 | 567 | /* Dark theme adjustments */ 568 | body.dark-theme .challenge-description, 569 | body.dark-theme .faq-item, 570 | body.dark-theme .accordion, 571 | body.dark-theme .panel { 572 | background-color: #2c3e50; 573 | color: #ecf0f1; 574 | } 575 | 576 | body.dark-theme .accordion:hover, 577 | body.dark-theme .accordion.active { 578 | background-color: #34495e; 579 | } 580 | 581 | /* Responsive design for challenge and FAQ pages */ 582 | @media (max-width: 768px) { 583 | .challenge-container { 584 | flex-direction: column; 585 | } 586 | 587 | #challenge-list { 588 | flex: none; 589 | width: 100%; 590 | } 591 | } 592 | 593 | body.dark-theme .cta-button:hover { 594 | background-color: #0056b3; 595 | } 596 | 597 | #nav-top { 598 | display: none; 599 | position: fixed; 600 | bottom: 20px; 601 | right: 30px; 602 | z-index: 99; 603 | border: none; 604 | outline: none; 605 | background-color: #0056b3; 606 | color: white; 607 | cursor: pointer; 608 | padding: 10px; 609 | border-radius: 70px; 610 | font-size: 18px; 611 | } 612 | 613 | #nav-top:hover { 614 | background-color: #555; 615 | } 616 | 617 | /* Footer section */ 618 | footer { 619 | background: linear-gradient(135deg, #1c1c1c, #333); 620 | color: #e6e6e6; 621 | padding: 20px 0; 622 | position: relative; 623 | box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.4); 624 | overflow: hidden; 625 | border-top-left-radius: 40px; 626 | border-top-right-radius: 40px; 627 | border-bottom-left-radius: 0; 628 | border-bottom-right-radius: 0; 629 | } 630 | 631 | .footer-content { 632 | display: flex; 633 | justify-content: space-around; 634 | align-items: flex-start; 635 | padding: 20px; 636 | flex-wrap: wrap; 637 | position: relative; 638 | z-index: 2; 639 | } 640 | 641 | .footer-section { 642 | flex: 1; 643 | margin: 15px; 644 | min-width: 250px; 645 | border-radius: 10px; 646 | padding: 20px; 647 | transition: transform 0.4s ease, box-shadow 0.4s ease; 648 | } 649 | 650 | .footer-section h3 { 651 | font-size: 1.7rem; 652 | margin-bottom: 20px; 653 | color: #ffffff; 654 | background: linear-gradient(45deg, #007bff, #ff7bff); 655 | -webkit-background-clip: text; 656 | -webkit-text-fill-color: transparent; 657 | font-weight: 700; 658 | border-bottom: 2px solid #007bff; 659 | padding-bottom: 10px; 660 | } 661 | 662 | .footer-section p, 663 | .footer-section ul { 664 | font-size: 1rem; 665 | color: #ccc; 666 | } 667 | 668 | .footer-section ul { 669 | list-style-type: none; 670 | padding: 0; 671 | } 672 | 673 | .footer-section ul li { 674 | margin: 8px 0; 675 | } 676 | 677 | .footer-section a { 678 | letter-spacing: 1px; 679 | color: #e6e6e6; 680 | text-decoration: none; 681 | position: relative; 682 | transition: color 0.3s ease, background 0.3s ease; 683 | } 684 | 685 | .footer-section .link-element::after { 686 | content: ""; 687 | position: absolute; 688 | left: 0; 689 | bottom: -2px; 690 | width: 100%; 691 | height: 2px; 692 | background: linear-gradient(90deg, #007bff, #ff7bff); 693 | transform: scaleX(0); 694 | transform-origin: left; 695 | transition: transform 0.4s ease; 696 | } 697 | 698 | .footer-section a:hover::after { 699 | transform: scaleX(1); 700 | } 701 | 702 | .footer-section a:hover { 703 | color: #ff7bff; 704 | } 705 | 706 | .footer-bottom { 707 | text-align: center; 708 | padding: 20px 0; 709 | background-color: #151515; 710 | font-size: 0.9rem; 711 | position: relative; 712 | z-index: 2; 713 | } 714 | 715 | .footer-bottom p { 716 | margin: 0; 717 | color: #aaa; 718 | } 719 | 720 | .social { 721 | margin-top: 20px; 722 | } 723 | 724 | .social a { 725 | color: #fff; 726 | font-size: 1.7rem; 727 | margin-right: 15px; 728 | transition: transform 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; 729 | display: inline-block; 730 | text-align: center; 731 | border-radius: 50%; 732 | background: rgba(255, 255, 255, 0.1); 733 | } 734 | 735 | .social i { 736 | padding: 10px; 737 | } 738 | 739 | .social a:hover { 740 | color: #ff7bff; 741 | transform: scale(1.1); 742 | box-shadow: 0 0 15px rgba(255, 123, 255, 0.7); 743 | } 744 | 745 | @media (max-width: 768px) { 746 | .footer-content { 747 | flex-direction: column; 748 | align-items: center; 749 | text-align: center; 750 | } 751 | 752 | .footer-section { 753 | margin-bottom: 20px; 754 | } 755 | 756 | .social a { 757 | margin-right: 10px; 758 | } 759 | } --------------------------------------------------------------------------------