Skip to content

Instantly share code, notes, and snippets.

@kraigh
kraigh / github-pr.sh
Created May 21, 2015 20:48
github pull request helper
#!/usr/bin/env bash
branch=$(git symbolic-ref --short HEAD)
remote=$(git config --get remote.origin.url)
url=${remote/git\@github\.com\:/https://github.com/}
url=${url/\.git/\/compare/}
base=
while getopts b: opt; do
case $opt in
b)
@kraigh
kraigh / bower.json
Last active August 29, 2015 14:23 — forked from ericlbarnes/bower.json
{
"name": "project",
"version": "0.0.0",
"authors": [
"Eric Barnes <[email protected]>"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
{
"atomic_save": true,
"default_line_ending": "unix",
"draw_white_space": "all",
"ensure_newline_at_eof_on_save": true,
"fallback_encoding": "UTF-8",
"highlight_line": true,
"shift_tab_unindent": true,
"tab_size": 2,
"translate_tabs_to_spaces": true,
<?php
if (!empty($_POST)) {
if (empty($_POST['name'])) {
$_POST['name'] = 'anonymous';
}
if (empty($_POST['greeted'])) {
$_POST['greeted'] = 'none';
}
if (empty($_POST['comments'])) {
jQuery(document).ready(function ($) {
$.getJSON("http://kraigh.com/cse104/reviews.php", function(data) {
$.each(data, function(index, val) {
console.log(val);
var starsHtml = '';
for (var i = 0; i < 5; i++) {
// subtract 1 from rating since i starts at 0
if (i > (parseInt(val.rating, 10) - 1)) {
starsHtml += '<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>';
} else {
@kraigh
kraigh / index.html
Created November 1, 2016 20:31
CSE 104 Reviews Page
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
@kraigh
kraigh / index.html
Created November 2, 2016 18:47
facebook header
<!DOCTYPE html>
<html>
<head>
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
// This would go inside the fuction that gets called after your list (GET) AJAX completes and you have an array of ToDos
for (let index = 0; index < todos.length; index++) {
// Create todo container
var todo = document.createElement("article");
todo.setAttribute("id", todos[index].id);
todo.setAttribute("class", "todo");
if (todos[index].completed) {
todo.classList += " completed";
}

Requirements

  • Make sure you have a terminal application on your computer. On Mac, the default "terminal" application will work. On Windows, use the command prompt, or another terminal program. If using the VS Code editor, a terminal is built in.
    • Windows Users: If you get an error when running npm deploy in the command prompt, try installing an alternative terminal application. One of the following should work:
  • Try running git --version in your terminal. If you get an error, install git from here: https://git-scm.com/downloads
  • Install Node.js which includes npm. To test if you have this installed, run npm -v and if it is installed, you should see a number output with the current version. Make sure it is greater than 5.2.
  • If npm is not installed, go here to install Node.js: https://nodejs.org/en/

Setup

ToDo React

Setup

  • Make sure you've followed the instructions here and have a working React app that is published to Github Pages.
  • If you're using Bootstrap, jQuery, or another framework that you're loading via a CDN, copy your <link> or <script> tags that load the frameworks into public/index.html.
    • CSS you will want to load above the existing <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> line.
    • jQuery, etc you will want to place right before the closing </body> tag.
    • Note: you DO NOT need to load any of your custom CSS files here, React will do that for us. Only add frameworks or tools that you're loading via CDN, like Bootstrap or Font Awesome.
  • Copy all of your CSS into src/App.css.