ReactMeteoApp

Developer
Kévin Barfleur
Size
7,492 Kb
Views
2,024
  1. ReactMeteoApp Previews
  2. ReactMeteoApp HTML Codes
  3. ReactMeteoApp CSS Codes
  4. ReactMeteoApp JS Codes

How do I make an reactmeteoapp?

What is a reactmeteoapp? How do you make a reactmeteoapp? This script and codes were developed by Kévin Barfleur on 30 January 2023, Monday.

ReactMeteoApp Previews
IQ Test

ReactMeteoApp - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactMeteoApp</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ReactMeteoApp - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Anton|Inconsolata|Merriweather|Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Dancing+Script:700");
@font-face { font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
body { font-family: system;
}
* { margin: 0; padding: 0;
}
.Page { width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.1); display: grid; justify-content: center; overflow: hidden;
}
.App { align-self: center; width: 350px; height: 550px; background-color: #fff; position: relative; overflow: hidden; box-shadow: 20px 30px 100px #808080;
}
.App .currentLocation-container { width: 80%; height: 80%; border: 0px solid #f00; margin: 20% auto;
}
.App .currentLocation-container .currentLocation { text-align: center; margin-top: 60%;
}
.App .title { font-size: 1em; position: absolute; top: 10px; left: 20px; text-align: center;
}
.App .title .how { font-family: 'Anton';
}
.App .title .the { font-family: 'Dancing Script';
}
.App .title .weather { font-family: 'Merriweather';
}
.App .title .interogation { font-family: 'Dancing Script';
}
.App .menu { text-align: center; width: 40%; height: 100%; background: #ff6f69; position: absolute; top: 0px; right: -40%; opacity: 0; transition: all 0.3s;
}
.App .menu .item:first-child { margin-top: 70px;
}
.App .menu .item { color: #fff; font-size: 0.8em; padding: 15px 0px 15px 0px; color: #fff; box-shadow: 1px 5px 10px rgba(255,111,105,0.2); transition: 0.4s;
}
.App .menu .item:hover { cursor: pointer; background-color: #ff9a96; transition: 0.4s;
}
.App .menu.active { right: 0%; opacity: 1; transition: all 0.3s;
}
.App .menu .item-input { margin-top: 70%;
}
.App .menu .item-input input { border: none; width: 100%; height: 45px; text-align: center; background-color: #f2f2f2; outline: none;
}
.menu-item { position: absolute; top: 5px; right: 5px; width: 30px; height: 3px; background-color: #ff6f69; border: none solid none; border-radius: 20px; transition: all 0.3s;
}
.menu-item::before { content: ''; width: 30px; height: 3px; position: absolute; top: 8px; background-color: #ff6f69; border: none solid none; border-radius: 20px; transition: all 0.3s;
}
.menu-item::after { content: ''; width: 30px; height: 3px; position: absolute; top: 16px; background-color: #ff6f69; border: none solid none; border-radius: 20px; transition: all 0.3s;
}
.menu-container { position: absolute; right: 25px; top: 25px; width: 40px; height: 40px; transition: all 0.3s; border-color: #ff6f69; background-color: #fff; border-radius: 100%; padding: 10px 10px 10px 10px;
}
.menu-container:hover { cursor: pointer;
}
.menu-container.active { padding: 5px 5px 5px 5px; transition: all 0.3s; border-radius: 100%; background-color: white-space; border: 1px solid #ff6f69; opacity: 1; transform: translateX(-90px) translateY(-10px); z-index: 1; overflow: hidden;
}
.menu-container.active .menu-item { opacity: 1; width: 30px; transition: all 0.3s; transform-origin: left; transform: translateX(0px) translateY(7px) rotate(45deg); background-color: #ff6f69;
}
.menu-container.active .menu-item::before { transition: all 0.3s; opacity: 0; background-color: #ff6f69;
}
.menu-container.active .menu-item::after { transition: all 0.3s; width: 30px; opacity: 1; transform: rotate(-270deg) translateX(-15px) translateY(0px); background-color: #ff6f69;
}

ReactMeteoApp - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
// AIzaSyDU3t_pbyVQrIaUtKWNWlWUq64A2l8wCVQ
/**********************	App Component
**********************/
var App = function (_React$Component) {	_inherits(App, _React$Component);	function App() {	_classCallCheck(this, App);	var _this = _possibleConstructorReturn(this, _React$Component.call(this));	_this.state = {	locations: [['Paris', 48.866667, 2.333333], ['London', 51.5073509, -0.12775829999998223], ['Pointe-à-Pitre', 16.2376869, -61.534042399999976], ['Tokyo', 35.6894875, 139.69170639999993], ['Cape Town', -33.9248685, 18.424055299999964], ['New York', 40.7127837, -74.00594130000002], ['Jakarta', -6.17511, 106.86503949999997], ['Moscow', 55.755826, 37.6173]],	currentLocation: 'At Home'	};	return _this;	}	App.prototype.componentWillMount = function componentWillMount() {	navigator.geolocation.getCurrentPosition(this.succesGeolocation);	};	App.prototype.succesGeolocation = function succesGeolocation() {	var currentLocationWeather = 'http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID=50754cb6e9a747cb0ac5d329b1115bc4';	fetch(currentLocationWeather).then(function (response) {	return response.json();	}).then(function (response) {	return console.log(response);	});	};	App.prototype.showMenu = function showMenu() {	var menuButton = document.querySelector('.menu-container');	var menu = document.querySelector('.menu');	menuButton.classList.toggle('active');	menu.classList.toggle('active');	};	App.prototype.showLocation = function showLocation() {	var currentLocation = this.props.location;	var menuComponent = this._reactInternalInstance._currentElement._owner._instance;	var appComponent = menuComponent._reactInternalInstance._currentElement._owner._instance;	appComponent.setState({ currentLocation: currentLocation });	appComponent.showWeather();	appComponent.showMenu();	};	App.prototype.showWeather = function showWeather() {	navigator.geolocation.getCurrentPosition(this.succesGeolocation);	};	App.prototype.render = function render() {	var currentLocation = React.createElement(Time, { currentLocation: this.state.currentLocation });	return React.createElement(	'div',	{ className: 'Page' },	React.createElement(	'div',	{ className: 'App' },	React.createElement(	'h1',	{ className: 'title' },	React.createElement(	'span',	{ className: 'how' },	'How\'s'	),	React.createElement('br', null),	React.createElement(	'span',	{ className: 'the' },	'the'	),	React.createElement('br', null),	React.createElement(	'span',	{ className: 'weater' },	'Weather'	),	React.createElement(	'span',	{ className: 'interogation' },	' ?'	)	),	React.createElement(	'div',	{ className: 'menu-container', onClick: this.showMenu },	React.createElement('div', { className: 'menu-item' })	),	React.createElement(Menu, { locations: this.state.locations, showLocation: this.showLocation }),	currentLocation	)	);	};	return App;
}(React.Component);
/**********************	Time Component
**********************/
var Time = function (_React$Component2) {	_inherits(Time, _React$Component2);	function Time() {	_classCallCheck(this, Time);	var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this));	_this2.state = {};	return _this2;	}	Time.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'currentLocation-container' },	React.createElement(	'h3',	{ className: 'currentLocation' },	this.props.currentLocation	)	);	};	return Time;
}(React.Component);
/**********************	Menu Component
**********************/
var Menu = function (_React$Component3) {	_inherits(Menu, _React$Component3);	function Menu() {	_classCallCheck(this, Menu);	var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this));	_this3.state = {	locations: []	};	return _this3;	}	Menu.prototype.componentWillMount = function componentWillMount() {	this.setState({ locations: this.props.locations });	};	Menu.prototype.addPlace = function addPlace(e) {	e.preventDefault();	var allPlaces = [].concat(this.props.locations);	var newPlace = this.cityInput.value;	allPlaces.push([newPlace]);	this.setState({ locations: allPlaces });	this.cityInput.value = '';	};	Menu.prototype.render = function render() {	var _this4 = this;	var locations = this.state.locations.map(function (location, index) {	return React.createElement(MenuItem, {	key: index,	location: location[0],	showLocation: _this4.props.showLocation });	});	return React.createElement(	'div',	{ className: 'menu' },	React.createElement(	'form',	{ className: 'item-input', onSubmit: function onSubmit(e) {	return _this4.addPlace(e);	} },	React.createElement('input', { required: true,	type: 'text',	placeholder: 'Add Place (Soon)',	ref: function ref(input) {	return _this4.cityInput = input;	} })	),	locations	);	};	return Menu;
}(React.Component);
/**********************	MenuItem Component
**********************/
var MenuItem = function (_React$Component4) {	_inherits(MenuItem, _React$Component4);	function MenuItem() {	_classCallCheck(this, MenuItem);	var _this5 = _possibleConstructorReturn(this, _React$Component4.call(this));	_this5.state = {};	return _this5;	}	MenuItem.prototype.render = function render() {	return React.createElement(	'div',	{ className: 'item', onClick: this.props.showLocation.bind(this), location: this.props.location },	React.createElement(	'p',	null,	this.props.location	)	);	};	return MenuItem;
}(React.Component);
/*************************************************** RENDER !
***************************************************/
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));
ReactMeteoApp - Script Codes
ReactMeteoApp - Script Codes
Home Page Home
Developer Kévin Barfleur
Username kevin_barfleur
Uploaded January 30, 2023
Rating 3
Size 7,492 Kb
Views 2,024
Do you need developer help for ReactMeteoApp?

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!

Kévin Barfleur (kevin_barfleur) Script Codes
Name
365JS - Clavier
ReactJS - Todolist
ReactJS - Markdown Previewer
365JS - Todolist
Stylexemple
365JS - 1 - Snake
ReactJS - Camper Leaderboard
ReactJS - Portfolio
Create amazing Facebook ads 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!