se_project_aroundtheus

Project 9: Around the U.S

In this project, I built a dynamic web application that lets users explore and manage a collection of location cards. Key features include:

• Fetching and displaying cards from both local data and a remote API, merging them seamlessly.
• Adding, liking/unliking, and deleting cards with real-time updates synced with the backend.
• User profile management with editable name, description, and avatar — including uploading a new profile picture with server integration.
• Modular, reusable components with classes like Card, UserInfo, and various popup handlers for forms and image previews.
• Robust form validation, asynchronous API interactions, and smooth user experience with loading states and error handling.

This project sharpened my skills in advanced JavaScript, API integration, DOM manipulation, and clean component-based architecture.

Project 8: Around the U.S

Ive successfully worked through creating more classes and combining them together, I set up a project bundling and building with Webpack. Also implemented the setInputValues method for my popup form. My project structure looks cleaner and will be easier to find things. A great challenge but we go through it.

Project 7: Around the U.S

In this project, I refactored the codebase to follow the Object_Oriented Programming (OOP) principles by implementing two classes: Card and FormValidator. I restructured the project directory, by moving reusable class components into a new components folder and updating file paths accordingly.

Additionally, I unstalled and used a local server to support JavaScript modules. the project emphasized modularity and maintainability by exporting and importing classes into index.js, keeping the code organized.

Project 6: Around the U.S

In this part of the project, I worked on improving form validation and enhancing the user experience of popups. With form validation I ensured that the user entered the correct date before submitting a form, this really helps the user prevent errors, and I made it where they had a certain amount of character limits. Also took a dive into makingthe popups close properly with having the user just hit the ‘esc’ button.

Project 5: Around the U.S

Working on Cards and the way they are interactive to the user. Getting more fimilar with JS. Cant wait to see what else we will learn, project is coming together very nicely!

Made the changes needed to submit, fixed the like button, and fixed the postion of the close button.

Fixed CSS for the placement of the modal image container and made it look pretty.

Project 4: Stage 4: Around the U.S

This part was fun.. Had to watch the videos to understand the concept but I think im understanding it more and more. Made the form fields functionable, now you can input “Name” and “About me” fields. After inputing the information you can click save and it will make the changes. After that I made the rendering of cards with the getCardElement() and everything seems to be working good.

Project 4: Stage 3: Around the U.S

Worked with DOM and used the addEventListener() method to detect when the user clicks on the Edit & Close buttons.

Project 4: Stage 1: Around the U.S

Worked with JavaScript for the first time using array. git rm –cached Desktop/Projects/CTo-September-Code-Jam-2024 Still getting use to it, but not horrible yet.

Project 3: Around The U.S.

Projects Name: Around the U.S

Project and its functionality: The project involves developing an interactive web page designed to enhance user engagement through several key functionalities: Photo Management, Liking system, and profile customization. Overall, this project aims to create an engaging and user-friendly platform where individuals can share visual content, interact with others through likes, and maintain a personalized online presence.

technologies and techniques used: Dealing with basic techniques from sprint 1 & 2, I was interduced to more grid layout examples in Sprint 3 which I used to make this project functionable. from sizing containers, to making sure the fonts are right and connected with the right font-faces. Working with media screen to have the page react a certain way with the max width of a screen that the website is being viewed on. This project definatly tested me on all I learned and I am proud I made it as close as I could to the figma layout.

P.s I was going to have a screenshot of the overall project on the readme.md page but I wasnt sure out to import an image, or if its even possible.

Link to Github Pages: https://ahijaz1.github.io/se_project_aroundtheus/

Link to Video: https://drive.google.com/file/d/1ITDc_SFeQeffX1PQ6_3mC66PphPFzdEt/view?usp=sharing

Overview

• Intro
• Figma
• Images

Intro

This project is made so all the elements are displayed correctly on popular screen sizes. We recommend investing more time in completing this project, since it’s more difficult than previous ones.

Figma

• Link to the project on Figma

Images

The way you’ll do this at work is by exporting images directly from Figma — we recommend doing that to practice more. Don’t forget to optimize them here, so your project loads faster.

Good luck and have fun!