Uthai Roemtrakul riahtu

## py2php.py
import ast
from cStringIO import StringIO
import sys

INFSTR = '1e308'

def interleave(inter, f, seq):
  seq = iter(seq)
  try:
    f(next(seq))

## Message.js
import React, {Component} from 'react';
import '../styles/Message.css';

export default class Message extends Component{

    constructor(props){
        super(props);
        this.state = {
            id: props.msg.id,
            title: props.msg.title,

## MessageList.js
import React, {Component} from 'react';
import Message from './Message';
import '../styles/MessageList.css';

export default class MessageList extends Component{

    constructor(){
        super();
        this.state = {
            messages: [

## max-width.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Width vs Max-Width</title>
    <style>
        main{
            background-color: lightskyblue;
            padding: 1rem;
            min-width: 800px;

## grid-position.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Grid Positioning</title>
    <style>
        main{
            display:grid;
            grid-template-columns: 1fr 3fr 1fr 1fr;
            grid-template-rows: 15rem 12rem 5rem;

## Main.js
import React, { Component } from 'react';
import { Button, Container, Row, Col } from 'reactstrap';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
//import 'bootstrap/dist/css/bootstrap.css';
//only needed at top level

import './Main.css';

export default class Main extends Component{


## dropdowns.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Drop-Down Lists</title>
    <style>
        html{
            box-sizing: border-box;
            font-size: 20px;
            line-height: 1.6;

## opacity-transparency.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS opacity vs hsla vs rgba</title>
    <style>
        html,
        body{
            background-color: coral;
            font-size: 20px;

## angled-backgrounds.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angled Backgrounds</title>
    <style>
        :root{
            --hue: 74deg;
            --mastC: hsl(74deg, 84%, 89%);
            --firstC: hsl(74deg, 34%, 59%);

## media-queries.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Queries Beyond Width</title>
    <style>
        p{
            color: orange;
            font-size: 1.5rem;
                padding: 1rem;
	import ast
	from cStringIO import StringIO
	import sys

	INFSTR = '1e308'

	def interleave(inter, f, seq):
	seq = iter(seq)
	try:
	f(next(seq))
	import React, {Component} from 'react';
	import '../styles/Message.css';

	export default class Message extends Component{

	constructor(props){
	super(props);
	this.state = {
	id: props.msg.id,
	title: props.msg.title,
	import React, {Component} from 'react';
	import Message from './Message';
	import '../styles/MessageList.css';

	export default class MessageList extends Component{

	constructor(){
	super();
	this.state = {
	messages: [
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS Width vs Max-Width</title>
	<style>
	main{
	background-color: lightskyblue;
	padding: 1rem;
	min-width: 800px;
	import React, { Component } from 'react';
	import { Button, Container, Row, Col } from 'reactstrap';
	import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
	//import 'bootstrap/dist/css/bootstrap.css';
	//only needed at top level

	import './Main.css';

	export default class Main extends Component{