Hi! My name is Jaia and I'm a UX/UI & Product Designer who loves Front End Development.
This is an ongoing mini IG project in which I've been implementing semantic HTML, responsive design, JavaScript and OOP principles.
HTML 🔧
- Markup is semantic.
- CSS classes and root file are named and organized according to BEM Methodology.
RESPONSIVENESS AND STYLING 💅
- Flexbox and CSS Grid were combined for the layout of the cards.
- The page is responsive up to 320px.
CSS TRANSITIONS ✨
- Opacity changes when hovering over buttons.
BUTTONS 🎯
- Edit profile button opens a form to modify profile information.
- Add card button opens a form to add a new image.
JAVASCRIPT ⚡️
- Used to control the forms behavior.
- I used textContent property to return values on the forms and show the most recent changes on them.
JAVASCRIPT ⚡️
- Cards are rendered dynamically.
- Implementation of event handlers.
- Users can add a new image card with a URL of their choosing. Try it out! ✅
- Cards can get deleted ❌
- Cards can get liked ❤️ and unliked 💔
- Image too small? No problem amigo! I gotchu, 🙌 click on the image to enlarge.
CSS TRANSITIONS ✨
- Smooth transitions were used when opening/closing image modals and forms. 😎 nothing popping in and out suddenly.
RESPONSIVENESS AND STYLING 💅
- When opening an image modal, the image is adaptive to the screen size.
JAVASCRIPT ⚡️
- Enabling form validation.
- Closing modals using Esc key.
- Closing modals when clicking in the image overlay.
ENCAPSULATION ⚡️
- Implementing the use of private and public methods and properties.
- Implementing the use of imports/exports.
- Class creation to separate dynamic markup from static markup.
- Implementing "this" to reduce memory space.
- Keep learning JavaScript!!
Thank you for stopping by! 🤓