areeba fatima

Enthusiastic and self-motivated frontend developer skilled in HTML, CSS, and JavaScript. Passionate about creating responsive, user-friendly websites and applications. Eager to contribute to a team environment and gain real-world experience through an internship or entry-level role.

1. Shopping Cart Checkout Form

• Description: Developed a dynamic and user-friendly checkout form for a fictional shopping cart using HTML, CSS, and JavaScript. The form collects user details such as name, email, address, zip code, and state, ensuring accurate and validated input.
• Key Features:
  Form Validation:Implemented input validation for all fields to ensure no field is left empty.
  Added specific validation for email format (checks for the presence of an "@" symbol).
  Ensured the zip code field only accepts numeric values.
• Prevent Default Behavior: Utilized JavaScript to prevent the form from submitting if validation criteria are not met, improving user experience.

Technologies Used:  HTML: Structured the form and layout elements. CSS: Styled the form, background, and image layout for an engaging user experience. JavaScript: Added dynamic validation and interaction for user inputs.

2. E-commerce Feature Implementation

worked on a dynamic e-commerce product display featuring:
Product Showcase: Highlighting key details such as name, size, quantity, and price, enhancing product visibility.
Shopping Cart Functionality: Users can seamlessly add items to their cart, view subtotal and total, and apply discounts in real-time, improving the shopping experience.
User-Friendly Interface: Clean design with intuitive navigation and clear pricing updates to ensure ease of use.

 3. Add-to-Cart Demo

• Description: Developed a functional shopping cart application where users can view products, add them to the cart, and see dynamic updates to their shopping cart. This project is designed to simulate an e-commerce interface.

Key Features:
Product Display:Showcased products with images, names, and prices in a visually appealing layout.
Add to Cart Functionality:Implemented an interactive "Add to Cart" button for each product.
Clicking a button dynamically adds the corresponding product, with its name, price, and image, to the cart.
Dynamic Cart Updates:Ensured the shopping cart updates in real-time without page reloads using DOM manipulation.

• Technologies Used:HTML: CSS: JavaScript:Added interactivity using event listeners for buttons.
  Dynamically created and appended product details to the cart using document.createElement.
  Incorporated conditional logic to handle different products with unique visuals and data.
  Learning Outcomes:Event Handling: Gained expertise in using addEventListener for handling user interactions.
  DOM Manipulation: Enhanced skills in creating and appending HTML elements dynamically.

4.. To-Do List Application

• Description: Created an interactive to-do list application using HTML, CSS, and JavaScript. The app allows users to add, mark as complete, and manage their tasks efficiently.
• Key Features:Task Addition: Users can add tasks using the input box and either click the "Add Task" button or press "Enter."
  Checkbox Integration: Each task includes a checkbox to mark it as complete. Checked tasks are styled with a strikethrough effect.
• 
  

Technologies Used: HTML:  CSS:  JavaScript: Added task functionality, event listeners for button clicks and key presses, and DOM manipulation.

Learning Outcome:Improved skills in DOM manipulation, handling user interactions, and creating dynamic, interactive components.
Gained experience with event handling (e.g., keypress and click events) and managing task states visually.

• Javascript Intermediate - Codecademy [2024 September]
• Full Stack - The Odin Project [2024 October]