feat:added imgconfig component

src/components/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CoverImage from './CoverImage';
+import ConfigCover from './ConfigCover';
 
 
 class App extends React.Component {
@@ -7,8 +7,10 @@ class App extends React.Component{
 
     render() {
         return (
+            <div>
+                <ConfigCover />
+            </div>
 
-            <CoverImage/>
 
 
         );

src/components/ConfigCover.css

@@ -0,0 +1,12 @@
+.container{
+    margin:20px;
+    display:flex;
+    flex-direction: column;
+    
+    justify-content: center;
+    align-items: center;
+}
+
+label{margin:5px;}
+.input-sm{width:60px;}
+input{margin:4px;}

src/components/ConfigCover.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import './ConfigCover.css'
+import CoverImage from './CoverImage';
+class ConfigCover extends React.Component {
+
+    state = {
+        title: 'How I built my first project with react',
+        height: 420,
+        width: 800,
+        bgcolor: '',
+        bxshadow: ''
+    };
+
+    render() {
+        return (
+            <div className="container">
+
+                
+                    <input type="text" placeholder="Enter title here" 
+                    onChange={e=>this.setState({title:e.target.value})}></input>
+
+                    <div className="d-flex flex-row">
+                        <label >width</label>
+                        <input type="number" name="width" className="input-sm"
+                        onChange={e=>this.setState({width:e.target.value})}></input>
+                        <label >height</label>
+                        <input type="number" name="height" className="input-sm"
+                        onChange={e=>this.setState({height:e.target.value})}></input>
+                    </div>
+
+
+                    <label>Background</label>
+                    <input type="color" defaultValue="#c5a8ff" 
+                    onChange={e=>this.setState({bgcolor:e.target.value})}/>
+
+                    <label>box-shadow</label>
+                    <input type="color" defaultValue="#8c52ff"
+                    onChange={e=>this.setState({bxshadow:e.target.value})} />
+
+
+
+                
+
+                <CoverImage 
+                title={this.state.title} 
+                bgcolor={this.state.bgcolor}
+                bxshadow={this.state.bxshadow}
+                height={this.state.height}
+                width={this.state.width}
+                />
+
+
+
+            </div>
+
+
+
+
+        );
+    }
+}
+
+export default ConfigCover;

src/components/CoverImage.css

@@ -1,5 +1,11 @@
-.cover{
+
+.container{
     margin:auto;
+    justify-content: center;
+    align-items: center;
+}
+.cover{
+    
     width:auto;
     height:auto;
     background-color: #c5a8ff;
@@ -8,13 +14,14 @@
 }
 
 .card{
-   height:150px;
-   min-width:400px;
+   height:auto;
+   width:auto;
    border-radius: 10px;
    margin:50px;
    background-color: #ffffff; 
    display:inline-block;
    box-shadow: 10px 10px  #8c52ff;
+
    text-align: center;
    color:#676683;
    border:none;
@@ -25,3 +32,5 @@
    
 }
 h1{height:auto;}
+
+

src/components/CoverImage.js

@@ -5,11 +5,15 @@ import './CoverImage.css';
 class CoverImage extends React.Component {
 
 
+
+
     render() {
         return (
-            <div className="cover img-fluid">
-             <div className="card">
-             <h2>5 Simple apps I built while learning JavaScript</h2>
+            <div className="cover container"
+                style={{ backgroundColor: this.props.bgcolor, height: this.props.height, width: this.props.width }}>
+                <div className="card"
+                    style={{ boxShadow: `15px 15px ${this.props.bxshadow}` }}>
+                    <h1>{this.props.title}</h1>
                 </div>
             </div>
         );