diff --git a/Existing_API_Collection/Jokegenerator_API/README.md b/Existing_API_Collection/Jokegenerator_API/README.md new file mode 100644 index 0000000..0d297d5 --- /dev/null +++ b/Existing_API_Collection/Jokegenerator_API/README.md @@ -0,0 +1,24 @@ +# Random Jokes API +Welcome to the Joke Generator API! This API offers an innovative approach to accessing an this api is use for the generating random joke and which helps for bigger to learn the concept or how to use api + +## Features +- **Get Random Jokes:** By usinf this api you get random jokes. +## Technologies Used +- HTML +- CSS +- JavaScript +- API ( for fetching data ) + +# API Integration +This application uses `https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single` to fetch the data. + +## Installation +To set up the Dictionary API locally, follow these steps: + +- Clone the repository +- Switch to Existing_API_Collection folder `cd Existing_API_Collection` +- Now switch to CountryAPI folder `cd Jokegenerator_API` +- Run command `.\/index.html` + +## Screenshots +![Screenshot (395)](![alt text](image.png)) diff --git a/Existing_API_Collection/Jokegenerator_API/image.png b/Existing_API_Collection/Jokegenerator_API/image.png new file mode 100644 index 0000000..81046b5 Binary files /dev/null and b/Existing_API_Collection/Jokegenerator_API/image.png differ diff --git a/Existing_API_Collection/Jokegenerator_API/index.html b/Existing_API_Collection/Jokegenerator_API/index.html new file mode 100644 index 0000000..e6a2c65 --- /dev/null +++ b/Existing_API_Collection/Jokegenerator_API/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + + +
+ 😂 +

+ hiiiiiiiiii +

+ +
+ + + + \ No newline at end of file diff --git a/Existing_API_Collection/Jokegenerator_API/script.js b/Existing_API_Collection/Jokegenerator_API/script.js new file mode 100644 index 0000000..2d92f57 --- /dev/null +++ b/Existing_API_Collection/Jokegenerator_API/script.js @@ -0,0 +1,15 @@ +const jokeContainer = document.getElementById("joke"); +const btn = document.getElementById("btn"); +const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single"; + +let getJoke = () => { + jokeContainer.classList.remove("fade"); + fetch(url) + .then(data => data.json()) + .then(item =>{ + jokeContainer.textContent = `${item.joke}`; + jokeContainer.classList.add("fade"); + }); +} + +getJoke(); \ No newline at end of file diff --git a/Existing_API_Collection/Jokegenerator_API/style.css b/Existing_API_Collection/Jokegenerator_API/style.css new file mode 100644 index 0000000..d87f00a --- /dev/null +++ b/Existing_API_Collection/Jokegenerator_API/style.css @@ -0,0 +1,54 @@ +*{ padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + background-color: rgb(63, 182, 238); +} +.wrapper{ + width: 80vmin; + padding: 50px 40px; + background-color: rgb(22, 22, 22); + position: absolute; + transform: translate(-50%, -50%); + top:50%; + left: 50%; + border-radius:5px; + box-shadow: rgba(184, 185, 185, 0.385) 20px 20px 40px ; +} +span{ + display: block; + text-align: center; + font-size: 100px; +} + +p{ + font-size: 16px; + color: white; + font-weight: 400; + text-align: center; + word-break: break-word; + line-height: 35px; + margin: 30px; + +} +button{ + + display: block; + background-color:rgb(63, 182, 238) ; + border: none; + padding:15px ; + color: aliceblue; + border-radius: 4px; + font-size: 18px; + font-weight: 600; + padding: 12px 25px; + margin:0 auto; + cursor: pointer; + +} +button:hover{ + color: black; + background-color: rgb(255, 153, 0); +} \ No newline at end of file