CodeClauseInternship

🌐 WebDev Internship Repository: A collection of my web development projects and code samples created during my internship. Exploring frontend and backend technologies to build modern, responsive, and dynamic web applications. Join me on my coding journey and let's create the web of tomorrow! 🚀 #WebDevelopment #Internship #CodeSamples" #CodeClause

Table of Contents

• MusicPlayer
• Pet Adoption Center Website
• Chat App Using Socket.IO
• Code of Conduct
• License

---

Task1

Music Player

Description This repository contains a web-based Music Player application built using HTML, CSS, and JavaScript. The Music Player allows users to play their favorite tunes, enjoy seamless music playback, and visualize the audio using a wave visualizer. The application supports loading custom songs and comes with a default playlist containing a few sample tracks.

Disclaimer

Before using this application on any platform, you must seek explicit permission from the repository owner. Any unauthorized use or distribution of this application is strictly prohibited, and appropriate legal action will be taken against offenders.

Features

• Play and pause songs.
• Control volume using a volume slider.
• Toggle looping of the currently playing song.
• Visualize the audio using a wave visualizer with colorful waves.
• Upload and play custom songs.
• Display song title and artist information.
• Show progress bar with current playback time and total duration.
• Responsive design for various screen sizes.

How to Use

1. Clone the repository to your local machine.
2. Open the index.html file in your web browser.
3. The default playlist will be loaded, and you can click on any song in the playlist to start playing it.
4. Use the control buttons to play, pause, skip to the previous or next song, and adjust the volume.
5. Click the loop button to toggle looping of the currently playing song.
6. To upload a custom song, click the "Upload a Song" button and select an MP3 file from your computer.
7. You can also enter your name in the custom input form to receive a personalized welcome message.

Compatibility

The Music Player is designed to work on modern web browsers that support HTML5, CSS3, and JavaScript.

🎵 Play some music

Let the beats play!

Acknowledgments

The wave visualizer in the Music Player is inspired by various audio visualizer techniques available in the web development community.

⬆ Back to Top

Task2

Pet Adoption Center Website

Welcome to the Pet Adoption Center website! This website serves as a platform for connecting animals in need of a loving home with compassionate families. The website features information about available pets, success stories, events, educational blog posts, and more.

Features

• Browse and search for available pets by name, species, and age.
• Read success stories of pets that found their forever homes through the adoption center.
• Stay updated with upcoming events related to pet adoption and animal welfare.
• Access informative blog posts on topics related to pet care and adoption.
• Subscribe to the newsletter to receive news, event announcements, and more.

How to Use

1. Clone this repository to your local machine.
2. Open the index.html file in a web browser to access the website.

Technologies Used

• HTML
• CSS (Tailwind CSS framework)
• JavaScript (for interactive elements and animations)
• FullCalendar library for displaying upcoming events

Acknowledgements

• Images used in this project are sourced from Unsplash.
• FullCalendar library for event calendar display.

---

⬆ Back to Top

Task3

Chat App Using Socket.IO

This repository contains a real-time chat application built using Node.js, Express, and Socket.IO. The application allows users to join chat rooms and exchange messages with other users in real-time. Users can also see a list of active users in the room and receive system messages when a user joins or leaves the room.

Features

• Multiple users can join a chat room and exchange messages in real-time.
• Users are provided with a list of active users in the room.
• Users receive system messages when they join or leave a room.
• Messages are timestamped and display the sender's username.

Prerequisites

• Node.js (at least version 12.x)
• npm (Node Package Manager)

Technologies Used

• Node.js
• Express.js
• Socket.IO
• HTML
• CSS
• JavaScript
• Moment.js (for formatting timestamps)
• ws (WebSocket library for Node.js)

Getting Started

1. Clone the Repository: Start by cloning this repository to your local machine.

   git clone https://github.com/your-username/chatapp.git
   cd chatapp
   

2. Install Dependencies: Install the required dependencies using npm.

   npm install
   

3. Run the Application: Start the Node.js server to run the application.

   npm start
   

   The server will start running on the default port 3000. If you want to use a different port, you can set the PORT environment variable.

4. Access the Application: Open a web browser and go to http://localhost:3000 (or the port you specified). You will be directed to the login page, where you can enter your email, username, and select a chat room to join.

5. Chatting: Once you've joined a chat room, you can exchange messages with other users in real-time. New messages will appear on the screen as they are sent.

Acknowledgments

ChatApp was inspired by the need for real-time communication tools and was built using various technologies and libraries.

• Node.js
• Express.js
• Socket.IO

Contributing

If you'd like to contribute to ChatApp, feel free to fork this repository and submit pull requests. You can also open issues for bug reports, feature requests, or general discussions.

⬆ Back to Top

License

This project is licensed under the MIT License, which means you're free to use, modify, and distribute the code as long as you include the original copyright and disclaimers. Refer to the LICENSE file for more details.

⬆ Back to Top