├── 2048 GAME ├── 2048_cover_end.png ├── 2048_cover_start.png ├── README.md ├── app.js ├── index.html └── style.css ├── Air Pollution Tracker ├── aqi.html ├── assets │ └── images │ │ ├── 1_LHj_Zj0clfZIP1ltxOEj9Q.png │ │ ├── air-quality1.gif │ │ ├── air-quality2.gif │ │ ├── air-quality3.gif │ │ ├── aqi-1.png │ │ ├── bg.png │ │ ├── homepage.png │ │ └── plant.png ├── causes.jpg ├── close.png ├── config.js ├── favicon.png ├── history.css ├── history.html ├── history_config.js ├── history_server.js ├── img.webp ├── img2.png ├── img3.jpg ├── landing.html ├── left.png ├── menu.png ├── readme.md ├── right.png ├── server.js ├── step.jpg ├── style.css └── styleaqi.css ├── BMI Calculator ├── index.html ├── readme.md ├── script.js └── style.css ├── Budget Buddy ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── Readme.md ├── money.css ├── money.html └── money.js ├── CoffeeBean ├── README.md ├── index.html └── src │ ├── imgs │ ├── LGM.png │ ├── abt1.jpg │ ├── cof1.jpg │ ├── cof2.jpg │ ├── cof3.jpg │ ├── cof4.jpg │ ├── cof5.jpg │ ├── img1.png │ ├── img2.png │ ├── img3.png │ └── preview.jpeg │ ├── index.js │ ├── styles.css │ ├── swiper-bundle.min.css │ ├── swiper-bundle.min.js │ └── video │ └── coffee.mp4 ├── College Blog Site ├── 20230205_072511_new.jpg ├── Ansh.jpg ├── DPU.png ├── DPUlogo.png ├── Payment.jpeg ├── README.md ├── about.css ├── aboutus.html ├── anshu.jpeg ├── blog.css ├── blog.html ├── contact.css ├── contact.html ├── cse1 ├── dhruvimg.jpeg ├── dit ├── dpulogo ├── image 1.jpg.jpg ├── image 2.jpg.jpg ├── image 3.jpg.jpg ├── image 4.jpg.jpg ├── image5.jpg ├── image6.jpg ├── images │ ├── quote-icon.png │ ├── team-member1.png │ ├── team-member2.png │ ├── team-member3.png │ └── team-member4.png ├── img1.jpg ├── img2.jpg ├── img3.jpeg ├── index.css ├── index.html ├── index.js ├── manik.jpg ├── manikk.jpeg ├── mobile.css ├── ms.jpg ├── nikk.jpeg ├── nikk1.jpg ├── search.html ├── sharma.jpg ├── shivali.jpg ├── studytips.css ├── studytips.html ├── style.css ├── utils.css └── webdev ├── Contact App ├── .gitignore ├── README.md ├── contact-app │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── api │ │ └── contacts.js │ │ ├── assets │ │ ├── avatar.png │ │ ├── ss10.png │ │ ├── ss11.png │ │ ├── ss6.png │ │ ├── ss7.png │ │ ├── ss8.png │ │ ├── ss9.png │ │ └── user.png │ │ ├── components │ │ ├── AddContact.js │ │ ├── ContactCard.js │ │ ├── ContactDetails.js │ │ ├── ContactList.js │ │ ├── EditContact.js │ │ └── Header.js │ │ └── index.js └── server-api │ ├── db.json │ ├── package-lock.json │ └── package.json ├── CountDown Timer ├── README.md ├── countdownn.png ├── index.html ├── index.js └── style.css ├── Counter Application ├── README.md ├── app.js ├── counter.png ├── index.html └── main.css ├── Cryptocurrency Price Tracker ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.js │ ├── components │ │ ├── CoinInfoContainer.jsx │ │ └── Header.jsx │ ├── helper │ │ └── debounce.js │ ├── index.css │ ├── index.js │ ├── pages │ │ ├── Home.jsx │ │ ├── ItemPage.jsx │ │ └── image.png │ └── store │ │ ├── homeStore.js │ │ └── itemStore.js └── tailwind.config.js ├── Currency Converter 2 ├── index.html ├── readme.md ├── sample.png ├── script.js └── style.css ├── Currency Converter ├── Front.PNG ├── index.html ├── readme.md ├── script.js └── style.css ├── Dice Challenge ├── README.md ├── dicee.html ├── images │ ├── dice1.png │ ├── dice2.png │ ├── dice3.png │ ├── dice4.png │ ├── dice5.png │ └── dice6.png ├── index.js └── styles.css ├── Drink Water ├── README.md ├── index.html ├── script.js └── style.css ├── EMI Calculator ├── README.md ├── app.js ├── budget.png ├── index.html └── style.css ├── Fitness Tracker ├── README.md ├── assets │ ├── Full_with_data.png │ └── running.png ├── index.html ├── script.js └── style.css ├── Flappy Bird Game ├── Readme.md ├── bottompipe.png ├── flappybird.png ├── flappybirdbg.png ├── image.png ├── index.html ├── script.js ├── style.css └── toppipe.png ├── Gradient Background ├── index.html ├── readme.md ├── script.js └── style.css ├── Guess The Number ├── back.jpg ├── index.html ├── readme.md ├── script.js └── style.css ├── Image Editor ├── README.md ├── app.js ├── index.html ├── logo1.png ├── logo3.jpeg └── style.css ├── LICENSE ├── Landing Page ├── Neeraj Meka.png ├── README.md ├── acousticguitar.jpg ├── acousticset.png ├── delivery.png ├── electricguitar.jpg ├── guitar.png ├── index.html ├── package.json ├── quality.png ├── sandbox.config.json └── style.css ├── Link Shortner ├── .gitignore ├── README.md ├── bun.lockb ├── components.json ├── next.config.mjs ├── package.json ├── postcss.config.cjs ├── prettier.config.mjs ├── prisma │ └── schema.prisma ├── public │ └── favicon.ico ├── src │ ├── components │ │ └── ui │ │ │ ├── button.tsx │ │ │ └── input.tsx │ ├── env.mjs │ ├── lib │ │ └── utils.ts │ ├── middleware.ts │ ├── pages │ │ ├── 404.tsx │ │ ├── _app.tsx │ │ ├── api │ │ │ ├── [slug].ts │ │ │ └── trpc │ │ │ │ └── [trpc].ts │ │ └── index.tsx │ ├── server │ │ ├── api │ │ │ ├── root.ts │ │ │ ├── routers │ │ │ │ └── example.ts │ │ │ └── trpc.ts │ │ └── db.ts │ ├── styles │ │ └── globals.css │ └── utils │ │ └── api.ts ├── tailwind.config.js ├── tailwind.config.ts └── tsconfig.json ├── Login Page ├── README.md ├── assets │ ├── bg-login1.jpg │ ├── bg-login2.jpg │ ├── bg-login3.jpg │ ├── favicon.png │ └── preview.png ├── index.html ├── reset.css └── style.css ├── Love Calculator ├── README.md ├── heart.png ├── index.html ├── script.js └── style.css ├── Math Calculator ├── index.html ├── main.js ├── readme.md └── styles.css ├── Memory Game ├── README.md ├── images │ ├── bee.png │ ├── butterfly.png │ ├── cat.png │ ├── chameleon.png │ ├── crab.png │ ├── elephant.png │ ├── fox.png │ ├── frog.png │ ├── hen.png │ ├── horse.png │ ├── jellyfish.png │ ├── koala.png │ ├── monkey.png │ ├── mouse.png │ ├── owl.png │ ├── snail.png │ ├── snake.png │ ├── toucan.png │ ├── turtle.png │ └── whale.png ├── index.html ├── script.js └── style.css ├── Music Player ├── README.md ├── asset │ ├── Dhee ft. Arivu - Enjoy Enjaami (Prod. Santhosh Narayanan)_eYq7WapuDLU.mp3 │ ├── Imagine Dragons - Believer (Lyrics)_W0DM5lcj6mw.mp3 │ ├── Manike Mage Hithe මැණිකේ මගේ හිතේ - Official Cover - Yohani & Satheeshan_PgCliOxl41o.mp3 │ └── music.png ├── index.html ├── script.js └── style.css ├── News App ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ ├── NavBar.js │ ├── News.js │ ├── NewsItem.js │ ├── NoPhotoAvailable.png │ ├── Spinner.js │ └── loading3.gif │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── Password Generator ├── Output.png ├── README.md ├── images │ ├── bg.jpg │ └── logo.png ├── index.html ├── script.js └── style.css ├── Personal Diary ├── README.md ├── Screenshot 2023-10-07 at 6.24.52 PM.png ├── index.html ├── script.js └── style.css ├── Personal Website ├── home.png ├── images │ ├── JavaScript_logo.png │ ├── css_logo.png │ ├── html_logo.png │ ├── img4.png │ ├── instagram.png │ ├── linkedin.png │ ├── personal_portfolio.png │ ├── python_logo.png │ ├── social.png │ └── x.png ├── index.html ├── readme.md └── style.css ├── Plan Template ├── Readme.md ├── index.html ├── premium.png └── style.css ├── Qr Generator ├── README.md ├── index.css ├── index.html ├── qr_picture.png └── scripts.js ├── Quote Generator ├── README.md ├── index.html ├── script.js └── style.css ├── README.md ├── Random Choice Picker ├── README.md ├── images │ ├── random-choice-picker-01.jpg │ ├── random-choice-picker-02.jpg │ ├── random-choice-picker-03.jpg │ └── random-choice-picker-04.jpg ├── index.html ├── script.js └── style.css ├── Restaurant Menu ├── Readme.md ├── food1.jpg ├── food10.jpg ├── food11.jpg ├── food12.jpg ├── food2.jpg ├── food3.jpg ├── food4.jpg ├── food5.jpg ├── food6.jpg ├── food7.jpg ├── food8.jpg ├── food9.jpg ├── logo.png ├── menu.css ├── menu.html └── menu.js ├── Resume Generator ├── .gitignore ├── README.md ├── eslint.config.js ├── image.png ├── image1.png ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src │ ├── App.tsx │ ├── components │ │ ├── Form │ │ │ ├── EducationForm.tsx │ │ │ ├── ExperienceForm.tsx │ │ │ ├── Input.tsx │ │ │ ├── ListForm.tsx │ │ │ ├── PersonalInfoForm.tsx │ │ │ ├── ProjectsForm.tsx │ │ │ ├── Section.tsx │ │ │ └── SkillsForm.tsx │ │ └── Templates │ │ │ └── MinimalTemplate.tsx │ ├── index.css │ ├── main.tsx │ ├── types │ │ └── resume.ts │ └── vite-env.d.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── Rock Paper Scissors ├── README.md ├── app.js ├── index.html ├── ss.png └── style.css ├── Sketchpad App ├── Downloaded_image.png ├── Interface.png ├── README.md ├── grid.svg ├── index.html ├── script.js └── style.css ├── Stop Watch ├── README.md ├── Script.js ├── image.png ├── images │ ├── reset.png │ ├── start.png │ └── stop.png ├── index.html └── style.css ├── Temperature converter ├── index.html ├── index.js ├── readme.md └── style.css ├── Text Generator ├── index.html ├── index.js ├── readme.md ├── ss.png └── style.css ├── Tic Tac Toe ├── .gitignore ├── Readme.md ├── excited.gif ├── gameover.mp3 ├── index.html ├── music.mp3 ├── script.js ├── style.css └── ting.mp3 ├── ToDo List ├── Readme.md ├── Screenshot from 2023-10-04 22-48-23.png ├── index.html ├── script.js └── styles.css ├── Translator App ├── README.md ├── index.html ├── script.js └── style.css ├── Typing Speed Test ├── README.md ├── app.js ├── index.html ├── ss.png └── style.css ├── Weather App ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── LoadingComponent.js │ ├── index.css │ ├── index.js │ ├── reportWebVitals.js │ └── setupTests.js └── tailwind.config.js ├── Weather Teller ├── README.md ├── images │ ├── Clear.png │ ├── Clouds.png │ ├── Drizzle.png │ ├── Haze.png │ ├── Humidity.png │ ├── Mist.png │ ├── Rain.png │ ├── Snow.png │ ├── Wind.png │ ├── search.png │ └── weather.png ├── index.html ├── script.js └── style.css ├── Web Clock ├── Analog Clock │ ├── clock.png │ ├── index.html │ ├── script.js │ └── style.css ├── Digital Clock │ ├── index.html │ ├── script.js │ └── style.css ├── Screenshots │ ├── demo.gif │ ├── ss1.png │ ├── ss2.png │ └── ss3.png ├── img1.png ├── img2.png ├── index.html ├── readme.md └── style.css ├── Whack-A-Mole ├── README.md ├── dirt.png ├── index.html ├── mole.png ├── script.js └── style.css ├── Word Dictionary ├── README.md ├── index.html ├── script.js └── style.css ├── Word Scramble ├── README.md ├── index.html ├── js │ ├── script.js │ └── words.js └── style.css └── guestbook ├── Readme.md ├── index.html ├── script.js └── style.css /2048 GAME/2048_cover_end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/2048 GAME/2048_cover_end.png -------------------------------------------------------------------------------- /2048 GAME/2048_cover_start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/2048 GAME/2048_cover_start.png -------------------------------------------------------------------------------- /2048 GAME/README.md: -------------------------------------------------------------------------------- 1 | # 2048 GAME 2 | 3 | - click Here to see live webpage [https://git0chetan.github.io/2048_GAME/] 4 | - my github profile: [https://github.com/Git0Chetan] 5 | 6 | # Need of 2048 Game 7 | Concepts of js got better while developing the project. 8 | While playing these game , It boosts both pleasure and perseverance, while decreasing stress. 9 | 10 | # Instruction 11 | 2048 is played on a 4×4 grid, with numbered tiles that slide smoothly when a player moves them using the four arrow keys. Each time you slide, a new tile will randomly appear in an empty spot on the board. Tiles slide as far as possible in the chosen direction until they are stopped by either another tile or the edge of the grid. If two tiles of the same number collide while moving, they will merge into a tile with the total value of the two tiles that collided. The resulting tile cannot merge with another tile again in the same move. 12 | If you score 2048 or more You will win the Game. 13 | 14 | # Tech Used 15 | - **HTML** - To structure the web page and its content. 16 | - **CSS**- To style and layout web page 17 | - **JS** - To make web pages interactive and to create dynamically updating content, use animations, pop-up menus, clickable buttons, etc 18 | 19 | # How to Run The game on personal PC 20 | - you can go to the live link provided above or 21 | - clone the project and run the index.html file. 22 | 23 | # Start 24 | ![Alt text](2048_cover_start.png) 25 | 26 | # winner 27 | ![Alt text](2048_cover_end.png) 28 | 29 | -------------------------------------------------------------------------------- /2048 GAME/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 2048_GAME 7 | 8 | 9 | 10 | 11 | 12 |

2048

13 |

Created by Chetan Patil

14 |
15 |

Score: 0

16 |

"KEEP TRYING-SCORE 2048 TO WIN"

17 |
18 |
19 |
20 | 21 | -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/1_LHj_Zj0clfZIP1ltxOEj9Q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/1_LHj_Zj0clfZIP1ltxOEj9Q.png -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/air-quality1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/air-quality1.gif -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/air-quality2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/air-quality2.gif -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/air-quality3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/air-quality3.gif -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/aqi-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/aqi-1.png -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/bg.png -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/homepage.png -------------------------------------------------------------------------------- /Air Pollution Tracker/assets/images/plant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/assets/images/plant.png -------------------------------------------------------------------------------- /Air Pollution Tracker/causes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/causes.jpg -------------------------------------------------------------------------------- /Air Pollution Tracker/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/close.png -------------------------------------------------------------------------------- /Air Pollution Tracker/config.js: -------------------------------------------------------------------------------- 1 | var config = { 2 | API_KEY:'02a34ede-d0bd-40b8-97fb-0681bff883e7', 3 | API_ID:"071ccf8472dd414295501457983f1d4c", 4 | API_VAL:'1a156ec9e8394462857fba2406a969b9' 5 | } 6 | 7 | -------------------------------------------------------------------------------- /Air Pollution Tracker/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/favicon.png -------------------------------------------------------------------------------- /Air Pollution Tracker/history.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: 0; 6 | font-size: 100%; 7 | vertical-align: baseline; 8 | background: transparent; 9 | } 10 | 11 | .container{ 12 | background: url("img.webp"); 13 | height: auto; 14 | margin-top: 0px; 15 | background-repeat: no-repeat; 16 | background-size: auto; 17 | 18 | } 19 | 20 | body{ 21 | background: url("img.webp"); 22 | 23 | } 24 | 25 | .search{ 26 | display: block; 27 | text-align: center; 28 | font-size: 30px; 29 | font-family: Arial, Helvetica, sans-serif; 30 | } 31 | #st{ 32 | padding: 5px 5px; 33 | margin: 15px 15px; 34 | } 35 | #ed{ 36 | padding: 5px 5px; 37 | margin: 15px 15px; 38 | } 39 | .end{ 40 | font-size: 30px; 41 | background-color: rgb(235, 53, 53); 42 | color:aliceblue; 43 | padding:5px 5px; 44 | margin: 15px 15px; 45 | border-radius: 10px; 46 | 47 | } 48 | .startDate{ 49 | padding: 5px 5px; 50 | background-color: aquamarine; 51 | font-size: 20px; 52 | } 53 | .endDate{ 54 | padding: 5px 5px; 55 | background-color: aquamarine; 56 | font-size: 20px; 57 | } 58 | 59 | #graph 60 | { 61 | margin-top: 10px; 62 | } -------------------------------------------------------------------------------- /Air Pollution Tracker/history.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Air Pollution Tracker/history_config.js: -------------------------------------------------------------------------------- 1 | var history_config = { 2 | API_VAL:'1a156ec9e8394462857fba2406a969b9' 3 | } -------------------------------------------------------------------------------- /Air Pollution Tracker/img.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/img.webp -------------------------------------------------------------------------------- /Air Pollution Tracker/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/img2.png -------------------------------------------------------------------------------- /Air Pollution Tracker/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/img3.jpg -------------------------------------------------------------------------------- /Air Pollution Tracker/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/left.png -------------------------------------------------------------------------------- /Air Pollution Tracker/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/menu.png -------------------------------------------------------------------------------- /Air Pollution Tracker/readme.md: -------------------------------------------------------------------------------- 1 | # Air Pollution Tracker 2 | 3 | Air Pollution Tracker is a web-based tool to monitor and visualize real-time air quality data. 4 | 5 | ## Features 6 | 7 | - View real-time air quality data. 8 | - Explore interactive maps to identify areas with high pollution levels. 9 | - Analyze pollution trends over time. 10 | - Select specific locations to view detailed pollution information. 11 | 12 | ## Getting Started 13 | 14 | 1. Clone this repository. 15 | 2. Open `index.html` in your web browser. 16 | 17 | ## Usage 18 | 19 | 1. Open the tool in your browser. 20 | 2. Use the interactive map to select a location. 21 | 3. View real-time and historical pollution data. 22 | 4. Analyze trends and patterns in air pollution. 23 | 24 | ## Contributing 25 | 26 | Contributions are welcome! Please fork and submit pull requests. 27 | 28 | ## License 29 | 30 | This project is licensed under the MIT License. 31 | -------------------------------------------------------------------------------- /Air Pollution Tracker/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/right.png -------------------------------------------------------------------------------- /Air Pollution Tracker/step.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Air Pollution Tracker/step.jpg -------------------------------------------------------------------------------- /BMI Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | BMI - Calculator 7 | 8 | 9 | 10 | 11 |

Body Mass Index Calculator

12 |
13 |
14 |

Age

15 | 19 | 23 |
24 | 25 |
26 |

Height (cm)

27 |

Weight (kg)

28 |
29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /BMI Calculator/readme.md: -------------------------------------------------------------------------------- 1 | # BMI Calculator Project 2 | 3 | This project is a simple BMI (Body Mass Index) calculator implemented using HTML, CSS, and JavaScript. It allows users to input their height and weight, and then calculates and displays their BMI along with a corresponding category. 4 | 5 | ## Table of Contents 6 | - [Demo](#demo) 7 | - [Features](#features) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | ![Screenshot (205)](https://github.com/Upendra2003/Web-Development-Projects/assets/96371563/1ac650ba-7c5f-4275-afb7-14bfbd305165) 15 | 16 | 17 | 18 | ## Features 19 | 20 | - Calculate BMI based on user's input of height and weight. 21 | - Display the BMI value and corresponding category (e.g., Underweight, Normal weight, Overweight, etc.). 22 | - Simple and intuitive user interface. 23 | 24 | ## Getting Started 25 | 26 | ### Prerequisites 27 | 28 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 29 | 30 | ### Installation 31 | 32 | 1. Clone the repository or download the ZIP file. 33 | 34 | ```bash 35 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 36 | ``` 37 | 38 | 2. Open the project folder. 39 | 40 | ```bash 41 | cd BMI Calculator 42 | ``` 43 | 44 | 3. Run `index.html` in your preferred web browser. 45 | 46 | ## Usage 47 | 48 | 1. Open the `index.html` file. 49 | 2. Input your height (in meters) and weight (in kilograms). 50 | 3. Click on the "Calculate BMI" button. 51 | 4. Your BMI value and category will be displayed. 52 | --- 53 | -------------------------------------------------------------------------------- /Budget Buddy/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Budget Buddy/1.png -------------------------------------------------------------------------------- /Budget Buddy/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Budget Buddy/2.png -------------------------------------------------------------------------------- /Budget Buddy/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Budget Buddy/3.png -------------------------------------------------------------------------------- /Budget Buddy/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Budget Buddy/4.png -------------------------------------------------------------------------------- /Budget Buddy/money.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expense Tracker 7 | 8 | 9 | 10 |
11 |

Expense Tracker

12 |
13 | 14 | 15 | 19 | 20 |
21 |
22 |

Transactions

23 | 24 |
25 |
26 |

Summary

27 |

Total Income: 0

28 |

Total Expenses: 0

29 |

Budget: 0

30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /CoffeeBean/README.md: -------------------------------------------------------------------------------- 1 | # CoffeBeans 2 | 3 | This is a simple and elegant coffee shop website created with HTML, CSS, and JavaScript. It features smooth animations using the GSAP (GreenSock Animation Platform) library and a slider gallery powered by Swiper. 4 | ## Features 5 | 6 | - Clean and minimalistic design. 7 | - Interactive and responsive navigation menu. 8 | - Engaging animations using GSAP. 9 | - Dynamic gallery with Swiper slider. 10 | - Contact form for inquiries or feedback. 11 | - Mobile-friendly and fully responsive design. 12 | 13 | ## Technologies Used 14 | 15 | - HTML 16 | - CSS 17 | - JavaScript 18 | - GSAP 19 | - Swiper for image slider 20 | - 21 | 22 | -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/LGM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/LGM.png -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/abt1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/abt1.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/cof1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/cof1.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/cof2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/cof2.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/cof3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/cof3.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/cof4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/cof4.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/cof5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/cof5.jpg -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/img1.png -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/img2.png -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/img3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/img3.png -------------------------------------------------------------------------------- /CoffeeBean/src/imgs/preview.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/imgs/preview.jpeg -------------------------------------------------------------------------------- /CoffeeBean/src/video/coffee.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CoffeeBean/src/video/coffee.mp4 -------------------------------------------------------------------------------- /College Blog Site/20230205_072511_new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/20230205_072511_new.jpg -------------------------------------------------------------------------------- /College Blog Site/Ansh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/Ansh.jpg -------------------------------------------------------------------------------- /College Blog Site/DPU.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/DPU.png -------------------------------------------------------------------------------- /College Blog Site/DPUlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/DPUlogo.png -------------------------------------------------------------------------------- /College Blog Site/Payment.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/Payment.jpeg -------------------------------------------------------------------------------- /College Blog Site/README.md: -------------------------------------------------------------------------------- 1 | Hey there folks, I made this blog site front end design with my roommate. This includes a landing page, a Contact us page and 2 | About us page as well as a blog page. 3 | To use this site you just need to go to the index.html file and click on live server. 4 | You can also contribute towards the unfinished blog site. 5 | My github profile - https://github.com/JV-2701 -------------------------------------------------------------------------------- /College Blog Site/anshu.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/anshu.jpeg -------------------------------------------------------------------------------- /College Blog Site/cse1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/cse1 -------------------------------------------------------------------------------- /College Blog Site/dhruvimg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/dhruvimg.jpeg -------------------------------------------------------------------------------- /College Blog Site/dit: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/dit -------------------------------------------------------------------------------- /College Blog Site/dpulogo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/dpulogo -------------------------------------------------------------------------------- /College Blog Site/image 1.jpg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image 1.jpg.jpg -------------------------------------------------------------------------------- /College Blog Site/image 2.jpg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image 2.jpg.jpg -------------------------------------------------------------------------------- /College Blog Site/image 3.jpg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image 3.jpg.jpg -------------------------------------------------------------------------------- /College Blog Site/image 4.jpg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image 4.jpg.jpg -------------------------------------------------------------------------------- /College Blog Site/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image5.jpg -------------------------------------------------------------------------------- /College Blog Site/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/image6.jpg -------------------------------------------------------------------------------- /College Blog Site/images/quote-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/images/quote-icon.png -------------------------------------------------------------------------------- /College Blog Site/images/team-member1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/images/team-member1.png -------------------------------------------------------------------------------- /College Blog Site/images/team-member2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/images/team-member2.png -------------------------------------------------------------------------------- /College Blog Site/images/team-member3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/images/team-member3.png -------------------------------------------------------------------------------- /College Blog Site/images/team-member4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/images/team-member4.png -------------------------------------------------------------------------------- /College Blog Site/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/img1.jpg -------------------------------------------------------------------------------- /College Blog Site/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/img2.jpg -------------------------------------------------------------------------------- /College Blog Site/img3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/img3.jpeg -------------------------------------------------------------------------------- /College Blog Site/index.js: -------------------------------------------------------------------------------- 1 | // // Sticky navbar on scroll 2 | // window.onscroll = function() { 3 | // var navigation = document.getElementsByClassName("navigation"); 4 | // if (window.pageYOffset > 0) { 5 | // navigation.classList.add("sticky"); 6 | // } else { 7 | // navigation.classList.remove("sticky"); 8 | // } 9 | // }; 10 | -------------------------------------------------------------------------------- /College Blog Site/manik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/manik.jpg -------------------------------------------------------------------------------- /College Blog Site/manikk.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/manikk.jpeg -------------------------------------------------------------------------------- /College Blog Site/mobile.css: -------------------------------------------------------------------------------- 1 | @media screen and (max-width:1200px){ 2 | .navigation{ 3 | flex-direction: column; 4 | margin-bottom: 23px; 5 | } 6 | .nav-left{ 7 | flex-direction: column; 8 | text-align: center; 9 | } 10 | .content-right { 11 | display: none; 12 | } 13 | .home-article { 14 | flex-direction: column; 15 | } 16 | .home-article img{ 17 | text-align: center; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /College Blog Site/ms.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/ms.jpg -------------------------------------------------------------------------------- /College Blog Site/nikk.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/nikk.jpeg -------------------------------------------------------------------------------- /College Blog Site/nikk1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/nikk1.jpg -------------------------------------------------------------------------------- /College Blog Site/sharma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/sharma.jpg -------------------------------------------------------------------------------- /College Blog Site/shivali.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/shivali.jpg -------------------------------------------------------------------------------- /College Blog Site/studytips.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .studytips img { 7 | margin-top: 15px; 8 | width: 350px; 9 | height: 350px; 10 | } 11 | 12 | .btn4 { 13 | padding: 7px 20px; 14 | padding-top: 5px; 15 | padding-bottom: 6px; 16 | border: 2px solid black; 17 | border-radius: 6px; 18 | font-family: var(--font1); 19 | font-size: 15px; 20 | transition: all 0.2s ease-in-out; 21 | } 22 | 23 | .btn4:hover { 24 | color: white; 25 | background: blueviolet; 26 | } 27 | 28 | .study-tips { 29 | display: flex; 30 | padding: 25px; 31 | justify-self: center; 32 | 33 | } 34 | 35 | .studytips-heading span { 36 | font-weight: bolder; 37 | } 38 | 39 | .studytips-content { 40 | align-self: center; 41 | padding: 25px; 42 | margin-top: 45px; 43 | display: inline-block; 44 | 45 | } 46 | 47 | .studytips-content ul { 48 | font-weight: bolder; 49 | font-style: oblique; 50 | font-size: 20px; 51 | color: red; 52 | background-color: grey; 53 | } -------------------------------------------------------------------------------- /College Blog Site/webdev: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/College Blog Site/webdev -------------------------------------------------------------------------------- /Contact App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* -------------------------------------------------------------------------------- /Contact App/README.md: -------------------------------------------------------------------------------- 1 | # contactapp 2 | It is a React App that has a json-server as backend \ 3 | db.json file acts as a database and on adding, updating and deleting data the db.sjon file is updates using axios restful api. \ 4 | \ 5 | This app has a contact list , search contact functionality, delete , add , update contacts functionality and can go to a contact to get contact details.\ 6 | 7 | # To start app and server 8 | cd contact-app \ 9 | npm start \ 10 | cd server-api \ 11 | npm start (server will start at port 3006) 12 | \ 13 | \ 14 | \ 15 | ![Screenshot (6)](contact-app/src/assets/ss6.png) 16 | \ 17 | ![Screenshot (7)](contact-app/src/assets/ss7.png) 18 | \ 19 | ![Screenshot (9)](contact-app/src/assets/ss8.png) 20 | \ 21 | ![Screenshot (10)](contact-app/src/assets/ss9.png) 22 | \ 23 | 24 | ![Screenshot (11)](contact-app/src/assets/ss10.png) 25 | \ 26 | 27 | ![Screenshot (12)](contact-app/src/assets/ss11.png) 28 | -------------------------------------------------------------------------------- /Contact App/contact-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "contact-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.5.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.16.0", 13 | "react-scripts": "^5.0.1", 14 | "uuid": "^9.0.0", 15 | "uuidv4": "^6.2.13", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Contact App/contact-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/public/favicon.ico -------------------------------------------------------------------------------- /Contact App/contact-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | React App 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Contact App/contact-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Contact App/contact-app/src/api/contacts.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export default axios.create({ 4 | baseURL: "http://localhost:3006/", 5 | }) -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/avatar.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss10.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss11.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss6.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss7.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss8.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/ss9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/ss9.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/assets/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Contact App/contact-app/src/assets/user.png -------------------------------------------------------------------------------- /Contact App/contact-app/src/components/ContactCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import user from "../assets/user.png"; 4 | 5 | export default function ContactCard(props) { 6 | const { id, name, email } = props.contact; 7 | return ( 8 |
9 | 10 |
11 | user 12 | 13 |
{name}
14 |
{email}
15 | 16 |
17 | 18 | 22 | 23 | props.clickHandler(id)} 27 | > 28 |
29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /Contact App/contact-app/src/components/ContactDetails.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useParams } from 'react-router-dom'; 3 | import avatar from '../assets/avatar.png' 4 | 5 | const ContactDetails = () => { 6 | //console.log(props) 7 | const { name, email } = useParams(); 8 | return ( 9 |
10 |
11 |
12 | avatar 13 |
14 | 15 |
16 |
{name}
17 |
{email}
18 |
19 |
20 |
21 | 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default ContactDetails; -------------------------------------------------------------------------------- /Contact App/contact-app/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Header() { 4 | return ( 5 | <> 6 |
7 |
8 |

Contact Manager

9 |
10 |
11 | ); 12 | } 13 | 14 | //0C31AD -------------------------------------------------------------------------------- /Contact App/contact-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /Contact App/server-api/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "contacts": [ 3 | { 4 | "name": "sam", 5 | "email": "isha@gmail.com", 6 | "id": "c1f3687e-0124-4b2c-b301-d961b9060d02" 7 | }, 8 | { 9 | "name": "abhimanyu", 10 | "email": "ab@gmail.com", 11 | "id": "f6c0bc09-b728-4c16-966e-5a1e679f3e98" 12 | }, 13 | { 14 | "id": "c46711a8-5cce-47b8-9b08-bde687a8c520", 15 | "name": "Isha ghyar", 16 | "email": "isha@gmail.com" 17 | }, 18 | { 19 | "id": "89dee048-9289-4af0-8126-5de4cfc62acc", 20 | "name": "abhi", 21 | "email": "ab@gmail.com" 22 | }, 23 | { 24 | "id": "53bb5826-ea1f-4bfe-a0aa-ead9edd16200", 25 | "name": "akshu", 26 | "email": "ak@gmail.com" 27 | }, 28 | { 29 | "id": "ba38ff4b-a896-491e-a502-c8c7f91508b6", 30 | "name": "kuddu ", 31 | "email": "kuddu@gmail.com" 32 | }, 33 | { 34 | "id": "ae49d9ba-31be-42fa-8a55-66f22a46f847", 35 | "name": "srk", 36 | "email": "srk@gmail.com" 37 | }, 38 | { 39 | "id": "1db8e1c0-05c0-43d0-a739-0389a5acb2b7", 40 | "name": "rana", 41 | "email": "s@gmail.com" 42 | }, 43 | { 44 | "id": "41bd3b0a-793f-46f3-92a0-eb98d7e81caa", 45 | "name": "zuu", 46 | "email": "z@gmail.com" 47 | } 48 | ] 49 | } -------------------------------------------------------------------------------- /Contact App/server-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server-api", 3 | "version": "1.0.0", 4 | "description": "db for contact app", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "json-server -p 3006 --watch db.json" 8 | }, 9 | "author": "isha", 10 | "license": "ISC", 11 | "dependencies": { 12 | "json-server": "^0.17.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /CountDown Timer/README.md: -------------------------------------------------------------------------------- 1 | # Countdown Timer 2 | 3 | The Countdown Timer Page is a visually engaging and interactive webpage designed to help users keep track of important events, deadlines, or upcoming celebrations with precision and style. This webpage is built using a combination of HTML, CSS, and JavaScript to create a user-friendly and aesthetically pleasing countdown timer experience. 4 | 5 | ## Table of Contents 6 | - [Demo](#demo) 7 | - [Features](#features) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | ![Alt text](countdownn.png) 15 | 16 | ## Features 17 | 18 | - Customizable Event Countdowns 19 | - Dynamic Visuals: 20 | - Responsive Design:. 21 | 22 | ## Getting Started 23 | 24 | ### Prerequisites 25 | 26 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 27 | 28 | ### Installation 29 | 30 | 1. Clone the repository or download the ZIP file. 31 | 32 | ```bash 33 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 34 | ``` 35 | 36 | 2. Open the project folder. 37 | 38 | ```bash 39 | cd Personal Diary 40 | ``` 41 | 42 | 3. Run `index.html` in your preferred web browser. 43 | 44 | ## Usage 45 | 46 | 1. Open the `index.html` file. 47 | 2. It shows the home page. 48 | 3. Type date In Textbox 49 | 4. click start 50 | --- 51 | 52 | ## Developed By 53 | Chetan Patil : https://github.com/Git0Chetan 54 | -------------------------------------------------------------------------------- /CountDown Timer/countdownn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/CountDown Timer/countdownn.png -------------------------------------------------------------------------------- /CountDown Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | CountDown_Timer 4 | 5 | 6 | 7 | 8 |

Countdown Clock

 9 |

Enter The DeadLine Date(Format= month date year hh:mm:ss)

10 |
11 |

12 |

13 |
14 |
15 |
16 | 17 |
Days
18 |
19 |
20 | 21 |
Hours
22 |
23 |
24 | 25 |
Minutes
26 |
27 |
28 | 29 |
Seconds
30 |
31 |
32 |

33 |
34 |

© Chetan Patil     @Github     ® All rights reserved

35 |
36 | 37 | -------------------------------------------------------------------------------- /CountDown Timer/index.js: -------------------------------------------------------------------------------- 1 | 2 | function deadline(){ 3 | var a=document.getElementById("dead_line").value; 4 | 5 | var deadline = new Date(a).getTime(); 6 | 7 | var x = setInterval(function() { 8 | var now = new Date().getTime(); 9 | var t = deadline - now; 10 | 11 | var days = Math.floor(t / (1000 * 60 * 60 * 24)); 12 | var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 13 | var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 14 | var seconds = Math.floor((t % (1000 * 60)) / 1000); 15 | 16 | document.getElementById("day").innerHTML =days ; 17 | document.getElementById("hour").innerHTML =hours; 18 | document.getElementById("minute").innerHTML = minutes; 19 | document.getElementById("second").innerHTML =seconds; 20 | 21 | if (t < 0) { 22 | clearInterval(x); 23 | document.getElementById("demo").innerHTML = "TIME UP"; 24 | document.getElementById("day").innerHTML ='0'; 25 | document.getElementById("hour").innerHTML ='0'; 26 | document.getElementById("minute").innerHTML ='0' ; 27 | document.getElementById("second").innerHTML = '0'; 28 | } 29 | }, 100); 30 | } -------------------------------------------------------------------------------- /Counter Application/README.md: -------------------------------------------------------------------------------- 1 | # Counter Application 2 | 3 | This is a simple counter application built using HTML, CSS, and JavaScript. It allows you to increase, decrease, and reset a counter value. 4 | 5 | ## Table of Contents 6 | 7 | - [Demo](#demo) 8 | - [Features](#features) 9 | - [Getting Started](#getting-started) 10 | - [Usage](#usage) 11 | 12 | ## Demo 13 | 14 | ![Counter](counter.png) 15 | 16 | ## Features 17 | 18 | - Increase the counter value by clicking the "Increase" button. 19 | - Decrease the counter value by clicking the "Decrease" button. 20 | - If value is 0 counter stops to decreasing it. 21 | - Reset the counter value to 0 by clicking the "Reset" button. 22 | 23 | ## Getting Started 24 | 25 | To use the Counter App, follow these steps: 26 | 27 | ### Installation 28 | 29 | 1. Clone the repository (requires Git) or download the ZIP file. 30 | 31 | ```bash 32 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 33 | ``` 34 | 35 | 2. Open the project folder. 36 | 37 | ```bash 38 | cd Counter 39 | ``` 40 | 41 | 3. Open the index.html file in your web browser. 42 | 43 | ## Usage 44 | 45 | 1. Open the index.html file in your web browser. 46 | 2. You will see the counter app with three buttons: "Increase" "Decrease" and "Reset" 47 | 3. Click the "Increase" button to increase the counter value. 48 | 4. Click the "Decrease" button to decrease the counter value (it won't go below 0). 49 | 5. Click the "Reset" button to reset the counter value to 0. 50 | -------------------------------------------------------------------------------- /Counter Application/app.js: -------------------------------------------------------------------------------- 1 | const btnIncrease = document.querySelector('.counter__button--increase'); 2 | const btnDecrease = document.querySelector('.counter__button--decrease'); 3 | const btnReset = document.querySelector('.counter__button--reset'); 4 | const countValue = document.querySelector('.counter__count'); 5 | 6 | let count = 0; 7 | 8 | const increaseCounter = () => { 9 | count++; 10 | updateCounter(); 11 | }; 12 | 13 | const decreaseCounter = () => { 14 | count > 0 ? count-- : 0; 15 | updateCounter(); 16 | }; 17 | 18 | const resetCounter = () => { 19 | count = 0; 20 | updateCounter(); 21 | }; 22 | 23 | const updateCounter = () => { 24 | countValue.textContent = count; 25 | }; 26 | 27 | btnIncrease.addEventListener('click', increaseCounter); 28 | btnDecrease.addEventListener('click', decreaseCounter); 29 | btnReset.addEventListener('click', resetCounter); 30 | -------------------------------------------------------------------------------- /Counter Application/counter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Counter Application/counter.png -------------------------------------------------------------------------------- /Counter Application/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Counter 7 | 8 | 9 | 10 |
11 |
12 |
13 |

Counter

14 | 15 |

0

16 | 17 |
18 | 21 | 24 | 27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio-tracker", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.5.1", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.16.0", 13 | "react-scripts": "5.0.1", 14 | "recharts": "^2.8.0", 15 | "web-vitals": "^2.1.4", 16 | "zustand": "^4.4.3" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "tailwindcss": "^3.3.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Cryptocurrency Price Tracker/public/favicon.ico -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter, Route, Routes } from 'react-router-dom' 3 | import Home from './pages/Home' 4 | import ItemPage from './pages/ItemPage' 5 | import Header from './components/Header' 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 |
13 | 14 | } /> 15 | } /> 16 | 17 | 18 |
19 | 20 |
21 | ); 22 | } 23 | 24 | export default App -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/components/CoinInfoContainer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function CoinInfoContainer({titleName, data, price}) { 4 | return ( 5 |
6 |

{titleName}

7 | 8 | {data} 9 | {price && " INR"} 10 | 11 |
12 | ); 13 | } 14 | 15 | export default CoinInfoContainer -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | function Header() { 5 | return ( 6 |
7 | 8 |

Pocket Crypto

9 | 10 |
11 | ); 12 | } 13 | 14 | export default Header; 15 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/helper/debounce.js: -------------------------------------------------------------------------------- 1 | export default function debounce(func, wait, immediate) { 2 | var timeout; 3 | return function () { 4 | var context = this, 5 | args = arguments; 6 | var later = function () { 7 | timeout = null; 8 | if (!immediate) func.apply(context, args); 9 | }; 10 | var callNow = immediate && !timeout; 11 | clearTimeout(timeout); 12 | timeout = setTimeout(later, wait); 13 | if (callNow) func.apply(context, args); 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | ); 11 | 12 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/pages/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Cryptocurrency Price Tracker/src/pages/image.png -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/src/store/itemStore.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { create } from "zustand"; 3 | 4 | const itemStore = create((set) => ({ 5 | graphData: [], 6 | 7 | fetchdata: async (id) => { 8 | const [graphRes, dataRes] = await Promise.all([ 9 | axios.get(`https://api.coingecko.com/api/v3/coins/${id}/market_chart?vs_currency=inr&days=121`), 10 | axios.get(`https://api.coingecko.com/api/v3/coins/${id}?localization=false&market_data=true`) 11 | ]) 12 | 13 | const graphData = graphRes.data.prices.map((price)=> { 14 | const [timestamp, p] = price; 15 | const date = new Date(timestamp).toLocaleDateString("en-us") 16 | return{ 17 | Date: date, 18 | Price: p, 19 | }; 20 | }); 21 | 22 | const resData = dataRes.data; 23 | 24 | 25 | // console.log(resData); 26 | set({graphData, resData}); 27 | }, 28 | })); 29 | 30 | export default itemStore; 31 | -------------------------------------------------------------------------------- /Cryptocurrency Price Tracker/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | 10 | -------------------------------------------------------------------------------- /Currency Converter 2/readme.md: -------------------------------------------------------------------------------- 1 | # Currency Converter using HTML/CSS/JS 2 | 3 | A currency converter is a software application or website that provides for the easy conversion of currency values based on present-day exchange rates. 4 | 5 | # Sample Solution 6 | 7 | ![Currency Converter Screenshot](sample.png) 8 | 9 | # Process of Conversion 10 | 11 | - Enter an amount which you want to convert. 12 | - Choose the Currency from which you wish to convert the currency from. 13 | - Click on Submit button to fetch the data of currency, along with their codes, according to current rates. 14 | 15 | # Installation Process 16 | 17 | 18 | 1. Clone the repository. 19 | 20 | ```bash 21 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 22 | ``` 23 | 24 | 2. To open the Currency Converter folder-> 25 | 26 | ```bash 27 | cd Currency Converter 28 | ``` 29 | 30 | 3. Run `index.html`. -------------------------------------------------------------------------------- /Currency Converter 2/sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Currency Converter 2/sample.png -------------------------------------------------------------------------------- /Currency Converter 2/script.js: -------------------------------------------------------------------------------- 1 | console.log("Main.js working") 2 | 3 | const populate = async (value, currency) => { 4 | let myStr = "" 5 | url = "https://api.currencyapi.com/v3/latest?apikey=cur_live_tpIWPQvbYBDPJS112sVGntYngsLG6cUCrU8fbKa7&base_currency=" + currency 6 | let response = await fetch(url) 7 | let rJson = await response.json() 8 | document.querySelector(".output").style.display = "block" 9 | 10 | for (let key of Object.keys(rJson["data"])) { 11 | myStr += ` 12 | ${key} 13 | ${rJson["data"][key]["code"]} 14 | ${Math.round(rJson["data"][key]["value"] * value)} 15 | 16 | ` 17 | } 18 | const tableBody = document.querySelector("tbody"); 19 | tableBody.innerHTML = myStr; 20 | 21 | } 22 | const btn = document.querySelector(".btn") 23 | btn.addEventListener("click", (e) => { 24 | e.preventDefault() 25 | const value = parseInt(document.querySelector("input[name='quantity']").value); 26 | const currency = document.querySelector("select[name='currency']").value 27 | populate(value, currency) 28 | }) 29 | 30 | -------------------------------------------------------------------------------- /Currency Converter 2/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0 4 | } 5 | 6 | header{ 7 | background-color: #CD5C08; 8 | display: flex; 9 | font-family: 'Roboto', sans-serif; 10 | height: 70px; 11 | font-size: 1.5rem; 12 | } 13 | 14 | #header-text{ 15 | margin-left:10px; 16 | } 17 | 18 | body{ 19 | background-color: antiquewhite; 20 | font-family: 'Roboto', sans-serif; 21 | } 22 | 23 | #content{ 24 | margin-top: 100px; 25 | margin-left: 30%; 26 | font-size: large; 27 | } 28 | 29 | div form{ 30 | margin-top: 20px; 31 | font-size: 1.2rem; 32 | } 33 | 34 | .btn { 35 | width: 80px; 36 | padding: 1px px; 37 | font-size: 18px; 38 | background: #e0d0f5; 39 | color: black; 40 | border-radius: 13px; 41 | cursor: pointer; 42 | margin-left: 260px; 43 | margin-top: 10px; 44 | } 45 | 46 | .output { 47 | display: none; 48 | margin-left: 110px; 49 | margin-top:40px; 50 | } 51 | 52 | .output table { 53 | width: 50vw; 54 | text-align: center; 55 | border: 2px solid black; 56 | font-size: 20px; 57 | } 58 | 59 | .output table th{ 60 | padding: 3px; 61 | } -------------------------------------------------------------------------------- /Currency Converter/Front.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Currency Converter/Front.PNG -------------------------------------------------------------------------------- /Currency Converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Currency Converter 7 | 8 | 9 | 10 |
11 |
12 |

Currency Converter

13 |
14 |
15 | 18 | 19 |
20 |
21 | 24 | 25 |
26 |
27 | 28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Dice Challenge/README.md: -------------------------------------------------------------------------------- 1 | # Dice Challenge Project 2 | 3 | Consists of 2 dice that give random and distinct values and tell which one won according to their respective devices. It is a fun website. It is made up of HTML, CSS, and JS. It is a fun website that consists of many concepts of JavaScript. 4 | 5 | 6 | ## Getting Started 7 | 8 | ### Prerequisites 9 | 10 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 11 | 12 | ### Installation 13 | 14 | 1. Clone the repository or download the ZIP file. 15 | 16 | ```bash 17 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 18 | ``` 19 | 20 | 2. Open the project folder. 21 | 22 | ```bash 23 | cd Dice Challenge 24 | ``` 25 | 26 | 3. Run `index.html` in your preferred web browser. 27 | 28 | ## Usage 29 | 30 | 1. Open the `index.html` file. 31 | 2. Click Refresh. 32 | 3. Whichever dice has more points it shows that the respective player wins. 33 | 4. Refresh again and enjoy the game. 34 | --- 35 | -------------------------------------------------------------------------------- /Dice Challenge/dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Refresh Me

14 | 15 |
16 |

Player 1

17 | 18 |
19 | 20 |
21 |

Player 2

22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | -------------------------------------------------------------------------------- /Dice Challenge/images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice1.png -------------------------------------------------------------------------------- /Dice Challenge/images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice2.png -------------------------------------------------------------------------------- /Dice Challenge/images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice3.png -------------------------------------------------------------------------------- /Dice Challenge/images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice4.png -------------------------------------------------------------------------------- /Dice Challenge/images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice5.png -------------------------------------------------------------------------------- /Dice Challenge/images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Dice Challenge/images/dice6.png -------------------------------------------------------------------------------- /Dice Challenge/index.js: -------------------------------------------------------------------------------- 1 | 2 | var randomNumber1 = Math.floor(Math.random() * 6) + 1; //1-6 3 | 4 | var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png 5 | 6 | var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png 7 | 8 | var image1 = document.querySelectorAll("img")[0]; 9 | 10 | image1.setAttribute("src", randomImageSource); 11 | 12 | 13 | var randomNumber2 = Math.floor(Math.random() * 6) + 1; 14 | 15 | var randomImageSource2 = "images/dice" + randomNumber2 + ".png"; 16 | 17 | document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2); 18 | 19 | 20 | //If player 1 wins 21 | if (randomNumber1 > randomNumber2) { 22 | document.querySelector("h1").innerHTML = "🚩 Play 1 Wins!"; 23 | } 24 | else if (randomNumber2 > randomNumber1) { 25 | document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩"; 26 | } 27 | else { 28 | document.querySelector("h1").innerHTML = "Draw!"; 29 | } 30 | -------------------------------------------------------------------------------- /Dice Challenge/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 70%; 3 | margin: auto; 4 | text-align: center; 5 | } 6 | 7 | .dice { 8 | text-align: center; 9 | display: inline-block; 10 | 11 | } 12 | 13 | body { 14 | background-color: #393E46; 15 | } 16 | 17 | h1 { 18 | margin: 30px; 19 | font-family: 'Lobster', cursive; 20 | text-shadow: 5px 0 #232931; 21 | font-size: 8rem; 22 | color: #4ECCA3; 23 | } 24 | 25 | p { 26 | font-size: 2rem; 27 | color: #4ECCA3; 28 | font-family: 'Indie Flower', cursive; 29 | } 30 | 31 | img { 32 | width: 80%; 33 | } 34 | 35 | footer { 36 | margin-top: 5%; 37 | color: #EEEEEE; 38 | text-align: center; 39 | font-family: 'Indie Flower', cursive; 40 | 41 | } 42 | -------------------------------------------------------------------------------- /Drink Water/README.md: -------------------------------------------------------------------------------- 1 | # Drink Water Project 2 | 3 | The user interacts with a series of small cups, clicking to fill them incrementally. A large cup dynamically updates to reflect the percentage of small cups filled, with a corresponding numerical display. The script intelligently adjusts for overflow and provides real-time feedback on the remaining fluid needed to reach the target. This interactive and visually appealing component can be seamlessly integrated into applications or websites focused on tracking water intake or similar fluid-related metrics. 4 | 5 | 6 | ## Table of Contents 7 | - [Demo](#demo) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | 15 | 16 | https://github.com/tejus05/Web-Development-Projects/assets/118271901/0590870e-2d67-42ca-ab08-f9f41e8b75bf 17 | 18 | 19 | 20 | 21 | ## Getting Started 22 | 23 | ### Prerequisites 24 | 25 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 26 | 27 | ### Installation 28 | 29 | 1. Clone the repository or download the ZIP file. 30 | 31 | ```bash 32 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 33 | ``` 34 | 35 | 2. Open the project folder. 36 | 37 | ```bash 38 | cd Drink Water 39 | ``` 40 | 41 | 3. Run `index.html` in your preferred web browser. 42 | 43 | ## Usage 44 | 45 | 1. Open the `index.html` file. 46 | 2. Click on nth small cup which is an indication that the user has drunk n small cups fo water. 47 | 3. The big cup will dynamically get filled according to the input. 48 | --- 49 | -------------------------------------------------------------------------------- /Drink Water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drink Water 8 | 9 | 10 |

Drink Water

11 |

Goal : 2 Litres

12 |
13 |
14 | 15 | 16 | 17 | 18 | remained 19 | 20 |
21 |
22 | 23 |
24 |
25 | 26 |

Select the number of glasses of water have you drank

27 |
28 |
250 ml
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
250 ml
34 |
250 ml
35 |
250 ml
36 | 39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /EMI Calculator/budget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/EMI Calculator/budget.png -------------------------------------------------------------------------------- /Fitness Tracker/assets/Full_with_data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Fitness Tracker/assets/Full_with_data.png -------------------------------------------------------------------------------- /Fitness Tracker/assets/running.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Fitness Tracker/assets/running.png -------------------------------------------------------------------------------- /Flappy Bird Game/Readme.md: -------------------------------------------------------------------------------- 1 | # Flappy Bird Game 2 | 3 | ## Introduction 4 | Welcome to the Flappy Bird Game repository! 5 | This project is an implementation of the classic Flappy Bird game using HTML/CSS JS. 6 | It's a fun and addictive game where you control a bird to avoid obstacles and score points by flying through gaps. 7 | 8 | ## Rule : 9 | Bird should not touch the pipes. 10 | 11 | ## How to Play 12 | 1. **Game Start**: The game starts as soon as you open the game tab. 13 | 2. **Flying the Bird**: Click on the spacebar to make the bird fly. Tap it repeatedly to control the bird's altitude. 14 | 3. **Avoiding Obstacles**: Navigate the bird carefully to avoid colliding with the pipes. 15 | 4. **Scoring**: Your score increases as you travel a greater distance without colliding with the pipes. 16 | 17 | ## How to Use This Code Locally : 18 | 1. Clone or download this repository to your local machine. 19 | 2. Ensure you have a compatible web browser (e.g., Google Chrome, Firefox) to run the game. 20 | 3. Open the HTML file (index.html) in your web browser to play the game. 21 | 22 | ## Customising the game 23 | change the velocityX increase or decrease the speed of rods to make game easier 24 | ```js 25 | let velocityX = -2; 26 | ``` 27 | ![screenShort](image.png) 28 | 29 | ## Have Fun :) -------------------------------------------------------------------------------- /Flappy Bird Game/bottompipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Flappy Bird Game/bottompipe.png -------------------------------------------------------------------------------- /Flappy Bird Game/flappybird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Flappy Bird Game/flappybird.png -------------------------------------------------------------------------------- /Flappy Bird Game/flappybirdbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Flappy Bird Game/flappybirdbg.png -------------------------------------------------------------------------------- /Flappy Bird Game/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Flappy Bird Game/image.png -------------------------------------------------------------------------------- /Flappy Bird Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flappy Bird 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Flappy Bird Game/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Courier New', Courier, monospace; 3 | text-align: center; 4 | } 5 | #board{ 6 | background-color: aqua; 7 | background-image:url(./flappybirdbg.png) ; 8 | } -------------------------------------------------------------------------------- /Flappy Bird Game/toppipe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Flappy Bird Game/toppipe.png -------------------------------------------------------------------------------- /Gradient Background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 🌈 Gradient Background 🌈 7 | 8 | 9 | 10 |

Background Generator

11 | 12 | 13 |

Current CSS Background

14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /Gradient Background/readme.md: -------------------------------------------------------------------------------- 1 | ## Gradient Picker 2 | A simple Html, Css and Javascript use to build this project. 3 | 4 | ## Run the Program 5 | ### Step 1 : Go inside Gradient Background Folder 6 | ### Step 2 : Double click on index.html file and it run on your browser 7 | 8 | -------------------------------------------------------------------------------- /Gradient Background/script.js: -------------------------------------------------------------------------------- 1 | let color1 = document.getElementsByTagName("input")[0] ; 2 | let color2 = document.getElementsByTagName("input")[1] ; 3 | 4 | let h3 = document.getElementsByTagName("h3")[0] ; 5 | 6 | let body = document.getElementById("gradient"); 7 | 8 | const setGradient = () => { 9 | 10 | body.style.background = "linear-gradient(to right, "+ color1.value + ", "+ color2.value + ")"; 11 | 12 | h3.textContent = body.style.background + ";"; 13 | } 14 | 15 | color1.addEventListener("input",setGradient); 16 | color2.addEventListener("input",setGradient); -------------------------------------------------------------------------------- /Gradient Background/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 'Raleway', sans-serif; 3 | color: rgba(0,0,0,.5); 4 | text-align: center; 5 | text-transform: uppercase; 6 | letter-spacing: .5em; 7 | top: 15%; 8 | background: linear-gradient(to right, red , yellow); /* Standard syntax */ 9 | } 10 | 11 | h1 { 12 | font: 600 3.5em 'Raleway', sans-serif; 13 | color: rgba(0,0,0,.5); 14 | text-align: center; 15 | text-transform: uppercase; 16 | letter-spacing: .5em; 17 | width: 100%; 18 | } 19 | 20 | h3 { 21 | font: 900 1em 'Raleway', sans-serif; 22 | color: rgba(0,0,0,.5); 23 | text-align: center; 24 | text-transform: none; 25 | letter-spacing: 0.05em; 26 | 27 | } 28 | -------------------------------------------------------------------------------- /Guess The Number/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Guess The Number/back.jpg -------------------------------------------------------------------------------- /Guess The Number/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Number Guessing Game 7 | 8 | 9 | 10 |
11 |

Number Guessing Game

12 |

Guess the number between 1 and 100:

13 | 14 | 15 |
16 |

17 |
18 |

Attempts: 0

19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Guess The Number/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | text-align: center; 3 | font-family: Arial, sans-serif; 4 | background-image: url('back.jpg'); 5 | background-size: cover; 6 | background-repeat: no-repeat; 7 | background-attachment: fixed; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | .content { 13 | margin-top: 20%; 14 | position: relative; 15 | z-index: 1; 16 | } 17 | 18 | h1 { 19 | color: #333; 20 | } 21 | 22 | input[type="number"] { 23 | width: 175px; 24 | padding: 5px; 25 | } 26 | 27 | button { 28 | padding: 5px 10px; 29 | background-color: #007bff; 30 | color: #fff; 31 | border: none; 32 | cursor: pointer; 33 | } 34 | 35 | button:hover { 36 | background-color: #0056b3; 37 | } 38 | 39 | p { 40 | margin: 10px; 41 | font-size: 18px; 42 | } 43 | -------------------------------------------------------------------------------- /Image Editor/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Image Editor/logo1.png -------------------------------------------------------------------------------- /Image Editor/logo3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Image Editor/logo3.jpeg -------------------------------------------------------------------------------- /Landing Page/Neeraj Meka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/Neeraj Meka.png -------------------------------------------------------------------------------- /Landing Page/README.md: -------------------------------------------------------------------------------- 1 | # Landing page for a product or service 2 | 3 | This project is a simple Landing Page about a Guitar Selling Company where they sell all types of Guitars. This website has all the information regarding the products of the company. 4 | 5 | 6 | My Github Link : https://github.com/Neerajmeka25 -------------------------------------------------------------------------------- /Landing Page/acousticguitar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/acousticguitar.jpg -------------------------------------------------------------------------------- /Landing Page/acousticset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/acousticset.png -------------------------------------------------------------------------------- /Landing Page/delivery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/delivery.png -------------------------------------------------------------------------------- /Landing Page/electricguitar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/electricguitar.jpg -------------------------------------------------------------------------------- /Landing Page/guitar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/guitar.png -------------------------------------------------------------------------------- /Landing Page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static", 3 | "version": "1.0.0", 4 | "description": "This is a static template with no bundling", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "serve", 8 | "build": "echo This is a static template, there is no bundler or bundling involved!" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/codesandbox-app/static-template.git" 13 | }, 14 | "keywords": [ 15 | "static", 16 | "template", 17 | "codesandbox" 18 | ], 19 | "author": "Ives van Hoorne", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/codesandbox-app/static-template/issues" 23 | }, 24 | "homepage": "https://github.com/codesandbox-app/static-template#readme", 25 | "devDependencies": { 26 | "serve": "^11.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Landing Page/quality.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Landing Page/quality.png -------------------------------------------------------------------------------- /Landing Page/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "static" 3 | } 4 | -------------------------------------------------------------------------------- /Link Shortner/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # database 12 | /prisma/db.sqlite 13 | /prisma/db.sqlite-journal 14 | 15 | # next.js 16 | /.next/ 17 | /out/ 18 | next-env.d.ts 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # local env files 34 | # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables 35 | .env 36 | .env*.local 37 | 38 | # vercel 39 | .vercel 40 | 41 | # typescript 42 | *.tsbuildinfo 43 | -------------------------------------------------------------------------------- /Link Shortner/README.md: -------------------------------------------------------------------------------- 1 | # Create T3 App 2 | 3 | This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`. 4 | 5 | ## What's next? How do I make an app with this? 6 | 7 | We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary. 8 | 9 | If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help. 10 | 11 | - [Next.js](https://nextjs.org) 12 | - [NextAuth.js](https://next-auth.js.org) 13 | - [Prisma](https://prisma.io) 14 | - [Tailwind CSS](https://tailwindcss.com) 15 | - [tRPC](https://trpc.io) 16 | 17 | ## Learn More 18 | 19 | To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources: 20 | 21 | - [Documentation](https://create.t3.gg/) 22 | - [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials 23 | 24 | You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome! 25 | 26 | ## How do I deploy this? 27 | 28 | Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information. 29 | -------------------------------------------------------------------------------- /Link Shortner/bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Link Shortner/bun.lockb -------------------------------------------------------------------------------- /Link Shortner/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/styles/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Link Shortner/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful 3 | * for Docker builds. 4 | */ 5 | await import("./src/env.mjs"); 6 | 7 | /** @type {import("next").NextConfig} */ 8 | const config = { 9 | reactStrictMode: true, 10 | // pageExtensions:[''] 11 | /** 12 | * If you are using `appDir` then you must comment the below `i18n` config out. 13 | * 14 | * @see https://github.com/vercel/next.js/issues/41980 15 | */ 16 | i18n: { 17 | locales: ["en"], 18 | defaultLocale: "en", 19 | }, 20 | }; 21 | 22 | export default config; 23 | -------------------------------------------------------------------------------- /Link Shortner/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | 8 | module.exports = config; 9 | -------------------------------------------------------------------------------- /Link Shortner/prettier.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').options} */ 2 | const config = { 3 | plugins: ["prettier-plugin-tailwindcss"], 4 | }; 5 | 6 | export default config; 7 | -------------------------------------------------------------------------------- /Link Shortner/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "mysql" 10 | url = env("DATABASE_URL") 11 | } 12 | 13 | model Link { 14 | id Int @id @default(autoincrement()) 15 | slug String @unique 16 | url String @db.LongText 17 | createdAt DateTime @default(now()) 18 | updatedAt DateTime @updatedAt 19 | 20 | @@index([slug]) 21 | } 22 | -------------------------------------------------------------------------------- /Link Shortner/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Link Shortner/public/favicon.ico -------------------------------------------------------------------------------- /Link Shortner/src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "~/lib/utils"; 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ); 21 | }, 22 | ); 23 | Input.displayName = "Input"; 24 | 25 | export { Input }; 26 | -------------------------------------------------------------------------------- /Link Shortner/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /Link Shortner/src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { Link } from "@prisma/client"; 2 | import { NextResponse } from "next/server"; 3 | import { NextRequest } from "next/server"; 4 | 5 | // This function can be marked `async` if using `await` inside 6 | export async function middleware(request: NextRequest) { 7 | const slug = request.nextUrl.pathname.split("/").pop(); 8 | const link: Link = await ( 9 | await fetch(`${request.nextUrl.origin}/api/${slug}`) 10 | ).json(); 11 | return NextResponse.redirect(link.url); 12 | } 13 | 14 | export const config = { 15 | matcher: ["/r/:slug*"], 16 | }; 17 | -------------------------------------------------------------------------------- /Link Shortner/src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | export default function Custom404() { 2 | return

404 - Page Not Found

; 3 | } 4 | -------------------------------------------------------------------------------- /Link Shortner/src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import { type AppType } from "next/app"; 2 | 3 | import { api } from "~/utils/api"; 4 | 5 | import "~/styles/globals.css"; 6 | 7 | import { Toaster } from "react-hot-toast"; 8 | 9 | const MyApp: AppType = ({ Component, pageProps }) => { 10 | return ( 11 | <> 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default api.withTRPC(MyApp); 19 | -------------------------------------------------------------------------------- /Link Shortner/src/pages/api/[slug].ts: -------------------------------------------------------------------------------- 1 | import { NextApiRequest, NextApiResponse } from "next"; 2 | import { db } from "~/server/db"; 3 | 4 | export default async function getSlug( 5 | req: NextApiRequest, 6 | res: NextApiResponse, 7 | ) { 8 | const slug = req.query.slug; 9 | 10 | const link = await db.link.findUnique({ where: { slug: slug as string } }); 11 | if (link == null) { 12 | console.log("nonono"); 13 | res.status(404).send({ message: "not found" }); 14 | } 15 | res.send(link); 16 | } 17 | -------------------------------------------------------------------------------- /Link Shortner/src/pages/api/trpc/[trpc].ts: -------------------------------------------------------------------------------- 1 | import { createNextApiHandler } from "@trpc/server/adapters/next"; 2 | 3 | import { env } from "~/env.mjs"; 4 | import { appRouter } from "~/server/api/root"; 5 | import { createTRPCContext } from "~/server/api/trpc"; 6 | 7 | // export API handler 8 | export default createNextApiHandler({ 9 | router: appRouter, 10 | createContext: createTRPCContext, 11 | onError: 12 | env.NODE_ENV === "development" 13 | ? ({ path, error }) => { 14 | console.error( 15 | `❌ tRPC failed on ${path ?? ""}: ${error.message}`, 16 | ); 17 | } 18 | : undefined, 19 | }); 20 | -------------------------------------------------------------------------------- /Link Shortner/src/server/api/root.ts: -------------------------------------------------------------------------------- 1 | import { exampleRouter } from "~/server/api/routers/example"; 2 | import { createTRPCRouter } from "~/server/api/trpc"; 3 | 4 | /** 5 | * This is the primary router for your server. 6 | * 7 | * All routers added in /api/routers should be manually added here. 8 | */ 9 | export const appRouter = createTRPCRouter({ 10 | example: exampleRouter, 11 | }); 12 | 13 | // export type definition of API 14 | export type AppRouter = typeof appRouter; 15 | -------------------------------------------------------------------------------- /Link Shortner/src/server/api/routers/example.ts: -------------------------------------------------------------------------------- 1 | import { 2 | PrismaClientKnownRequestError, 3 | PrismaClientUnknownRequestError, 4 | } from "@prisma/client/runtime/library"; 5 | import { z } from "zod"; 6 | 7 | import { createTRPCRouter, publicProcedure } from "~/server/api/trpc"; 8 | 9 | export const exampleRouter = createTRPCRouter({ 10 | saveALink: publicProcedure 11 | .input(z.object({ link: z.string().url(), slug: z.string() })) 12 | .mutation(async ({ ctx, input }) => { 13 | try { 14 | const link = await ctx.db.link.create({ 15 | data: { slug: input.slug, url: input.link }, 16 | }); 17 | 18 | return { 19 | message: "link created successfully", 20 | }; 21 | } catch (e) { 22 | if (e instanceof PrismaClientKnownRequestError) { 23 | throw e; 24 | } 25 | } 26 | }), 27 | }); 28 | -------------------------------------------------------------------------------- /Link Shortner/src/server/db.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | import { env } from "~/env.mjs"; 4 | 5 | const globalForPrisma = globalThis as unknown as { 6 | prisma: PrismaClient | undefined; 7 | }; 8 | 9 | export const db = 10 | globalForPrisma.prisma ?? 11 | new PrismaClient({ 12 | log: 13 | env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"], 14 | }); 15 | 16 | if (env.NODE_ENV !== "production") globalForPrisma.prisma = db; 17 | -------------------------------------------------------------------------------- /Link Shortner/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import { type Config } from "tailwindcss"; 2 | 3 | export default { 4 | content: ["./src/**/*.{js,ts,jsx,tsx}"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [], 9 | } satisfies Config; 10 | -------------------------------------------------------------------------------- /Link Shortner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "checkJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "incremental": true, 18 | "noUncheckedIndexedAccess": true, 19 | "baseUrl": ".", 20 | "paths": { 21 | "~/*": ["./src/*"] 22 | } 23 | }, 24 | "include": [ 25 | ".eslintrc.cjs", 26 | "next-env.d.ts", 27 | "**/*.ts", 28 | "**/*.tsx", 29 | "**/*.cjs", 30 | "**/*.mjs", 31 | "**/middleware.ts" 32 | ], 33 | "exclude": ["node_modules"] 34 | } 35 | -------------------------------------------------------------------------------- /Login Page/assets/bg-login1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Login Page/assets/bg-login1.jpg -------------------------------------------------------------------------------- /Login Page/assets/bg-login2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Login Page/assets/bg-login2.jpg -------------------------------------------------------------------------------- /Login Page/assets/bg-login3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Login Page/assets/bg-login3.jpg -------------------------------------------------------------------------------- /Login Page/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Login Page/assets/favicon.png -------------------------------------------------------------------------------- /Login Page/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Login Page/assets/preview.png -------------------------------------------------------------------------------- /Love Calculator/README.md: -------------------------------------------------------------------------------- 1 | # Love Calculator App 2 | 3 | ![love-calculator](https://user-images.githubusercontent.com/72425181/124382212-e4d84e00-dce3-11eb-958a-8d82b6a05426.png) 4 | 5 | _This is a good-looking love calculator app. Love calculator is a fun application where friends and couples can calculate the percentage of love between them. Simple and interesting app to work on._ 6 | 7 | ## Description 8 | 9 | The Love Calculator is a fun web application that calculates a random love percentage between two names. You can input the names of two individuals, and the application will generate a random love percentage to give you a playful estimate of their compatibility. 10 | 11 | ## Features 12 | 13 | - Input two names to calculate the love percentage. 14 | - Generates a random love percentage using JavaScript. 15 | - Fun and playful design with heart icons. 16 | 17 | ## Technologies Used 18 | 19 | - HTML 20 | - CSS 21 | - JavaScript 22 | 23 | ## Usage 24 | 25 | 1. Open the `index.html` file in your web browser. 26 | 2. Enter the names of two individuals in the input fields. 27 | 3. Click the "Calculate" button to generate a random love percentage. 28 | 4. Enjoy the fun and share the results with your friends! 29 | 30 | ## Acknowledgments 31 | 32 | - The Love Calculator application is inspired by the idea of creating a fun and entertaining way to calculate love compatibility. 33 | - You can contribut to this project and making it more enjoyable. 34 | -------------------------------------------------------------------------------- /Love Calculator/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Love Calculator/heart.png -------------------------------------------------------------------------------- /Love Calculator/script.js: -------------------------------------------------------------------------------- 1 | 2 | function calculateLove(){ 3 | var random = Math.random(); 4 | random = (random * 100) + 1; 5 | random = Math.floor(random); 6 | var p = document.createElement("p"); 7 | var text = document.createTextNode(random + "%"); 8 | p.appendChild(text); 9 | document.getElementById("lovePercentage").appendChild(p); 10 | } 11 | -------------------------------------------------------------------------------- /Love Calculator/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Lato', sans-serif; 5 | } 6 | 7 | body{ 8 | background-color: #eee; 9 | } 10 | 11 | .logo{ 12 | font-family: 'Dancing Script', cursive; 13 | font-size: 39px; 14 | color: red; 15 | padding: 20px 70px; 16 | } 17 | 18 | .wrapper{ 19 | width: 70%; 20 | margin: 0 auto; 21 | text-align: center; 22 | margin-top: 80px; 23 | } 24 | 25 | .heading{ 26 | font-size: 28px; 27 | letter-spacing: 0.9px; 28 | line-height: 54px; 29 | } 30 | 31 | .about{ 32 | font-size: 19px; 33 | line-height: 30px; 34 | text-align: left; 35 | } 36 | 37 | .box{ 38 | padding: 100px 0; 39 | background-image: url('./heart.png'); 40 | background-repeat: no-repeat; 41 | background-size: contain; 42 | background-position: 50% 60%; 43 | opacity: 0.8; 44 | } 45 | 46 | .flex-box{ 47 | display: flex; 48 | justify-content: space-around; 49 | } 50 | 51 | .bold{ 52 | font-weight: bold; 53 | font-size: 17px; 54 | letter-spacing: 0.7px; 55 | 56 | } 57 | 58 | input{ 59 | padding: 20px 70px; 60 | border: none; 61 | border-radius: 35px; 62 | 63 | } 64 | 65 | button{ 66 | padding: 15px 28px; 67 | font-size: 20px; 68 | border-radius: 30px; 69 | background-image: linear-gradient(210deg, red, orange); 70 | border: none; 71 | color: #fff; 72 | cursor: pointer; 73 | 74 | } 75 | 76 | #lovePercentage{ 77 | font-size: 30px; 78 | } -------------------------------------------------------------------------------- /Math Calculator/main.js: -------------------------------------------------------------------------------- 1 | function appendToDisplay(value) { 2 | document.getElementById('display').value += value; 3 | } 4 | 5 | function clearDisplay() { 6 | document.getElementById('display').value = ''; 7 | } 8 | 9 | function deleteLastDigit() { 10 | let displayValue = document.getElementById('display').value; 11 | if (displayValue.length > 0) { 12 | displayValue = displayValue.slice(0, -1); 13 | document.getElementById('display').value = displayValue; 14 | } 15 | } 16 | 17 | function calculate() { 18 | try { 19 | const result = eval(document.getElementById('display').value); 20 | document.getElementById('display').value = result; 21 | } catch (error) { 22 | document.getElementById('display').value = 'Error'; 23 | } 24 | } -------------------------------------------------------------------------------- /Math Calculator/readme.md: -------------------------------------------------------------------------------- 1 | # Math Calculator Website 2 | 3 | ![Calculator Screenshot](https://user-images.githubusercontent.com/109467040/273390817-506883e8-0fd1-4bcc-a7f7-adb9ff31ca0a.png) 4 | 5 | ## Description 6 | 7 | This is a simple interactive math calculator website with round buttons, designed for performing basic arithmetic operations, including addition, subtraction, multiplication, and division. The calculator also allows you to delete the last digit entered without clearing the entire input. 8 | 9 | ## Features 10 | 11 | - User-friendly interface with round buttons. 12 | - Basic arithmetic operations: addition, subtraction, multiplication, and division. 13 | - Ability to delete the last digit entered without clearing the entire input. 14 | - Clear button (`AC`) to reset the input. 15 | - Error handling for invalid calculations. 16 | 17 | ## Usage 18 | 19 | 1. Open the website in a web browser. 20 | 2. Use the round buttons to input numbers and perform operations. 21 | 3. Click the "C" button to delete the last digit entered. 22 | 4. Click the "AC" button to clear the input. 23 | 5. Click the "=" button to calculate the result. 24 | 25 | ## How to Run Locally 26 | 27 | 1. Clone this repository to your local machine: 28 | 29 | ```bash 30 | git clone https://github.com/yourusername/calculator-website.git 31 | ``` 32 | 33 | 2. Navigate to the project directory and launch index.html directly into browser or use extensions like live server. 34 | 35 | ## Technologies Used 36 | 37 | - HTML, CSS, JavaScript -------------------------------------------------------------------------------- /Memory Game/README.md: -------------------------------------------------------------------------------- 1 | # Memory Game 2 | 3 | This is a simple memory game in which the user has to match tiles. The game is made using HTML, CSS, and JavaScript. 4 | 5 | ## How to Play 6 | 7 | 1. Click on a tile to reveal its hidden image. 8 | 2. Click on another tile to reveal its hidden image. 9 | 3. If the two images match, the tiles will remain face up. 10 | 4. If the two images do not match, the tiles will flip back over. 11 | 5. Continue until all tiles have been matched. 12 | 13 | ## Features 14 | 15 | - Randomized tile placement for a new game every time. 16 | - Score tracking to keep track of your progress. 17 | - Timer to add an extra challenge. 18 | 19 | ## Technologies Used 20 | 21 | - HTML 22 | - CSS 23 | - JavaScript 24 | 25 | ## Installation 26 | 27 | 1. Clone the repository. 28 | 2. Open the `index.html` file in your web browser. 29 | 30 | ## Credits 31 | 32 | This game was created by Avnee Goyal (github.com/avnee-gy) 33 | -------------------------------------------------------------------------------- /Memory Game/images/bee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/bee.png -------------------------------------------------------------------------------- /Memory Game/images/butterfly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/butterfly.png -------------------------------------------------------------------------------- /Memory Game/images/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/cat.png -------------------------------------------------------------------------------- /Memory Game/images/chameleon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/chameleon.png -------------------------------------------------------------------------------- /Memory Game/images/crab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/crab.png -------------------------------------------------------------------------------- /Memory Game/images/elephant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/elephant.png -------------------------------------------------------------------------------- /Memory Game/images/fox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/fox.png -------------------------------------------------------------------------------- /Memory Game/images/frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/frog.png -------------------------------------------------------------------------------- /Memory Game/images/hen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/hen.png -------------------------------------------------------------------------------- /Memory Game/images/horse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/horse.png -------------------------------------------------------------------------------- /Memory Game/images/jellyfish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/jellyfish.png -------------------------------------------------------------------------------- /Memory Game/images/koala.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/koala.png -------------------------------------------------------------------------------- /Memory Game/images/monkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/monkey.png -------------------------------------------------------------------------------- /Memory Game/images/mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/mouse.png -------------------------------------------------------------------------------- /Memory Game/images/owl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/owl.png -------------------------------------------------------------------------------- /Memory Game/images/snail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/snail.png -------------------------------------------------------------------------------- /Memory Game/images/snake.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/snake.png -------------------------------------------------------------------------------- /Memory Game/images/toucan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/toucan.png -------------------------------------------------------------------------------- /Memory Game/images/turtle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/turtle.png -------------------------------------------------------------------------------- /Memory Game/images/whale.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Memory Game/images/whale.png -------------------------------------------------------------------------------- /Memory Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Memor-It 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 | 17 |
18 |
19 |

20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Music Player/README.md: -------------------------------------------------------------------------------- 1 | # Music Player 2 | 3 | This is a music player project implemented using HTML, CSS, and JavaScript. It allows users to add their own audio files to listen their music on web.default songs also available. 4 | 5 | ## Table of Contents 6 | - [Demo](#demo) 7 | - [Features](#features) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | ![Screenshot (205)](https://ik.imagekit.io/qmffpfng5/Screenshot%20(24).png?updatedAt=1696611655751) 15 | 16 | 17 | 18 | ## Features 19 | 20 | - User can add their own music files. 21 | - Play and pause button and progress of the music 22 | - Easy navigating between next and previous songs. 23 | 24 | ## Getting Started 25 | 26 | ### Prerequisites 27 | 28 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 29 | 30 | ### Installation 31 | 32 | 1. Clone the repository or download the ZIP file. 33 | 34 | ```bash 35 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 36 | ``` 37 | 38 | 2. Open the project folder. 39 | 40 | ```bash 41 | cd Music Player 42 | ``` 43 | 44 | 3. Run `index.html` in your preferred web browser. 45 | 46 | ## Usage 47 | 48 | 1. Open the `index.html` file. 49 | 2. It plays default songs. 50 | 3. Check `Add custom songs` checkbox 51 | 4. Then add your `Custom music` and Enjoy 52 | --- 53 | 54 | ## Developed By 55 | Balaharisankar L : https://github.com/BHS-Harish -------------------------------------------------------------------------------- /Music Player/asset/Dhee ft. Arivu - Enjoy Enjaami (Prod. Santhosh Narayanan)_eYq7WapuDLU.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Music Player/asset/Dhee ft. Arivu - Enjoy Enjaami (Prod. Santhosh Narayanan)_eYq7WapuDLU.mp3 -------------------------------------------------------------------------------- /Music Player/asset/Imagine Dragons - Believer (Lyrics)_W0DM5lcj6mw.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Music Player/asset/Imagine Dragons - Believer (Lyrics)_W0DM5lcj6mw.mp3 -------------------------------------------------------------------------------- /Music Player/asset/Manike Mage Hithe මැණිකේ මගේ හිතේ - Official Cover - Yohani & Satheeshan_PgCliOxl41o.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Music Player/asset/Manike Mage Hithe මැණිකේ මගේ හිතේ - Official Cover - Yohani & Satheeshan_PgCliOxl41o.mp3 -------------------------------------------------------------------------------- /Music Player/asset/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Music Player/asset/music.png -------------------------------------------------------------------------------- /News App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /News App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-news-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /News App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/News App/public/favicon.ico -------------------------------------------------------------------------------- /News App/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/News App/public/logo192.png -------------------------------------------------------------------------------- /News App/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/News App/public/logo512.png -------------------------------------------------------------------------------- /News App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /News App/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /News App/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /News App/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /News App/src/components/NoPhotoAvailable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/News App/src/components/NoPhotoAvailable.png -------------------------------------------------------------------------------- /News App/src/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import loading3 from './loading3.gif' 3 | 4 | // export class Spinner extends Component { 5 | // render() { 6 | 7 | // convert it into function based component 8 | const Spinner = ()=>{ 9 | return ( 10 |
11 | loading 12 |
13 | ) 14 | // } 15 | } 16 | 17 | export default Spinner -------------------------------------------------------------------------------- /News App/src/components/loading3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/News App/src/components/loading3.gif -------------------------------------------------------------------------------- /News App/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /News App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /News App/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /News App/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Password Generator/Output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Password Generator/Output.png -------------------------------------------------------------------------------- /Password Generator/README.md: -------------------------------------------------------------------------------- 1 | # Personal Diary 2 | 3 | This is a Password Generator project implemented using HTML, CSS, and JavaScript. It allows users to secure password. User can also copy the randomly generator password. 4 | 5 | ## Table of Contents 6 | - [Demo](#demo) 7 | - [Features](#features) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | ![Alt text]() 15 | 16 | 17 | ## Features 18 | 19 | - User can generate password many times he wants. 20 | - User can set password length (4 - 20) characters. 21 | - Allow user to create password by Uppercase, Lowercase, Numbers and Special symbols. 22 | - User can also able to copy password. 23 | 24 | ## Getting Started 25 | 26 | ### Installation 27 | 28 | 1. Clone the repository or download the ZIP file. 29 | 30 | ```bash 31 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 32 | ``` 33 | 34 | 2. Open the project folder. 35 | 36 | ```bash 37 | cd Password Generator 38 | ``` 39 | 40 | 3. Run `index.html` in your preferred web browser. 41 | 42 | ## Usage 43 | 44 | 1. Open the `index.html` file. 45 | 2. It shows the Landing Page. 46 | 3. Select desired length of password and symbols. 47 | 4. Click 'Generate Password' to generate it. 48 | 5. You can also try different lengths. 49 | --- 50 | 51 | ## Developed By 52 | Abaikumar I : https://github.com/AbaiKumar 53 | 54 | Deployed in github : https://abaikumar.github.io/Web-Development-Projects/Password%20Generator/ -------------------------------------------------------------------------------- /Password Generator/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Password Generator/images/bg.jpg -------------------------------------------------------------------------------- /Password Generator/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Password Generator/images/logo.png -------------------------------------------------------------------------------- /Personal Diary/README.md: -------------------------------------------------------------------------------- 1 | # Personal Diary 2 | 3 | This is a Personal Diary project implemented using HTML, CSS, and JavaScript. It allows users to add their own notes and todo on the site and check the previous notes they had created. 4 | User can aslo delete the notes which he/she created in the past. 5 | 6 | ## Table of Contents 7 | - [Demo](#demo) 8 | - [Features](#features) 9 | - [Getting Started](#getting-started) 10 | - [Usage](#usage) 11 | 12 | --- 13 | 14 | ## Demo 15 | ![Alt text]() 16 | 17 | 18 | ## Features 19 | 20 | - User can add their own Notes. 21 | - Easily access the notes created in past. 22 | - User can delete the notes. 23 | 24 | ## Getting Started 25 | 26 | ### Prerequisites 27 | 28 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 29 | 30 | ### Installation 31 | 32 | 1. Clone the repository or download the ZIP file. 33 | 34 | ```bash 35 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 36 | ``` 37 | 38 | 2. Open the project folder. 39 | 40 | ```bash 41 | cd Personal Diary 42 | ``` 43 | 44 | 3. Run `index.html` in your preferred web browser. 45 | 46 | ## Usage 47 | 48 | 1. Open the `index.html` file. 49 | 2. It shows the home page. 50 | 3. Write the notes in textarea and click add button. 51 | 4. you can also delete the notes 52 | --- 53 | 54 | ## Developed By 55 | Chetan Patil : https://github.com/Git0Chetan -------------------------------------------------------------------------------- /Personal Diary/Screenshot 2023-10-07 at 6.24.52 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Diary/Screenshot 2023-10-07 at 6.24.52 PM.png -------------------------------------------------------------------------------- /Personal Diary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Diary 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Personal Diary

15 |
16 | 17 | 18 |
    19 |
    20 |
    21 |
    22 |

    © Chetan Patil     @Github     ® All rights reserved

    23 |
    24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /Personal Diary/script.js: -------------------------------------------------------------------------------- 1 | const noteInput = document.getElementById('noteInput'); 2 | const addButton = document.getElementById('addButton'); 3 | const noteList = document.getElementById('noteList'); 4 | 5 | addButton.addEventListener('click' , addNote); 6 | function addNote(){ 7 | const noteText = noteInput.value.trim(); 8 | if(noteText ==='')return; 9 | const li = document.createElement('li'); 10 | li.innerHTML = ` ${noteText} 11 | 12 | `; 13 | noteList.appendChild(li); 14 | noteInput.value = ''; 15 | 16 | li.querySelector('.deleteButton').addEventListener('click',() =>{ 17 | noteList.removeChild(li); 18 | }); 19 | } 20 | -------------------------------------------------------------------------------- /Personal Website/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/home.png -------------------------------------------------------------------------------- /Personal Website/images/JavaScript_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/JavaScript_logo.png -------------------------------------------------------------------------------- /Personal Website/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/css_logo.png -------------------------------------------------------------------------------- /Personal Website/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/html_logo.png -------------------------------------------------------------------------------- /Personal Website/images/img4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/img4.png -------------------------------------------------------------------------------- /Personal Website/images/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/instagram.png -------------------------------------------------------------------------------- /Personal Website/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/linkedin.png -------------------------------------------------------------------------------- /Personal Website/images/personal_portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/personal_portfolio.png -------------------------------------------------------------------------------- /Personal Website/images/python_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/python_logo.png -------------------------------------------------------------------------------- /Personal Website/images/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/social.png -------------------------------------------------------------------------------- /Personal Website/images/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Personal Website/images/x.png -------------------------------------------------------------------------------- /Personal Website/readme.md: -------------------------------------------------------------------------------- 1 | # Personal Website - 2 | 3 | Portfolio website built using Html, Css and Javascript 4 | 5 | This website is built to showcase my technical skills, web design skills. 6 | 7 | # Technologies Used - 8 | 9 | 1) HTML5 10 | 2) CSS3 11 | 3) JavaScript 12 | 13 | # Content - 14 | 15 | 1) Home Page 16 | 2) Skills 17 | 3) Qualifications 18 | 4) Projects 19 | 5) Contact me 20 | 21 | # Homepage Visuals - 22 | 23 | ![Home Page Screenshot](home.png) 24 | 25 | # Features 26 | 27 | - Can hold Information about you. 28 | - Can hold your Qualifications,Projects and Work Experience. 29 | - If some want to connect to you, a mail can be sent to your email. 30 | 31 | -------------------------------------------------------------------------------- /Plan Template/Readme.md: -------------------------------------------------------------------------------- 1 | # Premium Plan Template 2 | 3 | This is a webpage of premium plan template needed for some commercial websites. 4 | 5 | # Technologies Used 6 | 7 | - HTML 8 | - CSS 9 | 10 | # Visuals 11 | 12 | ![Home Page Screenshot](premium.png) 13 | 14 | # Features 15 | 16 | - Shows the amount of the plan 17 | - Contains a button to take the premium 18 | - Can change the contents 19 | - Many plans to take 20 | 21 | 22 | -------------------------------------------------------------------------------- /Plan Template/premium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Plan Template/premium.png -------------------------------------------------------------------------------- /Qr Generator/README.md: -------------------------------------------------------------------------------- 1 | # QR Code Generator 2 | 3 | My github : https://github.com/Nishantsurve 4 | 5 | ## Demo 6 | ![image1](https://github.com/Nishantsurve/Web-Development-Projects/assets/104264099/a90d2bd0-d7f8-4d0c-a470-19a5549e19b5) 7 | 8 | ![image2](https://github.com/Nishantsurve/Web-Development-Projects/assets/104264099/040f41f9-d601-4bf8-afe4-31a924998659) 9 | 10 | ![image3](https://github.com/Nishantsurve/Web-Development-Projects/assets/104264099/f9a58038-d29c-4626-b15c-01914d3c9411) 11 | 12 | ## Deployment 13 | netlify app 14 | link : https://nishants-qr-generator.netlify.app/ 15 | 16 | ## Getting Started 17 | 18 | ### Prerequisites 19 | 20 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 21 | 22 | ### Installation 23 | 24 | 1. Clone the repository or download the ZIP file. 25 | 26 | ```bash 27 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 28 | ``` 29 | 30 | 2. Open the project folder. 31 | 32 | ```bash 33 | cd Qr Generator 34 | ``` 35 | 36 | 3. Run `index.html` in your preferred web browser. 37 | 38 | ## Usage 39 | 40 | 1. Open the `index.html` file. 41 | 2. Click on input field and Enter the URL/Link 42 | 3. Click on "Generate QR" to generate qr code 43 | 44 | --- 45 | -------------------------------------------------------------------------------- /Qr Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Qr genetor 9 | 10 | 11 |
    12 |
    13 |

    QR code generator

    14 |

    Paste a url or enter the text to create QR code

    15 |
    16 |
    17 | 18 | 19 |
    20 | 21 |
    22 | qr-code 23 |
    24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /Qr Generator/qr_picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Qr Generator/qr_picture.png -------------------------------------------------------------------------------- /Qr Generator/scripts.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let container =document.querySelector(".container"); 4 | let generateBtn =document.querySelector(".generate-btn"); 5 | let qrInput =document.querySelector(".qr-input"); 6 | let qrImg=document.querySelector(".qr-image"); 7 | 8 | generateBtn.onclick= function(){ 9 | if(qrInput.value.length>0){ 10 | generateBtn.innerText="Generating the QR "; 11 | qrImg.src=" https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=" + qrInput.value; 12 | qrImg.onload= function(){ 13 | container.classList.add("active"); 14 | generateBtn.innerText="Generate QR"; 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /Random Choice Picker/README.md: -------------------------------------------------------------------------------- 1 | # Random Choice Picker 2 | 3 | This web app is a fun random choice picker where users input options separated by commas. As they type, dynamic tags form below. Upon hitting 'Enter,' the app animates a lively sequence, randomly highlighting tags before settling on a final choice. It provides a visually engaging and interactive way to make arbitrary selections, making it suitable for various decision-making scenarios. 4 | 5 | 6 | ## Table of Contents 7 | - [Demo](#demo) 8 | - [Getting Started](#getting-started) 9 | - [Usage](#usage) 10 | 11 | --- 12 | 13 | ## Demo 14 | 15 | 16 | https://github.com/tejus05/Web-Development-Projects/assets/118271901/21dba93b-7b03-4b3b-b7b3-e12768863b78 17 | - To view demo images, visit [Images](./images/) 18 | 19 | 20 | 21 | ## Getting Started 22 | 23 | ### Prerequisites 24 | 25 | - A modern web browser (Chrome, Firefox, Safari, Edge, etc.) 26 | 27 | ### Installation 28 | 29 | 1. Clone the repository or download the ZIP file. 30 | 31 | ```bash 32 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 33 | ``` 34 | 35 | 2. Open the project folder. 36 | 37 | ```bash 38 | cd Random Choice Picker 39 | ``` 40 | 41 | 3. Run `index.html` in your preferred web browser. 42 | 43 | ## Usage 44 | 45 | 1. Open the `index.html` file. 46 | 2. Input your choices seperated by commas. 47 | 3. Press Enter to start randomising. 48 | 4. The randomly selected choice will be highlighted within a few moments. 49 | --- 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Random Choice Picker/images/random-choice-picker-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Random Choice Picker/images/random-choice-picker-01.jpg -------------------------------------------------------------------------------- /Random Choice Picker/images/random-choice-picker-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Random Choice Picker/images/random-choice-picker-02.jpg -------------------------------------------------------------------------------- /Random Choice Picker/images/random-choice-picker-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Random Choice Picker/images/random-choice-picker-03.jpg -------------------------------------------------------------------------------- /Random Choice Picker/images/random-choice-picker-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Random Choice Picker/images/random-choice-picker-04.jpg -------------------------------------------------------------------------------- /Random Choice Picker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Choice Picker 8 | 9 | 10 |
    11 |

    12 | Enter all the choices divided by a comma (' , ') 13 |
    14 | Press enter when you're done! 15 |

    16 | 17 |
    18 | 19 |
    20 |
    21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Random Choice Picker/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Muli',arial,sans-serif; 8 | } 9 | html,body { 10 | height: 100%; 11 | width: 100%; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background-color: #2b88f0; 16 | } 17 | h3{ 18 | text-align: center; 19 | color: white; 20 | margin: 10px 0 20px; 21 | } 22 | .container{ 23 | width: 500px; 24 | } 25 | #textarea{ 26 | border: none; 27 | display: block; 28 | width: 100%; 29 | height: 100px; 30 | margin: 0 0 20px; 31 | padding: 10px; 32 | font-size: 1rem; 33 | } 34 | #textarea:focus{ 35 | outline: none; 36 | } 37 | .tag{ 38 | background-color: #f0932b; 39 | color: white; 40 | border-radius: 50px; 41 | padding: 10px 20px; 42 | margin: 0 5px 10px 0; 43 | font-size: 14px; 44 | display: inline-block; 45 | } 46 | .tag.highlight{ 47 | background-color: #273c75; 48 | } -------------------------------------------------------------------------------- /Restaurant Menu/Readme.md: -------------------------------------------------------------------------------- 1 | # Restaurant Menu Display 2 | 3 | Welcome to the Restaurant Menu Display project! This web application 4 | Restaurant Menu project is a web application designed to help restaurants showcase their menu items with enticing images and detailed descriptions. It provides an engaging and informative experience for your customers, both in-house and online. 5 | 6 | ## Features 7 | 8 | - **Beautiful Menu Display:** Present your restaurant's menu items in an attractive and visually appealing format. 9 | 10 | - **Detailed Descriptions:** Each menu item includes a detailed description, helping customers make informed choices. 11 | 12 | - **Image Gallery:** Showcase mouthwatering images of your dishes to entice your customers. 13 | 14 | - **Responsive Design:** The application is responsive, ensuring a seamless experience with Hover effects for menu items to enhance the user experience. 15 | 16 | - **Easy to Update:** You can easily update your menu items and their descriptions by editing a JavaScript array. 17 | 18 | ## Technologies used 19 | 20 | - HTML: Used for creating the project's structure and content. 21 | - CSS: Applied for styling and layout, including transitions and hover effects. 22 | - JavaScript: Implemented for dynamic content display and interactivity. 23 | 24 | ## Contribution 25 | 26 | - Contributed by: https://github.com/EshaalakshmiDS 27 | 28 | 1. Clone this repository to your local machine. 29 | 30 | ```bash 31 | git clone https://github.com/EshaalakshmiDS/Web-Development-Projects.git 32 | 33 | -------------------------------------------------------------------------------- /Restaurant Menu/food1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food1.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food10.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food11.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food12.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food2.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food3.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food4.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food5.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food6.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food7.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food8.jpg -------------------------------------------------------------------------------- /Restaurant Menu/food9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/food9.jpg -------------------------------------------------------------------------------- /Restaurant Menu/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Restaurant Menu/logo.png -------------------------------------------------------------------------------- /Restaurant Menu/menu.css: -------------------------------------------------------------------------------- 1 | /* Reset some default styles */ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: "Arial", sans-serif; 6 | background: linear-gradient(to bottom, #ffcc99, #ff9966); 7 | color: #333; 8 | } 9 | 10 | /* Header styling */ 11 | header { 12 | background: #ff6633; 13 | color: #fff; 14 | text-align: center; 15 | padding: 20px; 16 | } 17 | 18 | h1 { 19 | font-size: 36px; 20 | margin: 0; 21 | } 22 | 23 | /* Menu container and item styling */ 24 | .menu { 25 | display: flex; 26 | flex-wrap: wrap; 27 | justify-content: center; 28 | padding: 20px; 29 | } 30 | 31 | .menu-item { 32 | width: 300px; 33 | margin: 10px; 34 | background-color: #fff; 35 | border: 1px solid #ddd; 36 | border-radius: 10px; 37 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 38 | text-align: center; 39 | padding: 20px; 40 | transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; 41 | cursor: pointer; 42 | } 43 | 44 | .menu-item:hover { 45 | transform: scale(1.05); 46 | box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); 47 | background-color: #f0f0f0; 48 | } 49 | 50 | .menu-item img { 51 | max-width: 100%; 52 | height: auto; 53 | border-radius: 5px; 54 | } 55 | 56 | h2 { 57 | font-size: 24px; 58 | margin: 10px 0; 59 | color: #333; 60 | } 61 | 62 | p { 63 | font-size: 16px; 64 | color: #666; 65 | margin: 10px 0; 66 | } 67 | -------------------------------------------------------------------------------- /Resume Generator/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /Resume Generator/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import globals from 'globals'; 3 | import reactHooks from 'eslint-plugin-react-hooks'; 4 | import reactRefresh from 'eslint-plugin-react-refresh'; 5 | import tseslint from 'typescript-eslint'; 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /Resume Generator/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Resume Generator/image.png -------------------------------------------------------------------------------- /Resume Generator/image1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Resume Generator/image1.png -------------------------------------------------------------------------------- /Resume Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Resume Builder 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Resume Generator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-react-typescript-starter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "lucide-react": "^0.344.0", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-to-pdf": "^1.0.1", 17 | "clsx": "^2.1.0" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.9.1", 21 | "@types/react": "^18.3.5", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react": "^4.3.1", 24 | "autoprefixer": "^10.4.18", 25 | "eslint": "^9.9.1", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.11", 28 | "globals": "^15.9.0", 29 | "postcss": "^8.4.35", 30 | "tailwindcss": "^3.4.1", 31 | "typescript": "^5.5.3", 32 | "typescript-eslint": "^8.3.0", 33 | "vite": "^5.4.2" 34 | } 35 | } -------------------------------------------------------------------------------- /Resume Generator/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /Resume Generator/src/components/Form/Input.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { clsx } from 'clsx'; 3 | 4 | interface InputProps extends React.InputHTMLAttributes { 5 | label: string; 6 | error?: string; 7 | } 8 | 9 | export const Input: React.FC = ({ 10 | label, 11 | error, 12 | className, 13 | ...props 14 | }) => { 15 | return ( 16 |
    17 | 20 | 30 | {error && ( 31 |

    {error}

    32 | )} 33 |
    34 | ); 35 | }; -------------------------------------------------------------------------------- /Resume Generator/src/components/Form/Section.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChevronDown, ChevronUp } from 'lucide-react'; 3 | 4 | interface SectionProps { 5 | title: string; 6 | children: React.ReactNode; 7 | isOpen?: boolean; 8 | onToggle?: () => void; 9 | } 10 | 11 | export const Section: React.FC = ({ 12 | title, 13 | children, 14 | isOpen = true, 15 | onToggle 16 | }) => { 17 | return ( 18 |
    19 | 30 | {isOpen && ( 31 |
    32 | {children} 33 |
    34 | )} 35 |
    36 | ); 37 | }; -------------------------------------------------------------------------------- /Resume Generator/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /Resume Generator/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import App from './App.tsx'; 4 | import './index.css'; 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /Resume Generator/src/types/resume.ts: -------------------------------------------------------------------------------- 1 | export interface Education { 2 | id: string; 3 | school: string; 4 | degree: string; 5 | field: string; 6 | startDate: string; 7 | endDate: string; 8 | gpa?: string; 9 | gpaScale?: '4.0' | '5.0' | '10.0'; 10 | } 11 | 12 | export interface Experience { 13 | id: string; 14 | company: string; 15 | position: string; 16 | startDate: string; 17 | endDate: string; 18 | description: string[]; 19 | } 20 | 21 | export interface Project { 22 | id: string; 23 | name: string; 24 | description: string; 25 | technologies: string[]; 26 | link?: string; 27 | } 28 | 29 | export interface PersonalInfo { 30 | fullName: string; 31 | title: string; 32 | email: string; 33 | phone: string; 34 | location: string; 35 | portfolio?: string; 36 | linkedin?: string; 37 | github?: string; 38 | } 39 | 40 | export interface ResumeData { 41 | personalInfo: PersonalInfo; 42 | education: Education[]; 43 | experience: Experience[]; 44 | skills: string[]; 45 | projects: Project[]; 46 | achievements: string[]; 47 | activities: string[]; 48 | } 49 | 50 | export type Template = 'minimal' | 'creative'; -------------------------------------------------------------------------------- /Resume Generator/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Resume Generator/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /Resume Generator/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /Resume Generator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /Resume Generator/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /Resume Generator/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /Rock Paper Scissors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock Paper Scissors 7 | 8 | 9 | 10 |

    Rock, Paper, Scissors

    11 |

    Select either rock, paper, or scissors and see if you can beat the computer!

    12 | 13 |

    Remember: “Rock breaks scissors, scissors cuts paper, paper covers rock.”

    14 |
    15 | 16 |
    17 |
    18 | 19 |
    20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Rock Paper Scissors/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Rock Paper Scissors/ss.png -------------------------------------------------------------------------------- /Rock Paper Scissors/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | align-content: center; 7 | } -------------------------------------------------------------------------------- /Sketchpad App/Downloaded_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Sketchpad App/Downloaded_image.png -------------------------------------------------------------------------------- /Sketchpad App/Interface.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Sketchpad App/Interface.png -------------------------------------------------------------------------------- /Sketchpad App/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Stop Watch/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Stop Watch/README.md -------------------------------------------------------------------------------- /Stop Watch/Script.js: -------------------------------------------------------------------------------- 1 | let [seconds, minutes, hours] = [0,0,0]; 2 | let displayTime = document.getElementById('displayTime'); 3 | let timer = null; 4 | 5 | function stopwatch(){ 6 | seconds++; 7 | if(seconds / 60 === 1){ 8 | seconds = 0; 9 | minutes++; 10 | if(minutes / 60 === 1){ 11 | minutes = 0; 12 | hours++; 13 | } 14 | } 15 | displayTime.innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); 16 | } 17 | function watchStart(){ 18 | if(timer!== null){ 19 | clearInterval(timer); 20 | } 21 | timer = setInterval(stopwatch, 1000); 22 | } 23 | function watchStop(){ 24 | clearInterval(timer); 25 | timer = null; 26 | } 27 | function watchReset(){ 28 | clearInterval(timer); 29 | timer = null; 30 | [seconds, minutes, hours] = [0,0,0]; 31 | displayTime.innerHTML = "00:00:00"; 32 | } -------------------------------------------------------------------------------- /Stop Watch/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Stop Watch/image.png -------------------------------------------------------------------------------- /Stop Watch/images/reset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Stop Watch/images/reset.png -------------------------------------------------------------------------------- /Stop Watch/images/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Stop Watch/images/start.png -------------------------------------------------------------------------------- /Stop Watch/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Stop Watch/images/stop.png -------------------------------------------------------------------------------- /Stop Watch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stopwatch 8 | 9 | 10 | 11 |
    12 |

    00:00:00

    13 |
    14 | stop 15 | start 16 | reset 17 |
    18 |
    19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Stop Watch/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(230, 200, 162); 3 | font-family: Arial, sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | .stopwatch{ 8 | width: 90%; 9 | max-width: 600px; 10 | background-image: linear-gradient(rgba(0, 0, 0, 0.74),rgba(0,0,0,0.8)); 11 | border-radius: 30px; 12 | background-size: cover; 13 | background-position: center; 14 | text-align: center; 15 | padding: 40px 0; 16 | color: white; 17 | margin: 200px auto 0; 18 | box-shadow: 0 10px 10px rgba(0,0,0,0.8); 19 | } 20 | .stopwatch h1{ 21 | font-size: 3em; 22 | margin: 60px; 23 | font-weight: 300; 24 | } 25 | .buttons{ 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | /* margin: 20px 0; */ 30 | } 31 | .buttons img{ 32 | width: 50px; 33 | margin: 0 20px; 34 | cursor: pointer; 35 | } 36 | .buttons img:nth-child(2){ 37 | width: 80px; 38 | } -------------------------------------------------------------------------------- /Temperature converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Temperature Converter 8 | 9 | 10 | 11 | 12 |
    13 |

    Temperature Converter

    14 | 15 | 16 | 21 | to 22 | 27 |
    28 | 29 |

    30 |
    31 | 32 | 33 | -------------------------------------------------------------------------------- /Temperature converter/index.js: -------------------------------------------------------------------------------- 1 | function convertTemperature() { 2 | const tempInput = document.getElementById('tempInput').value; 3 | const fromUnit = document.getElementById('fromUnit').value; 4 | const toUnit = document.getElementById('toUnit').value; 5 | let result; 6 | 7 | if (fromUnit === 'celsius') { 8 | if (toUnit === 'fahrenheit') { 9 | result = (tempInput * 9) / 5 + 32; 10 | } else if (toUnit === 'kelvin') { 11 | result = parseFloat(tempInput) + 273.15; 12 | } else { 13 | result = tempInput; // No conversion needed (from Celsius to Celsius) 14 | } 15 | } else if (fromUnit === 'fahrenheit') { 16 | if (toUnit === 'celsius') { 17 | result = ((tempInput - 32) * 5) / 9; 18 | } else if (toUnit === 'kelvin') { 19 | result = ((tempInput - 32) * 5) / 9 + 273.15; 20 | } else { 21 | result = tempInput; // No conversion needed (from Fahrenheit to Fahrenheit) 22 | } 23 | } else if (fromUnit === 'kelvin') { 24 | if (toUnit === 'celsius') { 25 | result = tempInput - 273.15; 26 | } else if (toUnit === 'fahrenheit') { 27 | result = ((tempInput - 273.15) * 9) / 5 + 32; 28 | } else { 29 | result = tempInput; // No conversion needed (from Kelvin to Kelvin) 30 | } 31 | } 32 | 33 | document.getElementById('result').innerHTML = `Result: ${result.toFixed( 34 | 2 35 | )} ${toUnit}`; 36 | } 37 | -------------------------------------------------------------------------------- /Temperature converter/readme.md: -------------------------------------------------------------------------------- 1 | # TemperatureConverter 2 | 3 | Welcome to the Temperature Converter repository! This simple web application allows users to convert temperatures between Fahrenheit, Celsius, and Kelvin. 4 | 5 | ## Table of Contents 6 | 7 | - [Introduction](#introduction) 8 | - [Features](#features) 9 | - [Usage](#usage) 10 | - [Deployment](#deployment) 11 | 12 | ## Introduction 13 | 14 | Temperature conversion is a common task in various fields, and this web application simplifies the process by providing an easy-to-use interface for converting temperatures. Whether you're a student, a scientist, or anyone in need of quick temperature conversions, this tool can be handy. 15 | 16 | ## Features 17 | 18 | - Convert temperatures between Fahrenheit, Celsius, and Kelvin. 19 | - User-friendly interface with real-time conversion updates. 20 | - Responsive design for use on both desktop and mobile devices. 21 | 22 | 23 | ## usage 24 | - Enter the temperature value in the input field. 25 | - Select the current temperature unit from the dropdown. 26 | - Choose the target temperature unit from the second dropdown. 27 | - The converted temperature will be displayed in real-time. 28 | -------------------------------------------------------------------------------- /Text Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Paragraph Generator 7 | 8 | 9 | 10 |
    11 |
    12 | 17 | 18 |
    19 |
    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /Text Generator/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Text Generator/ss.png -------------------------------------------------------------------------------- /Tic Tac Toe/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | firebase-debug.log* 8 | firebase-debug.*.log* 9 | 10 | # Firebase cache 11 | .firebase/ 12 | 404.html 13 | firebase.json 14 | .firebaserc 15 | .vscode/ 16 | 17 | # Firebase config 18 | 19 | # Uncomment this if you'd like others to create their own Firebase project. 20 | # For a team working on the same Firebase project(s), it is recommended to leave 21 | # it commented so all members can deploy to the same project(s) in .firebaserc. 22 | # .firebaserc 23 | 24 | # Runtime data 25 | pids 26 | *.pid 27 | *.seed 28 | *.pid.lock 29 | 30 | # Directory for instrumented libs generated by jscoverage/JSCover 31 | lib-cov 32 | 33 | # Coverage directory used by tools like istanbul 34 | coverage 35 | 36 | # nyc test coverage 37 | .nyc_output 38 | 39 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 40 | .grunt 41 | 42 | # Bower dependency directory (https://bower.io/) 43 | bower_components 44 | 45 | # node-waf configuration 46 | .lock-wscript 47 | 48 | # Compiled binary addons (http://nodejs.org/api/addons.html) 49 | build/Release 50 | 51 | # Dependency directories 52 | node_modules/ 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional eslint cache 58 | .eslintcache 59 | 60 | # Optional REPL history 61 | .node_repl_history 62 | 63 | # Output of 'npm pack' 64 | *.tgz 65 | 66 | # Yarn Integrity file 67 | .yarn-integrity 68 | 69 | # dotenv environment variables file 70 | .env 71 | -------------------------------------------------------------------------------- /Tic Tac Toe/Readme.md: -------------------------------------------------------------------------------- 1 | # Tic-Tac-Toe Website 2 | 3 | Welcome to our simple Tic-Tac-Toe website! This web application allows you to play the classic Tic-Tac-Toe game with a friend online, using a web browser. It's a fun and interactive way to challenge your strategic skills. 4 | 5 | ## Demo 6 | 7 | You can check out a live demo of our Tic-Tac-Toe website [here](https://tictactoebyshreyas.web.app/). 8 | 9 | ## Features 10 | 11 | - **Responsive Design**: Enjoy the game on desktop, tablet, or mobile devices. 12 | - **Winning Announcements**: Get immediate feedback on game outcomes with win, draw, and loss announcements. 13 | - **Turn-Based Gameplay**: Take turns placing your 'X' or 'O' on the board until there's a winner or a draw. 14 | - **Real-Time Updates**: The game board updates in real-time, ensuring a smooth and interactive gaming experience. 15 | 16 | ## How to Play 17 | 18 | 1. Visit the website [here](https://tictactoebyshreyas.web.app/). 19 | 20 | 2. Click on "Play Now" to start a new game. 21 | 22 | 3. Take turns placing your 'X' or 'O' on the grid. The game will notify you of the winner or a draw. 23 | 24 | 4. Have fun and enjoy the game! 25 | 26 | ## Development 27 | 28 | If you'd like to contribute to the development of this project or run it locally, follow these steps: 29 | 30 | 1. Clone the repository to your local machine. 31 | 32 | 2. Navigate to the project directory and launch index.html directly into browser or use extensions like live server. 33 | 34 | ## Technologies Used 35 | 36 | - HTML, CSS, JavaScript 37 | 38 | -------------------------------------------------------------------------------- /Tic Tac Toe/excited.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Tic Tac Toe/excited.gif -------------------------------------------------------------------------------- /Tic Tac Toe/gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Tic Tac Toe/gameover.mp3 -------------------------------------------------------------------------------- /Tic Tac Toe/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Tic Tac Toe/music.mp3 -------------------------------------------------------------------------------- /Tic Tac Toe/ting.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Tic Tac Toe/ting.mp3 -------------------------------------------------------------------------------- /ToDo List/Screenshot from 2023-10-04 22-48-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/ToDo List/Screenshot from 2023-10-04 22-48-23.png -------------------------------------------------------------------------------- /ToDo List/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Simple To-Do List 5 | 6 | 7 | 8 |
    9 |

    My Task List

    10 |
    11 | 12 | 13 |
    14 |
      15 |
    16 |
    17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Translator App/README.md: -------------------------------------------------------------------------------- 1 | # Translator App 2 | 3 | This is a web application that allows users to translate text from one language to another. It is built using HTML, CSS, and JavaScript. 4 | 5 | ## Demonstartion 6 | image 7 | 8 | 9 | ## Features 10 | 11 | - Translate text from one language to another 12 | - Supports multiple languages 13 | - User-friendly interface 14 | 15 | ## Installation 16 | 17 | 1. Clone the repository 18 | 2. Open the `index.html` file in your web browser 19 | 20 | ## Usage 21 | 22 | 1. Enter the text you want to translate in the input field 23 | 2. Select the source language and target language from the dropdown menus 24 | 3. Click the "Translate" button to see the translated text 25 | 26 | ## Credits 27 | 28 | 29 | This game was created by Avnee Goyal (github.com/avnee-gy) using the following technologies: 30 | 31 | - HTML 32 | - CSS 33 | - JavaScript 34 | 35 | -------------------------------------------------------------------------------- /Translator App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | A Language Translator 9 | 10 | 11 | 12 |
    13 |
    14 |
    15 | 16 |
      17 |
    • 18 |
      19 | 20 | 21 |
      22 | 23 |
      • 24 |
    • 25 | 26 |
    • 27 | 28 |
      29 | 30 | 31 |
      32 |
      • 33 |
    34 | 35 |
    36 |
    37 | 38 |
    39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Typing Speed Test/ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Typing Speed Test/ss.png -------------------------------------------------------------------------------- /Weather App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # Local Netlify folder 26 | .netlify 27 | -------------------------------------------------------------------------------- /Weather App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^6.4.2", 7 | "@fortawesome/free-solid-svg-icons": "^6.4.2", 8 | "@heroicons/react": "^2.0.18", 9 | "@testing-library/jest-dom": "^5.17.0", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "axios": "^1.5.0", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "web-vitals": "^2.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "tailwindcss": "^3.3.3" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Weather App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather App/public/favicon.ico -------------------------------------------------------------------------------- /Weather App/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather App/public/logo192.png -------------------------------------------------------------------------------- /Weather App/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather App/public/logo512.png -------------------------------------------------------------------------------- /Weather App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Weather App/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Weather App/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather App/src/App.css -------------------------------------------------------------------------------- /Weather App/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Weather App/src/LoadingComponent.js: -------------------------------------------------------------------------------- 1 | function Loading() { 2 | return ( 3 |
    4 |
    5 |
    6 | ); 7 | } 8 | 9 | export default Loading; 10 | -------------------------------------------------------------------------------- /Weather App/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /Weather App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Weather App/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Weather App/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Weather App/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: {}, 8 | }, 9 | plugins: [], 10 | } 11 | 12 | -------------------------------------------------------------------------------- /Weather Teller/README.md: -------------------------------------------------------------------------------- 1 | This simple weather teller resolves issue #12 2 | As the requirements suggest, this web app seamlessly allows users to enter a location and get current weather information such as temperature, humidity and wind speed. It also displays an image of current weather status. 3 | The api I've used is : https://openweathermap.org/api 4 | 5 | my github : https://github.com/tejus05 6 | 7 | demo : https://tejus05.github.io/vanilla-javascript-projects/weather-app/ 8 | -------------------------------------------------------------------------------- /Weather Teller/images/Clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Clear.png -------------------------------------------------------------------------------- /Weather Teller/images/Clouds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Clouds.png -------------------------------------------------------------------------------- /Weather Teller/images/Drizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Drizzle.png -------------------------------------------------------------------------------- /Weather Teller/images/Haze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Haze.png -------------------------------------------------------------------------------- /Weather Teller/images/Humidity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Humidity.png -------------------------------------------------------------------------------- /Weather Teller/images/Mist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Mist.png -------------------------------------------------------------------------------- /Weather Teller/images/Rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Rain.png -------------------------------------------------------------------------------- /Weather Teller/images/Snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Snow.png -------------------------------------------------------------------------------- /Weather Teller/images/Wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/Wind.png -------------------------------------------------------------------------------- /Weather Teller/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/search.png -------------------------------------------------------------------------------- /Weather Teller/images/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Weather Teller/images/weather.png -------------------------------------------------------------------------------- /Web Clock/Analog Clock/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/Analog Clock/clock.png -------------------------------------------------------------------------------- /Web Clock/Analog Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Analog Clock 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Web Clock/Analog Clock/script.js: -------------------------------------------------------------------------------- 1 | const hr = document.querySelector("#hr"); 2 | const mn = document.querySelector("#mn"); 3 | const sc = document.querySelector("#sc"); 4 | 5 | const deg = 6; 6 | 7 | setInterval(() => { 8 | let day = new Date(); 9 | let hh = day.getHours() * 30; 10 | let mm = day.getMinutes() * deg; 11 | let ss = day.getSeconds() * deg; 12 | console.log(hh); 13 | console.log(mm); 14 | console.log(ss); 15 | hr.style.transform = `rotate(${hh+(mm/12)}deg)`; 16 | mn.style.transform = `rotate(${mm}deg)`; 17 | sc.style.transform = `rotate(${ss}deg)`; 18 | }); 19 | -------------------------------------------------------------------------------- /Web Clock/Digital Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Digital Clock 10 | 11 | 12 | 13 |
    14 |
    Day, Month 00, Year
    15 |
    00: 16 | 00: 00 AM
    17 |
    18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Web Clock/Digital Clock/script.js: -------------------------------------------------------------------------------- 1 | function updateClock() { 2 | 3 | var now = new Date(); 4 | var dayname = now.getDay(), 5 | month = now.getMonth(), 6 | date = now.getDate(), 7 | year = now.getFullYear(), 8 | hours = now.getHours(), 9 | min = now.getMinutes(), 10 | sec = now.getSeconds(), 11 | period = "AM"; 12 | 13 | var months = ["Janaury", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] 14 | var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"] 15 | 16 | if (hours == 0) 17 | hours = 12; 18 | 19 | if (hours > 12) { 20 | // hours = hours -12; 21 | period = "PM"; 22 | } 23 | 24 | // add 0 in the beginning of number if less than 10 25 | hours = (hours < 10) ? "0" + hours : hours; 26 | min = (min < 10) ? "0" + min : min; 27 | sec = (sec < 10) ? '0' + sec : sec; 28 | 29 | document.querySelector("#dayname").innerHTML = days[dayname]; 30 | document.querySelector("#month").innerHTML = months[month]; 31 | document.querySelector("#daynum").innerHTML = date; 32 | document.querySelector("#year").innerHTML = year; 33 | document.querySelector("#hour").innerHTML = hours; 34 | document.querySelector("#minutes").innerHTML = min; 35 | document.querySelector("#seconds").innerHTML = sec; 36 | document.querySelector("#period").innerHTML = period; 37 | 38 | } 39 | 40 | function intiClock() { 41 | updateClock(); 42 | window.setInterval("updateClock()", 1); 43 | } 44 | 45 | intiClock(); 46 | -------------------------------------------------------------------------------- /Web Clock/Digital Clock/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | background: #10101e; 13 | } 14 | 15 | .datetime { 16 | color: #fff; 17 | background: #10101e; 18 | width: 340px; 19 | padding: 15px 10px; 20 | border: 3px solid #2e94e3; 21 | border-radius: 5px; 22 | -webkit-box-reflect: below 1px 23 | linear-gradient(transparent, rgba(255, 255, 255, 0.1)); 24 | transition: 0.5s; 25 | } 26 | 27 | .datetime:hover { 28 | background-color: #2e94e3; 29 | box-shadow: 0 0 30px #2e94e3; 30 | } 31 | 32 | .date { 33 | font-size: 20px; 34 | font-weight: 600; 35 | text-align: center; 36 | letter-spacing: 3px; 37 | } 38 | 39 | .time { 40 | font-size: 60px; 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | } 45 | 46 | .time span:not(:last-child) { 47 | position: relative; 48 | margin: 0 6px; 49 | font-weight: 600; 50 | text-align: center; 51 | letter-spacing: 3px; 52 | } 53 | 54 | .time span:last-child { 55 | background: #2e94e3; 56 | font-size: 30px; 57 | font-weight: 600; 58 | text-transform: uppercase; 59 | margin-top: 10px; 60 | padding: 0 7px; 61 | border-radius: 3px; 62 | } 63 | 64 | -------------------------------------------------------------------------------- /Web Clock/Screenshots/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/Screenshots/demo.gif -------------------------------------------------------------------------------- /Web Clock/Screenshots/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/Screenshots/ss1.png -------------------------------------------------------------------------------- /Web Clock/Screenshots/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/Screenshots/ss2.png -------------------------------------------------------------------------------- /Web Clock/Screenshots/ss3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/Screenshots/ss3.png -------------------------------------------------------------------------------- /Web Clock/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/img1.png -------------------------------------------------------------------------------- /Web Clock/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Web Clock/img2.png -------------------------------------------------------------------------------- /Web Clock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Clock 10 | 11 | 12 | 13 |
    14 |
    15 | 16 |

    Analog Clock

    17 |
    18 | 19 |

    Digital Clock

    20 |
    21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Web Clock/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(234, 236, 201); 9 | } 10 | 11 | .container { 12 | display: flex; 13 | justify-content: center; 14 | margin-top: 100px; 15 | gap: 100px; 16 | } 17 | 18 | .analog, 19 | .digital { 20 | width: 350px; 21 | height: 350px; 22 | transition: transform 0.8s ease; 23 | } 24 | 25 | img { 26 | height: 100%; 27 | width: 100%; 28 | } 29 | 30 | h1 { 31 | text-align: center; 32 | margin-top: 10px; 33 | color: rgb(0, 0, 165); 34 | } 35 | 36 | .analog:hover, 37 | .digital:hover { 38 | transform: scale(1.08); 39 | } 40 | 41 | -------------------------------------------------------------------------------- /Whack-A-Mole/dirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Whack-A-Mole/dirt.png -------------------------------------------------------------------------------- /Whack-A-Mole/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Whack a Mole! 10 | 11 | 12 | 13 |

    Whack-a-mole!

    0 14 |
    Time: 10
    15 | 16 | 17 |
    18 |
    19 |
    20 |
    21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 | 34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 |
    41 | 42 |
    43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Whack-A-Mole/mole.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Prodigy-InfoTech/Web-Development-Projects/1415481ea4170382584ee2b363444534825b436f/Whack-A-Mole/mole.png -------------------------------------------------------------------------------- /Word Scramble/README.md: -------------------------------------------------------------------------------- 1 | # Word Scramble Game 2 | 3 | This is a simple word scramble game made using HTML, CSS, and JS. The game presents the player with a scrambled word and a set of letters. The player must unscramble the word by rearranging the letters and typing in the correct answer. 4 | 5 | ## Demonstration 6 | 7 | image 8 | 9 | 10 | ## How to Play 11 | 12 | 1. Open the `index.html` file in your web browser. 13 | 2. Click the "Start Game" button to begin. 14 | 3. A scrambled word and a set of letters will appear on the screen. 15 | 4. Rearrange the letters to form the correct word. 16 | 5. Type your answer into the text box and click "Submit". 17 | 6. If your answer is correct, you will get a new word. If not, you can try again. 18 | 19 | 20 | ## Technologies Used 21 | 22 | - HTML 23 | - CSS 24 | - JavaScript 25 | 26 | ## Credits 27 | 28 | This game was created by Avnee Goyal (github.com/avnee-gy) 29 | -------------------------------------------------------------------------------- /Word Scramble/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Word Scramble Game 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    Word Scramble

    14 |
    15 |

    16 |
    17 |

    Hint:

    18 |

    Time Left: 30s

    19 |
    20 | 21 |
    22 | 23 | 24 |
    25 |
    26 |
    27 | 28 | -------------------------------------------------------------------------------- /guestbook/Readme.md: -------------------------------------------------------------------------------- 1 | # Guestbook Project 2 | 3 | Welcome to the Guestbook Project! This simple web application allows users to leave messages and comments for your website. It's a great way to engage with your visitors and collect their feedback. 4 | ## Demo 5 | 6 | ![image](https://github.com/ankitsharma495/Web-Development-Projects/assets/113293888/4084371c-dcba-428d-b48a-677ff6470384) 7 | 8 | ## Features 9 | 10 | - Shows real-time feedback on basis of user's comments and their names. 11 | - Simple and intuitive user interface. 12 | - After clicking the submit button he can see his feedback below the submit button. 13 | 14 | ## Getting Started 15 | 16 | 1. Clone the repository or download the ZIP file. 17 | 18 | ```bash 19 | git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git 20 | ``` 21 | 22 | 2. Open the project folder. 23 | 24 | ```bash 25 | cd guestbook 26 | ``` 27 | 28 | 3. Run `index.html` in your preferred web browser. 29 | 30 | # Usage 31 | 32 | 1. Open the index.html file. 33 | 2. Input your name and comments. 34 | 3. Click on the "Submit" button. 35 | 4. Your name and comments will be displayed. 36 | 37 | ## Contributing 38 | 39 | 1. Fork the repository. 40 | 2. Create a new branch for your feature or bug fix. 41 | 3. Make your changes and test them thoroughly. 42 | 4. Submit a pull request with a clear description of your changes. 43 | 44 | ## License 45 | 46 | This project is licensed under the MIT License. 47 | 48 | -------------------------------------------------------------------------------- /guestbook/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Guestbook 8 | 9 | 10 |
    11 |
    12 |

    GUESTBOOK

    13 |
    14 |

    15 | 16 |

    17 |

    18 | 19 |

    20 |
    21 | 22 |
    23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /guestbook/script.js: -------------------------------------------------------------------------------- 1 | function addComment() { 2 | const nameInput = document.getElementById('name'); 3 | const commentInput = document.getElementById('comment'); 4 | const commentsContainer = document.getElementById('comments'); 5 | 6 | const name = nameInput.value; 7 | const comment = commentInput.value; 8 | 9 | if (name.trim() === '' || comment.trim() === '') { 10 | alert('Name and comment cannot be empty!'); 11 | return; 12 | } 13 | 14 | const commentElement = document.createElement('div'); 15 | commentElement.classList.add('comment'); 16 | commentElement.innerHTML = `${name}: ${comment}`; 17 | 18 | commentsContainer.appendChild(commentElement); 19 | 20 | nameInput.value = ''; 21 | commentInput.value = ''; 22 | } 23 | --------------------------------------------------------------------------------