Skip to content

An interactive web project showcasing modern web development techniques, responsive design, and modular code organization using HTML, CSS, and JavaScript (ES Modules).

Notifications You must be signed in to change notification settings

borgesenioc/web_project_around

Repository files navigation

Tripleten web_project_around (Around The U.S.)

An interactive web project showcasing modern web development techniques, responsive design, and object-oriented programming using HTML, CSS, and ES6 JavaScript classes.

Features

  • Modular CSS: Organized styles in the blocks/ directory (e.g., header.css, popup.css)
  • Responsive Design: Media queries ensure a smooth experience on both desktop and mobile devices.
  • Object-Oriented JavaScript: Modern ES6 classes for improved code organization:
    • The Card class handles card creation and functionality.
    • The FormValidator class manages form validation.
    • utils.js contains utility functions and configuration.
    • index.js orchestrates these components together.
  • Popup Functionality: Open and close profile editor and card creation forms.
  • Form Validation: Real-time validation for all forms with visual feedback.
  • Interactive Elements: Add cards, like cards, remove cards, and view enlarged images.
  • Code Quality: Configured with Prettier (.prettierrc) and EditorConfig (.editorconfig) for consistent styling.

Project Structure

  • HTML: Core structure defined in index.html
  • CSS:
  • JavaScript:
    • Entry point in index.js that coordinates components.
    • Card.js and FormValidator.js contain the primary ES6 classes.
    • utils.js contains utility functions, initial card data, and configuration.
  • Assets: Organized images and fonts in the images/ and vendor/fonts/fonts.css directories.

Getting Started

  1. Clone the repository.
  2. Open using a live server (e.g., VS Code's Live Server extension) to ensure modules work correctly.
  3. Interact with the page to add cards, edit profile, and view images.

Technologies

  • HTML5 & CSS3
  • JavaScript (ES6 Classes, Modules)
  • Object-Oriented Programming
  • BEM Methodology
  • Responsive design
  • Prettier, EditorConfig

Author

Enio Borges

About

An interactive web project showcasing modern web development techniques, responsive design, and modular code organization using HTML, CSS, and JavaScript (ES Modules).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •