Liren lirenyeo

Final Assessment

Book Your Timing (need spreadsheet URL here for booking)

How it works?

1. Build a full-stack web application with Python Flask server and ReactJS client.

These are some examples you can work on:

Trip Advisor Clone
Pinterest Clone

Google Places APIs

`/maps/api/place/autocomplete`

Takes input string and return multiple matching addresses with place_id
Can use lat,lng location + radius to create bias result
result is different than /textsearch
ex: no result for ไลฟ์ สุทธิสาร

`/maps/api/place/queryautocomplete`

Can process request like 'cafe near me'

Now that you understand the basics of HTML and CSS, let's put that to test by building a webpage that looks like this:

Some of the resources you might need:

Font - Solway Google Font
Book Image - https://images-eu.ssl-images-amazon.com/images/I/410%2BtmN-P%2BL.jpg
Navbar and Footer color - #3a3a3a
Middle section background color: lightgray

CSS Exercise (Ninja Joe Profile Page)

Download the HTML file from here: https://bit.ly/2FwrMCN
Style the site to make it look like this:

Desktop

In order for developers to build feature for users to upload videos directly to Vimeo, account owner needs to create a 'developer app' that comes with Personal Access Token and Secret Keys (we usually just call all these "API Keys"), and pass that to programmers.

Vimeo also requires owner to specifically request for permission to do direct video upload, this request might take up to 5 days for approval, so please prepare it as early as possible.

Note: For direct video upload, the vimeo account needs to be of Pro, Business, Premium or Enterprise tier

Steps

Visit https://developer.vimeo.com/apps/new
Click 'Create An App'
Fill in App name and description

	# All translation key-value pair must be have String datatype as key

	require 'fileutils'

	dir = '/Users/liren/Desktop'
	SOURCE_LANG = 'EN'
	LANGS = ['ID', 'MS', 'TH', 'ZH']

	def translate(file_path, lang)
	lines = IO.readlines(file_path).map do \|line\|

	import React from 'react'
	class App extends React.Component {
	state = {
	input: '', // The actual typed text
	hasImage: false, // The checkbox state to indicate whether there is an image
	}

	handleInput = e => {
	// Uncheck image whenever typed text length is 15 or less, else it remains in the original state
	// A perhaps more readable code would be:

	<html lang="en">
	<head>
	<title>Day 2 Exercise</title>
	<!-- Link your CSS to this file -->
	</head>

	<body>
	<!-- RULE 1: NO MODIFICATION ON HTML -->
	<!-- RULE 2: NO INLINE-STYLING -->

	require 'prawn'


	arr = HallSession
	.joins(:check_in_sessions, :hall)
	.group('check_in_sessions.hall_session_id, auditorium_halls.name, hall_sessions.start_at, hall_sessions.end_at, hall_sessions.id')
	.select('auditorium_halls.name as hall_name, hall_sessions.start_at, hall_sessions.end_at, COUNT(*) as c')
	.order('hall_name, start_at, end_at')
	.map do \|ci\|
	[