In order to set up I used the Developer onbaording set up
I occassionally reference the System76 set up
This is done.
In order to set up I used the Developer onbaording set up
I occassionally reference the System76 set up
This is done.
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.
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:
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"}; | |
` |
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> |
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: "" |
import styled from 'styled-components'; | |
export const Title = styled.h1` | |
color:dodgerblue; | |
height: 4em; | |
` | |
export const Button = styled.button` | |
background-color: papayawhip; | |
` |
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: "" |
render() { | |
return ( | |
<section className="form"> | |
<form> | |
<Title>Content Maker</Title> | |
<section className="form-section"> | |
<label htmlFor="title">Title</label> | |
<input | |
type="text" | |
name="title" |
import React, { Component } from "react"; | |
import styled from "styled-components"; | |
import "./Form.css"; | |
const Title = styled.h1` | |
font-size: 4em; | |
color: dodgerblue; | |
`; |
import React, { Component } from "react"; | |
import "./Form.css"; | |
class Form extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
title: "", | |
description: "" | |
}; |