https://github.com/fabianmendozaospina/contacts

An example about how to use classes as data models in JavaScript
https://github.com/fabianmendozaospina/contacts

classes css dom html javascript

Last synced: 5 days ago
JSON representation

An example about how to use classes as data models in JavaScript

• Host: GitHub
• URL: https://github.com/fabianmendozaospina/contacts
• Owner: fabianmendozaospina
• Created: 2024-11-06T18:56:28.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-07T17:27:43.000Z (2 months ago)
• Last Synced: 2024-11-07T17:30:31.668Z (2 months ago)
• Topics: classes, css, dom, html, javascript
• Language: JavaScript
• Homepage: https://fabianmendozaospina.github.io/contacts/
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# My Contacts

![Badge](https://img.shields.io/badge/this_content-is_new!-green)




[My Contacts](https://fabianmendozaospina.github.io/contacts/) is a learning project developed with `HTML5`, `CSS3`, and `JavaScript (ES6)`. This project showcases how to interact with and manipulate the Document Object Model (DOM) to build a simple contact management interface. It serves as a hands-on demonstration of core web development concepts like JavaScript classes, DOM manipulation, event handling, and basic front-end design.

## Features

[My Contacts](https://fabianmendozaospina.github.io/contacts/) website is designed to showcase modern web development techniques, ensuring both aesthetic appeal and functional responsiveness. Built using best practices in `HTML5` and `CSS3`, and `JavaScript (ES6)`. The following features highlight key aspects of the design:

- Use of semantic HTML tags for better structure and accessibility.

- A responsive web layout through the use of Flexbox, a one-dimensional layout system to align items in rows or columns.

- Utilizing JavaScript to add interactive features, such as dynamically inserting objects into the DOM.

- JavaScript classes are used as models for creating these objects before they are added to the DOM, as well as for their subsequent deletion.

## Get Started

To get started locally:

1. Clone this repo:

   ```bash

   git clone https://github.com/fabianmendozaospina/contacts.git

   cd contacts

   ```

1. Explore the different files.

1. Select the index.html file.

1. Do right-click and select the `Reveal in File Explorer` menu.

1. Double-click on file index.html.

1. The browser will show the starting web page:

   ![](./assets/img/contacts.jpg)