This repository contains a collection of JavaScript projects developed as part of various courses. The objective is to enhance and build upon the concepts presented by instructors, serving as a resource for learning and experimentation.
- JavaScript (ES6+) – Core programming language used for project functionality.
- HTML5 – Markup language for structuring the web pages.
- CSS3 – Stylesheet language for designing the visual presentation of the web pages.
The repository includes a variety of projects, such as:
- Accordion: A collapsible content component.
- ConversorDeJson: A tool to convert data to and from JSON format.
- GeradorRodrigoFaro: A fun generator project.
- GeradordeCpf: A CPF (Cadastro de Pessoas Físicas) number generator.
- JokesGenerator: Fetches and displays random jokes.
- KeyCodeEvents: Displays key codes for keyboard events.
- LoginAnimation: A login form with animation effects.
- MostrarEsconderSenha: Toggles password visibility in input fields.
- Planner: A simple task planner application.
- ScrollAnimation: Animates elements on scroll.
- SoundBoardProject: Plays different sounds on button clicks.
- SplitLandingPage: A split-screen landing page with hover effects.
- barraDeProgresso: A progress bar component.
- blurringImg: An image loading with a blurring effect.
- cauculadoraDeGorgeta: A tip calculator.
- citacoes: Displays random quotes.
- contadorDeCaracteres: Counts characters in a text input.
- conversorDeMedidas: Converts between different units of measurement.
- dropdown: A custom dropdown menu component.
- drumMachine: A virtual drum kit.
- formularioComValidacoes: A form with validation checks.
- galeriaLightBox: An image gallery with lightbox effect.
- geradorDesenhas: A password generator.
- handwritten: Simulates handwritten text animation.
- hiddenSearch: A search input that expands on click.
- lengthString: Measures the length of a string input.
- mouseOver: Changes elements on mouse over events.
- palhetaDeCores: A color palette generator.
- relogio: A digital clock display.
- variablesJS: Demonstrates the use of CSS variables with JavaScript.
-
Clone this repository:
git clone https://github.com/RenanDevWeb/projetosComJavascript.git
Navigate to the project directory:
cd projetosComJavascript
Explore the projects:
Each project is contained within its own folder. Navigate to the desired project folder to access its files.
Open the HTML file:
Open the index.html file of the respective project in your preferred web browser to view and interact with the project.
📖 Learning Outcomes By working through these projects, you will:
Gain practical experience with JavaScript, HTML5, and CSS3.
Understand how to build interactive and dynamic web components.
Enhance your problem-solving skills through project-based learning.
📄 License This project is open-source and available under the MIT License. Feel free to use and modify it for your learning or personal projects.
Made with ❤️ by RenanDevWeb