diff --git a/Web-Development-Internship/Hariteja/Task1-Landingpage/Task One.html b/Web-Development-Internship/Hariteja/Task1-Landingpage/Task One.html new file mode 100644 index 0000000..e85337f --- /dev/null +++ b/Web-Development-Internship/Hariteja/Task1-Landingpage/Task One.html @@ -0,0 +1,94 @@ + + + + + + Landing Page + + + + + + + +
+
+
+ +
+ +
+
+
+
+
+
+

Features

+

1: Comprehensive Food Database: Access detailed information on various foods, including nutritional content, health benefits, and meal ideas. Make informed dietary choices to support your fitness goals.

+

2: Personalized Diet Plans: Receive customized diet plans tailored to your unique fitness objectives, dietary preferences, and health requirements. Stay on track with easy-to-follow meal suggestions and shopping lists.

+

3: Nutrient Tracking: Monitor your daily nutrient intake with our intuitive tracking tools. Ensure you're meeting your dietary needs and maintaining a balanced diet for optimal health.

+

4: Sports and Fitness Guidance: Get expert advice on various sports and fitness activities. Learn about different exercises, training routines, and how to integrate sports into your fitness regimen effectively.

+

5: Progress Tracking: Keep track of your fitness journey with our progress tracking features. Record your workouts, monitor your improvements, and stay motivated by visualizing your achievements.

+

6: Health Insights and Tips: Stay informed with regular updates on the latest health trends, fitness tips, and expert advice. Empower yourself with the knowledge to make healthier lifestyle choices.

+

7: Community Support: Join a supportive community of fitness enthusiasts. Share your progress, exchange tips, and find motivation from like-minded individuals on their fitness journeys.

+
+
+
+
+

Testimonial

+
+
+

"Zenithfitness has completely transformed my approach to fitness and nutrition. The personalized diet plans and nutrient tracking tools have helped me stay on top of my health goals. The community support is an added bonus, keeping me motivated every step of the way!"

+

- Sai Satish

+
+
+

"I love the comprehensive food database and the expert advice on sports and fitness. Zenithfitness makes it easy to integrate healthy habits into my daily routine. I've seen significant improvements in my overall well-being since using the app."

+

- Raja Sekhar

+
+
+ + +
+
+
+

Contact Us

+

For more information or inquiries, please contact us:

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/Web-Development-Internship/Hariteja/Task1-Landingpage/background/bg.jpg b/Web-Development-Internship/Hariteja/Task1-Landingpage/background/bg.jpg new file mode 100644 index 0000000..cafe1f2 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task1-Landingpage/background/bg.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task1-Landingpage/style.css b/Web-Development-Internship/Hariteja/Task1-Landingpage/style.css new file mode 100644 index 0000000..d8a1a0b --- /dev/null +++ b/Web-Development-Internship/Hariteja/Task1-Landingpage/style.css @@ -0,0 +1,211 @@ +hr{ + width: 10%; + margin-top: 01%; + border-top: 3px solid coral; +} +body { + overflow-x: hidden; + font-family: Arial, sans-serif; + margin: 0; + } +nav{ + + display: flex; + top: 0; + left: 0; + width: 94%; +} +nav { + background-color: #333; + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + } +body > nav{ + margin-top: 5px; + margin-right: 20px; + margin-left: 20px; + border-radius: 20px; + } + +.logo { + font-family: Arial, Helvetica, sans-serif; + font-size: 2rem; + font-weight: 900; + } + +.menu { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + } + +.menu li { + margin-right: 20px; + } + +.menu li:last-child { + margin-right: 0; + } + +.menu a { + color: #fff; + text-decoration: none; + transition: color 0.3s; + } + +.menu a:hover { + color: #ffcc00; + } + + .menu-icon { + display: none; + font-size: 1.5rem; + cursor: pointer; + } + +@media (max-width: 76px) { +.menu { + display: none; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #333; + position: absolute; + top: 50px; + left: 0; + z-index: 1; + } + +.menu.active { + display: flex; + } + +.menu li { + margin: 10px 0; + } + +.menu-icon { + display: block; + } + +} +body > main > div > img{ + margin-top: 10%; + margin-left: 1%; + margin-right: 1%; + width: 100%; + height: 400px; + border-radius: 20px; + object-fit: cover; +} +body > main > div > div{ + align-content: center; + font-size: larger; + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + color: rgb(255, 255, 255); +} +body > main > div > div > h1,p{ + background-color: rgb(27, 26, 26); +} +.text-container { + + margin-left: 45%; + width: 135px; + overflow: hidden; + margin-top: 1% +} +h2{ + font-size: xx-large; +} +body > section > div > p:nth-child(n){ + font-weight: 550; + margin-left: 5%; + white-space: pre-line; + background-color: white; +} +#testimonial > h2{ + margin-left: 43%; + width: 200px; + overflow: hidden; + margin-top: 1% +} +.testimonial-container { + max-width: 600px; + margin: 5% auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} +.testimonial { + margin-bottom: 20px; +} +.testimonial p { + font-style: italic; + color: #666; + background-color: #f9f9f9; +} +.testimonial-author { + font-weight: bold; + color: #333; +} +#contact > h2{ + margin-left: 43%; + width: 200px; + overflow: hidden; + margin-top: 1% +} +#contact > p:nth-child(n){ + margin-left: 35%; + font-weight: 550; + background-color: white; +} +.contact-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} +.form-group { + margin-bottom: 20px; +} +.form-group label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} +.form-group input[type="text"], +.form-group input[type="email"], +.form-group textarea { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; +} +.form-group textarea { + height: 100px; +} +.form-group button { + padding: 10px 20px; + background-color: #0085ff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} +.contact-icons{ + margin-left: 45%; + margin-right: 45%; + padding-top: 5%; + padding: auto;; +} \ No newline at end of file diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/Gallery.html b/Web-Development-Internship/Hariteja/Task2-gallery/Gallery.html new file mode 100644 index 0000000..74c19c0 --- /dev/null +++ b/Web-Development-Internship/Hariteja/Task2-gallery/Gallery.html @@ -0,0 +1,84 @@ + + + + + + Ligthbox-Enabled Gallery + + + + + +

Nature Gallery

+
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/1.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/1.jpg new file mode 100644 index 0000000..ffb3006 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/1.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/10.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/10.jpg new file mode 100644 index 0000000..dc5784c Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/10.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/11.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/11.jpg new file mode 100644 index 0000000..05f6128 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/11.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/12.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/12.jpg new file mode 100644 index 0000000..1f8a866 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/12.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/2.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/2.jpg new file mode 100644 index 0000000..95d8555 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/2.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/3.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/3.jpg new file mode 100644 index 0000000..b0ab02e Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/3.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/4.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/4.jpg new file mode 100644 index 0000000..c13dcc2 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/4.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/5.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/5.jpg new file mode 100644 index 0000000..391672d Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/5.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/6.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/6.jpg new file mode 100644 index 0000000..f3a55fc Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/6.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/7.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/7.jpg new file mode 100644 index 0000000..0a61a37 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/7.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/8.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/8.jpg new file mode 100644 index 0000000..0de4772 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/8.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task2-gallery/pics/9.jpg b/Web-Development-Internship/Hariteja/Task2-gallery/pics/9.jpg new file mode 100644 index 0000000..8dc33f2 Binary files /dev/null and b/Web-Development-Internship/Hariteja/Task2-gallery/pics/9.jpg differ diff --git a/Web-Development-Internship/Hariteja/Task4-student_enrollment_form/index (1).html b/Web-Development-Internship/Hariteja/Task4-student_enrollment_form/index (1).html new file mode 100644 index 0000000..05a1e89 --- /dev/null +++ b/Web-Development-Internship/Hariteja/Task4-student_enrollment_form/index (1).html @@ -0,0 +1,177 @@ + + + + + +Student Enrollment Form + + + + +

Student Enrollment Form

+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/index.html b/Web-Development-Internship/Hariteja/task3-portfolio/index.html new file mode 100644 index 0000000..db697d5 --- /dev/null +++ b/Web-Development-Internship/Hariteja/task3-portfolio/index.html @@ -0,0 +1,62 @@ + + + + + + Past Web Development Projects + + + +
+

Portfolio

+
+ +
+
+

Project 1: Simple Landing Page

+

Our responsive landing page is designed to provide an optimal viewing and interaction experience across a wide range of devices,
from desktop computers to mobile phones. With a clean and modern design, the landing page effectively conveys essential information and encourages user engagement.

+ p.ss/Screenshot (92).png +

Technologies used: HTML, CSS

+ Live Preview / GitHub Repository +
+ +
+

Project 2: Photo Gallery

+

Nature photo gallery provides a stunning showcase for your images, delivering an immersive viewing experience that captivates
audiences across all devices. Seamlessly integrating with your website, this gallery enhances visual storytelling and elevates user engagement to new heights.

+ p.ss/Screenshot (93).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 3: Student Enrollment Form

+

Student Enrollment Form simplifies the process of capturing essential information from prospective students, streamlining enrollment
procedures for educational institutions. Designed with user convenience and administrative efficiency in mind, this form offers a seamless experience for both applicants and admissions teams.

+ p.ss/Screenshot (94).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 4: To-Do List

+

To-Do List application is a powerful tool for organizing tasks and managing productivity effectively. Whether you're tackling daily
chores, planning projects, or tracking long-term goals, this intuitive application simplifies task management and helps you stay focused on what matters most.

+ p.ss/Screenshot (95).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 5: Calculator

+

Interactive Calculator is a versatile tool for performing basic arithmetic operations with ease and accuracy. Whether you're
solving simple equations or complex mathematical problems, this intuitive calculator simplifies calculations and enhances productivity.

+ p.ss/Screenshot (96).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ + +
+ + + + \ No newline at end of file diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (92).png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (92).png new file mode 100644 index 0000000..d9752ff Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (92).png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (93).png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (93).png new file mode 100644 index 0000000..00aa789 Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (93).png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (94).png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (94).png new file mode 100644 index 0000000..6b5bd61 Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (94).png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (95).png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (95).png new file mode 100644 index 0000000..b4c7493 Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (95).png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (96).png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (96).png new file mode 100644 index 0000000..fe31e3e Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/Screenshot (96).png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hfhfh.png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hfhfh.png new file mode 100644 index 0000000..d43cdad Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hfhfh.png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hshs.png b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hshs.png new file mode 100644 index 0000000..f845db0 Binary files /dev/null and b/Web-Development-Internship/Hariteja/task3-portfolio/p.ss/hshs.png differ diff --git a/Web-Development-Internship/Hariteja/task3-portfolio/styles.css b/Web-Development-Internship/Hariteja/task3-portfolio/styles.css new file mode 100644 index 0000000..0275c0d --- /dev/null +++ b/Web-Development-Internship/Hariteja/task3-portfolio/styles.css @@ -0,0 +1,57 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} +img { + width: 1000px; /* Adjust the width of the image as needed */ + height: auto; + border: 10px solid #ccc; + border-radius: 10px; + transition: transform 0.3s ease; + display: block; + margin-left: auto; + margin-right: auto; + width: 65%; +} + +img:hover { + transform: translate(5px, 5px); /* Adjust the amount of movement as needed */ +} + +header { + background-color: #8e91f1; + color: #fff; + padding: 20px; + text-align: center; +} + +main { + padding: 20px; +} + +.project { + margin-bottom: 40px; +} + +.project h2 { + font-size: 24px; + margin-bottom: 10px; +} + +.project p { + margin-bottom: 10px; +} + +.project img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +footer { + background-color: #7fa7e2; + color: #fff; + text-align: center; + padding: 10px 0; +} diff --git a/Web-Development-Internship/LICENSE b/Web-Development-Internship/LICENSE new file mode 100644 index 0000000..51f8fec --- /dev/null +++ b/Web-Development-Internship/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 CSEdgeOfficial + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Web-Development-Internship/README.md b/Web-Development-Internship/README.md new file mode 100644 index 0000000..e14af7c --- /dev/null +++ b/Web-Development-Internship/README.md @@ -0,0 +1,180 @@ +# Web-Development-Internship + +Title: Web Development Internship Tasks
+Subtitle: CSEdge Internship Program
+Author: Team CSEdge
+Level: Easy, Medium, Hard
+Questions per Level: 4
+Total Questions: 12
+ + ### Installation +To begin working on the projects, follow these steps: + +1. Clone the repository to your local machine using the command: +```bash +git clone https://github.com/CSEdgeOfficial/Web-Development-Internship/ +``` +2. Navigate to the cloned directory: +```bash +cd Web-Development-Internship +``` +3. Create a new folder with your full name to store your projects: +```bash +mkdir YourFullName && cd YourFullName +``` +4. Begin working on the tasks within your named folder. + +### Pull Request + +When you have completed a task, create a separate folder within your named folder for the specific task and submit a pull request to the master branch of this repository. Our team will review your submission and merge it if approved. + + +Table of Contents: +------------------ + +Intro
+easy-level
+medium-level
+hard-level
+conclusion
+ + + +Introduction: +------------ + +Greetings, + +As a newly joined student of our Web Development Internship program, we would like to congratulate you and wish you a warm welcome. We are confident that you will learn many exciting things during your tenure with us. + +To kick off your internship, we have prepared a set of tasks for you to work on. These tasks cover various aspects of web development and aim to give you a taste of what lies ahead. Each question has three levels of difficulty: Easy, Medium, and Hard. Feel free to attempt whichever level suits your skillset best. + +### Instructions: + +* Complete the tasks sequentially starting from the easiest level. +* Choose any one Section Easy or Medium or Hard and work on it only. +* You need to do 4 Tasks if you choose Easy section and You need to do 3 Tasks if you Choose Medium section and You need to do 2 Tasks only if you choose Hard Section +* All tasks must be completed using HTML, CSS, and JavaScript / ReactJs. +* Ensure that your solutions are clean, efficient, and maintainable. +* Document your thought process and approach for each solution. +* Submit the complete package consisting of source code files, screenshots, and descriptions to the designated mentor via link using GitHub. + +### Evaluation Criteria: + +* Accuracy of the solution +* Adherence to coding standards and conventions +* Cleanliness and efficiency of the code +* Ability to solve problems creatively +* Understanding of core concepts + +Good luck, and happy coding! + + + +Easy Level Tasks: +---------------- + +1. Simple Landing Page + - Create a responsive landing page with: + - Header section with logo and navigation menu + - Hero section with background image and title + - Features section highlighting four features of CSEdge + - Testimonial section featuring two testimonials + - Contact Us section with a contact form and social media links + +2. Photo Gallery + - Design a lightbox-enabled photo gallery with: + - Thumbnail previews of all images + - Clickable thumbnails to open respective images in a modal window + - Close functionality to exit the modal window + - Responsive design for optimal viewing on mobile devices + +3. Portfolio + - Create a minimalistic website showcasing five past web development projects with: + - Title and brief description + - Screenshot or demo video + - Technologies used + - Live preview / GitHub repository link + +4. Student Enrollment Form + - Develop a student enrollment form for a fictional educational institution with fields for: + - Student's name, email, phone number + - Course selection + - Additional comments + - Implement form validation for accurate data submission + + + +Medium Level Tasks: +------------------- + +5. To-Do List + - Create a dynamic to-do list application allowing users to: + - Add, edit, delete, and mark tasks as completed + - Sort tasks by priority, due date, or completion status + +6. Calculator + - Develop a functional calculator application capable of: + - Performing basic arithmetic operations + - Ensuring an intuitive user interface with responsive design + +7. Quiz Web + - Build an interactive quiz web application featuring: + - Multiple-choice questions on various topics + - Timer for each question, scoring mechanism, and feedback for answers + - Option for users to review their quiz results + +8. GitHub Profile Readme Generator + - The GitHub Profile Readme Generator is a tool aimed at simplifying the creation of visually appealing and informative README files for GitHub profiles. It provides users with templates and customization options to showcase their skills, projects, and personality effectively on their GitHub profiles. + - **Template Selection**: Choose from a variety of pre-designed templates tailored for different purposes, such as showcasing projects, skills, or personal interests. + - **Customization Options**: Customize the selected template with your own information, including profile picture, bio, social media links, project highlights, and more. + - **Markdown Support**: Utilize Markdown syntax to format text, add images, links, and other elements to your README. + - **Preview**: Preview the generated README file before committing changes to your GitHub profile. + - **Ease of Use**: User-friendly interface with intuitive controls for seamless navigation and editing. + - **Version Control Integration**: Easily update and maintain your GitHub profile README by integrating it with version control systems like Git. + + + +Hard Level Tasks: +----------------- + +9. Resume Maker + - Create a comprehensive web application that assists users in building professional resumes: + - Templates for different career levels and industries + - Customizable sections for experience, education, skills, and certifications + - Export options for PDF and HTML formats + +10. Tic Tac Toe + - Implement a classic Tic Tac Toe game with: + - Multiplayer functionality for real-time competition + - Game state management, win detection, and responsive design for seamless gameplay + +11. Tesla/Apple Web Page Redesign + - Redesign the official website of Tesla or Apple, focusing on: + - Modernizing the user interface and enhancing user experience + - Incorporating innovative design elements using Bootstrap and Tailwind CSS frameworks + +12. Blog Using Markdown Articles + - Create a dynamic blog web application allowing users to publish articles in Markdown format with: + - User authentication, article CRUD operations, and rich text editing using Markdown syntax + - Comments section for reader engagement and backend data storage/authentication using Firebase or other cloud services + + + +### FAQ + +#### Q: What happens if I encounter an issue or bug while working within my named folder? + +A: If you encounter an issue or bug during the development process while working within your named folder, please report it in the Issues tab of this repository. Our team will triage and address reported issues in a timely manner. + +#### Q: Are there any resources available to assist with the tasks within my named folder? + +A: Yes, we recommend checking out the official resource page that includes all the neccessary resources [Click Here](https://csedge.courses/Resources.html). + +#### Q: Is there a deadline for completing the tasks within my named folder? + +A: While there is no hard deadline for completing the tasks within your named folder, we encourage you to finish them within a reasonable amount of time to maximize your learning opportunities. + +### Final Thoughts + +Completing these tasks and storing them within your named folder will not only improve your web development skills, but also demonstrate your dedication to continuous learning. Best of luck, and happy coding! diff --git a/Web-Development-Internship/Yasirbehrani/Easy 01/Task One.html b/Web-Development-Internship/Yasirbehrani/Easy 01/Task One.html new file mode 100644 index 0000000..cc0b2ff --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 01/Task One.html @@ -0,0 +1,91 @@ + + + + + + Landing Page + + + + + + + +
+
+
+ +
+

STAR

+

Hero/Landing Responsive Page

+
+
+
+
+
+
+

Features

+

1:(CSEdge) has a great user interface,It features a user-friendly design,Smooth navigation is also a highlight,Overall, it provides an excellent experience!
+ Click here to Visit (CSEdge)

+

2:At CSEdge, the contact feature facilitates seamless communication with the team. Stay connected and informed by following the company on social media platforms like YouTube,Facebook, Instagram, and LinkedIn. For direct correspondence, feel free to reach out via Gmail. We're here to address inquiries and welcome feedback.

+

3:At CSEdge, the internship program offers a comprehensive learning experience. Proudly MSME Registered, AICTE Accredited, and recognized by LinkedIn, CSEdge internship includes WhatsApp support for quick queries, E-Certificate upon completion, and access to free resources. Join us at CSEdge to gain valuable skills and practical knowledge

+

4:CSEdge is an excellent platform that provides internships for new fresh graduates to gain practical experience. It is recognized as a verified company, instilling confidence in users that the internship opportunities offered here are genuine and valuable. CSEdge serves as a great starting point for new professionals in their career journey, fostering their growth and development.

+
+
+
+
+

Testimonial

+
+
+

"I undertook an internship with CSEdge and had a very positive experience. Their guidance and support provided me with practical knowledge, and I found it to be an excellent platform for advancing my career. Thank you to the CSEdge team!."

+

- Yasir

+
+
+

"My experience with CSEdge has been exceptional. The internship provided me with valuable skills and insights that have been instrumental in shaping my career. The support and guidance from the CSEdge team have been invaluable. Thank you for the enriching experience!"

+

- Salman Khan

+
+
+
+
+
+

Contact Us

+

For more information or inquiries, please contact us:

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Easy 01/background/bg.jpg b/Web-Development-Internship/Yasirbehrani/Easy 01/background/bg.jpg new file mode 100644 index 0000000..1eab7cf Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 01/background/bg.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 01/style.css b/Web-Development-Internship/Yasirbehrani/Easy 01/style.css new file mode 100644 index 0000000..f6975fe --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 01/style.css @@ -0,0 +1,211 @@ +hr{ + width: 10%; + margin-top: 10%; + border-top: 3px solid coral; +} +body { + overflow-x: hidden; + font-family: Arial, sans-serif; + margin: 0; + } +nav{ + + display: flex; + top: 0; + left: 0; + width: 94%; +} +nav { + background-color: #333; + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + } +body > nav{ + margin-top: 5px; + margin-right: 20px; + margin-left: 20px; + border-radius: 20px; + } + +.logo { + font-family: Arial, Helvetica, sans-serif; + font-size: 2rem; + font-weight: 900; + } + +.menu { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + } + +.menu li { + margin-right: 20px; + } + +.menu li:last-child { + margin-right: 0; + } + +.menu a { + color: #fff; + text-decoration: none; + transition: color 0.3s; + } + +.menu a:hover { + color: #ffcc00; + } + + .menu-icon { + display: none; + font-size: 1.5rem; + cursor: pointer; + } + +@media (max-width: 768px) { +.menu { + display: none; + flex-direction: column; + align-items: center; + width: 100%; + background-color: #333; + position: absolute; + top: 50px; + left: 0; + z-index: 1; + } + +.menu.active { + display: flex; + } + +.menu li { + margin: 10px 0; + } + +.menu-icon { + display: block; + } + +} +body > main > div > img{ + margin-top: 15%; + margin-left: 1%; + margin-right: 1%; + width: 100%; + height: 400px; + border-radius: 20px; + object-fit: cover; +} +body > main > div > div{ + align-content: center; + font-size: larger; + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + color: rgb(255, 255, 255); +} +body > main > div > div > h1,p{ + background-color: orangered; +} +.text-container { + + margin-left: 45%; + width: 135px; + overflow: hidden; + margin-top: 10% +} +h2{ + font-size: xx-large; +} +body > section > div > p:nth-child(n){ + font-weight: 550; + margin-left: 5%; + white-space: pre-line; + background-color: white; +} +#testimonial > h2{ + margin-left: 43%; + width: 200px; + overflow: hidden; + margin-top: 10% +} +.testimonial-container { + max-width: 600px; + margin: 5% auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} +.testimonial { + margin-bottom: 20px; +} +.testimonial p { + font-style: italic; + color: #666; + background-color: #f9f9f9; +} +.testimonial-author { + font-weight: bold; + color: #333; +} +#contact > h2{ + margin-left: 43%; + width: 200px; + overflow: hidden; + margin-top: 10% +} +#contact > p:nth-child(n){ + margin-left: 35%; + font-weight: 550; + background-color: white; +} +.contact-form { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} +.form-group { + margin-bottom: 20px; +} +.form-group label { + display: block; + font-weight: bold; + margin-bottom: 5px; +} +.form-group input[type="text"], +.form-group input[type="email"], +.form-group textarea { + width: 100%; + padding: 8px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; +} +.form-group textarea { + height: 100px; +} +.form-group button { + padding: 10px 20px; + background-color: #0085ff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} +.contact-icons{ + margin-left: 45%; + margin-right: 45%; + padding-top: 5%; + padding: auto;; +} \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/Gallery.html b/Web-Development-Internship/Yasirbehrani/Easy 02/Gallery.html new file mode 100644 index 0000000..e2f1df2 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 02/Gallery.html @@ -0,0 +1,84 @@ + + + + + + Ligthbox-Enabled Gallery + + + + + +

Lightbox Gallery

+
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/1.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/1.jpg new file mode 100644 index 0000000..f1b04f8 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/1.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/10.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/10.jpg new file mode 100644 index 0000000..a7ce758 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/10.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/11.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/11.jpg new file mode 100644 index 0000000..cbd2751 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/11.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/12.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/12.jpg new file mode 100644 index 0000000..ed9783f Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/12.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/2.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/2.jpg new file mode 100644 index 0000000..d19fb0b Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/2.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/3.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/3.jpg new file mode 100644 index 0000000..97f4744 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/3.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/4.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/4.jpg new file mode 100644 index 0000000..8921a12 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/4.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/5.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/5.jpg new file mode 100644 index 0000000..45992b6 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/5.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/6.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/6.jpg new file mode 100644 index 0000000..1b1032c Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/6.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/7.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/7.jpg new file mode 100644 index 0000000..fcd9e44 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/7.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/8.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/8.jpg new file mode 100644 index 0000000..afabce3 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/8.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 02/pics/9.jpg b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/9.jpg new file mode 100644 index 0000000..91f3eb1 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 02/pics/9.jpg differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/index.html b/Web-Development-Internship/Yasirbehrani/Easy 03/index.html new file mode 100644 index 0000000..55000ed --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 03/index.html @@ -0,0 +1,62 @@ + + + + + + Past Web Development Projects + + + +
+

Portfolio

+
+ +
+
+

Project 1: Simple Landing Page

+

Our responsive landing page is designed to provide an optimal viewing and interaction experience across a wide range of devices,
from desktop computers to mobile phones. With a clean and modern design, the landing page effectively conveys essential information and encourages user engagement.

+ p.ss/Screenshot (92).png +

Technologies used: HTML, CSS

+ Live Preview / GitHub Repository +
+ +
+

Project 2: Photo Gallery

+

lightbox photo gallery provides a stunning showcase for your images, delivering an immersive viewing experience that captivates
audiences across all devices. Seamlessly integrating with your website, this gallery enhances visual storytelling and elevates user engagement to new heights.

+ p.ss/Screenshot (93).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 3: Student Enrollment Form

+

Student Enrollment Form simplifies the process of capturing essential information from prospective students, streamlining enrollment
procedures for educational institutions. Designed with user convenience and administrative efficiency in mind, this form offers a seamless experience for both applicants and admissions teams.

+ p.ss/Screenshot (94).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 4: To-Do List

+

To-Do List application is a powerful tool for organizing tasks and managing productivity effectively. Whether you're tackling daily
chores, planning projects, or tracking long-term goals, this intuitive application simplifies task management and helps you stay focused on what matters most.

+ p.ss/Screenshot (95).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ +
+

Project 5: Calculator

+

Interactive Calculator is a versatile tool for performing basic arithmetic operations with ease and accuracy. Whether you're
solving simple equations or complex mathematical problems, this intuitive calculator simplifies calculations and enhances productivity.

+ p.ss/Screenshot (96).png +

Technologies used: HTML, CSS, JavaScript

+ Live Preview / GitHub Repository +
+ + +
+ + + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (92).png b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (92).png new file mode 100644 index 0000000..d43cdad Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (92).png differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (93).png b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (93).png new file mode 100644 index 0000000..f845db0 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (93).png differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (94).png b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (94).png new file mode 100644 index 0000000..6b5bd61 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (94).png differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (95).png b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (95).png new file mode 100644 index 0000000..b4c7493 Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (95).png differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (96).png b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (96).png new file mode 100644 index 0000000..fe31e3e Binary files /dev/null and b/Web-Development-Internship/Yasirbehrani/Easy 03/p.ss/Screenshot (96).png differ diff --git a/Web-Development-Internship/Yasirbehrani/Easy 03/styles.css b/Web-Development-Internship/Yasirbehrani/Easy 03/styles.css new file mode 100644 index 0000000..b6c7f61 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 03/styles.css @@ -0,0 +1,53 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} +img { + width: 200px; /* Adjust the width of the image as needed */ + height: auto; + border: 1px solid #ccc; + border-radius: 10px; + transition: transform 0.3s ease; +} + +img:hover { + transform: translate(5px, 5px); /* Adjust the amount of movement as needed */ +} + +header { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; +} + +main { + padding: 20px; +} + +.project { + margin-bottom: 40px; +} + +.project h2 { + font-size: 24px; + margin-bottom: 10px; +} + +.project p { + margin-bottom: 10px; +} + +.project img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} + +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 10px 0; +} diff --git a/Web-Development-Internship/Yasirbehrani/Easy 04/index.html b/Web-Development-Internship/Yasirbehrani/Easy 04/index.html new file mode 100644 index 0000000..95b1afa --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Easy 04/index.html @@ -0,0 +1,142 @@ + + + + + +Student Enrollment Form + + + + +

Student Enrollment Form

+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+ + +
+ + + + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Hard 01/index.html b/Web-Development-Internship/Yasirbehrani/Hard 01/index.html new file mode 100644 index 0000000..45ca335 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 01/index.html @@ -0,0 +1,40 @@ + + + + + + QR Code Generator + + + +
+

Enter your text or URL

+ + + +
+ +
+
+ + + + diff --git a/Web-Development-Internship/Yasirbehrani/Hard 01/qrcode.min.js b/Web-Development-Internship/Yasirbehrani/Hard 01/qrcode.min.js new file mode 100644 index 0000000..1434c6f --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 01/qrcode.min.js @@ -0,0 +1 @@ +var qrcode=function(){function i(t,r){function a(t,r){g=function(t){for(var r=new Array(t),e=0;e>e&1);g[Math.floor(e/3)][e%3+l-8-3]=n}for(e=0;e<18;e+=1){n=!t&&1==(r>>e&1);g[e%3+l-8-3][Math.floor(e/3)]=n}},v=function(t,r){for(var e=f<<3|r,n=B.getBCHTypeInfo(e),o=0;o<15;o+=1){var i=!t&&1==(n>>o&1);o<6?g[o][8]=i:o<8?g[o+1][8]=i:g[l-15+o][8]=i}for(o=0;o<15;o+=1){i=!t&&1==(n>>o&1);o<8?g[8][l-o-1]=i:o<9?g[8][15-o-1+1]=i:g[8][15-o-1]=i}g[l-8][8]=!t},d=function(t,r){for(var e=-1,n=l-1,o=7,i=0,a=B.getMaskFunction(r),u=l-1;0>>o&1)),a(n,u-f)&&(c=!c),g[n][u-f]=c,-1==(o-=1)&&(i+=1,o=7)}if((n+=e)<0||l<=n){n-=e,e=-e;break}}},w=function(t,r,e){for(var n=b.getRSBlocks(t,r),o=M(),i=0;i8*u)throw"code length overflow. ("+o.getLengthInBits()+">"+8*u+")";for(o.getLengthInBits()+4<=8*u&&o.put(0,4);o.getLengthInBits()%8!=0;)o.putBit(!1);for(;!(o.getLengthInBits()>=8*u||(o.put(236,8),o.getLengthInBits()>=8*u));)o.put(17,8);return function(t,r){for(var e=0,n=0,o=0,i=new Array(r.length),a=new Array(r.length),u=0;u',e+="";for(var n=0;n";for(var o=0;o';e+=""}return e+="",e+=""},s.createSvgTag=function(t,r,e,n){var o={};"object"==typeof t&&(t=(o=t).cellSize,r=o.margin,e=o.alt,n=o.title),t=t||2,r=void 0===r?4*t:r,(e="string"==typeof e?{text:e}:e||{}).text=e.text||null,e.id=e.text?e.id||"qrcode-description":null,(n="string"==typeof n?{text:n}:n||{}).text=n.text||null,n.id=n.text?n.id||"qrcode-title":null;var i,a,u,f,c=s.getModuleCount()*t+2*r,g="";for(f="l"+t+",0 0,"+t+" -"+t+",0 0,-"+t+"z ",g+=''+p(n.text)+"":"",g+=e.text?''+p(e.text)+"":"",g+='',g+='":r+=">";break;case"&":r+="&";break;case'"':r+=""";break;default:r+=n}}return r};return s.createASCII=function(t,r){if((t=t||1)<2)return function(t){t=void 0===t?2:t;var r,e,n,o,i,a=1*s.getModuleCount()+2*t,u=t,f=a-t,c={"██":"█","█ ":"▀"," █":"▄"," ":" "},g={"██":"▀","█ ":"▀"," █":" "," ":" "},l="";for(r=0;r>>8),r.push(255&o)):r.push(a)}}return r}};var r,t,a=1,u=2,o=4,f=8,y={L:1,M:0,Q:3,H:2},e=0,n=1,c=2,g=3,l=4,h=5,s=6,v=7,B=(r=[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],(t={}).getBCHTypeInfo=function(t){for(var r=t<<10;0<=d(r)-d(1335);)r^=1335<>>=1;return r}var w=function(){for(var r=new Array(256),e=new Array(256),t=0;t<8;t+=1)r[t]=1<>>8)},writeBytes:function(t,r,e){r=r||0,e=e||t.length;for(var n=0;n>>7-t%8&1)},put:function(t,r){for(var e=0;e>>r-e-1&1))},getLengthInBits:function(){return n},putBit:function(t){var r=Math.floor(n/8);e.length<=r&&e.push(0),t&&(e[r]|=128>>>n%8),n+=1}};return o},x=function(t){var r=a,n=t,e={getMode:function(){return r},getLength:function(t){return n.length},write:function(t){for(var r=n,e=0;e+2>>8&255)+(255&n),t.put(n,13),e+=2}if(e=e.length){if(0==i)return-1;throw"unexpected end of file./"+i}var t=e.charAt(n);if(n+=1,"="==t)return i=0,-1;t.match(/^\s$/)||(o=o<<6|a(t.charCodeAt(0)),i+=6)}var r=o>>>i-8&255;return i-=8,r}},a=function(t){if(65<=t&&t<=90)return t-65;if(97<=t&&t<=122)return t-97+26;if(48<=t&&t<=57)return t-48+52;if(43==t)return 62;if(47==t)return 63;throw"c:"+t};return r},I=function(t,r,e){for(var n=function(t,r){var n=t,o=r,l=new Array(t*r),e={setPixel:function(t,r,e){l[r*n+t]=e},write:function(t){t.writeString("GIF87a"),t.writeShort(n),t.writeShort(o),t.writeByte(128),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(0),t.writeByte(255),t.writeByte(255),t.writeByte(255),t.writeString(","),t.writeShort(0),t.writeShort(0),t.writeShort(n),t.writeShort(o),t.writeByte(0);var r=i(2);t.writeByte(2);for(var e=0;255>>r!=0)throw"length over";for(;8<=n+r;)e.writeByte(255&(t<>>=8-n,n=o=0;o|=t<>>o-6),o-=6},t.flush=function(){if(0>6,128|63&n):n<55296||57344<=n?r.push(224|n>>12,128|n>>6&63,128|63&n):(e++,n=65536+((1023&n)<<10|1023&t.charCodeAt(e)),r.push(240|n>>18,128|n>>12&63,128|n>>6&63,128|63&n))}return r}(t)},function(t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports&&(module.exports=t())}(function(){return qrcode}); \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Hard 01/script.js b/Web-Development-Internship/Yasirbehrani/Hard 01/script.js new file mode 100644 index 0000000..139c55b --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 01/script.js @@ -0,0 +1,50 @@ +document.getElementById('generate').addEventListener('click', function() { + var data = document.getElementById('input').value; + var type = document.getElementById('type').value; + var size = document.getElementById('size').value; + var color = document.getElementById('color').value; + var level = document.getElementById('level').value; + var qrCodeDiv = document.getElementById('qr-code'); + + // Clear previous QR codes + qrCodeDiv.innerHTML = ''; + + // Split the data into chunks if it's too long + var chunks = chunkString(data, 200); // Adjust chunk size as needed + + // Generate QR codes for each chunk + chunks.forEach(function(chunk, index) { + var qrCodeContainer = document.createElement('div'); + qrCodeContainer.classList.add('qr-code-container'); + qrCodeDiv.appendChild(qrCodeContainer); + + var qr = new QRCode(qrCodeContainer, { + text: type === 'text' ? chunk : getTypeData(type, chunk), + width: size, + height: size, + colorDark: color, + correctLevel: level + }); + }); +}); + +function getTypeData(type, data) { + switch(type) { + case 'url': + return data.startsWith('http://') || data.startsWith('https://') ? data : 'http://' + data; + case 'contact': + return 'BEGIN:VCARD\nVERSION:3.0\nFN:' + data + '\nEND:VCARD'; + case 'wifi': + return 'WIFI:S:' + data + ';T:WPA;P:password;;'; + default: + return data; + } +} + +function chunkString(str, chunkSize) { + var chunks = []; + for (var i = 0; i < str.length; i += chunkSize) { + chunks.push(str.slice(i, i + chunkSize)); + } + return chunks; +} diff --git a/Web-Development-Internship/Yasirbehrani/Hard 01/styles.css b/Web-Development-Internship/Yasirbehrani/Hard 01/styles.css new file mode 100644 index 0000000..a36b366 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 01/styles.css @@ -0,0 +1,68 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} +body{ + background: #262a2f; +} +.container{ + width: 400px; + padding: 25px 35px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + border-radius: 10px; +} +.container button{ + width: 100%; + height: 50px; + background: darkcyan; + color: #fff; + border: 0; + outline: 0; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0); + cursor: pointer; + margin: 20px 0; + font-weight: 500; +} +.imgBox{ + width: 200px; + border-radius: 5px; + max-height: 0; + overflow: hidden; + transition: max-height 1s;; +} +.imgBox img{ + width: 100%; + padding: 10px; +} +#imgBox.show-img{ + max-height: 300px; + margin: 10px auto; + border: 1px solid #d1d1d1; +} +.error{ + animation: shake 0.1s linear 10; +} +@keyframes shake{ + 0%{ + transform: translateX(0); + } + 25%{ + transform: translateX(-2px); + } + 50%{ + transform: translateX(0); + } + 75%{ + transform: translateX(2px); + } + 100%{ + transform: translateX(0); + } +} \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Hard 02/index.html b/Web-Development-Internship/Yasirbehrani/Hard 02/index.html new file mode 100644 index 0000000..46e9526 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 02/index.html @@ -0,0 +1,30 @@ + + + + + + + + Tic Tac Toe + + + +

Tic Tac Toe

+
+
+
+
+
+
+
+
+
+
+
+
Player X's turn
+
+ +
+ + + diff --git a/Web-Development-Internship/Yasirbehrani/Hard 02/script.js b/Web-Development-Internship/Yasirbehrani/Hard 02/script.js new file mode 100644 index 0000000..baaf46c --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 02/script.js @@ -0,0 +1,77 @@ +// script.js + +const board = document.getElementById('board'); +const cells = document.querySelectorAll('.cell'); +const status = document.getElementById('status'); +const restartButton = document.getElementById('restartButton'); + +let currentPlayer = 'X'; +let gameActive = true; +let gameState = ['', '', '', '', '', '', '', '', '']; + +const winningConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; + +const handleCellClick = (e) => { + const clickedCell = e.target; + const cellIndex = parseInt(clickedCell.getAttribute('data-cell')); + + if (gameState[cellIndex] !== '' || !gameActive) { + return; + } + + handleCellPlayed(clickedCell, cellIndex); + handleResultValidation(); +}; + +const handleCellPlayed = (cell, cellIndex) => { + gameState[cellIndex] = currentPlayer; + cell.textContent = currentPlayer; +}; + +const handleResultValidation = () => { + let roundWon = false; + for (let i = 0; i < winningConditions.length; i++) { + const [a, b, c] = winningConditions[i]; + if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) { + roundWon = true; + break; + } + } + + if (roundWon) { + status.innerText = `${currentPlayer} wins!`; + gameActive = false; + return; + } + + if (!gameState.includes('')) { + status.innerText = 'Draw!'; + gameActive = false; + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; + status.innerText = `${currentPlayer}'s turn`; +}; + +const handleRestartGame = () => { + currentPlayer = 'X'; + gameActive = true; + gameState = ['', '', '', '', '', '', '', '', '']; + status.innerText = `${currentPlayer}'s turn`; + cells.forEach(cell => { + cell.textContent = ''; + }); +}; + +cells.forEach(cell => cell.addEventListener('click', handleCellClick)); +restartButton.addEventListener('click', handleRestartGame); diff --git a/Web-Development-Internship/Yasirbehrani/Hard 02/styles.css b/Web-Development-Internship/Yasirbehrani/Hard 02/styles.css new file mode 100644 index 0000000..7a75491 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Hard 02/styles.css @@ -0,0 +1,53 @@ +/* styles.css */ +body > h1{ + text-align: center; +} +#board{ + align-items: center; +} +.container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-gap: 5px; + margin-bottom: 20px; + /* Center the grid horizontally */ + justify-content: center; + /* Center the grid vertically */ + align-items: center; +} + + +.cell { + width: 100px; + height: 100px; + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + font-size: 36px; + cursor: pointer; +} + +.status { + font-size: 24px; + margin-bottom: 20px; + text-align: center; +} + +.restart-button { + padding: 10px 20px; + font-size: 18px; + cursor: pointer; +} +.restart-button-container { + display: flex; + justify-content: center; /* Center the button horizontally */ +} + diff --git a/Web-Development-Internship/Yasirbehrani/Medium-1/index.html b/Web-Development-Internship/Yasirbehrani/Medium-1/index.html new file mode 100644 index 0000000..b089073 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-1/index.html @@ -0,0 +1,18 @@ + + + + + + To-Do List + + + +
+

To-Do List

+ + +
    +
    + + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Medium-1/script.js b/Web-Development-Internship/Yasirbehrani/Medium-1/script.js new file mode 100644 index 0000000..f61a38f --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-1/script.js @@ -0,0 +1,50 @@ +const taskInput = document.getElementById('taskInput'); +const addTaskBtn = document.getElementById('addTaskBtn'); +const taskList = document.getElementById('taskList'); + +// Add task +addTaskBtn.addEventListener('click', () => { + const taskText = taskInput.value.trim(); + if (taskText !== '') { + const taskItem = document.createElement('li'); + taskItem.innerHTML = ` + ${taskText} + + + Completed + `; + taskList.appendChild(taskItem); + taskInput.value = ''; + addTaskItemListeners(taskItem); + } +}); + +// Add event listeners to task items +function addTaskItemListeners(taskItem) { + const editText = taskItem.querySelector('.task-text'); + const editBtn = taskItem.querySelector('.edit-btn'); + const deleteBtn = taskItem.querySelector('.delete-btn'); + const completeCheckbox = taskItem.querySelector('.complete-checkbox'); + + // Edit task + editBtn.addEventListener('click', () => { + const newText = prompt('Edit task:', editText.textContent); + if (newText !== null) { + editText.textContent = newText.trim(); + } + }); + + // Delete task + deleteBtn.addEventListener('click', () => { + taskItem.remove(); + }); + + // Mark task as completed + completeCheckbox.addEventListener('change', () => { + if (completeCheckbox.checked) { + editText.classList.add('completed'); + } else { + editText.classList.remove('completed'); + } + }); +} diff --git a/Web-Development-Internship/Yasirbehrani/Medium-1/styles.css b/Web-Development-Internship/Yasirbehrani/Medium-1/styles.css new file mode 100644 index 0000000..e0937c7 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-1/styles.css @@ -0,0 +1,56 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +.container { + max-width: 600px; + margin: 50px auto; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; +} + +input[type="text"] { + width: 80%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; + box-sizing: border-box; +} + +button { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + padding: 10px; + border-bottom: 1px solid #ccc; +} + +li:last-child { + border-bottom: none; +} + +.completed { + text-decoration: line-through; + color: #888; +} diff --git a/Web-Development-Internship/Yasirbehrani/Medium-2/index.html b/Web-Development-Internship/Yasirbehrani/Medium-2/index.html new file mode 100644 index 0000000..5d70222 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-2/index.html @@ -0,0 +1,36 @@ + + + + + + Calculator + + + +
    +
    +
    + + + + + + + + + + + + + + + + + + +
    +
    + + + + \ No newline at end of file diff --git a/Web-Development-Internship/Yasirbehrani/Medium-2/script.js b/Web-Development-Internship/Yasirbehrani/Medium-2/script.js new file mode 100644 index 0000000..a72ce2a --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-2/script.js @@ -0,0 +1,79 @@ +const display = document.querySelector('.display'); +const buttons = document.querySelectorAll('.buttons button'); + +let currentInput = ''; +let firstOperand = null; +let operator = null; +let awaitingNextInput = false; + +buttons.forEach(button => { + button.addEventListener('click', () => { + const buttonText = button.textContent; + + if (button.classList.contains('number')) { + if (awaitingNextInput) { + currentInput = buttonText; + awaitingNextInput = false; + } else { + currentInput += buttonText; + } + } else if (button.classList.contains('operator')) { + if (operator !== null) { + compute(); + } + firstOperand = parseFloat(currentInput); + operator = buttonText; + awaitingNextInput = true; + } else if (button.classList.contains('equals')) { + compute(); + } else if (button.classList.contains('clear')) { + clear(); + } else if (button.classList.contains('decimal')) { + if (!currentInput.includes('.')) { + currentInput += '.'; + } + } else if (button.classList.contains('percentage')) { + currentInput = parseFloat(currentInput) / 100; + } + + updateDisplay(); + }); +}); + +function updateDisplay() { + display.textContent = currentInput; +} + +function clear() { + currentInput = ''; + firstOperand = null; + operator = null; + awaitingNextInput = false; +} + +function compute() { + const secondOperand = parseFloat(currentInput); + let result = 0; + + switch (operator) { + case '+': + result = firstOperand + secondOperand; + break; + case '-': + result = firstOperand - secondOperand; + break; + case '*': + result = firstOperand * secondOperand; + break; + case '/': + result = firstOperand / secondOperand; + break; + default: + return; + } + + currentInput = result.toString(); + firstOperand = result; + operator = null; + awaitingNextInput = true; +} diff --git a/Web-Development-Internship/Yasirbehrani/Medium-2/styles.css b/Web-Development-Internship/Yasirbehrani/Medium-2/styles.css new file mode 100644 index 0000000..9f425ac --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-2/styles.css @@ -0,0 +1,38 @@ +.calculator { + max-width: 300px; + margin: 50px auto; + padding: 20px; + background-color: #f4f4f4; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.display { + margin-bottom: 10px; + padding: 10px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + text-align: right; + font-size: 24px; +} + +.buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +button { + padding: 15px; + font-size: 18px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} diff --git a/Web-Development-Internship/Yasirbehrani/Medium-3/index.html b/Web-Development-Internship/Yasirbehrani/Medium-3/index.html new file mode 100644 index 0000000..94dd1cd --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-3/index.html @@ -0,0 +1,27 @@ + + + + + + Quiz Application + + + + +

    Quiz= TOTAL 10 Questions

    +
    +
    +
    +
    Time Left: 60 seconds
    + + + +
    +
    +

    Quiz Results

    +
    + +
    + + + diff --git a/Web-Development-Internship/Yasirbehrani/Medium-3/script.js b/Web-Development-Internship/Yasirbehrani/Medium-3/script.js new file mode 100644 index 0000000..a6ea45c --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-3/script.js @@ -0,0 +1,139 @@ +// Quiz data (questions, options, correct answers) +const quizData = [ + { + question: "What is the capital of France?", + options: ["London", "Paris", "Berlin", "Madrid"], + correctAnswer: 1 + }, + { + question: "What is the largest planet in our solar system?", + options: ["Mars", "Jupiter", "Saturn", "Earth"], + correctAnswer: 1 + }, + { + question: "Who wrote 'Romeo and Juliet'?", + options: ["William Shakespeare", "Jane Austen", "Charles Dickens", "Leo Tolstoy"], + correctAnswer: 0 + }, + { + question: "Which country is known as the Land of the Rising Sun?", + options: ["China", "India", "Japan", "South Korea"], + correctAnswer: 2 + }, + { + question: "What is the chemical symbol for water?", + options: ["O", "H2O", "CO2", "H2SO4"], + correctAnswer: 1 + }, + { + question: "Which planet is known as the Red Planet?", + options: ["Venus", "Mars", "Jupiter", "Saturn"], + correctAnswer: 1 + }, + { + question: "Who painted the Mona Lisa?", + options: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Michelangelo"], + correctAnswer: 2 + }, + { + question: "What is the largest mammal in the world?", + options: ["Elephant", "Blue Whale", "Giraffe", "Polar Bear"], + correctAnswer: 1 + }, + { + question: "What is the currency of Japan?", + options: ["Yuan", "Won", "Yen", "Dollar"], + correctAnswer: 2 + }, + { + question: "Who discovered penicillin?", + options: ["Alexander Fleming", "Louis Pasteur", "Marie Curie", "Albert Einstein"], + correctAnswer: 0 + } +]; + +// Other variables and functions +let currentQuestion = 0; +let score = 0; +let timer; + +// Function to load question +function loadQuestion() { + const questionElement = document.querySelector('.question'); + const optionsElement = document.querySelector('.options'); + const questionData = quizData[currentQuestion]; + + questionElement.textContent = questionData.question; + optionsElement.innerHTML = ''; + + questionData.options.forEach((option, index) => { + const optionElement = document.createElement('label'); + optionElement.innerHTML = ` + + ${option} + `; + optionsElement.appendChild(optionElement); + }); +} + +// Function to start the timer +function startTimer() { + let timeLeft = 60; // Time in seconds + timer = setInterval(() => { + document.getElementById('timer').textContent = timeLeft; + if (timeLeft === 0) { + clearInterval(timer); + endQuiz(); + } else { + timeLeft--; + } + }, 1000); +} + +// Function to navigate to the next question +function nextQuestion() { + const selectedOption = document.querySelector('input[name="option"]:checked'); + if (selectedOption) { + const selectedAnswer = parseInt(selectedOption.value); + if (selectedAnswer === quizData[currentQuestion].correctAnswer) { + score++; + } + } + currentQuestion++; + if (currentQuestion < quizData.length) { + loadQuestion(); + } else { + endQuiz(); + } +} + +// Function to end the quiz +function endQuiz() { + clearInterval(timer); + const resultContainer = document.querySelector('.result-container'); + resultContainer.style.display = 'block'; + const scoreElement = document.querySelector('.score'); + scoreElement.textContent = `Your Score: ${score}/${quizData.length}`; + const feedbackElement = document.querySelector('.feedback'); + feedbackElement.textContent = `Thank you for completing the quiz!`; +} + +// Function to handle quiz submission +function submitQuiz() { + const selectedOption = document.querySelector('input[name="option"]:checked'); + if (selectedOption) { + const selectedAnswer = parseInt(selectedOption.value); + if (selectedAnswer === quizData[currentQuestion].correctAnswer) { + score++; + } + } + endQuiz(); +} + +// Event listeners for navigation buttons +document.getElementById('nextBtn').addEventListener('click', nextQuestion); +document.getElementById('submitBtn').addEventListener('click', submitQuiz); + +// Start the quiz +loadQuestion(); +startTimer(); diff --git a/Web-Development-Internship/Yasirbehrani/Medium-3/styles.css b/Web-Development-Internship/Yasirbehrani/Medium-3/styles.css new file mode 100644 index 0000000..e7c3912 --- /dev/null +++ b/Web-Development-Internship/Yasirbehrani/Medium-3/styles.css @@ -0,0 +1,32 @@ +h2{ + text-align: center; +} + body { + font-family: Arial, sans-serif; +} + +.quiz-container, .result-container { + max-width: 600px; + margin: 50px auto; + padding: 20px; + background-color: #f4f4f4; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.options { + margin-top: 10px; +} + +.options label { + display: block; + margin-bottom: 5px; +} + +.timer { + margin-top: 10px; +} + +.result-container { + display: none; +} diff --git a/Web-Development-Internship/mohithvema/task1/script.js b/Web-Development-Internship/mohithvema/task1/script.js new file mode 100644 index 0000000..7c0fb01 --- /dev/null +++ b/Web-Development-Internship/mohithvema/task1/script.js @@ -0,0 +1,57 @@ +let tasks = []; + +function addTask() { + const taskInput = document.getElementById('taskInput'); + const priorityInput = document.getElementById('priorityInput'); + const dueDateInput = document.getElementById('dueDateInput'); + const task = { + text: taskInput.value, + completed: false, + priority: priorityInput.value, + dueDate: new Date(dueDateInput.value) + }; + tasks.push(task); + taskInput.value = ''; + priorityInput.value = ''; + dueDateInput.value = ''; + renderTasks(); +} + +function editTask(index) { + const task = tasks[index]; + const newText = prompt('Edit task', task.text); + if(newText) { + task.text = newText; + renderTasks(); + } +} + +function toggleTask(index) { + tasks[index].completed = !tasks[index].completed; + renderTasks(); +} + +function deleteTask(index) { + tasks.splice(index, 1); + renderTasks(); +} + +function sortTasks(key) { + tasks.sort((a, b) => a[key] > b[key] ? 1 : -1); + renderTasks(); +} + +function renderTasks() { + const taskList = document.getElementById('taskList'); + taskList.innerHTML = ''; + for(let i = 0; i < tasks.length; i++) { + const task = tasks[i]; + const taskItem = document.createElement('li'); + taskItem.innerHTML = ` + ${task.text} + + + `; + taskList.appendChild(taskItem); + } +} diff --git a/Web-Development-Internship/mohithvema/task1/styles.css b/Web-Development-Internship/mohithvema/task1/styles.css new file mode 100644 index 0000000..ad4f7cd --- /dev/null +++ b/Web-Development-Internship/mohithvema/task1/styles.css @@ -0,0 +1,94 @@ +body { + font-family: Arial, sans-serif; + background-color:#6299ce; + color: #333; + margin: 0; + padding: 0; +} +.container +{ + max-width:600px; + margin: auto; + margin-top: 80px; + background-color:#bcf384; + padding: 20px; + border-radius:20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + +} +#list{ + margin-top: 30px; + text-align: center; + font-size: 50px; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} +h1 { + text-align: center; + margin-top: 20px; +} + +input[type="text"], input[type="number"], input[type="date"], button { + padding: 10px; + margin: 5px; + border: none; + border-radius: 20px; /* Rounded border */ + box-sizing: border-box; +} + +input[type="text"], input[type="number"], input[type="date"] { + width: calc(33% - 22px); /* Adjust based on your layout */ +} + +button { + background-color: #56ef59; + color: white; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #a05445; +} + +#taskList { + list-style-type: none; + padding: 0; + margin-top: 20px; +} + +.task { + background-color: #fff; + padding: 15px; + margin-bottom: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.task:hover { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.priority-1 { /* Customize colors based on priority levels */ + border-left: 5px solid #ff6347; /* Tomato */ +} + +.priority-2 { + border-left: 5px solid #ffa500; /* Orange */ +} + +.priority-3 { + border-left: 5px solid #ffd700; /* Gold */ +} + +.priority-4 { + border-left: 5px solid #87ceeb; /* Sky Blue */ +} + +.priority-5 { + border-left: 5px solid #8a2be2; /* Blue Violet */ +} + +.completed { + text-decoration: line-through; + opacity: 0.7; +} diff --git a/Web-Development-Internship/mohithvema/task1/todolist.html b/Web-Development-Internship/mohithvema/task1/todolist.html new file mode 100644 index 0000000..99a646a --- /dev/null +++ b/Web-Development-Internship/mohithvema/task1/todolist.html @@ -0,0 +1,25 @@ + + + + Dynamic To-Do List + + + + +
    +

    Dynamic To-Do List

    +
    +
    +

    List container

    + + + + + + + +
      +
      + + + diff --git a/Web-Development-Internship/mohithvema/task2/cal.html b/Web-Development-Internship/mohithvema/task2/cal.html new file mode 100644 index 0000000..6778cd9 --- /dev/null +++ b/Web-Development-Internship/mohithvema/task2/cal.html @@ -0,0 +1,30 @@ + + + + Basic Calculator + + + +
      + + + + + + + + + + + + + + + + + +
      + + + + \ No newline at end of file diff --git a/Web-Development-Internship/mohithvema/task2/script.js b/Web-Development-Internship/mohithvema/task2/script.js new file mode 100644 index 0000000..0d75ffe --- /dev/null +++ b/Web-Development-Internship/mohithvema/task2/script.js @@ -0,0 +1,51 @@ +let result = ''; +let operation = null; +let operand = ''; + +function appendNumber(number) { + if (operation !== null) { + operand += number; + } else { + result += number; + } + updateResult(); +} + +function performOperation(op) { + if (operation !== null) calculateResult(); + operation = op; + updateResult(); +} + +function calculateResult() { + if (operation !== null) { + switch(operation) { + case '+': + result = parseFloat(result) + parseFloat(operand); + break; + case '-': + result = parseFloat(result) - parseFloat(operand); + break; + case '*': + result = parseFloat(result) * parseFloat(operand); + break; + case '/': + result = parseFloat(result) / parseFloat(operand); + break; + } + operation = null; + operand = ''; + } + updateResult(); +} + +function clearResult() { + result = ''; + operation = null; + operand = ''; + updateResult(); +} + +function updateResult() { + document.getElementById('result').value = result + (operation !== null ? ' ' + operation + ' ' + operand : ''); +} \ No newline at end of file diff --git a/Web-Development-Internship/mohithvema/task2/stylesheet.css b/Web-Development-Internship/mohithvema/task2/stylesheet.css new file mode 100644 index 0000000..1cefbe8 --- /dev/null +++ b/Web-Development-Internship/mohithvema/task2/stylesheet.css @@ -0,0 +1,49 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: lightsalmon; + font-family: Arial, sans-serif; +} +#calculator { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 10px; + max-width: 300px; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); + background-color: #FFFDD0; /* Added background color */ +} +#calculator button { + height: 60px; + width: 60px; + font-size: large; + border: none; + border-radius: 50%; + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); + background: linear-gradient(to right, #0c0c0c, #524c4c); + color: white; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} +#calculator button:active { + transform: scale(0.95); + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); +} +#calculator button:hover { + transform: scale(1.05); + background-color: rgba(231, 18, 18, 0.9); +} +#calculator #result { + grid-column: span 4; + height: 60px; + text-align: right; + padding: 10px; + box-sizing: border-box; + border: none; + border-radius: 5px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); + background-color: #a0d6b4; +} \ No newline at end of file diff --git a/Web-Development-Internship/mohithvema/task3/quiz.html b/Web-Development-Internship/mohithvema/task3/quiz.html new file mode 100644 index 0000000..347d0a6 --- /dev/null +++ b/Web-Development-Internship/mohithvema/task3/quiz.html @@ -0,0 +1,24 @@ + + + + + + Interactive Quiz + + + +

      INTERACTIVE QUIZ


      + + + + + + + diff --git a/Web-Development-Internship/mohithvema/task3/script.js b/Web-Development-Internship/mohithvema/task3/script.js new file mode 100644 index 0000000..90c5da7 --- /dev/null +++ b/Web-Development-Internship/mohithvema/task3/script.js @@ -0,0 +1,111 @@ +const questions = [ + { + question: "Qno-1:What does HTML stand for?", + options: ["Hyper Text Markup Language", "High Tech Markup Language", "Hyperlink Text Markup Language", " Home Tool Markup Language"], + answer: "Hyper Text Markup Language" + }, + { + question: "Qno-2:Which technology is primarily responsible for the styling of web pages?", + options: [" JavaScript", "HTML", "CSS", "Python"], + answer: "CSS" + }, + { + question: "Qno-3: What does CSS stand for?", + options: ["Creative Style Sheets", "Cascading Style Sheets", "Computer Style Sheets", "Custom Style Sheets"], + answer: "Cascading Style Sheets" + }, + { + question: "Qno-4: Which programming language is mainly used for adding interactivity to websites?", + options: [" HTML", " CSS", "Python", " JavaScript"], + answer: " JavaScript" + }, + { + question: "Qno-5: What is the purpose of a front-end web development framework like React or Angular?", + options: ["To manage databases and server-side logic", "To create a visually appealing user interface", "To handle server-side routing", "To interact with web servers"], + answer: "To create a visually appealing user interface" + }, + +]; + +let currentQuestionIndex = 0; +let score = 0; +let timer; +let userAnswers = []; + +const questionElement = document.getElementById('question'); +const optionsElement = document.getElementById('options'); +const nextButton = document.getElementById('next-button'); +const scoreElement = document.getElementById('score'); +const startButton = document.getElementById('start-button'); +const timeLeftElement = document.getElementById('time-left'); +const reviewButton = document.getElementById('review-button'); +const timerElement = document.getElementById('timer'); + +function showQuestion() { + const currentQuestion = questions[currentQuestionIndex]; + questionElement.textContent = currentQuestion.question; + optionsElement.innerHTML = ''; + currentQuestion.options.forEach(option => { + const button = document.createElement('button'); + button.textContent = option; + button.addEventListener('click', () => selectOption(option)); + optionsElement.appendChild(button); + }); + startTimer(); +} + +function selectOption(option) { + const currentQuestion = questions[currentQuestionIndex]; + userAnswers[currentQuestionIndex] = option; + if (option === currentQuestion.answer) { + score++; + } + clearInterval(timer); // Clear the timer +} + +function startTimer() { + let timeLeft = 30; + timer = setInterval(() => { + timeLeft--; + timeLeftElement.textContent = timeLeft; + if (timeLeft <= 0) { + clearInterval(timer); + selectOption(null); + } + }, 1000); +} + +function endQuiz() { + clearInterval(timer); // Clear the timer + timerElement.style.display = 'none'; // Hide the timer + questionElement.style.display = 'none'; + optionsElement.style.display = 'none'; + nextButton.style.display = 'none'; + scoreElement.textContent = score; + document.getElementById('result').style.display = 'block'; + reviewButton.style.display = 'block'; // Show the review button +} + +startButton.addEventListener('click', () => { + startButton.style.display = 'none'; + document.getElementById('quiz-container').style.display = 'block'; + showQuestion(); +}); + +nextButton.addEventListener('click', () => { + clearInterval(timer); + currentQuestionIndex++; + if (currentQuestionIndex < questions.length) { + showQuestion(); + } else { + endQuiz(); + } +}); + +reviewButton.addEventListener('click', () => { + let review = ''; + questions.forEach((q, index) => { + review += `Question: ${q.question}\nYour Answer: ${userAnswers[index]}\nCorrect Answer: ${q.answer}\n\n`; + }); + alert(review); +}); diff --git a/Web-Development-Internship/mohithvema/task3/styles.css b/Web-Development-Internship/mohithvema/task3/styles.css new file mode 100644 index 0000000..2c4c83d --- /dev/null +++ b/Web-Development-Internship/mohithvema/task3/styles.css @@ -0,0 +1,94 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +#quiz-container { + + border-radius: 30px; + + padding: 20px; + width: 300px; +} +#timer{ + text-align: center; +} +#question, #timer { + margin-bottom: 20px; + background-color: yellowgreen; +} + +#options { + margin-bottom: 20px; + display: block; +} + +button { + display: block; + width: 100%; + padding: 10px; + border: none; + background-color: #333; + color: white; + cursor: pointer; +} + +button:hover { + background-color: #555; +} + +#result { + display: none; + position: absolute; + top: 20px; + right: 20px; + background-color: aqua; +} +#start-button{ + font-size: 50px; + font-family: cursive; + border-radius: 40px; + animation-name: startbtn; + animation-duration: 3s; + +} +@keyframes startbtn{ + from{ + font-size: 50px; + font-family: cursive; + border-radius: 40px; + + } + to{ + height: 250px; + width: 300px; + font-size: 50px; + font-family: cursive; + border-radius:50%; + background-color: lightsalmon; + } +} +#start-button:hover{ + background-color: lightseagreen; +} +body{ + background-color: lightblue; +} +#heading{ + display: block; + position: absolute; + top:50px; + left:520px; +} +#review-button{ + background-color: blueviolet; + display: block; + position: absolute; + left:0px; +} diff --git a/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/index.html b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/index.html new file mode 100644 index 0000000..69227f4 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/index.html @@ -0,0 +1,30 @@ + + + + To-Do List + + + +
      +

      To-Do List

      + + +
      + Priority: + + + +
      + + +
        +
        +
        + + + + diff --git a/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/script.js b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/script.js new file mode 100644 index 0000000..3e450aa --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/script.js @@ -0,0 +1,95 @@ +let tasks = []; + +function addTask() { + const taskInput = document.getElementById('taskInput'); + const taskDescription = taskInput.value.trim(); + const taskPriority = document.querySelector('input[name="priority"]:checked'); + const taskDueDate = document.getElementById('dueDateInput').value; + + if (taskDescription !== '' && taskPriority && taskDueDate !== '') { + tasks.push({ + description: taskDescription, + priority: taskPriority.value, + dueDate: taskDueDate, + completed: false + }); + renderTasks(); + taskInput.value = ''; + document.getElementById('dueDateInput').value = ''; + document.querySelectorAll('input[name="priority"]').forEach(input => input.checked = false); + } else { + alert('Please fill out all fields.'); + } +} + +function deleteTask(index) { + tasks.splice(index, 1); + renderTasks(); +} +// Function to edit task details +function editTask(index) { + const task = tasks[index]; + + // Ask user for new task details + const newDescription = prompt('Enter new task description:', task.description); + const newPriority = prompt('Enter new priority (High, Medium, Low):', task.priority); + const newDueDate = prompt('Enter new due date (YYYY-MM-DD):', task.dueDate); + + // Update task with new details if provided + if (newDescription !== null && newDescription.trim() !== '') { + task.description = newDescription.trim(); + } + if (newPriority !== null && ['High', 'Medium', 'Low'].includes(newPriority.trim())) { + task.priority = newPriority.trim(); + } + if (newDueDate !== null && newDueDate.trim() !== '') { + task.dueDate = newDueDate.trim(); + } + + renderTasks(); // Re-render the tasks list +} + +function toggleCompletion(index) { + tasks[index].completed = !tasks[index].completed; + renderTasks(); +} + +function sortTasks() { + const sortBy = document.getElementById('sort').value; + if (sortBy === 'priority') { + tasks.sort((a, b) => a.priority.localeCompare(b.priority)); + } else if (sortBy === 'dueDate') { + tasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate)); + } else if (sortBy === 'completionStatus') { + tasks.sort((a, b) => a.completed - b.completed); + } + renderTasks(); +} + +function renderTasks() { + const taskList = document.getElementById('taskList'); + taskList.innerHTML = ''; + tasks.forEach((task, index) => { + const listItem = document.createElement('li'); + listItem.textContent = `${task.description} - Priority: ${task.priority} - Due Date: ${task.dueDate}`; + if (task.completed) { + listItem.classList.add('completed'); + } + listItem.addEventListener('click', () => toggleCompletion(index)); // Toggle completion when clicked + const editButton = document.createElement('button'); + editButton.textContent = 'Edit'; + editButton.addEventListener('click', (event) => { + event.stopPropagation(); + editTask(index); + }); + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + deleteButton.addEventListener('click', (event) => { + event.stopPropagation(); + deleteTask(index); + }); + listItem.appendChild(editButton); + listItem.appendChild(deleteButton); + taskList.appendChild(listItem); + }); +} diff --git a/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/styles.css b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/styles.css new file mode 100644 index 0000000..1546d82 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-01/To-Do List/styles.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; +} + +.container { + max-width: 600px; + margin: 50px auto; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; +} + +input[type="text"] { + width: calc(100% - 80px); + padding: 10px; + margin-bottom: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 10px 20px; + background-color: purple; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #6a1b9a; +} + +ul { + list-style-type: decimal; + padding: 0; +} + +li { + padding: 10px; + border-bottom: 1px solid #eee; + font-size:16px; + color:black; +} + +.completed { + text-decoration: line-through; + opacity: 0.5; +} + +.sort-options { + margin-top: 20px; +} + +label { + font-weight: bold; +} + +select { + padding: 5px; +} diff --git a/Web-Development-Internship/sajithahassain/Medium-02/Calculator/index.html b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/index.html new file mode 100644 index 0000000..911275f --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/index.html @@ -0,0 +1,32 @@ + + + + Calculator + + + +
        + +
        + + + + + + + + + + + + + + + + + +
        +
        + + + diff --git a/Web-Development-Internship/sajithahassain/Medium-02/Calculator/script.js b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/script.js new file mode 100644 index 0000000..0959932 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/script.js @@ -0,0 +1,39 @@ +let display = document.getElementById('display'); +let currentInput = ''; + +function appendNumber(num) { + currentInput += num; + display.value = currentInput; +} + +function appendOperator(op) { + if (currentInput !== '') { + if (['+', '-', '*', '/'].includes(currentInput[currentInput.length - 1])) { + currentInput = currentInput.slice(0, -1); + } + currentInput += op; + display.value = currentInput; + } +} + +function appendDecimal() { + if (!currentInput.includes('.')) { + currentInput += '.'; + display.value = currentInput; + } +} + +function clearDisplay() { + currentInput = ''; + display.value = ''; +} + +function calculate() { + try { + let result = eval(currentInput); + display.value = result; + currentInput = result.toString(); + } catch (error) { + display.value = 'Error'; + } +} diff --git a/Web-Development-Internship/sajithahassain/Medium-02/Calculator/styles.css b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/styles.css new file mode 100644 index 0000000..1ccb5e1 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-02/Calculator/styles.css @@ -0,0 +1,36 @@ +.calculator { + width: 350px; + margin: 50px auto; + border: 1px solid #ccc; + border-radius: 5px; + padding: 10px; +} + +.display { + width: 100%; + margin-bottom: 10px; + padding: 10px; + font-size: 1.5em; +} + +.buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-gap: 5px; +} + +button { + padding: 10px; + font-size: 1.2em; + border: none; + cursor: pointer; + background-color: #f0f0f0; +} + +button.full-width { + grid-column: span 4; +} + +button:hover { + background-color: #ddd; +} diff --git a/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/index.html b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/index.html new file mode 100644 index 0000000..ff43665 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/index.html @@ -0,0 +1,32 @@ + + + + Quiz App + + + +
        +

        Welcome to the Quiz!

        + +
        + + +
        +
        +
        + +
        + +
        + + + + + + + diff --git a/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/script.js b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/script.js new file mode 100644 index 0000000..8b0c435 --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/script.js @@ -0,0 +1,161 @@ +let quizContainer; +let userAnswers=[]; +const quizData = [ + { + question: "What is the capital of France?", + choices: ["Paris", "London", "Berlin", "Rome"], + correctAnswer: "Paris" + }, + { + question: "What is the largest planet in our solar system?", + choices: ["Mercury", "Venus", "Earth", "Jupiter"], + correctAnswer: "Jupiter", + + }, + { + question: "Who wrote 'Romeo and Juliet'?", + choices: ["Shakespeare", "Hemingway", "Twain", "Tolkien"], + correctAnswer: "Shakespeare", + + }, + { + question: "What is the chemical symbol for gold?", + choices: ["Au", "Ag", "Cu", "Fe"], + correctAnswer: "Au", + + }, + { + question: "What is the capital of Japan?", + choices: ["Tokyo", "Seoul", "Beijing", "Bangkok"], + correctAnswer: "Tokyo", + + }, + { + question: "Who painted the Mona Lisa?", + choices: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"], + correctAnswer: "Leonardo da Vinci", + + }, + { + question: "What is the chemical symbol for water?", + choices: ["H2O", "CO2", "NaCl", "O2"], + correctAnswer: "H2O", + + }, + { + question: "Which planet is known as the Red Planet?", + choices: ["Mars", "Venus", "Jupiter", "Mercury"], + correctAnswer: "Mars", + + }, + { + question: "Who developed the theory of relativity?", + choices: ["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Stephen Hawking"], + correctAnswer: "Albert Einstein", + + }, + { + question: "What is the chemical symbol for sodium?", + choices: ["Na", "K", "Ca", "Fe"], + correctAnswer: "Na", + + } + + // Add more questions here +]; + +let currentQuestion = 0; +let score = 0; +let timer; + + + +function startQuiz() { + quizContainer = document.getElementById('quiz-container'); + quizContainer.style.display="block"; + userAnswers =[]; + showQuestion(); + startTimer(); +} + +function showQuestion() { + const questionElement = document.getElementById('question'); + const choicesElement = document.getElementById('choices'); + const currentQuizData = quizData[currentQuestion]; + + questionElement.innerText = currentQuizData.question; + choicesElement.innerHTML = ""; + + currentQuizData.choices.forEach(choice => { + const choiceButton = document.createElement('button'); + choiceButton.innerText = choice; + choiceButton.classList.add('choice-btn'); + choiceButton.addEventListener('click', () => checkAnswer(choice)); + choicesElement.appendChild(choiceButton); + }); +} + +function checkAnswer(choice) { + const currentQuizData = quizData[currentQuestion]; + userAnswers.push(choice); + clearInterval(timer); // Stop the timer + if (choice === currentQuizData.correctAnswer) { + score++; + showFeedback("Correct!", "green"); + } else { + showFeedback("Wrong!", "red"); + setTimeout(nextQuestion, 1000); // Navigate to next question after 1 second + } +} + +function endQuiz() { + const quizContainer = document.getElementById('quiz-container'); + quizContainer.innerHTML = ` +

        Quiz Complete!

        +

        Your score: ${score}/${quizData.length}

        + + `; +} + +function reviewScores() { + const quizContainer = document.getElementById('quiz-container'); + let reviewHTML = '

        Review Scores

        '; + quizData.forEach((question, index) => { + const isCorrect = (userAnswers[index] == question.correctAnswer); // Check if userAnswers is defined + reviewHTML +=`

        Question ${index + 1}: ${isCorrect ? 'Correct' : 'Wrong'}

        `; + }); + quizContainer.innerHTML = reviewHTML; +} + +function showFeedback(message, color) { + const feedbackElement = document.getElementById('feedback'); + feedbackElement.innerText = message; + feedbackElement.style.color = color; +} + +function startTimer() { + let timeLeft = 10; + timer = setInterval(() => { + document.getElementById('timer').innerText =`Time left: ${timeLeft} seconds`; + timeLeft--; + if(timeLeft >= 0){ + document.getElementById('timer').innerText =`Time left: ${timeLeft} seconds`; + } + else { + clearInterval(timer); + showFeedback("Time's up!", "red"); + } + }, 1000); +} + +function nextQuestion() { + currentQuestion++; + if (currentQuestion < quizData.length) { + showQuestion(); + clearInterval(timer); + startTimer(); + } else { + endQuiz(); + } +} +startQuiz(); diff --git a/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/styles.css b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/styles.css new file mode 100644 index 0000000..127bdcf --- /dev/null +++ b/Web-Development-Internship/sajithahassain/Medium-03/Quiz Web/styles.css @@ -0,0 +1,65 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + text-align: center; +} + +.quiz-container { + display:none; + max-width: 600px; + margin: 50px auto; + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.question { + font-size: 24px; + margin-bottom: 20px; +} + +.choices { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px; +} + +.choice-btn { + font-size: 18px; + padding: 10px 20px; + margin-bottom: 10px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.choice-btn:hover { + background-color: #ddd; +} + +.feedback { + font-size: 18px; + margin-bottom: 20px; +} + +.timer { + font-size: 20px; + margin-bottom: 20px; +} + +.next-btn { + font-size: 18px; + padding: 10px 20px; + border: none; + border-radius: 5px; + background-color: #007bff; + color: #fff; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.next-btn:hover { + background-color: #0056b3; +}