Skip to content

Handle api call failure fixed #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rahulm682 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Handle api call failure fixed #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CONTRIBUTORS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ Here's to the crazy ones:

<a href="https://github.com/DuP-491"><sub><b>Divyansh Upadhyay</b></sub></a>
<a href="https://github.com/dev-lovedeep"><sub><b>Lovedeep singh kamal</b></sub></a>
<a href="https://github.com/NeerajChatterjee"><sub><b>Neeraj Chatterjee</b></sub></a>
<a href="https://github.com/NeerajChatterjee"><sub><b>Neeraj Chatterjee</b></sub></a>
<a href="https://github.com/rahulm682"><sub><b>Rahul Maurya</b></sub></a>
63 changes: 54 additions & 9 deletions src/components/Meme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export default function Meme() {
useEffect(function () {
fetch(api_url)
.then((data) => data.json())
.then((data) => setAllMemes(data.data.memes));
.then((data) => setAllMemes(data.data.memes))
.catch((err) => document.write("<h1>Cannot connect to the server. Try after some time</h1>"));
}, []);

//this state stores information about the current meme
Expand All @@ -23,12 +24,50 @@ export default function Meme() {
url: "",
});

const [display, setDisplay] = useState(false)

const handleTopText = (e) => {
setMeme((prev) => ({
...prev,
topText: e.target.value
}));
}

const handleBottomText = (e) => {
setMeme((prev) => ({
...prev,
bottomText: e.target.value
}));
}


const handleClick = (e) => {
if (e.target.name == "topText")
setMeme((prev) => ({
...prev,
topText: ""
}));
else if (e.target.name == "bottomText") setMeme((prev) => ({
...prev,
bottomText: ""
}));
}

function getRandomMeme() {
// const {topText, bottomText} = meme
// if(topText=="" && bottomText=="") {
// alert("Please fill any one of the text")
// return
// }
let index = Math.floor(Math.random() * allMemes.length);
setMeme((prev) => ({
...prev,
url: allMemes[index].url,
}));

setDisplay(() => ({
display: true
}))
}

//this is for handling the input
Expand All @@ -41,17 +80,17 @@ export default function Meme() {
}

// this is for uploading the image from the PC
function uploadImage(event){
function uploadImage(event) {
console.log(event.target.files[0].type);

// accepts image in the form of PNG/JPG/JPEG
if (event.target.files[0].type === "image/png" || event.target.files[0].type === "image/jpg" || event.target.files[0].type === "image/jpeg"){
if (event.target.files[0].type === "image/png" || event.target.files[0].type === "image/jpg" || event.target.files[0].type === "image/jpeg") {
setMeme((prev) => ({
...prev,
url: URL.createObjectURL(event.target.files[0])
}))
}
else{
else {
// Alert is shown when there is incorrect file chosen
alert("Please upload the image in the correct format (PNG/JPEG/JPG)!")
}
Expand All @@ -65,26 +104,32 @@ export default function Meme() {
type="text"
placeholder="text1"
name="topText"
value={meme.topText}
onChange={handleTopText}
/>
<input
className="form__text"
type="text"
placeholder="text2"
name="bottomText"
value={meme.bottomText}
onChange={handleBottomText}
/>
<button className="form__button" onClick={getRandomMeme}>
Generate Meme
</button>
<label for="image-upload" className="form__button upload_image__button">
<label htmlFor="image-upload" className="form__button upload_image__button">
Upload Meme Image
</label>
<input accept="image/*" id="image-upload" type="file" onChange={uploadImage} />
</div>
<div className="meme">
{display && <div className="meme">
{meme.url && <img className="meme__image" src={meme.url} />}
{meme.url && <h2 className="meme__text">{meme.topText}</h2>}
{meme.url && <h2 className="meme__text">{meme.bottomText}</h2>}
</div>

{meme.url && <><h2 className="meme__text">{meme.topText}</h2>{meme.topText && <button name="topText" onClick={handleClick}>remove</button>}</>}

{meme.url && <><h2 className="meme__text">{meme.bottomText}</h2>{meme.bottomText && <button name="bottomText" onClick={handleClick}>remove</button>}</>}
</div>}
</div>
);
}