Maria Mourad’s Post

🎉 Task 5 Completed: Weather App Development 🎉 I'm excited to share that I've completed my fifth task at Prodigy InfoTech! 🌦️ This time, I developed a dynamic Weather App that provides real-time weather data for any location you search. Here are some of the key features I implemented: 🔍 Project Overview: 🔹 Search Functionality: Users can search for any location and get instant weather updates. 🔹 Current Weather Display: Shows location name, temperature, humidity, wind speed, and other crucial weather data. 🔹 Sunrise and Sunset Times: Includes a visually appealing animation to display sunrise and sunset times. 🌟 Key Features: 🔸 Responsive Design: The app adapts smoothly to different screen sizes, ensuring an optimal user experience on both desktop and mobile devices. 🔸 Dynamic Data Fetching: Utilizes the OpenWeatherMap API to fetch real-time weather data based on user input. 🔸 Interactive UI: Features animated icons and transitions to enhance user interaction and experience. 🛠️ Technologies Used: ◾ HTML5, CSS3, JavaScript: Used these core web technologies to create a responsive and interactive weather application. ◾ OpenWeatherMap API: Integrated this API to fetch real-time weather data and display it dynamically. ◾ Font Awesome: Leveraged Font Awesome icons to visually represent various weather conditions and data points. This project gave me valuable experience in working with APIs and handling real-time data, further enhancing my front-end development skills. I’m looking forward to applying these learnings in future projects! 🔗 Check out the project: 📂 Code Repository: https://lnkd.in/g49-wSae 🔴 Live Demo: https://lnkd.in/g7xVNAFY I’d love to hear your thoughts and feedback on this project! 😊 #WebDevelopment #WeatherApp #JavaScript #HTML #CSS #ResponsiveDesign #APIs #FrontendDevelopment #WebDesign #ProdigyInfoTech #Prodigy

Prodigy InfoTech Web Development - Task 2✓ I recently finished Task 2 at Prodigy InfoTech, In which I had the opportunity to create a Stopwatch Web Application One of the key features I implemented are: Start, Pause, and Reset: Control the stopwatch with intuitive buttons for precise time tracking. Lap Times: Track and display individual lap times, making it perfect for interval training or performance analysis. Clean and Responsive Design: Built with user experience in mind, the app is accessible and adapts to different screen sizes. This project allowed me to: Deepen my understanding of front-end development using HTML, CSS, and JavaScript. Enhance my problem-solving skills by implementing functionalities for start/stop, reset, and lap time tracking. Create a user-friendly interface that provides a valuable tool. Check out the demo of the landing page https://lnkd.in/d5nQaXaz #WebDevelopment #ProdigyInfoTech

Day 63 of 100 Days of Code: Research and for UNESCO-Go-Seek 🌐🎨 🔧 Today's Progress: Researched and explored various applications with similar functionalities to my project but serve different purposes. The goal was to gather ideas and inspiration for designing a user-friendly interface and ensuring a seamless user experience. This research phase is crucial for understanding best practices and innovative features that can be adapted to my project. 💡 Thoughts: Taking a step back to research has been incredibly insightful. I've discovered a variety of approaches to presenting random content and user interaction patterns that I hadn't considered before. This exploration has not only given me new ideas but also reinforced the importance of thoughtful design in creating engaging web applications. The time invested in research will undoubtedly pay off as I move forward with development. 🔗 Link to Work https://lnkd.in/ggpsawQi 🏷️ Hashtags #100DaysOfCode #Django #VueJs #ManisesSpain #Paducah #UNESCO #CreativeCities

Task-03 at Prodigy InfoTech 🌟 Creating Tic-Tac-Toe - An Interactive Web Application! 🎮💻 Excited to present my latest web development project – Tic-Tac-Toe! Using HTML, CSS, and JavaScript, I've developed a classic and engaging tic-tac-toe game. 📚 Key Skills Acquired: HTML: Structured the game elements for an intuitive layout. CSS: Enhanced the visual design for a captivating game interface. JavaScript: Implemented interactive features to handle game logic and user interactions. 🎓 Knowledge Gained: Click Event Handling: Built functions to manage player clicks seamlessly. Game State Management: Implemented logic to keep track of the game state. Winning Logic: Created algorithms to check for winning conditions and announce the winner. Multiplayer and AI Modes: Enabled gameplay between two players or against an AI opponent. 🚀 Highlight Features: Smooth and interactive gameplay with real-time updates on player moves. Automatic detection of winning conditions, enhancing the competitive experience. Versatile play options, allowing users to compete with another player or challenge an AI. Explore the project on GitHub: https://lnkd.in/g7MRVptX Pushing the boundaries of web development with innovative projects! 💪 #TicTacToe #WebDevelopment #CodingJourney #ProdigyInfoTech

Stopwatch Web Application I'm excited to share my latest project—a fully functional and interactive stopwatch web application! This project was a great opportunity to enhance my skills in web development using HTML, CSS, and JavaScript. 🛠️ Technologies Used: HTML: Structured the elements of the stopwatch application. CSS: Styled the application to ensure a clean and intuitive user interface. JavaScript: Implemented core functionalities, including start, pause, reset, and lap time tracking. ✨ Key Features: Start, Pause, Reset: Seamlessly start, pause, and reset the stopwatch. Lap Time Tracking: Record multiple lap times and display them accurately. Interactive UI: A user-friendly interface for easy interaction with stopwatch functions. Responsive Design: Ensures the application works well on desktops, tablets, and mobile phones. 💡 Project Description: This stopwatch web application allows users to accurately measure and record time intervals. With functionalities for starting, pausing, resetting the stopwatch, and tracking lap times, it offers an interactive and user-friendly experience. 🔍 Detailed Implementation: HTML to structure the application. CSS to style the application with a clean design and responsive layout. JavaScript to handle time calculations, updates, and user interactions. I'm thrilled with how this project turned out and am excited to continue building more interactive web applications! Feel free to check out the project on my GitHub: https://lnkd.in/gRxKQW4N #WebDevelopment #HTML #CSS #JavaScript #StopwatchApp #ResponsiveDesign #TimeTracking #Coding #Tech #ProjectShowcase #PRODIGYINFOTECH #TASK2

🚀 Day 05 of the #100DaysOfCode Today's Learning Journey: Elevating React Development with Vite and Tailwind 🚀 Today marked an immersive dive into React development, accompanied by the seamless integration of Vite and Tailwind CSS. Here's a snapshot of my key discoveries: 🔧 Streamlined Environment Setup: I commenced the day by architecting a robust React project with Vite, complemented by the power and flexibility of Tailwind CSS. This meticulous setup lays a solid foundation for scalable and responsive user interfaces. 🎨 Leveraging Props for Reusability: Embracing the core principles of component-based architecture, I delved into the intricacies of props in React. Harnessing this mechanism, I crafted modular and reusable components, enhancing maintainability and scalability in my projects. 💡 Efficient Data Flow Across Components: Building upon my comprehension of props, I refined my skills in passing data seamlessly between components. This streamlined approach optimizes data flow and fosters clear communication within the application's architecture. 🔍 Customized UI Experiences: With an emphasis on user-centric design, I explored techniques for customizing UI elements with default values and dynamic styling. This meticulous attention to detail enriches the user experience and imbues projects with a professional polish. 💬 Problem-Solving and Interview Readiness: In parallel with hands-on development, I tackled a React interview question, honing my problem-solving acumen and reinforcing my proficiency in the React ecosystem. 🎨 Dynamic UI Interactivity with Colors: In a separate project, I embarked on a journey into dynamic UI customization, crafting a Color component that dynamically adjusts background colors based on user interaction. Leveraging the useState() hook, I engineered an immersive and engaging user experience. Checkout this project's source-code at : https://lnkd.in/dcEG95dm Checkout Live Project at : https://lnkd.in/d6bGdZwq 🌟 GitHub Progress : https://lnkd.in/dBdJ9KT2 #ReactJS #ViteJS #TailwindCSS #FrontendDevelopment #UIUX 

🚀 Excited to share my latest project – a Tic-Tac-Toe game app built in Flutter! This project was an incredible learning experience from Prodigy InfoTech, and I’m thrilled with the final result 👇 https://lnkd.in/ebkVmiCN Project Highlights: - Dynamic Game UI with Customized Elements: The interface includes customized icons, smooth color gradients, and visually appealing animations. Each player’s icon is distinct, with dynamic gradients applied to each to make the experience immersive. - Responsive Layouts: Designed for all screen sizes, I used media queries to ensure a seamless experience across devices, adapting UI elements based on screen proportions. - Real-time State Management with Provider Package: I implemented the Provider package for efficient state management. This allowed me to keep track of each player’s moves, dynamically update the grid, and ensure smooth transitions between game states. - Win Detection Logic and Score Tracking: I wrote custom logic to handle player interactions, detect win patterns in real-time, and maintain ongoing score tracking. Every win updates the score panel, and a “Play Again” button becomes visible to reset the game when a round is complete. - Reusability and Modular Code Structure: To keep the code organized and maintainable, I divided components into reusable widgets, which also made customizing elements like buttons and score panels simpler. I'm excited to keep building and exploring more in Flutter! #Flutter #MobileDevelopment #StateManagement #GameDev #Programming #ProdigyInfoTech

🚀 Exciting React Authentication Project Showcase! 🚀 Hey LinkedIn fam! 👋 I'm thrilled to unveil my latest React project featuring a sleek Login and Sign-Up experience. Let's dive into the details: 🔐 Sign-Up Page Highlights: ✨ Responsive design with dynamic animations. ✨ Comprehensive input validation for a seamless user experience. ✨ Integrated Material-UI components for a polished look. 🚀 Login Page Features: 🔐 Secure email and password input fields. 🔐 Effortless navigation with smooth animations. 🔐 Streamlined user interface for an intuitive login process. ⚙️ Tech Stack: ⚛️ React for a dynamic and responsive UI. 🎨 Material-UI for clean and stylish components. 📝 React Router for seamless page navigation. 🌟 Animation Magic: 🎉 Engaging animations on input fields and buttons for a delightful user interaction. How to Contribute: 🤝 Check out the GitHub repository: https://lnkd.in/gbg8E469 🌟 Feel free to explore the code, provide feedback, or contribute to make it even better! 🛠️ Learning Journey: 💡 Overcame challenges in dynamic data handling, form validation, and seamless page transitions. A rewarding journey of growth and learning! Gratitude: 🙌 Special thanks to the React and Material-UI communities for valuable resources and support throughout the development. Let's Connect: 🚀 I'm open to feedback and collaboration! Drop a comment or DM with your thoughts. Let's keep coding, learning, and growing together! 🌱 #React #Authentication #ReactRouter #MaterialUI #WebDevelopment #Programming #GitHub

🚀 Prodigy Infotech Task Completed: Building a Stopwatch Web Application 🚀 I'm excited to share that I've just completed a project to build a fully functional stopwatch web application using HTML, CSS, and JavaScript! Here’s a brief overview of what I accomplished and the knowledge I gained: 📝 Task Overview: Circle with Gradient: Created a visually appealing gradient half-circle shape. Stopwatch Functionality: Developed a stopwatch application with key functionalities: Start: Initiates the stopwatch. Pause: Pauses the stopwatch while retaining the elapsed time. Reset: Resets the stopwatch to zero. Lap Times: Tracks and displays individual lap times. 🔍 Knowledge Gained: HTML Structure: Learned how to effectively use HTML to structure the elements of the application, ensuring a clean and semantic layout. CSS Styling: Applied CSS to create a gradient half-circle shape, enhancing the visual appeal of the application. Improved skills in CSS animations and transitions to make the user interface more interactive. JavaScript Functionality: Implemented JavaScript functions to handle starting, pausing, and resetting the stopwatch. Gained experience in using setInterval and clearInterval for time tracking. Developed a method to record and display lap times, enhancing the functionality of the application. This project not only helped me sharpen my web development skills but also provided valuable insights into creating user-friendly and interactive web applications. I’m looking forward to applying these skills to more complex projects in the future! Check out the project here: https://lnkd.in/gWdGYRUX #ProdigyInfoTech

I am thrilled to announce the launch of Online Food Delivery website, built using some of the latest and greatest technologies in web development. This project has been a labor of love, and I'm excited to share it with you all. Here’s a sneak peek at the tech stack that powers my new site: ✨ Next.js: Leveraging the power of this React framework for fast, server-side rendering and static site generation. 🌈 React: Primarily focuses on client-side rendering, where the browser interprets the code and renders the UI. 🎨 Versal :By AMD is a game-changer for developers seeking to build adaptable, high-performance solutions for the future. Its unique architecture empowers innovation across diverse industries, paving the way for a new era of intelligent and connected devices. Check out my Online Food delivery Website to explore my work and see these technologies in action. I look forward to your feedback and connecting with fellow developers, designers, and enthusiasts. Let's create amazing digital experiences together! 🔗https://lnkd.in/daUJmEXd #NextJS #Nodejs #WebDevelopment #TechStack #WebDesign #UX #UI #DeveloperLife #DigitalExperience #FoodDelivery #Convenience #FoodieLife #EatLocal #GlobalFlavors #FastDelivery #BiteBox 🌐🔗https://lnkd.in/dKtpWNg5