diff --git a/Domains/Frontend/MiniProjects/Example_Frontend.md b/Domains/Frontend/MiniProjects/Example_Frontend.md deleted file mode 100644 index 2677d199..00000000 --- a/Domains/Frontend/MiniProjects/Example_Frontend.md +++ /dev/null @@ -1,4 +0,0 @@ -# Frontend Example Project -**Contributor:** Tejas-Santosh-Nalawade -## Description -This is a sample project for Frontend \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/TaskManager_Frontend.md b/Domains/Frontend/MiniProjects/TaskManager_Frontend.md deleted file mode 100644 index 6db84cff..00000000 --- a/Domains/Frontend/MiniProjects/TaskManager_Frontend.md +++ /dev/null @@ -1,227 +0,0 @@ -# Task Manager App - -**Contributor:** Tejas-Santosh-Nalawade -**Domain:** Frontend -**Difficulty:** Beginner -**Tech Stack:** HTML, CSS, JavaScript, Local Storage - -## 📝 Description - -A simple yet functional task management application that allows users to create, update, delete, and organize their daily tasks. The app uses browser's local storage to persist data, ensuring tasks are saved even after the browser is closed. - -## 🎯 Features - -- ✅ Create new tasks with title and description -- ✅ Mark tasks as complete/incomplete -- ✅ Edit existing tasks -- ✅ Delete tasks -- ✅ Filter tasks (All, Active, Completed) -- ✅ Search functionality -- ✅ Persistent storage using localStorage -- ✅ Responsive design for mobile and desktop -- ✅ Clean and intuitive user interface -- ✅ Task counter showing active tasks - -## 🛠️ Tech Stack - -- **HTML5** - Semantic markup structure -- **CSS3** - Styling with Flexbox/Grid -- **Vanilla JavaScript** - Core functionality -- **Local Storage API** - Data persistence -- **Font Awesome** - Icons - -## 📸 Screenshots - -``` -[Home Page - Task List View] -┌─────────────────────────────────────┐ -│ 📋 My Task Manager │ -│ ───────────────────────────────── │ -│ [ + Add New Task ] │ -│ ───────────────────────────────── │ -│ 🔍 Search tasks... │ -│ [All] [Active] [Completed] │ -│ ───────────────────────────────── │ -│ ☐ Complete project documentation │ -│ Due: Tomorrow │ -│ ───────────────────────────────── │ -│ ☑ Review pull requests │ -│ Completed ✓ │ -│ ───────────────────────────────── │ -│ 3 tasks remaining │ -└─────────────────────────────────────┘ -``` - -## 🚀 How to Run - -### Method 1: Direct Browser -1. Clone the repository - ```bash - git clone https://github.com/yourusername/task-manager.git - ``` - -2. Navigate to the project directory - ```bash - cd task-manager - ``` - -3. Open `index.html` in your browser - ```bash - # On Windows - start index.html - - # On Mac - open index.html - - # On Linux - xdg-open index.html - ``` - -### Method 2: Live Server (Recommended) -1. Install VS Code Live Server extension -2. Right-click on `index.html` -3. Select "Open with Live Server" -4. App will open at `http://localhost:5500` - -## 📁 Project Structure - -``` -task-manager/ -├── index.html # Main HTML file -├── css/ -│ ├── style.css # Main styles -│ └── responsive.css # Media queries -├── js/ -│ ├── app.js # Main application logic -│ ├── storage.js # LocalStorage handler -│ └── ui.js # UI manipulation -├── assets/ -│ ├── icons/ # Custom icons -│ └── images/ # Images -└── README.md # Project documentation -``` - -## 💻 Code Highlights - -### Key Functions - -**1. Add Task** -```javascript -function addTask(title, description) { - const task = { - id: Date.now(), - title: title, - description: description, - completed: false, - createdAt: new Date().toISOString() - }; - - tasks.push(task); - saveTasks(); - renderTasks(); -} -``` - -**2. LocalStorage Integration** -```javascript -function saveTasks() { - localStorage.setItem('tasks', JSON.stringify(tasks)); -} - -function loadTasks() { - const storedTasks = localStorage.getItem('tasks'); - return storedTasks ? JSON.parse(storedTasks) : []; -} -``` - -**3. Filter Tasks** -```javascript -function filterTasks(filter) { - switch(filter) { - case 'active': - return tasks.filter(task => !task.completed); - case 'completed': - return tasks.filter(task => task.completed); - default: - return tasks; - } -} -``` - -## 📚 Learning Outcomes - -### Skills Developed -- **DOM Manipulation**: Dynamic creation and updating of HTML elements -- **Event Handling**: Managing user interactions (clicks, form submissions) -- **Local Storage**: Browser-based data persistence -- **Array Methods**: filter(), map(), forEach(), find() -- **CSS Layout**: Flexbox and Grid for responsive design -- **JavaScript ES6**: Arrow functions, template literals, destructuring - -### Challenges Overcome -1. **State Management**: Keeping UI in sync with data -2. **Data Persistence**: Implementing localStorage effectively -3. **Responsive Design**: Making it work across devices -4. **User Experience**: Adding smooth transitions and feedback - -### Best Practices Learned -- Separation of concerns (HTML, CSS, JS) -- DRY (Don't Repeat Yourself) principle -- Semantic HTML for accessibility -- Mobile-first responsive design -- Error handling and validation - -## 🎨 Customization Ideas - -Want to extend this project? Try adding: - -1. **Priority Levels**: High, Medium, Low priority tasks -2. **Categories**: Work, Personal, Shopping, etc. -3. **Due Dates**: Calendar integration -4. **Dark Mode**: Theme toggle -5. **Export/Import**: JSON data export -6. **Drag & Drop**: Reorder tasks -7. **Notifications**: Browser notifications for due tasks -8. **Statistics**: Charts showing task completion trends - -## 🔗 Live Demo - -[View Live Demo](https://yourusername.github.io/task-manager) *(Replace with your actual demo link)* - -## 🐛 Known Issues - -- Filter buttons state doesn't persist on page reload -- No confirmation dialog for delete action -- Search is case-sensitive - -## 🚀 Future Enhancements - -- [ ] Add user authentication -- [ ] Backend integration for cloud sync -- [ ] Mobile app version (React Native) -- [ ] Collaboration features -- [ ] Task sharing via link -- [ ] Voice input for tasks - -## 🤝 Contributing - -Feel free to fork this project and submit pull requests for improvements! - -## 📄 License - -MIT License - feel free to use this project for learning purposes! - ---- - -## 📚 Additional Resources - -- [MDN Web Docs - LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) -- [JavaScript Array Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) -- [CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -- [Responsive Web Design](https://web.dev/responsive-web-design-basics/) - ---- - -**Happy Coding! 🚀** - -*This is a sample project for ProjectHive. Replace this content with your actual project details when contributing.* diff --git a/Domains/Frontend/MiniProjects/amazonclone/README.md b/Domains/Frontend/MiniProjects/amazonclone/README.md new file mode 100644 index 00000000..84c2f9f6 --- /dev/null +++ b/Domains/Frontend/MiniProjects/amazonclone/README.md @@ -0,0 +1,128 @@ +**Contributor:** snehal492006 + +# Amazonclone + +A simple and fun digital tarot card reading application built with Python. Get mystical insights through beautiful tarot card spreads! + +## 🌟 Features + +* **Single Card Reading** - Quick insight into your current energy +* **Three Card Reading** - Past, Present, and Future spread +* **Celtic Cross** - Comprehensive 5-card reading +* **Beautiful Dark Theme** - Celestial night-sky design with purple and gold accents +* **22 Major Arcana Cards** - All classic tarot cards with detailed meanings +* **No Installation Required** - Uses only Python's built-in libraries! +* **Smooth UI** - Scrollable reading area with color-coded text +* **Random Selection** - No duplicate cards in the same reading + +## 🚀 How to Run + +### Prerequisites +- Python 3.x (tkinter comes pre-installed with Python) + +### Steps +1. **Download** or clone this repository +2. **Save** the code as `tarot.py` +3. **Open** your terminal/command prompt +4. **Navigate** to the directory containing `tarot.py` +5. **Run** the application: + +```bash +python main.py +``` + +That's it! The app window will open automatically. + +## 🎯 How to Use + +1. **Launch** the application +2. **Click** one of the three reading buttons: + - 🔮 **Single Card Reading** - One card for quick guidance + - 🎴 **Three Card Reading** - Past, Present, Future + - ⭐ **Celtic Cross** - 5-card comprehensive reading +3. **Read** the cards and meanings in the scrollable area below +4. **Reflect** on your question and the messages +5. **Click** another button anytime for a new reading! + +## 📖 Reading Types + +### 🔮 Single Card Reading +Quick guidance for simple questions or daily inspiration. + +### 🎴 Three Card Spread +- **Past** → What led you here +- **Present** → Your current situation +- **Future** → What's coming + +### ⭐ Celtic Cross (5 Cards) +- **Present Situation** → Where you stand now +- **Challenge** → What crosses you +- **Foundation** → What lies beneath +- **Recent Past** → What's behind you +- **Potential Outcome** → What awaits + +## 🎴 The 22 Major Arcana Cards + +The application includes all 22 Major Arcana tarot cards: + +1. The Fool +2. The Magician +3. The High Priestess +4. The Empress +5. The Emperor +6. The Hierophant +7. The Lovers +8. The Chariot +9. Strength +10. The Hermit +11. Wheel of Fortune +12. Justice +13. The Hanged Man +14. Death +15. Temperance +16. The Devil +17. The Tower +18. The Star +19. The Moon +20. The Sun +21. Judgement +22. The World + +Each card comes with its upright meaning and interpretation! + +## ⚠️ Important Disclaimer + +**For entertainment purposes only!** + +This is a fun project for learning about tarot and relaxation - not for making serious life decisions. The readings are meant for self-reflection and entertainment. Always use your own judgment and consult professionals for important matters. + +## 🛠️ Technical Details + +- **Language:** Python 3.x +- **GUI Library:** tkinter (built-in) +- **Dependencies:** None! (Pure Python standard library) +- **Platform:** Cross-platform (Windows, macOS, Linux) + +## 💡 Tips for Users + +* **Read carefully** - Each card meaning is detailed +* **Take your time** - Reflect on how the cards relate to your situation +* **Ask clear questions** - Focus your intention before drawing +* **Remember** - It's about self-reflection, not fortune-telling +* **Have fun!** 🌙✨ + +## 🤝 Contributing + +Contributions, issues, and feature requests are welcome! Feel free to check the issues page. + +## 👤 Author + +**Sanjeev Deori** +- GitHub: [@SanjeevDeori](https://github.com/SanjeevDeori) + + +--- + +*The future is not set in stone. Enjoy responsibly!* 🔮✨ + +Made with 💜 for Hacktoberfest and the Open Source Community \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/amazonclone/index.html b/Domains/Frontend/MiniProjects/amazonclone/index.html new file mode 100644 index 00000000..c9f75a94 --- /dev/null +++ b/Domains/Frontend/MiniProjects/amazonclone/index.html @@ -0,0 +1,271 @@ + + + + + + Amazon + + + + +
+
+ + +
+

Deliver to

+
+ +

India

+
+
+ +
+ + +
+ +
+
+ +
+ + +
+ + + +
+

Returns

+

& Orders

+
+ +
+ + Cart +
+
+
+
+ + All +
+
+

Today's deals

+

Costumer Service

+

Registery

+

Gift cards

+

Sell

+
+
+ Shop deals in Electronics +
+
+
+
+
+

You are on amazon.com. You can also shop on Amazon India for millions of products with fast local delivery. Click here to go to amazon.in

+
+
+ +
+
+
+

Health & care

+
+

see more

+
+
+
+
+

Electronics

+
+

see more

+
+
+
+
+

Beauty pics

+
+

see more

+
+
+
+
+

Accent furniture

+
+

see more

+
+
+
+
+

Shop Pet supplies

+
+

see more

+
+
+
+
+

Shop Laptops & Tablets

+
+

see more

+
+
+
+
+

New arrivals in Toys

+
+

see more

+
+
+
+
+

Create with strip lights

+
+

see more

+
+
+
+
+

Clothes

+
+

see more

+
+
+
+
+

Discover fashion trends

+
+

see more

+
+
+
+
+

For your fitness needs

+
+

see more

+
+
+
+
+

Home refresh ideas

+
+

see more

+
+
+
+
+

Kindle E Readers

+
+

see more

+
+
+
+
+

Smartwatches

+
+

see more

+
+
+
+
+

Different Fans

+
+

see more

+
+
+
+
+

Tools

+
+

see more

+
+
+
+ +
+
+
+

See personalized recommendations

+ +
+

New customer?

+ start here +
+
+
+ + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/amazonclone/style.css b/Domains/Frontend/MiniProjects/amazonclone/style.css new file mode 100644 index 00000000..5522bf50 --- /dev/null +++ b/Domains/Frontend/MiniProjects/amazonclone/style.css @@ -0,0 +1,325 @@ +*{ + margin: 0; + font-family: Arial; + border: border-box; +} +.navbar{ + height: 60px; + background-color:#0f1111; + color: white; + display: flex; + align-items: center; + justify-content: space-evenly; +} +.nav_logo{ + height:50px; + width:113px; +} +.logo{ + background-image: url("amazon_logo.png"); + height:50px; + width:100px; + background-size:cover; + background-repeat:no-repeat; +} +.border{ + border: 1px solid transparent; + padding: 1px 8px 0px 6px; +} +.border:hover{ + border: 1px solid white; +} + +/**box 2**/ +.address_icon{ + display:flex; +} +.address_first{ + color:#cccccc; + font-size: 0.8rem; + margin-top: 5px; + margin-left: 15px; +} +.address_second{ + font-size:1rem ; + margin-left:2px; +} + +/**box 3**/ +.nav_search{ + display:flex; + justify-content: space-evenly; + background-color: pink; + height:45px; + width: 820px; + border-radius: 4px; +} +.search_select{ + background-color: #f3f3f3; + width:50px; + border: none; + text-align: center; + border-top-left-radius:4px; + border-bottom-left-radius:4px; +} +.search_input{ + width:100%; + border:none ; + font-size: 1rem; +} +.search_icon{ + width: 50px; + background-color: #fedb68; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; + border-bottom-right-radius:4px ; + border-top-right-radius: 4px; + color:#0f1111; +} +.nav_search:hover{ + border: 2px solid orange; +} +/**box4**/ + +.nav_lang{ + display: flex; + padding: 13.85px 16px 13.85px 16px; +} +.nav_langoption{ + font-weight: 700; + background: #0f1111; + color: white; + border:none; +} +.lang_logo{ + background-image: url("flag.png"); + background-size: cover; + background-repeat: no-repeat; + height: 16px; + width:21px; +} +/**box5**/ +/**box6**/ + +span{ + font-size: 0.7rem; +} +.nav_second{ + font-size:0.85rem; + font-weight: 700; + background: #0f1111; + color: white; + border:none; +} + +/**box6**/ +.nav_cart i{ + font-size:25px; +} +.nav-cart{ + font-size: 0.85rem; + font-weight: 700; +} + +/**panel**/ +.panel{ + height:40px; + background-color: #222f3d; + color: white; + align-items: center; + justify-content: space-evenly; + display: flex; +} +.panel_options{ + display: flex; + width:70%; + font-size: 0.85rem; +} +.panel_options p{ + margin-left: 15px; + display:inline; +} +.panel_deals{ + font-size:0.9rem; + font-weight: 700px; +} + +/**hero section**/ +.hero_section{ + background-image: url("heroimage.jpg"); + height:350px; + background-size:cover; + display:flex; + justify-content: center; + align-items: flex-end; +} +.hero_mesg{ + background-color: white; + color: black; + font-size: 0.85rem; + height:40px; + display:flex; + align-items: center; + justify-content: center; + width:98.5%; + margin-bottom:10px; +} +.hero_mesg a{ + color:#007185; +} +.hero_mesg a:hover{ + color:#C7511F; + text-decoration-line: underline; +} + +/**shop section**/ +.shop_section{ + display: flex; + justify-content: space-evenly; + background-color: #e2e7e6; + flex-wrap: wrap; + margin-bottom: 15px; +} +.box{ + height: 400px; + width:24%; + background-color: white; + padding:20px 0px 15px; + margin-top: 10px; + margin-bottom: 15px; +} +.box_image{ + height:300px; + background-size: cover; + margin-top:1rem; + margin-bottom:1rem; +} +.box_content{ + margin-left: 15px; + margin-right: 15px; +} +.box_content p{ + color: #007185; +} +.box_content p:hover{ + color: #C7511F; + text-decoration-line: underline; +} + +/**sign in section**/ +.sign_in { + padding: 20px; + border: 0.5px solid #DDD; + border-radius:5px ; +} +.sign_in .sign_in_container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.last_line{ + display:flex; + font-size: 10px; +} +.sign_in .sign_in_container p{ + font-size: 13px; + margin-top: 15px; +} +.sign_in .sign_in_container .last_line p1:hover{ + color: #C7511F; +} +.sign_in .sign_in_container .last_line p{ + margin: 4px; + font-size: 13px; +} +.sign_in .sign_in_container p1{ + color: #007185; + margin: 4px; + font-size: 13px; +} +.sign_in .sign_in_container button{ + width: 250px; + margin:5px; + color: #0f1111; + font-weight: bold; + border: 0.5px solid orange; + background-color: #fedb68; + padding: 8px; + border-radius: 5px; +} + +/**footer section**/ +.foot_panel_1{ + height: 50px; + margin-top:15px; + display:flex; + justify-content: center; + align-items: center; + background-color: #37475a; + color: white; + font-size: 0.85rem; + font-weight: bold; +} +.foot_panel_2{ + background-color: #222f3d; + color: white; + height: 300px; + display: flex; + justify-content: space-evenly; + +} +ul{ + margin-top: 30px; +} +ul a{ + display:block; + font-size: 0.85rem; + margin-top: 10px; + color: #dddddd; +} +.foot_panel_3{ + background-color: #222f3d; + color: white; + border-top: 0.5px solid white; + height: 80px; + display:flex; + justify-content: center; + align-items: center; +} +.logo{ + background-image: url("amazon_logo.png"); + background-size:cover; + height: 50px; + width: 100px; +} +.foot_panel_4{ + background-color: #0f1111; + color: white; + height: 80px; + font-size: 0.7rem; + text-align: center; +} +.pages{ + padding: 20px; +} +@media (max-width: 768px) +{ + .shop_section { + display: flex; + /* justify-content: space-evenly; */ + background-color: #e2e7e6; + flex-wrap: unset; + margin-bottom: 15px; + flex-direction: column; + align-items: center; + } + .box{ + width: 60%; + } +} + + +