Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9e079c8

Browse files
author
visualdennis
committed
fixed adviceGen mobile, githubUser route fix
1 parent 98e131d commit 9e079c8

File tree

7 files changed

+67
-14
lines changed

7 files changed

+67
-14
lines changed

‎src/App.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import OrderSummary from './components/newbie/OrderSummary/OrderSummary';
1818
import ArticlePreviewCard from './components/newbie/ArticlePreviewCard/ArticlePreviewCard';
1919
import NewsHome from './components/junior/newsHome/NewsHome';
2020
import GithubUser from './components/junior/githubUser/GithubUser';
21+
import Error from './Error';
2122

2223
const App = () => {
2324

@@ -43,12 +44,14 @@ AOS.init({
4344
<Route path='/components/order-summary' element={<OrderSummary></OrderSummary>}/>
4445
<Route path='/components/article-preview' element={<ArticlePreviewCard></ArticlePreviewCard>}/>
4546
<Route path='/components/news-homepage' element={<NewsHome></NewsHome>}/>
47+
<Route path='/components/github-user' element={<GithubUser></GithubUser>}/>
4648

4749
{/* Pages */}
4850
<Route path='/pages' element={<Pages></Pages>}/>
4951

5052
{/* Working on currently */}
51-
<Route path='/build' element={<GithubUser></GithubUser>}/>
53+
{/* <Route path='/build' element={<GithubUser></GithubUser>}/> */}
54+
<Route path='*' element={<Error></Error>}></Route>
5255
</Routes>
5356
</Router>
5457
</div>

‎src/Error.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import { Link } from 'react-router-dom'
3+
4+
const Error = () => {
5+
return (
6+
<div className='df' style={{height:'100vh'}}>
7+
<div style={{display:'flex',flexDirection:'column'}}>
8+
<p style={{fontSize:'2em'}}>404 NOT FOUND</p>
9+
<Link to='/'>
10+
<button className="app-main-item-btn">Back to Home <i class="bi bi-arrow-right"></i></button>
11+
</Link>
12+
</div>
13+
14+
</div>
15+
)
16+
}
17+
18+
export default Error

‎src/components/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ export const componentCardData = [
88
type: "component",
99
link:"/components/news-homepage",
1010
},
11+
{
12+
id:"10",
13+
title: "Github User Search",
14+
desc: "Fully responsive, interactive component allowing users to search real GitHub Users and displays user data using Fetch API. Includes Light & Dark modes.",
15+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/Challenges/nr37our6z7faztmhwj9r.jpg?__cpo=aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20.jpg",
16+
category:"junior",
17+
type: "component",
18+
link:"/components/github-user",
19+
},
1120
{
1221
id:"1",
1322
title: "NFT preview card component",

‎src/components/junior/adviceGenerator/Advice/Advice.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
align-items: center;
99
background-color: var(--dark-grayish-blue);
1010
margin-bottom: 60px;
11+
width: 100%;
1112
}
1213

1314
.advice-title {
@@ -55,6 +56,19 @@
5556

5657
.cat-img {
5758
max-width: 50%;
59+
max-height: 150px;
5860
margin-top: 30px;
5961
margin-bottom: 20px;
6062
}
63+
64+
@media only screen and (max-width: 550px) {
65+
.deco > img {
66+
width: 100%;
67+
}
68+
}
69+
70+
@media only screen and (max-width: 400px) {
71+
.advice-quote {
72+
font-size: 18px;
73+
}
74+
}

‎src/components/junior/adviceGenerator/Advice/Advice.jsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,31 @@ import pattern from '../pattern-divider-desktop.svg'
77

88
const Advice = () => {
99

10-
const [advice, setAdvice] = useState('')
10+
const [advice, setAdvice] = useState('Click on Dice below to get an advice')
1111
const [id, setId] = useState('')
1212

1313
const [cat, setCat] = useState('')
1414

1515
const url = 'https://api.adviceslip.com/advice'
1616

1717
const getPost = async () => {
18-
const res = await axios.get(url)
19-
const advice = res.data.slip.advice
20-
21-
const catData = await axios.get('https://api.thecatapi.com/v1/images/search')
22-
const cat = catData.data[0].url
23-
setCat(cat)
24-
25-
const id = res.data.slip.id
26-
setAdvice(advice);
27-
setId(id)
28-
18+
try {
19+
const res = await axios.get(url)
20+
const advice = res.data.slip.advice
21+
setAdvice(advice);
22+
const id = res.data.slip.id
23+
setId(id)
24+
25+
const catData = await axios.get('https://api.thecatapi.com/v1/images/search')
26+
const cat = catData.data[0].url
27+
setCat(cat)
28+
} catch (err) {
29+
console.log(err);
30+
}
2931
}
3032

33+
{console.log(advice)}
34+
3135

3236
return (
3337
<div data-aos="fade-in" data-aos-delay="250" data-aos-duration="500" className='advice-container'>
@@ -36,7 +40,7 @@ const Advice = () => {
3640
<div className="deco">
3741
<img src={pattern} alt="" />
3842
</div>
39-
{/* <img className='cat-img' src={cat} alt="" /> */}
43+
<img className='cat-img' src={cat} alt="" />
4044
<button className="gen-btn" onClick={()=>getPost()}>
4145
<img className='icon-dice' src={icon} alt="" />
4246
</button>

‎src/components/junior/adviceGenerator/AdviceGenerator.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@
1919
justify-content: center;
2020
align-items: center;
2121
flex-direction: column;
22+
padding: 25px;
2223
}

‎src/components/junior/githubUser/GithubUser.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,4 +171,8 @@
171171
padding: 10px 15px;
172172
font-size: 0.9em;
173173
}
174+
175+
.githubUser-search-input::placeholder {
176+
font-size: 0.75em;
177+
}
174178
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /