goelashwin36

# Python program implementing Image Steganography

# PIL module is used to extract
# pixels of image and modify it
from PIL import Image

# Convert encoding data into 8-bit binary
# form using ASCII value of characters
def genData(data):

goelashwin36

// Import statements comes here.
import React, { Component } from 'react';

// You need to extend the functionality of `Component` to the class created.
class className extends Component {
    constructor() {
        super();

// A state can hold anything dynamically. For example here randomVar is any    variable.
        this.state = {

goelashwin36

import React from 'react';
import './App.css';
import Products from './components/products'
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  return (
    <div className="App">
      <Products />

goelashwin36

this.state = {
        products: [{ "name": "KTM Duke", "img": "1.jpg", "id": 1, "price":   "2 lakh", "engine": "299 cc" },
        { "name": "KTM RC", "img": "2.jpg", "id": 2, "price": "2.2 lakh",   "engine": "299 cc" },
        { "name": "Ninja", "img": "3.jpg", "id": 3, "price": "3.7 lakh",   "engine": "350 cc" },
        { "name": "BMW S", "img": "4.jpg", "id": 4, "price": "6.8 lakh",   "engine": "800 cc" },
        { "name": "Hayabusa", "img": "5.jpg", "id": 5, "price": "9.2 lakh",   "engine": "1340 cc" },
        ],
        compare: {
          // The arr variable stores the id of selected components
            arr: []

goelashwin36

import { Table, Card, Button, CardTitle, CardText, Row, Col, CardImg } from 'reactstrap';

goelashwin36

<Row>
     <Col md="2" lg="2">
          <Card body outline engine="primary">
            <img height="120px" width="240px" src={require("../assets/images/1.jpg")} />
             <CardTitle>Title</CardTitle>
              <Button type="button">Button</Button>
          </Card>
     </Col>
</Row>

goelashwin36

<Row>
   {this.state.products.map((product, index) => (
       <Col key={product.id}  md="2" lg="2">
           <Card body outline engine="primary">
               <img height="120px" width="240px" src={require("../assets/images/" + product.img)}/>
               <CardTitle>{product.name}</CardTitle>
               <Button type="button" id={product.id} onClick=   {this.handleClick}>Button</Button>
           </Card>
       </Col>
   ))}

goelashwin36

// e is the event. For example here the event is `click`. 
// This variable has some information like: name, id etc. of the component which fired it.
handleClick(e) {
     // Creating a duplicate of arr variable of state
     let temparr = this.state.compare.arr;
     // e.target.id returns the id of the button which fired the event.
     //This helps us in identifying the component
     let id = temparr.indexOf(e.target.id)
     //Checking if the component is already present in the arr variable or    not
     if (id != -1) {

goelashwin36

let temparr = this.state.compare.arr

let temp = []  // Array of objects which we need to compare
// Iterating in temparr
for (var i = 0; i < temparr.length; i++) {
  // x is the object from `this.state.products` which has the required id
    let x = this.state.products.find(prod => prod.id == temparr[i]);
    temp.push(x)
    }

goelashwin36

<Table>
   <thead>
       <th width="33.33%">Name</th>
       <th width="33.33%">Price</th>
       <th width="33.33%">Engine</th>
   </thead>
   {temp.map((product) => (
       <tbody>
           <tr>
               <td width="33.33%">{product.name}</td>