add proper text to image, restructure elements

sashauly · Jun 30, 2023 · de9ad3d · de9ad3d
1 parent c316f17
commit de9ad3d
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 22 deletions.
diff --git a/src/components/Meme.jsx b/src/components/Meme.jsx
@@ -11,23 +11,56 @@ export default function Meme() {
 
   function getMemeImage() {
     const memesArray = allMemeImages.data.memes;
-    const randomElement =
-      memesArray[Math.floor(Math.random() * memesArray.length)].url;
+    const randomNumber = Math.floor(Math.random() * memesArray.length);
+    const url = memesArray[randomNumber].url;
     setMeme((prevMeme) => ({
       ...prevMeme,
-      randomImage: randomElement,
+      randomImage: url,
     }));
   }
+
+  function handleChange(event) {
+    const { name, value } = event.target;
+    setMeme((prevMeme) => {
+      return {
+        ...prevMeme,
+        [name]: value,
+      };
+    });
+  }
+
   return (
     <main>
-      <div className="form">
-        <input type="text" className="form__input" placeholder="Top text" />
-        <input type="text" className="form__input" placeholder="Bottom text" />
-        <button className="form__button" onClick={getMemeImage}>
-          Get a new meme image 🖼
-        </button>
+      <div className="container">
+        <div className="wrapper">
+          <div className="form">
+            <input
+              type="text"
+              name="topText"
+              placeholder="Top text"
+              className="form--input"
+              onChange={handleChange}
+              value={meme.topText}
+            />
+            <input
+              type="text"
+              name="bottomText"
+              placeholder="Bottom text"
+              className="form--input"
+              onChange={handleChange}
+              value={meme.bottomText}
+            />
+          </div>
+          <div className="meme">
+            <img src={meme.randomImage} className="meme--image" />
+            <h2 className="meme--text top">{meme.topText}</h2>
+            <h2 className="meme--text bottom">{meme.bottomText}</h2>
+          </div>
+          <button className="meme--button" onClick={getMemeImage}>
+            Get a new meme image 🖼
+          </button>
+        </div>
       </div>
-      <img src={meme.randomImage} alt="" className="meme__image" />
     </main>
   );
 }
diff --git a/src/style.css b/src/style.css
@@ -3,20 +3,36 @@
 }
 
 body {
+  min-width: 320px;
   margin: 0;
 
   font-family: "Karla", sans-serif;
 }
 
-main {
-  padding: 2.25rem;
+.container {
+  width: 100%;
+  max-width: 1630px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.wrapper{
+display: grid;
+
+    padding: 1em;
+
+    border-radius: 0.6em;
+    background-color: var(--default-color);
+    box-shadow: 0 0.9em 2.8em rgba(86,66,0,0.2);
+
+place-content: center;
 }
 
 .header {
   display: flex;
   align-items: center;
 
-  padding: 1.25rem;
+  padding: 1rem;
 
   background: linear-gradient(90deg, #672280 0%, #a626d3 100%);
 }
@@ -48,14 +64,18 @@ main {
 }
 
 .form {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+
+  margin-bottom: 1.2em;
 
-  grid-template: 35px 35px / 1fr 1fr;
   gap: 1em;
 }
 
-.form__input {
-  text-indent: 0.625rem;
+.form--input {
+  padding: 1em;
+
+  text-indent: 0.5rem;
 
   border: 1px solid #d5d4d8;
   border-radius: 5px;
@@ -64,7 +84,65 @@ main {
   font-size: 0.75rem;
 }
 
-.form__button {
+
+.meme {
+  position: relative;
+
+  display: grid;
+
+  margin-bottom: 1em;
+
+  place-content: center;
+}
+
+.meme--image {
+  max-width: 100%;
+  max-height: 50vh;
+
+  border-radius: 5px;
+}
+
+.meme--text {
+  position: absolute;
+  left: 50%;
+
+  width: 80%;
+  margin: 15px 0;
+  padding: 0 5px;
+
+  transform: translateX(-50%);
+  text-align: center;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+
+  color: white;
+  text-shadow:
+      2px 2px 0 #000,
+      -2px -2px 0 #000,
+      2px -2px 0 #000,
+      -2px 2px 0 #000,
+      0 2px 0 #000,
+      2px 0 0 #000,
+      0 -2px 0 #000,
+      -2px 0 0 #000,
+      2px 2px 5px #000;
+
+  font-family: impact, sans-serif;
+  font-size: 1.5em;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.top {
+  top: 0;
+}
+
+
+.meme--button {
+  padding: 0.5em;
+
   cursor: pointer;
 
   color: #fff;
@@ -73,12 +151,22 @@ main {
   background: linear-gradient(135deg, #711f8d 0%, #a818da 100%);
 
   font-family: "Karla", sans-serif;
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-weight: 700;
 
-  grid-column: 1 / -1;
 }
 
-.meme__image {
-  max-width: 100%;
+@media (max-width:768px) {
+  .meme--text{
+    font-size: 1.2em;
+  }
 }
+
+@media (max-width:550px) {
+  .meme--text{
+    font-size: 0.8em;
+  }
+  .meme--button{
+    font-size: 0.8em;
+  }
+}