gregoryanderson

In order to set up I used the Developer onbaording set up

I occassionally reference the System76 set up

1. Install Docker

This is done.

2. Set up password-less Github and add your new ssh key to ~/.ssh

gregoryanderson

To start the challenge, I read over the four steps and evaluated where struggles may happen. I felt most uncomfortable about the first step, whereas working within the Pico documentation in steps 2-4 made me feel a bit more at ease.

Add wrapper.local as a local host to your /etc/hosts.

I had never been in the ‘hosts’ file and learned a bit about it along the way. The ‘hosts’ file can override the default DNS information on your system. There are some slight differences in the appearance of the ‘hosts’ depending on your machine. I am using a Mac and followed the guidelines from this explanation: https://www.imore.com/how-edit-your-macs-hosts-file-and-why-you-would-want#page1

I also found this explanation from the NetApp library useful: https://library.netapp.com/ecmdocs/ECMM1278401/html/nag/GUID-DBF81E5C-CF3C-4B07-AF01-83A625F2B4BF.html, In particular the line of: “IP_address host_name aliases”

With this information, I configured my ‘hosts’ file to show this:

gregoryanderson

import styled from 'styled-components';

export const Title = styled.h1`
color:dodgerblue;
height: 4em;
`

export const Button = styled.button`
background-color: ${props => props.card ? "rebeccapurple" : "papayawhip"};
`

gregoryanderson

import React from "react";
import './Card.css'
import {Button} from "./styles"

const Card = props => {
  return (
    <section className="Card">
      <h1>{props.title}</h1>
      <p>{props.description}</p>
      <Button card onClick={() => props.deleteCard(props.id)}>Delete</Button>

gregoryanderson

import React, { Component } from "react";
import "./Form.css";
import {Title, Button} from './styles'

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      description: ""

gregoryanderson

import styled from 'styled-components';

export const Title = styled.h1`
color:dodgerblue;
height: 4em;
`

export const Button = styled.button`
background-color: papayawhip;
`

gregoryanderson

import React, { Component } from "react";
import "./Form.css";
import {Title, Button} from './styles'

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      description: ""

gregoryanderson

render() {
    return (
      <section className="form">
        <form>
          <Title>Content Maker</Title>
          <section className="form-section">
            <label htmlFor="title">Title</label>
            <input
              type="text"
              name="title"

gregoryanderson

import React, { Component } from "react";
import styled from "styled-components";
import "./Form.css";

const Title = styled.h1`
  font-size: 4em;
  color: dodgerblue;
`;

gregoryanderson

import React, { Component } from "react";
import "./Form.css";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "",
      description: ""
    };