diff --git a/Index.md b/Index.md index 5fb8d6d5c..9eba78eb6 100644 --- a/Index.md +++ b/Index.md @@ -47,6 +47,7 @@ | [Github Profile Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/GitHub%20Profile%20Finder) | GitHub Profile Finder will fetch the GitHub details like the user's name, number of repositories, bio, number of followers, number of followings, and profile pic just by entering the username and clicking on Search User. | | [Image Filter App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Image-Filter-App) | An awesome Image Filter App written in HTML, CSS, and JavaScript with CamanJS. | | [Image Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/image-finder-app) | A single-page web application that uses the Pixabay API to display images according to user search. | +| [simple joke app](https://github.com/PavanKuppili/Web-dev-mini-projects/tree/added-jock-app/joke%20app) | a single page joke app made of html css and js that fetch jokes from joke api| | [JavaScript Color Change App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20BUTTON%20APP) | It is a basic web app where the user can select a color from the options that are given on the web app, and as he clicks on that option, all the buttons' background color changes to that color. | | [JavaScript Tip Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Tip%20Calculator) | This script consists of user input --> total bill amount and bill percent, and it calculates the tip amount and the total bill. | | [Love Calculator App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/LOVE-CALCULATOR) | Love calculator is a fun application where friends and couples can calculate the percentage of love between them. | diff --git a/joke app/README.md b/joke app/README.md new file mode 100644 index 000000000..ff6cfabd5 --- /dev/null +++ b/joke app/README.md @@ -0,0 +1,39 @@ +# Random Joke Generator + +A tiny, beautiful Random Joke Generator built with HTML, CSS and a small client-side JavaScript fetch call. + +This mini project shows a single-page app that fetches a random joke from the "Official Joke API" and displays it with a simple glassmorphism UI. + +## Features + +- Click a button to fetch and display a random joke (setup + punchline). +- Lightweight: no build tools or server required β€” just a browser. +- Responsive layout and simple animations. + +## Files + +- `index.html` β€” the single HTML page. Contains the UI and the small `fetchJoke()` script. +- `style.css` β€” styling (glassmorphism effect, responsive rules, and animations). + +## How to run + +1. Clone or download the repository to your machine. +2. Open `index.html` in a modern browser (Chrome, Edge, Firefox, Safari). + +No installation is required. The app uses the public "Official Joke API" endpoint: + +``` +https://official-joke-api.appspot.com/random_joke +``` +if you use VS code then live server will work. +here are some images for reference +![alt text](images/image1.png) +![alt text](images/image.png) +## Notes & Troubleshooting + +- The app fetches jokes from a public API. If the API is down or rate-limited, the button may fail silently β€” try refreshing the page or check the browser console for fetch errors. +- If you need to support older browsers, consider adding a small fallback or polyfill for `fetch`. + +--- + +Enjoy the jokes! πŸ˜„ \ No newline at end of file diff --git a/joke app/images/image.png b/joke app/images/image.png new file mode 100644 index 000000000..6eaf04167 Binary files /dev/null and b/joke app/images/image.png differ diff --git a/joke app/images/image1.png b/joke app/images/image1.png new file mode 100644 index 000000000..5d6fa52a1 Binary files /dev/null and b/joke app/images/image1.png differ diff --git a/joke app/index.html b/joke app/index.html new file mode 100644 index 000000000..1810aa2e3 --- /dev/null +++ b/joke app/index.html @@ -0,0 +1,25 @@ + + + + + + JOKE + + +
+
+

Random Joke Generator

+

Click the button for a joke!

+ +
+ + +

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /

+ \ No newline at end of file diff --git a/joke app/style.css b/joke app/style.css new file mode 100644 index 000000000..60e350e86 --- /dev/null +++ b/joke app/style.css @@ -0,0 +1,112 @@ +/* Global Styles */ +body { + font-family: 'Poppins', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, #f0f0f0, #d9d9d9); + background-size: 400% 400%; + margin: 0; +} + +/* Joke Container with Glassmorphism Effect */ +.joke-container { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + padding: 30px; + border-radius: 15px; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); + text-align: center; + width: 400px; + color: black; +} + +/* Title */ +h2 { + font-size: 24px; + margin-bottom: 15px; +} + +/* Joke Text */ +#joke { + font-size: 18px; + font-weight: bold; + margin-bottom: 20px; + color: black; +} + +/* Fetch Button */ +button { + padding: 12px; + background: rgba(255, 255, 255); + border: solid 2px black; + border-radius: 10px; + cursor: pointer; + font-size: 18px; + transition: 0.3s ease-in-out; + color: black; +} + +button:hover { + color: white; + background: rgba(0, 0, 0, 0.5); +} + +/* Smooth Fade-in Animation */ +.joke-container { + animation: fadeIn 0.8s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Responsive Adjustments */ +@media screen and (max-width: 768px) { + .joke-container { + width: 90%; + padding: 20px; + } + + h2 { + font-size: 20px; + } + + #joke { + font-size: 16px; + } + + button { + font-size: 16px; + padding: 10px; + } +} + +@media screen and (max-width: 480px) { + .joke-container { + width: 95%; + padding: 15px; + } + + h2 { + font-size: 18px; + } + + #joke { + font-size: 14px; + } + + button { + font-size: 14px; + padding: 8px; + } +} \ No newline at end of file