yusufipek/quote-machine
1
0
Fork 0
mirror of https://github.com/yusufipk/quote-machine.git synced 2026-09-11 10:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

added quote-box component

Browse Source
This commit is contained in:
Yusuf İpek
2021-01-24 15:58:44 +03:00
parent 3fac5df440
commit 3c9c75f668
9 changed files with 35 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintcache
+1
View File
@@ -0,0 +1 @@
[{"/home/yusuf/Programming/React/quote-machine/src/index.js":"1","/home/yusuf/Programming/React/quote-machine/src/App.js":"2","/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx":"4"},{"size":500,"mtime":1611491491707,"results":"5","hashOfConfig":"6"},{"size":201,"mtime":1611492929577,"results":"7","hashOfConfig":"6"},{"size":362,"mtime":1611491491707,"results":"8","hashOfConfig":"6"},{"size":287,"mtime":1611492997507,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1h1r0ga",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/quote-machine/src/index.js",[],"/home/yusuf/Programming/React/quote-machine/src/App.js",[],"/home/yusuf/Programming/React/quote-machine/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/quote-machine/src/components/quote-box/quote-box.jsx",[]]
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

public/index.html
+2 -3
View File
@@ -2,14 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,9 +22,10 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Quote Machine</title>
</head> </head>
<body> <body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

src/App.css
-37
View File
@@ -1,38 +1 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
+3 -16
View File
@@ -1,23 +1,10 @@
import logo from './logo.svg'; import "./App.css";
import './App.css'; import QuoteBox from "./components/quote-box/quote-box";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <QuoteBox id="quote" />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }
src/components/quote-box/quote-box-styles.scss
+14
View File
@@ -0,0 +1,14 @@
.wrapper {
display: flex;
justify-content: center;
#quote-box {
color: white;
width: 550px;
height: 350px;
background-color: black;
border: 1px solid grey;
border-radius: 5px;
padding: 10px;
}
}
src/components/quote-box/quote-box.jsx
+15
View File
@@ -0,0 +1,15 @@
import "./quote-box-styles.scss";
const QuoteBox = () => {
return (
<div className="wrapper">
<div id="quote-box">
<h3 id="text">Deneme</h3>
<p id="author">Deneme</p>
{/* new quote button */}
</div>
</div>
);
};
export default QuoteBox;