creating meme Item

errorr404 · Jun 27, 2018 · 87f46d3 · 87f46d3
1 parent 43132a4
commit 87f46d3
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/public/index.html b/public/index.html
@@ -19,6 +19,8 @@
       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`.
     -->
+     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
     <title>React App</title>
   </head>
   <body>

diff --git a/src/components/App.js b/src/components/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import '../styles/index.css';
+import MemeItem from './MemeItem';
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -15,7 +16,7 @@ class App extends React.Component {
         {
           this.props.memes.slice(0,this.state.memeLimit).map((meme, index)=>{
             return(
-              <h4 key={index}>{meme.name}</h4>
+              <MemeItem key={index} meme={meme} />
             )
           })
         }

diff --git a/src/components/MemeItem.js b/src/components/MemeItem.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import '../styles/index.css';
+class MemeItem extends React.Component {
+  render() {
+    return(
+      <div className="meme-item">
+        <img
+        src={this.props.meme.url}
+        alt={this.props.meme.name}
+        className="meme-img"
+      />
+      <p className="meme-txt">
+        {this.props.meme.name}
+      </p>
+      </div>
+    );
+  }
+}
+
+export default MemeItem;
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -11,3 +11,30 @@ body {
   font-style: italic;
   padding: 10px;
 }
+.meme-item {
+  text-align: left;
+  display: inline-block;
+  padding: 10px;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 5px;
+  cursor: pointer;
+}
+.meme-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 8px;
+  border: 3px solid white;
+  position:absolute;
+  object-fit: cover;
+  filter: brightness(90%);
+}
+.meme-txt {
+  width: 150px;
+  color: black;
+  text-align: center;
+  position: absolute;
+  border-radius: 5px;
+  bottom: 0;
+}