Skip to content

Commit

Permalink
Merge pull request #125 from Paarisha1/main
Browse files Browse the repository at this point in the history 
Random Joke Generator
  • Loading branch information
@shrey141102
shrey141102 authored Dec 15, 2023
2 parents 273964b + f3ed1dd commit 18e1f3c
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 0 deletions.
19 changes: 19 additions & 0 deletions Random Joke Generator/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@

Certainly! Here's an overall description of the Random Joke Generator using HTML, CSS, and JavaScript:

Overview:
The Random Joke Generator is a web application designed to provide users with a dose of humor by generating and displaying random jokes. It's a simple and interactive tool that allows users to specify the number of jokes they want to see and then fetches jokes from an external API.

Technologies Used:
HTML: The structure of the web page is defined using HTML. It includes elements for input, buttons, and a container to display jokes.

CSS: The styling and layout of the application are managed using CSS. It ensures a visually appealing and user-friendly interface.

JavaScript: The functionality of the Random Joke Generator is implemented using JavaScript. It handles user interactions, fetches jokes from an API, and dynamically updates the content on the web page.

Features:
'Number Input: Users can enter the number of jokes they want to generate by providing input in a number field.

Generate Button: The "Generate Jokes" button triggers the fetching and display of random jokes based on the user's input.

Joke Container: The generated jokes are displayed in a designated container on the web page.
30 changes: 30 additions & 0 deletions Random Joke Generator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="wrapper">
<span>&#128514;</span>
<p id="joke"></p>
<button id="btn">Get Random Joke</button>
</div>
<script src="script.js"></script>

</head>

<body>

<!--This HTML document creates a simple web page that displays a wrapper containing an emoji, a paragraph element with an ID of "joke," and a button with an ID of "btn." The page includes a link to an external CSS file ("style.css") and an external JavaScript file ("script.js"). Here's a breakdown:-->
<!--This meta tag sets the viewport width to the device width and sets the initial scale to 1.0, ensuring proper rendering on various devices.-->
<!--This line links to an external CSS file named "style.css" to apply styles to the HTML elements.-->
<!--The content is wrapped in a div element with a class of "wrapper."
It includes a span element with a smiling emoji (😂).
A p element with an ID of "joke" is present, likely intended to display a random joke.
A button element with an ID of "btn" is provided to trigger the retrieval of a random joke.-->
<!--This line includes an external JavaScript file named "script.js" to add dynamic behavior and functionality to the webpage.-->
26 changes: 26 additions & 0 deletions Random Joke Generator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
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");
});
}
btn.addEventListener("click",getJoke);
getJoke();
/*const jokeContainer = document.getElementById("joke");: This line gets a reference to the HTML element with the id "joke" and stores it in the jokeContainer variable.
const btn = document.getElementById("btn");: This line gets a reference to the HTML button element with the id "btn" and stores it in the btn variable.
const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";: This is the URL of the JokeAPI, specifying parameters such as joke type, blacklist flags to exclude certain types of jokes, and the output type (single joke).
The getJoke function is defined to fetch a joke from the JokeAPI using the fetch function. It then updates the text content of the jokeContainer with the retrieved joke and adds a fade-out effect by toggling the "fade" class.
btn.addEventListener("click", getJoke);: This line adds an event listener to the button. When the button is clicked, it triggers the getJoke function to fetch and display a new joke.
getJoke();: This line calls the getJoke function once when the page loads to display an initial joke.*/
183 changes: 183 additions & 0 deletions Random Joke Generator/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
background-color: #fab22e;
}
.wrapper{
width: 80vmin;
padding: 50px 40px;
background-color: #15161a;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 20px 20px 40px rgba(97,63,0,0.4);
}
span{
display: block;
text-align: center;
font-size: 100px;
}
p{
font-size: 16px;
color: #ffffff;
font-weight: 400;
text-align: center;
word-wrap: break-word;
line-height: 35px;
margin: 30px 0;
opacity: 0;
}
.fade{
opacity: 1;
transition: opacity 1.5s;
}
button{
display: block;
background-color: #fab22e;
border: none;
padding: 5px;
font-size: 18px;
color: #171721;
font-weight: 600;
padding: 12px 25px;
margin: 0 auto;
border-radius: 5px;
cursor: pointer;
outline: none;
}
/*This CSS code provides styles for a webpage with a wrapper containing an emoji, a paragraph for displaying jokes, and a button for fetching random jokes. Here's an explanation of the CSS styles:
Universal Selector Reset:
css
Copy code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
Applies a reset to remove default padding and margin on all elements.
Sets the box-sizing property to border-box to include padding and border in the element's total width and height.
Specifies the "Rubik" font for the entire document.
Body Styling:

css
Copy code
body {
background-color: #fab22e;
}
Sets the background color of the entire body to a shade of yellow (#fab22e).

Wrapper Styling:

css
Copy code
.wrapper {
width: 80vmin;
padding: 50px 40px;
background-color: #15161a;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 20px 20px 40px rgba(97, 63, 0, 0.4);
}
Styles the wrapper div:
Sets its width to 80vmin (viewport minimum width).
Provides padding inside the wrapper.
Sets the background color to a dark shade (#15161a).
Positions it absolutely in the center of the viewport using transform and top/left properties.
Adds a border-radius for rounded corners.
Applies a box shadow for a subtle visual effect.
Emoji Styling:

css
Copy code
span {
display: block;
text-align: center;
font-size: 100px;
}
Styles the span element:

Sets it to block-level, making it a block container.
Centers the text inside the span.
Sets the font size to 100px.
Paragraph Styling:

css
Copy code
p {
font-size: 16px;
color: #ffffff;
font-weight: 400;
text-align: center;
word-wrap: break-word;
line-height: 35px;
margin: 30px 0;
opacity: 0;
}
Styles the p (paragraph) element:

Sets the font size to 16px.
Sets the text color to white (#ffffff).
Sets the font weight to 400 (normal).
Centers the text inside the paragraph.
Allows word wrapping.
Sets the line height to 35px.
Adds margin above and below the paragraph.
Initializes the opacity to 0, making it initially invisible.
Fade Effect Styling:

css
Copy code
.fade {
opacity: 1;
transition: opacity 1.5s;
}
Styles the .fade class:

Sets the opacity to 1 (fully visible) when the class is applied.
Specifies a transition effect for the opacity property over 1.5 seconds.
Button Styling:

css
Copy code
button {
display: block;
background-color: #fab22e;
border: none;
padding: 5px;
font-size: 18px;
color: #171721;
font-weight: 600;
padding: 12px 25px;
margin: 0 auto;
border-radius: 5px;
cursor: pointer;
outline: none;
}
Styles the button element:

Sets it to block-level.
Defines background color.
Removes border and adds padding.
Sets font size, color, and weight.
Adds more padding and margin for spacing.
Applies border-radius for rounded corners.
Sets a pointer cursor for better usability.
Removes the default outline.
Overall, these styles create a visually appealing and centered layout for displaying jokes with a fade-in effect on the paragraph. The color scheme includes shades of yellow and dark gray for a modern and cohesive design.





0 comments on commit 18e1f3c

Please sign in to comment.