Facebook
From Queen Lemur, 1 Year ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 241
  1. import React, { Component } from "react";
  2. import { HashRouter as Router, Route, NavLink } from 'react-router-dom';
  3. import './index.css'
  4.  
  5. function start(txt){
  6.         var str1 = "First"
  7.         if(str1==txt) {
  8.                 return null
  9.         }
  10.         else {
  11.                 return
  12.                
  13.         }
  14. }
  15.  
  16. class Shop extends React.Component {
  17.        
  18.         constructor() {
  19.                 super();
  20.                 this.state ={txt: 'First', list: []};
  21.                
  22.                
  23.         }
  24.        
  25.        
  26.         onButtonClick(which) {
  27.                 this.load(which);
  28.                 this.setState({ txt: 'Clicked!' });
  29.         }
  30.        
  31.         load(which){
  32.                 if(which=='0')
  33.                 {
  34.                         return fetch('/tea/0')
  35.                         .then((response) => response.json())
  36.                         .then (( responseJson) => {
  37.                                 console.log( responseJson)
  38.                                 this.setState({
  39.                                         list: responseJson.data
  40.                                 });
  41.                         })
  42.                 } else if ( which=='1')
  43.                 {
  44.                         return fetch('/tea/1')
  45.                         .then((response) => response.json())
  46.                         .then (( responseJson) => {
  47.                                 console.log( responseJson)
  48.                                 this.setState({
  49.                                         list: responseJson.data
  50.                                 });
  51.                         })
  52.                 }
  53.                 else if ( which=='2')
  54.                 {
  55.                         return fetch('/tea/2')
  56.                         .then((response) => response.json())
  57.                         .then (( responseJson) => {
  58.                                 console.log( responseJson)
  59.                                 this.setState({
  60.                                         list: responseJson.data
  61.                                 });
  62.                         })
  63.                 }
  64.                 else
  65.                 {
  66.                         return fetch('/tea/3')
  67.                         .then((response) => response.json())
  68.                         .then (( responseJson) => {
  69.                                 console.log( responseJson)
  70.                                 this.setState({
  71.                                         list: responseJson.data
  72.                                 });
  73.                         })
  74.                 }
  75.         }
  76.        
  77.  
  78.  
  79.   render() {
  80.        
  81.         var test = "First"
  82.     return (
  83.       <div>
  84.                                
  85.                 {this.state.txt==test &&
  86.                 <div class="row">
  87.                 <div class="col-lg-6">
  88.                 <div class="bg-faded p-4 my-4">
  89.         <div class="card card-inverse">
  90.           <img class="card-img img-fluid w-100" src="img/black-tea.jpg" alt=""></img>
  91.           <div class="card-img-overlay bg-overlay">
  92.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Black Tea</h2>
  93.             <h4 class="text-shadow text-white"></h4>
  94.             <button onClick={() => this.onButtonClick(0)}        class="btn btn-secondary">Taste it</button>
  95.           </div>
  96.         </div>         
  97.                 </div>
  98.                 </div>
  99.                
  100.                 <div class="col-lg-6">
  101.                 <div class="bg-faded p-4 my-4">
  102.         <div class="card card-inverse">
  103.           <img class="card-img img-fluid w-100" src="img/green-tea.jpg" alt=""></img>
  104.           <div class="card-img-overlay bg-overlay">
  105.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Green Tea</h2>
  106.             <h4 class="text-shadow text-white"></h4>
  107.             <button onClick={() => this.onButtonClick(1)}        class="btn btn-secondary">Taste it</button>
  108.           </div>
  109.         </div>         
  110.                 </div>
  111.                 </div>
  112.                 </div>
  113.                 }
  114.                
  115.                 {this.state.txt==test &&
  116.                 <div class="row">
  117.                 <div class="col-lg-6">
  118.                 <div class="bg-faded p-4 my-4">
  119.         <div class="card card-inverse">
  120.           <img class="card-img img-fluid w-100" src="img/herbal-tea.jpg" alt=""></img>
  121.           <div class="card-img-overlay bg-overlay">
  122.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Herbal Tea</h2>
  123.             <h4 class="text-shadow text-white"></h4>
  124.             <button onClick={() => this.onButtonClick(2)} class="btn btn-secondary">Taste it</button>
  125.           </div>
  126.         </div>         
  127.                 </div>
  128.                 </div>
  129.                
  130.                 <div class="col-lg-6">
  131.                 <div class="bg-faded p-4 my-4">
  132.         <div class="card card-inverse">
  133.           <img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
  134.           <div class="card-img-overlay bg-overlay">
  135.             <h2 class="card-title text-shadow text-white text-uppercase mb-0">Fruit Tea</h2>
  136.             <h4 class="text-shadow text-white"></h4>
  137.             <button onClick={() => this.onButtonClick(3)} class="btn btn-secondary">Taste it</button>
  138.           </div>
  139.         </div>         
  140.                 </div>
  141.                 </div>
  142.                 </div>
  143.                 }
  144.                
  145.                 {this.state.txt!=test &&
  146.                 <div>      
  147.          
  148.        
  149.                        
  150.                         {this.state.list.map(function(name){
  151.                                 return  <div class="col-lg-12">
  152.                                                 <div class="col-lg-4">
  153.                                                 <div class="bg-faded p-4 my-4">
  154.                                                         <div class="card card-inverse">
  155.                                                         <img class="card-img img-fluid w-100" src="img/fruit-tea.jpg" alt=""></img>
  156.                                                         <div class="card-img-overlay bg-overlay">
  157.                                                        
  158.                                                         </div>
  159.                                                         </div>
  160.                                                 </div>
  161.                                                 </div>
  162.                                                 <div class="col-lg-8">
  163.                                                         <h1 className="Name">{name.name}</h1>
  164.                                                         <h3>{name.description}</h3>
  165.                                                 </div>
  166.                                                
  167.                                                
  168.                                                 </div>
  169.        
  170.                         })}
  171.                        
  172.                                        
  173.  
  174.                 </div>
  175.                 }
  176.                
  177.                 ¬†¬†¬†¬†
  178.       </div>
  179.     );
  180.   }
  181. }
  182.  
  183. export default Shop