Skip to content

Instantly share code, notes, and snippets.

View yi-mei-wang's full-sized avatar
👻
Inactive on GitHub

Yi Mei Wang yi-mei-wang

👻
Inactive on GitHub
8 followers · 7 following
View GitHub Profile
@yi-mei-wang
yi-mei-wang / SQLite.md
Last active April 25, 2019 10:14
SQLite
  1. Count the votes for Sen. Olympia Snowe, whose id is 524.

sqlite> SELECT COUNT(id) FROM votes WHERE politician_id = 524;
23

  1. Now do that query with a JOIN statement without hard-coding the id 524 explicitly, querying both the votes and congress_members table.

sqlite> SELECT COUNT(votes.id) FROM votes JOIN congress_members
...> ON votes.politician_id = congress_members.id
...> WHERE congress_members.name = 'Sen. Olympia Snowe';

@yi-mei-wang
yi-mei-wang / polldb.md
Last active April 26, 2019 03:58
POLL DB MODIFY

Simple adding and deleting

  1. The Texas vote is close! Add 2 new voters, and fabricate a vote for each of the 2 incumbent senators of Texas. Make up their names and info.

INSERT INTO voters
VALUES(
5001, 'Jon', 'Rain', 'male', 'democrat', '3', 24, 0, 0, 0, 0, DATETIME('now'), DATETIME('now')
);

INSERT INTO voters

@yi-mei-wang
yi-mei-wang / js-loops.md
Created July 16, 2019 13:37
16 Jul 2019 Office Hours Notes

const favSingers = [
        "Yuna",
        "Britney Spears",
        "Backsteet Boys",
        "Spice Girls",
        "Meatloaf"
];

  1. programmatically print out the numbers
  2. generate numbers from 1 to n (the number of elements inside the array)
@yi-mei-wang
yi-mei-wang / html-css-layout.md
Last active September 20, 2019 09:34
HTML & CSS summary notes

How to change the layout of HTML elements?

  1. Make use of display and position properties

  1. What is the display property?

    • Allows you to adjust how the elements are placed on the web page

    • Some most commonly used values:

@yi-mei-wang
yi-mei-wang / display-flex.md
Created September 26, 2019 08:35
Display flex notes

What is the flex box?

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

https://stackoverflow.com/questions/37815450/flex-items-ignoring-width

Key points from today's lesson

  1. Apply display: flex; on the parent of the elements you are trying to arrange.
  2. justify-content and align-items allows you to move the elements left and right, up and down
@yi-mei-wang
yi-mei-wang / README.md
Last active September 30, 2019 02:43
Responsive width and height

Responsive width and height

Using % as width and height values

  • Ensure that you know what you are using % relative to

  • % is usually relative to the parent

  • Let's see some code!

    <div class="image-wrapper">
@yi-mei-wang
yi-mei-wang / fizzbuzz.html
Last active October 1, 2019 12:59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>FIZZ BUZZ WOOOOOF</title>
</head>
<body>
<button onclick="playGame()">PLAY GAME</button>
@yi-mei-wang
yi-mei-wang / Tic tac toe.md
Created October 4, 2019 03:03
How to start building tic tac toe?

Ask important questions when you're just starting to build something

What HTML do I need?

  • 3x3 grid
    • div? button? table?
  • New game button
  • A header to announce the winner
  • A section to keep track of the current winner
@yi-mei-wang
yi-mei-wang / ttt-js.md
Last active October 4, 2019 06:13
How to get started with tic-tac-toe, JS version

Some key functions to use when building the tic-tac-toe logic

Selecting elements

  • We select elements because we want certain parts of the web page to do some thing.
  • Once we select them, we can then perform some action on them, such as change the style, add child elements (such as using append())

Returns one element

  • document.getElementById()
@yi-mei-wang
yi-mei-wang / react-intro.md
Last active October 10, 2019 01:38
Introduction to React.js

What is state?

The condition of the component at a particular time

  • Initial state is what the component should be like when the page is loaded for the first time

  • Modifying your state

    • this.setState()
  • render() gets called every time this.setState() is invoked