JSFiddle - React, Tailwind, and code Playground

by kontrax

HTML

<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="app"></div>

CSS

/*************
{
  	date:    date
    weekday: weekday
    note:    note
}
{
  year_mnd_date: ""
  year_mnd_date: ""
  year_mnd_date: ""
  year_mnd_date: ""
  year_mnd_date: ""
}
[
  { id: year_mnd_date, note: '' },
  { id: year_mnd_date, note: '' },
  { id: year_mnd_date, note: '' },
  { id: year_mnd_date, note: '' },
  { id: year_mnd_date, note: '' }
]
---------------------------------------------
- Koss mange dager i februar
- koss mange dager i denne måneden

function daysInMonth(iMonth, iYear)
{
    return new Date(iYear, iMonth, 0).getDate();
}
---------------------------------------------
Date
 .getDate()      > 1 - 31
 .getMonth()     > 0 - 11 (NOTE: 0=January, 11=December)
 .getFullYear()  > X

date
 .setDate(day)            - Oppgave B????
 .setMonth(month [, day])
/*************
INN
- år
- mnd

ÅR
- skyddår

MND
- kor mange dager i mnd

UKE
- ukedag

DATO
- xx.xx.xxxx

/*************
Event-Loop


Data
  getData (input felt)
  getMonth (hvor mange dager i mnd?)
  getDaysInMonth (tar seg av skuddår blandt annet)

  selectMonth (setter aktiv mnd)
  selectYear (setter aktivt år)

Rendering (Presentasjon)
  showDays (viser dagene i aktiv mnd og år)

******************************

var my_array = [1,2,3];

var new_array = arr.map((value, index) => {
	return value * 2;
})

var new_array_2 = [];
arr.forEach((value, index) => {
	new_array_2[index] = value;
})

*************/

#input_month,
#input_year {
  Xwidth: 150px !important;
}
#outText,
#outText > div {
  Xoutline: 1px solid red;
  zoom: 0.5;
}
form > h1 { display: none; }

/* ================================== */


html {
    background: #333333;
}

nav {
   text-align: center;
   margin: 10px;
}

#txt {
    background-color: #F1F1F1;
    text-align: center;
    padding: 40px;
    font-family: "Allerta Stencil", Sans-serif;
    font-size: 3em;
}

.content {
    background-color: #F1F1F1;
    padding: 40px;
    max-height: 70%;
    min-height: 40%;
    margin: 10px;
    font-family: Arial, Helvetica,...

Babel + JSX

const weekdays   = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
const storageID  = "notesDay"

let currentYear  = 2000
let currentMonth = 1

class CalendarDay extends React.Component
{//=============================================================================

	render ()
	{
		const {
			// day,
			id,
			date,
			weekday,
			note,
			onChange,
			onBlur,
			...rest,
		} = this.props

		const sunday = (/*day.*/weekday ===  6 ? "highlight" : "")

		return (
			<div
				className = {[
					'day_container',
					sunday,
				].join(' ')}
			>
				<div className="day_date">
					<h2>{(/*day.*/date < 10 ? "0" : "") + /*day.*/date}</h2>
					<h3>{weekdays[/*day.*/weekday]}</h3>
				</div>
				<textarea
					id       = {/*day.*/id}
					cols     = {30}
					rows     = {2}
					onChange = {onChange}
					value    = {/*day.*/note}
					onBlur   = {onBlur}
				/>
		 </div>
	)}

}//=============================================================================

class CalendarMonth extends React.Component
{//=============================================================================

	render ()
	{
		const {
			dayList  = [],
			onChange = (e) => { console.log(e) },
			onBlur,
			...rest,
		} = this.props

		return (
		<div {...rest}>
			{dayList.map((day, idx) => (
				<CalendarDay
					key      = {day.id}
					onChange = {onChange}
					onBlur   = {onBlur}
					{...day}
				/>
			))}
		</div>
	)}

}//=============================================================================

class Calendar extends React.Component
{//=============================================================================

	constructor (...args)
	{
		super(...args)

		this.storageID = 'reactCalTest'
		this.state = {
			currentYear:  new Date().getFullYear(),
			currentMonth: new Date().getMonth(),
			data:        ...