Milestones

Developer
Neeilan Selvalingam
Size
6,285 Kb
Views
32,384
  1. Milestones Previews
  2. Milestones HTML Codes
  3. Milestones CSS Codes
  4. Milestones JS Codes

How do I make an milestones?

What is a milestones? How do you make a milestones? This script and codes were developed by Neeilan Selvalingam on 13 September 2022, Tuesday.

Milestones Previews
IQ Test

Milestones - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Milestones</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script type="text/javascript" src = "http://mindsmattermagazine.com/wp-content/uploads/2017/date.js"></script>
<div id = "app"/> <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>

Milestones - Script Codes CSS Codes

body { font-family: Arial;
}
#monthDaySelect { text-align: center; margin: 40px;
}
.year { margin: 10px; color: grey; font-size: 18px; cursor: pointer;
}
.month { margin: 8px; color: grey; cursor: pointer;
}
.month:hover { color: MediumSeaGreen;
}
.year:hover { color: MediumSeaGreen;
}
.selectedYear { color: MediumAquaMarine; font-weight: bold;
}
.selectedMonth { color: LightSeaGreen; font-weight: bold;
}
.eventCard { text-align: center; border: solid 2px grey; padding: 10px; width: 50%; margin: auto; margin-bottom: 10px;
}

Milestones - 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; }
var Milestones = function (_React$Component) { _inherits(Milestones, _React$Component); function Milestones(props) { _classCallCheck(this, Milestones); // Convert date strs to Date objects var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.props.events.forEach(function (e) { return e.date = Date.parse(e.date); }); _this.state = { year: '2014', month: 'Apr' }; _this.getEventsByDate = _this.getEventsByDate.bind(_this); _this.getEventYears = _this.getEventYears.bind(_this); _this.getEventMonths = _this.getEventMonths.bind(_this); _this.changeYear = _this.changeYear.bind(_this); return _this; } Milestones.prototype.render = function render() { var _this2 = this; var years = this.getEventYears().map(function (year) { return React.createElement( 'span', { className: (year == _this2.state.year ? 'selectedYear' : 'null') + ' year animated bounceIn', onClick: function onClick() { return _this2.changeYear(year); } }, year ); }); var months = this.getEventMonths(this.state.year).map(function (month) { return React.createElement( 'span', { className: (month == _this2.state.month ? 'selectedMonth' : 'null') + ' month animated bounceIn', onClick: function onClick() { return _this2.setState({ month: month }); } }, month ); }); var events = this.getEventsByDate(this.state.month + ' ' + this.state.year).map(function (e) { return React.createElement(Event, { key: Math.random(), event: e }); }); return React.createElement( 'div', null, React.createElement( 'div', { id: 'monthDaySelect' }, years, React.createElement('br', null), React.createElement('br', null), months ), React.createElement('br', null), events ); }; Milestones.prototype.getEventsByDate = function getEventsByDate(date, matchYearOnly) { var d = Date.parse(date); if (matchYearOnly) { return data.filter(function (e) { return e.date.getFullYear() == d.getFullYear(); }); } else { var time = d.getTime(); return data.filter(function (e) { return e.date.getTime() == time; }); } }; Milestones.prototype.getEventYears = function getEventYears() { var years = {}; for (var i = 0; i < this.props.events.length; i++) { var yr = this.props.events[i].date.getFullYear(); years[yr] = true; } return Object.keys(years); }; Milestones.prototype.getEventMonths = function getEventMonths(year) { if (typeof year == 'number') { year = year.toString(); } var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var months = {}; this.getEventsByDate(year, true).forEach(function (e) { var monthName = monthNames[e.date.getMonth()]; months[monthName] = true; }); return Object.keys(months); }; Milestones.prototype.changeYear = function changeYear(year) { this.setState({ year: year, month: this.getEventMonths(year)[0] }); }; return Milestones;
}(React.Component);
var Event = function (_React$Component2) { _inherits(Event, _React$Component2); function Event(props) { _classCallCheck(this, Event); return _possibleConstructorReturn(this, _React$Component2.call(this, props)); } Event.prototype.render = function render() { return React.createElement( 'div', { className: 'eventCard animated fadeIn' }, React.createElement( 'h1', null, this.props.event.title ), React.createElement( 'p', null, this.props.event.description ) ); }; return Event;
}(React.Component);
var data = [{ date: 'April 2014', title: 'MMM starts', description: 'Minds Matter Magazine starts', image: '', links: []
}, { date: 'July 2014', title: 'Advisory Board starts', description: '', image: '', links: []
}, { date: 'Oct 2014', title: 'Coop term to get MMM off the ground', description: '', image: '', links: []
}, { date: 'Jan 2015', title: 'Website Launched and first article launched', description: '', image: '', links: []
}, { date: 'May 2015', title: '~25 masthead members', description: '', image: '', links: []
}, { date: 'May 2015', title: 'MMM and Scientific Communication in Psychology', description: '', image: '', links: []
}, { date: 'June 2015', title: '3M National Student Fellow', description: '', image: '', links: []
}, { date: 'August 2015', title: 'SCSU Orientation training GLs; Quiet Space starts', description: '', image: '', links: []
}, { date: 'September 2015', title: 'First Newsletter released', description: '', image: '', links: []
}, { date: 'October 2015', title: 'Dragons Den - $7000 and “Best Social Cause” ', description: '', image: '', links: []
}, { date: 'October 2015', title: 'Joined the Hub', description: '', image: '', links: []
}, { date: 'October 2015', title: ' MMMonster ArtSideOut exhibit', description: '', image: '', links: []
}, { date: 'October 2015', title: 'Nature Walks with Build Blue', description: '', image: '', links: []
}, { date: 'November 2015', title: 'Issue 1 Launched', description: '', image: '', links: []
}, { date: 'Nov 2015', title: 'MMM UTSC Resource Map', description: '', image: '', links: []
}, { date: 'December 2015', title: 'HEQCO Blog Post -- featured in Academia Top 10', description: '', image: '', links: []
}, { date: 'January 2016', title: 'Joined H2i', description: '', image: '', links: []
}, { date: 'January 2016', title: 'Central Michigan University talk; Contemporary Issues in Higher Education', description: '', image: '', links: []
}, { date: 'Feb 2016', title: 'Started Quiet Spaces at IDC', description: '', image: '', links: []
}, { date: 'March 2016', title: '6 masthead members', description: '', image: '', links: []
}, { date: 'March 2016', title: 'Best Booth at March Showcase', description: '', image: '', links: []
}, { date: 'March 2016', title: 'HST211 (Canadian Health Policy Class For the Health Studies Program): Panel Discussion', description: '', image: '', links: []
}, { date: 'May 2016', title: 'CTL Faculty Teaching Showcase', description: '', image: '', links: []
}, { date: 'June 2016', title: '1000 Likes on Facebook', description: '', image: '', links: []
}, { date: 'June 2016', title: 'Gender & Disability', description: '', image: '', links: []
}, { date: 'June 2016', title: 'Accepted for CACUSS 2016 Big Ideas', description: '', image: '', links: []
}, { date: 'July 2016', title: 'Mind My Art contest - involved 16 post-secondary campuses across the country', description: '', image: '', links: []
}, { date: 'August 2016', title: 'SKULE Orientation partnership', description: '', image: '', links: []
}, { date: 'September 2016', title: 'MMM Resource Navigator', description: '', image: '', links: []
}, { date: 'October 2016', title: 'Issue 2 Launched', description: '', image: '', links: []
}, { date: 'October 2016', title: 'Champions Program launched', description: '', image: '', links: []
}, { date: 'November 2016', title: '33 masthead members', description: '', image: '', links: []
}, { date: 'December 2016', title: 'Reporting Guide', description: '', image: '', links: []
}];
ReactDOM.render(React.createElement(Milestones, { events: data }), document.getElementById("app"));
Milestones - Script Codes
Milestones - Script Codes
Home Page Home
Developer Neeilan Selvalingam
Username neeilan
Uploaded September 13, 2022
Rating 3
Size 6,285 Kb
Views 32,384
Do you need developer help for Milestones?

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!

Neeilan Selvalingam (neeilan) Script Codes
Name
NeeilWiki
UTSCMap
Simon Game
Parallaxtest
Firebase-test
NeeilTwitch
Portfolio Website
RenderTest
NeeilTimer
RecipeBox
Create amazing captions 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!