Cube calc

Developer
Victoria
Size
3,851 Kb
Views
22,264
  1. Cube calc Previews
  2. Cube calc HTML Codes
  3. Cube calc JS Codes

How do I make an cube calc?

What is a cube calc? How do you make a cube calc? This script and codes were developed by Victoria on 02 December 2022, Friday.

Cube calc Previews
IQ Test

Cube calc - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cube calc</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cube calc - Script Codes JS Codes

"use strict";
var PhysUtils = { calculateVolume: function calculateVolume(dims) { return dims.width * dims.height * dims.length; }, calculateMass: function calculateMass(dims) { return this.calculateVolume(dims) * dims.density; }
};
var CubeList = React.createClass({ displayName: "CubeList", getInitialState: function getInitialState() { return { cubes: _.range(4).map(this.initCube) }; }, initCube: function initCube() { return { id: _.uniqueId('cube'), dimensions: { width: 0, height: 0, length: 0, density: 0 } }; }, onDimsChange: function onDimsChange(id, dims) { this.setState({ cubes: this.state.cubes.map(function (cube) { return cube.id === id ? Object.assign({}, cube, { dimensions: dims }) : cube; }) }); }, onAddClick: function onAddClick() { this.setState({ cubes: this.state.cubes.concat([this.initCube()]) }); }, onDeleteClick: function onDeleteClick(id) { this.setState({ cubes: this.state.cubes.filter(function (cube) { return cube.id !== id; }) }, function () {}); }, render: function render() { var _this = this; return React.createElement( "div", { className: "cube-list" }, React.createElement( "div", null, React.createElement(Summary, { cubes: this.state.cubes }) ), React.createElement( "div", { className: "col-xs-12" }, React.createElement( "button", { onClick: this.onAddClick, className: "btn btn-success" }, "Add new cube" ) ), this.state.cubes.map(function (cube, i) { return React.createElement( "div", { key: cube.id, className: "col-xs-6 col-sm-3" }, React.createElement(CubeCalc, { onDimsChange: function onDimsChange(dims) { return _this.onDimsChange(cube.id, dims); }, dims: cube.dimensions }), React.createElement( "button", { onClick: function onClick() { return _this.onDeleteClick(cube.id); }, className: "btn btn-warning" }, "Delete" ) ); }) ); }
});
var Summary = React.createClass({ displayName: "Summary", render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Summary mass is ", _.sum(this.props.cubes.map(function (cube) { return PhysUtils.calculateMass(cube.dimensions); })) ) ); }
});
var CubeCalc = React.createClass({ displayName: "CubeCalc", onDimChange: function onDimChange(dim, value) { var _Object$assign; this.props.onDimsChange(Object.assign({}, this.props.dims, (_Object$assign = {}, _Object$assign[dim] = value, _Object$assign))); }, render: function render() { var _this2 = this; return React.createElement( "div", { className: "cubes" }, React.createElement(Result, { volume: PhysUtils.calculateVolume(this.props.dims), mass: PhysUtils.calculateMass(this.props.dims) }), ['width', 'height', 'length', 'density'].map(function (dim) { return React.createElement(NumberInput, { title: dim, onChange: function onChange(v) { return _this2.onDimChange(dim, v); }, value: _this2.props.dims[dim] }); }) ); }
});
var Result = React.createClass({ displayName: "Result", render: function render() { return React.createElement( "div", null, React.createElement( "h3", null, "Your cube volume is ", this.props.volume ), React.createElement( "h3", null, "Your cube mass is ", this.props.mass ) ); }
});
var NumberInput = React.createClass({ displayName: "NumberInput", onChange: function onChange(e) { this.props.onChange(Number(e.target.value)); }, render: function render() { return React.createElement( "div", { className: "calc-form" }, React.createElement( "div", { className: "form-group" }, React.createElement( "label", null, "Change ", this.props.title, ":" ), React.createElement("input", { type: "number", className: "form-control", onChange: this.onChange, value: this.props.value }) ) ); }
});
var Application = React.createClass({ displayName: "Application", getInitialState: function getInitialState() { return { count: 6 }; }, onCountChange: function onCountChange(e) { this.setState({ count: e.target.value }); }, render: function render() { return React.createElement( "div", { className: "application" }, React.createElement(CubeList, null) ); }
});
/* * Render the above component into the div#app */
React.render(React.createElement(Application, null), document.getElementById('app'));
Cube calc - Script Codes
Cube calc - Script Codes
Home Page Home
Developer Victoria
Username Enieste
Uploaded December 02, 2022
Rating 3
Size 3,851 Kb
Views 22,264
Do you need developer help for Cube calc?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victoria (Enieste) Script Codes
Name
FCC Tic Tac Toe
FCC Twitchtv JSON API
Profile
FCC Tribute page
A Pen by Victoria
FCC Recipe Box
FCC Wiki viewer
FCC Random quote machine
FCC Leaderboard
D3 paths
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!