🌐 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
Task1
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.
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.
- 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.
- Clone the repository to your local machine.
- Open the
index.htmlfile in your web browser. - The default playlist will be loaded, and you can click on any song in the playlist to start playing it.
- Use the control buttons to play, pause, skip to the previous or next song, and adjust the volume.
- Click the loop button to toggle looping of the currently playing song.
- To upload a custom song, click the "Upload a Song" button and select an MP3 file from your computer.
- You can also enter your name in the custom input form to receive a personalized welcome message.
The Music Player is designed to work on modern web browsers that support HTML5, CSS3, and JavaScript.
The wave visualizer in the Music Player is inspired by various audio visualizer techniques available in the web development community.
Task2
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.
- 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.
- Clone this repository to your local machine.
- Open the
index.htmlfile in a web browser to access the website.
- HTML
- CSS (Tailwind CSS framework)
- JavaScript (for interactive elements and animations)
- FullCalendar library for displaying upcoming events
- Images used in this project are sourced from Unsplash.
- FullCalendar library for event calendar display.
Task3
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.
- 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.
- Node.js (at least version 12.x)
- npm (Node Package Manager)
- Node.js
- Express.js
- Socket.IO
- HTML
- CSS
- JavaScript
- Moment.js (for formatting timestamps)
- ws (WebSocket library for Node.js)
-
Clone the Repository: Start by cloning this repository to your local machine.
git clone https://github.com/your-username/chatapp.git cd chatapp -
Install Dependencies: Install the required dependencies using npm.
npm install
-
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 thePORTenvironment variable. -
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. -
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.
ChatApp was inspired by the need for real-time communication tools and was built using various technologies and libraries.
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.
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.