React Musical Scale Display

Developer
Devin
Size
6,083 Kb
Views
16,192
  1. React Musical Scale Display Previews
  2. React Musical Scale Display HTML Codes
  3. React Musical Scale Display CSS Codes
  4. React Musical Scale Display JS Codes

How do I make an react musical scale display?

What is a react musical scale display? How do you make a react musical scale display? This script and codes were developed by Devin on 23 November 2022, Wednesday.

React Musical Scale Display Previews
IQ Test

React Musical Scale Display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Musical Scale Display</title> <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="calculator"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Musical Scale Display - Script Codes CSS Codes

html { background: radial-gradient(#ffb997, #843b62); height: 100%;
}
#calculator { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 300px; height: 400px; background: red; background: #222; box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 3px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #0b032d;
}
#calculator h2 { font-size: 25px; text-align: center; font-family: 'Boogaloo', cursive; font-weight: 200; letter-spacing: 2px; background: #843B62; margin: 0px; padding: 15px; color: white; text-shadow: 1px 2px black; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
button { width: calc(300px / 3); margin: 0px; height: 46px; background: rgba(255, 255, 255, 0.2); color: white; border: 0px solid black; box-shadow: 2px 2px rgba(0, 0, 0, 0.2); font-size: 16px; font-family: sans-serif; font-weight: 200; text-shadow: 0px 2px rgba(0, 0, 0, 0.3); outline: none; cursor: pointer; transition: .5s all;
}
button:hover { transition: .5s all; background: rgba(255, 255, 255, 0.5);
}
.header { position: relative; background: #843b62; margin: 0px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.screen { height: 100px; position: relative; background: white; overflow: hidden; border: 1px solid black; box-sizing: border-box; padding-top: 10px;
}
.screen * { display: inline-block;
}
.screen img { width: 240px; padding: 0px; margin: 0 calc((300px - 250px) / 2);
}
.screen p { float: right; margin-right: 10px; line-height: calc(75px / 2); font-size: 20px;
}
.keyButtons { background: #843B62; position: absolute; bottom: 0;
}
.keyButtons .key_btn { position: relative; width: 140px; margin: 5px; font-weight: bold;
}

React Musical Scale Display - Script Codes JS Codes

'use strict';
//React Musical Scale Display
/*Disclaimer: May not be an accurate representation
of all possible scales*/
var major_scales = ['c', 'g', 'd', 'a', 'e', 'f', 'b-flat', 'e-flat', 'a-flat', 'b', 'f-sharp', 'c-sharp'];
var minor_scales = ['a', 'd', 'g', 'c', 'f', 'b-flat', 'e-flat', 'a-flat', 'e', 'b'];
var scales = {	major: {	c: ['https://2.bp.blogspot.com/_Tad4UOfdqXs/R7leBOnSAII/AAAAAAAAAZo/jvvWymian7Y/s320/C_Major_Scale.gif', 'c major'],	d: ['https://1.bp.blogspot.com/_Tad4UOfdqXs/R7lgb-nSAJI/AAAAAAAAAZw/yzE82qsOUd8/s320/D_Major_Scale.gif', 'd major'],	e: ['https://3.bp.blogspot.com/_Tad4UOfdqXs/R7lgxenSAKI/AAAAAAAAAZ4/bn09DEjdJ0A/s320/E_Major_Scale.gif', 'e major'],	g: ['https://1.bp.blogspot.com/_Tad4UOfdqXs/R7lgx-nSALI/AAAAAAAAAaA/CNChBvj1i80/s320/G_Major_Scale.gif', 'g major'],	a: ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7lgyunSAMI/AAAAAAAAAaI/q15EKRk90hQ/s320/A_Major_Scale.gif', 'a major'],	f: ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7ljGunSAOI/AAAAAAAAAaY/9iguP9CleGc/s320/F_Major_Scale.gif', 'f major'],	'b-flat': ['https://1.bp.blogspot.com/_Tad4UOfdqXs/R7ljH-nSAQI/AAAAAAAAAao/n11m2sVIZls/s320/Bflat_Major_Scale.gif', 'b-flat major'],	'e-flat': ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7ljFunSANI/AAAAAAAAAaQ/3A3zftchXmM/s320/Eflat_Major_Scale.gif', 'e-flat major'],	'a-flat': ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7llOunSARI/AAAAAAAAAaw/JJ6JvW_n7CU/s320/Aflat_Major_Scale.gif', 'a-flat major'],	b: ['https://2.bp.blogspot.com/_Tad4UOfdqXs/R7lo3OnSAXI/AAAAAAAAAbg/PD8Cl0kKXU8/s320/B_Major_Scale.gif', 'b-major or c-flat major'],	'f-sharp': ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7lo2unSAWI/AAAAAAAAAbY/YMwpF3-Q_eU/s320/Fsharp_Major_Scale.gif', 'f-sharp or g-flat major'],	'c-sharp': ['https://4.bp.blogspot.com/_Tad4UOfdqXs/R7loXunSASI/AAAAAAAAAa4/3jSbYJ36irU/s320/Csharp_Major_Scale.gif', 'c-sharp or d-flat major']	},	minor: {	a: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/404/natural-minor-scale.jpg', 'a minor'],	d: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/354/d-minor-scale.jpeg', 'd minor'],	g: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/306/g-minor-scale.jpeg', 'g minor'],	c: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/483/c-minor-scale.jpeg', 'c minor'],	f: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/490/f-minor-scale.jpeg', 'f minor'],	'b-flat': ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/350/b-flat-minor-scale.jpeg', 'b-flat minor'],	'e-flat': ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/4/e-flat-minor-scale.jpeg', 'e-flat minor'],	'a-flat': ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/169/a-flat-minor-scale.jpeg', 'a-flat minor'],	e: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/525/e-minor-scale.jpeg', 'e minor'],	b: ['https://d4u3lqifjlxra.cloudfront.net/uploads/appendix/asset/filename/288/b-minor-scale.jpeg', 'b minor']	}
};
var DisplayScreen = React.createClass({	displayName: 'DisplayScreen',	render: function render() {	return React.createElement(	'div',	{ className: 'header' },	React.createElement(	'div',	{ className: 'screen' },	React.createElement('img', { src: this.props.scale_img, alt: this.props.scale_name })	)	);	}
});
var Button = React.createClass({	displayName: 'Button',	render: function render() {	return React.createElement(	'button',	{ onClick: this.props.onClick },	this.props.scale_name	);	}
});
var KeyButtons = React.createClass({	displayName: 'KeyButtons',	render: function render() {	return React.createElement(	'div',	{ className: 'keyButtons' },	React.createElement(	'button',	{ className: 'key_btn', onClick: this.props.onClickMajor },	'Major'	),	React.createElement(	'button',	{ className: 'key_btn', onClick: this.props.onClickMinor },	'Minor'	)	);	}
});
var ScaleCard = React.createClass({	displayName: 'ScaleCard',	getInitialState: function getInitialState() {	return { key: scales.major, scale: scales.major.c };	},	changeScale: function changeScale(x) {	//if key type is major	if (this.state.key == scales.major) {	this.setState({ scale: scales.major[x] });	} else {	this.setState({ scale: scales.minor[x] });	}	},	changeKey: function changeKey(type) {	this.setState({ key: scales[type] });	},	render: function render() {	var _this3 = this;	//Display dif interface depending on what key type	var mainInterface;	if (this.state.key == scales.major) {	mainInterface = React.createElement(	'div',	{ className: 'major_section' },	React.createElement(	'h2',	null,	'Major Keys'	),	major_scales.map(function (key) {	var _this = this;	return React.createElement(Button, { scale_name: key, onClick: function onClick() {	_this.changeScale(key);	} });	}, this)	);	} else {	mainInterface = React.createElement(	'div',	{ className: 'minor_section' },	React.createElement(	'h2',	null,	'Natural Minor Keys'	),	minor_scales.map(function (key) {	var _this2 = this;	return React.createElement(Button, { scale_name: key, onClick: function onClick() {	_this2.changeScale(key);	} });	}, this)	);	}	return React.createElement(	'div',	null,	React.createElement(DisplayScreen, { scale_img: this.state.scale[0], scale_name: this.state.scale[1] }),	mainInterface,	React.createElement(KeyButtons, { onClickMajor: function onClickMajor() {	_this3.changeKey('major');	}, onClickMinor: function onClickMinor() {	_this3.changeKey('minor');	} })	);	return React.createElement(	'h1',	null,	'Hello'	);	}
});
ReactDOM.render(React.createElement(ScaleCard, null), document.getElementById('calculator'));
React Musical Scale Display - Script Codes
React Musical Scale Display - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 6,083 Kb
Views 16,192
Do you need developer help for React Musical Scale Display?

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!

Devin (edwin0258) Script Codes
Name
Sonar Svg
Daily UI 011 - Flash Message
Mondrian Generator
Calculator
A Pen by Devin
Dungeon Crawler
Pomodoro Clock
Simple Svg Loading Bar
Artist Card Widget
Descriptive Tags
Create amazing sales emails 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!