kauliukas 4prktk

app:

import React, {Component} from 'react'

class App extends Component {
    constructor(props) {
        super(props)
        this.inputSelect = React.createRef()
        this.onHandleCurrentCoordinate = this.onHandleCurrentCoordinate.bind(this)

        this.Kauliukas = this.Kauliukas.bind(this);

        this._diceNumber = this._diceNumber.bind(this)

        this.state = {
            isLoaded: false,
            //shipLocation: [x: 0, y: 0],
            value: '',
            coordinates: [],
            random: 3
    }
}


Kauliukas() {
    const rand = Math.floor(Math.random() * 6) + 1 ;
    this.setState({ random:  rand });
  }

  Atvaizduoja() {
    let products = []
    for (let i = 0; i < this.state.random; i++){
        console.log(i);
      products.push( <div className="grid-item"></div> )
    }
    return products
  }

_diceNumber(){
    return  Math.floor(Math.random() * 6);
}
onHandleCurrentCoordinate() {
    const coordinateId = this.inputSelect.current.value//passiima values kelintas
    const data = {coordinateId: coordinateId}
    fetch("http://localhost:3000/api/coordinate", {
        method: 'POST',
        headers: {"Content-type": "application/json" },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(result => {
        this.setState({
            isLoaded: false,
            currentCoordinate: result
        })
    })
    .catch(e => console.log(e))
}



    render() {
        const currentCoordinate  =this.state

        return (
            <div>

                <button onClick={this.Kauliukas.bind(this) }>Kauliukas</button>
                <div>Iskrito: {this.state.random} </div>
                <div className="grid-container">
                {this.Atvaizduoja()}
                </div>
            </div>


        )
    }

}

export default App



style.css:

* {
  font-family: sans-serif;
  margin: 0;
}
button {
  height: 40px;
  width: 200px;
  margin: 10px;
}
.warning {
  background-color: red;
  text-align: center;
  width: 100%;
  padding: 10px;

  font-size: 14pt;
  color: white;
}
.hide{
    width: 30px;
    height: 30px;
    float: right;
}

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  padding: 15px;
}

.grid-item {
  background-color: rgba(115, 115, 115, 0.8);
  border: 1px solid rgba(89, 89, 89, 0.8);
  padding: 40px;
  border-radius: 50px;
}