React Composer Widget

Developer
Devin
Size
6,528 Kb
Views
12,144
  1. React Composer Widget Previews
  2. React Composer Widget HTML Codes
  3. React Composer Widget CSS Codes
  4. React Composer Widget JS Codes

How do I make an react composer widget?

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

React Composer Widget Previews
IQ Test

React Composer Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Composer Widget</title> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></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='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Composer Widget - Script Codes CSS Codes

html { background: #222;
}
#app { display: flex; justify-content: center; align-items: center; height: calc(100vh - 15px);
}
.card { position: relative; max-width: 700px; width: 50%; min-width: 500px; height: 400px; background: #ddd; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), inset 0px 0px 10px rgba(0, 0, 0, 0.9);
}
.card .card_header { width: 100%; background: #666; height: 40px;
}
.card .image { width: 200px; height: 200px; background: #888; margin: 5px; overflow: hidden;
}
.card .image img { width: 200px;
}
.card_tabs, .body_tabs { display: flex; justify-content: space-around; padding: 0; margin: 0; box-shadow: 0px 3px rgba(0, 0, 0, 0.3); font-family: 'Fjalla One', sans-serif; text-shadow: 0px 0px 10px rgba(200, 200, 200, 0.3); font-size: 14px;
}
.card_tabs li, .body_tabs li { display: flex; background: rgba(0, 0, 0, 0.2); width: 100%; height: 40px; margin: 0px 1px; list-style: none; cursor: pointer; transition: .3s all;
}
.card_tabs li:hover, .body_tabs li:hover { background: rgba(0, 0, 0, 0.3); transition: .3s all;
}
.card_tabs li a, .body_tabs li a { display: flex; text-decoration: none; color: black; width: 100%; height: 40px; justify-content: center; align-items: center;
}
.info { width: 200px; height: 145px; background: #999; margin: 5px; display: flex; justify-content: center; align-items: center;
}
.description { position: absolute; top: 45px; left: 210px; width: calc(100% - 215px); height: 350px; background: #333; overflow: hidden; overflow-y: hidden; color: #ddd;
}
.description p { margin: 5px; padding: 0px 10px;
}
.description .desc_content { overflow-y: scroll; width: calc(100% - 20px); height: 305px;
}
.iframes_container { width: 100%; height: 300px; margin: 0; padding: 0; margin-top: 10px; overflow-y: scroll;
}
.iframes_container ul { width: 100%;
}
.iframes_container li { width: 100%; list-style-type: none; text-align: center; overflow-y: scroll;
}
.iframes_container iframe { height: 230px; width: 70%; border: 1px solid black;
}
::-webkit-scrollbar { display: none;
}

React Composer Widget - Script Codes JS Codes

"use strict";
var artist_images = { "Dmitri Shostakovich": 'https://upload.wikimedia.org/wikipedia/commons/7/75/Dmitrij_Dmitrijevi%C4%8D_%C5%A0ostakovi%C4%8D_(%D0%94%D0%BC%D0%B8%CC%81%D1%82%D1%80%D0%B8%D0%B9_%D0%94%D0%BC%D0%B8%CC%81%D1%82%D1%80%D0%B8%D0%B5%D0%B2%D0%B8%D1%87_%D0%A8%D0%BE%D1%81%D1%82%D0%B0%D0%BA%D0%BE%CC%81%D0%B2%D0%B8%D1%87).jpg', "Sergei Rachmaninoff": "https://upload.wikimedia.org/wikipedia/commons/b/be/Sergei_Rachmaninoff_cph.3a40575.jpg", "Felix Mendelssohn": "https://upload.wikimedia.org/wikipedia/commons/8/87/Mendelssohn_Bartholdy.jpg" };
var artist_info = { "Dmitri Shostakovich": "", "Sergei Rachmaninoff": "", "Felix Mendelssohn": "" };
var artist_tracks = { "Dmitri Shostakovich": "", "Sergei Rachmaninoff": "", "Felix Mendelssohn": "" };
var artist = "";
function getJSON(name, callback) {	var extract = "";	$.getJSON('https://en.wikipedia.org/w/api.php?action=query&prop=extracts&explaintext=&titles=' + name + '&exsentences=5&format=json&callback=?&', function (data) {	for (var i in data.query.pages) {	extract = data.query.pages[i].extract;	}	callback(extract, 'info');	});
}
function getTracks(name, callback) {	var extract = [];	$.getJSON('https://www.googleapis.com/youtube/v3/search?part=snippet%20&q=' + name + '&key=AIzaSyBIPMzULooB83ioNtI3QHOzfqVbIOOqcjw', function (data) {	for (var i in data.items) {	extract.push(data.items[i].id.videoId || 0);	}	callback(extract, 'track');	});
}
var CardHeader = React.createClass({	displayName: "CardHeader",	render: function render() {	var tabset = [{ id: 1, name: 'Dmitri Shostakovich', url: '/' }, { id: 2, name: 'Sergei Rachmaninoff', url: '/' }, { id: 3, name: 'Felix Mendelssohn', url: '/' }];	return React.createElement(	"div",	{ className: "card_header" },	React.createElement(Tabs, { tabtype: "card_tabs", tabs: tabset, changeTab: this.props.changeTab })	);	}
});
var CardBody = React.createClass({	displayName: "CardBody",	getInitialState: function getInitialState() {	return {	tab_id: 1	};	},	changeTab: function changeTab(tab) {	//handle body tab clicks;	this.setState({	tab_id: tab.id	});	},	render: function render() {	var tabset = [{ id: 1, name: 'Main', url: '/main' }, { id: 2, name: 'Works', url: '/works' }, { id: 3, name: 'Sources', url: '/sources' }];	if (this.state.tab_id == 1) {	var content = React.createElement(	"p",	{ className: "desc_content" },	this.props.info	);	} else if (this.state.tab_id == 2) {	var content = React.createElement(Tracks, { videos: this.props.tracks });	} else if (this.state.tab_id == 3) {	var content = React.createElement(	"p",	{ className: "desc_content" },	"Wikipedia.com",	React.createElement("br", null),	"Youtube.com"	);	}	return React.createElement(	"div",	{ className: "main" },	React.createElement(	"div",	{ className: "image" },	React.createElement("img", { src: this.props.image })	),	React.createElement(	"div",	{ className: "info" },	this.props.artist	),	React.createElement(	"div",	{ className: "description" },	React.createElement(Tabs, { tabtype: "body_tabs", tabs: tabset, changeTab: this.changeTab }),	content	)	);	}
});
var Tab = React.createClass({	displayName: "Tab",	handleClick: function handleClick(e) {	e.preventDefault();	this.props.handleClick();	},	render: function render() {	return React.createElement(	"li",	null,	React.createElement(	"a",	{ href: this.props.url, onClick: this.handleClick },	this.props.name	)	);	}
});
var Tabs = React.createClass({	displayName: "Tabs",	handleClick: function handleClick(tab) {	this.props.changeTab(tab);	},	render: function render() {	return React.createElement(	"ul",	{ className: this.props.tabtype },	this.props.tabs.map(function (tab) {	return React.createElement(Tab, {	key: tab.id,	handleClick: this.handleClick.bind(this, tab),	name: tab.name,	url: tab.url	});	}.bind(this))	);	}
});
var Tracks = React.createClass({	displayName: "Tracks",	render: function render() {	//track videos from youtube.	var videos = this.props.videos;	return React.createElement(	"ul",	{ className: "iframes_container" },	videos.map(function (video) {	video = 'https://www.youtube.com/embed/' + video;	return React.createElement(	"li",	null,	React.createElement("iframe", { src: video })	);	})	);	}
});
var Card = React.createClass({	displayName: "Card",	getInitialState: function getInitialState() {	return {	currentArtist: 'Dmitri Shostakovich',	currentImage: '',	artistInfo: '',	artistTracks: ''	};	},	componentWillMount: function componentWillMount() {	this.setState({	currentImage: artist_images[this.state.currentArtist]	});	getJSON(this.state.currentArtist, this.readJSON);	getTracks(this.state.currentArtist, this.readJSON);	},	changeTab: function changeTab(tab) {	this.setState({	currentArtist: tab.name,	currentImage: artist_images[tab.name],	artistInfo: artist_info[tab.name] || getJSON(tab.name, this.readJSON),	artistTracks: artist_tracks[tab.name] || getTracks(tab.name, this.readJSON)	});	},	render: function render() {	return React.createElement(	"div",	{ className: "card" },	React.createElement(CardHeader, { changeTab: this.changeTab }),	React.createElement(CardBody, {	artist: this.state.currentArtist,	image: this.state.currentImage,	info: this.state.artistInfo,	tracks: this.state.artistTracks	})	);	},	readJSON: function readJSON(data, type) {	if (type == 'info') {	artist_info[this.state.currentArtist] = data;	this.setState({	artistInfo: data	});	};	if (type == 'track') {	artist_tracks[this.state.currentArtist] = data;	this.setState({	artistTracks: data	});	};	}
});
ReactDOM.render(React.createElement(Card, null), document.getElementById('app'));
React Composer Widget - Script Codes
React Composer Widget - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 6,528 Kb
Views 12,144
Do you need developer help for React Composer Widget?

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
Artist Card Widget
Descriptive Tags
Twitch Zipline
Mondrian Generator
Snake
A Pen by Devin
Country Generator
React Musical Scale Display
Pomodoro Clock
Sonar Svg
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!