Creation of HTML, CSS, and JavaScript components for reuse and modularization of web pages. This repository features a collection of reusable web development components that demonstrate different techniques and concepts in JavaScript, providing modular solutions for common UI elements and interactions.
Generate random colors using recursion for both RGB and HEX formats.
2. Reviews
A project to display random reviews with images, names, and text, with navigation functionality.
3. Navbar
A responsive navigation bar that adjusts the links dynamically.
An interactive sidebar with a modal feature for displaying additional content.
5. Modal
A simple modal that opens to display content dynamically.
6. Accordion
An accordion component that opens only one element at a time.
7. Menu
A filtering menu that categorizes and displays dataset items.
Implement smooth scrolling with JavaScript and fixed navigation.
9. Tabs
Dynamic tabs where data is injected through JavaScript.
10. Countdown
A countdown timer that updates every 7 days after the page refreshes.
11. Lorem Ipsum
A dynamic Lorem Ipsum text generator with form controls.
12. Task Manager
A simple task manager that uses local storage to persist tasks.
13. Slider
A sliding element component that dynamically updates the displayed content.
14. Gallery
An image gallery where each element’s state is managed by a JavaScript class.
15. Random Numbers
A random number generator that updates elements in the DOM using setInterval.
16. Dark Mode
A dark mode toggle using CSS variables for easy theme switching.
17. Filters
A filtering system that uses ES6 methods for data manipulation.
18. Norris Jokes
A Chuck Norris jokes generator using the official Chuck Norris API.
19. Random Users API
Fetching random user data from the Random User Generator API.
20. Cocktail API
Fetching and displaying cocktail recipes based on API data.
21. Strapi Menu
A dynamic menu that fetches data from a data.js file and adapts its layout based on the screen size. It truly stands out with its interactive submenus that appear when you hover over the links. On smaller screens, the navigation switches to a sidebar, offering a more compact and accessible layout for mobile devices.
22. Pagination
A pagination system fetching user data from GitHub API and displaying in paginated format.
You can clone this repository and explore each individual project. For each project, the index.html file will open the corresponding live example.
git clone https://github.com/armandomzn/javascript-components.gitcd path/to/project-folderEach project is self-contained and can be viewed by opening its respective index.html file in any modern browser.
- DOM Manipulation: Many of these projects use basic and advanced DOM manipulation techniques, such as adding and removing elements, updating text, and responding to user interactions.
- API Integration: Some projects, like the Cocktail API, Random Users API, and Norris Jokes, demonstrate how to fetch data from public APIs and display it dynamically.
- CSS Styling: All projects are styled using pure CSS, with some utilizing CSS variables, media queries, and flexbox/grid for layout.
- JavaScript Functions: Functions are used extensively for modularity and reuse across different projects. Common patterns include event listeners, data handling, and DOM updates.