Forem: Chris Blakely

10 tips to start building your own projects and break out of "Tutorial Hell"

Chris Blakely — Thu, 27 Aug 2020 10:33:44 +0000

1. Finish a tutorial, then add your own stuff to it

I like this approach as its often daunting to start from a blank slate. Finish a tutorial in the usual way, but instead of stopping then and going about your day, try to add new features. You could even change a feature you just created

2. Pause at certain points and try it yourself

Any decent tutorial will (hopefully) be broken up into sections e.g "Next we're gonna add a TODO". These are good points in a video/tutorial to pause and try coding that next thing yourself

3. Try the Tutorial before you follow along with it

One approach I'm trying with my YouTube channel is to show a working example/provide starter code up front and encourage people to try the project themselves before they follow along. You can try this approach with just about any tutorial

4. Look at your favorite sites/apps for inspiration

What apps and sites do you use every day? Let's take Reddit as an example. I'm not saying "Yo stop doing tutorials and go build a Reddit clone", but take a small part and try and replicate it.

For example, display a Reddit post that you can upvote. Next, turn this into a list of Reddit posts. Then add comments to each. And so on

5. When you have a handle on smaller projects, build a big one

I personally wouldn't recommend ya'll go aiming to build massive projects from the start. This can be disheartening when you get stuck. But you should aim to build a massive project once you feel "comfortable". i.e, finished a few smaller ones.

This will give you practice with a few things:

How to plan then code features
How to use Google/Reddit/Stackoverflow to solve problems
How to think by yourself (no tutorial = no safety net)

6. Scratch your own itch

So recently I noticed I'm dehydrated as hell since I don't drink enough water but consume copious amounts of coffee. So I made a small app to remind/track how much I drink. I could have gone to the app store and got one but I learned building an app that solves a problem I have

Ask friends and family what problems they're having a see if you can make an app to solve it

7. Overcome the fear

Dunno what causes this, but there seems to be a "fear" of starting a new project. Maybe in case we get stuck, get it "wrong", hit too many bugs etc. The best thing to do is realise you might not get it right, or have all the answers at the start. This is part of the game - overcoming bugs and solving problems as we go

8. It gets easier with practice

The more you practice the more you'll have those "Ah I've seen this shitty problem before" moments, and you can "reuse" code/logic from other problems you've solved

9. Just build stuff

Ultimately the best way to learn is to build stuff and write code. Pick something and run with it. What's the worst that could happen? You'll "waste" a few hours/days but I know for a fact that you'll have learned something, which is the main thing

10. Have fun

This doesn't really solve the problem of breaking out of tutorial hell but I couldn't end on 9 points. So make sure you're having fun when building stuff or else it'll feel like "work". And remember to stay hydrated.

Still stuck for ideas?

Why not try building some React projects to boost your learning even further? I send out project ideas every few weeks(ish) with project ideas, starter code, and tips. Subscribe to get this straight to your inbox!

What is Reacts useState hook? 4 common examples you'll need to know

Chris Blakely — Mon, 24 Aug 2020 10:41:06 +0000

Originally posted at jschris.com

What is the useState hook?

Before we get into it, its a good idea to have a look what the useState hook is. In a nutshell:

the useState hooks lets us store "state" as data, which our functional components can use

In other words, when you have things that can change on your UI, you can store it in state. React then "reacts" and rerenders your components when the state changes. Cool right? The useState hook looks like this:

const [number, setNumber] = useState(5);

The useState "hook" is just a function call:

useState(5);

This function gives us back an array. We use array destructuring to get 2 things out of the array:

A variable that holds the current value of the state object (in this case, it's called number)
A function that lets us update the state variable (in this case, its called setNumber)

I've called these things number and setNumber but you can name them whatever you want. It's a good idea to name them similar to what they represent, and the function to update the state value should be prefixed with "set" like so:

const [name, setName] = useState('Chris');
const [age, setAge] = useState(28);

You may notice I am passing some values ("Chris" and the number 28) to these state objects. This is how we set an initial state. This is optional, you don't have to set an initial state if you don't want to.

Once we've setup state, we can change the state value using the setter function like so:

const [name, setName] = useState('Chris');
const [age, setAge] = useState(28);

setName('Chris McNew Name');
setAge(29);

This will update our state values, causing React to rerender our components with the new values.

We can store a number of different things in state, depending on how you want to represent the data on your UI:

Strings
Numbers
Booleans
Objects
Arrays

Now that we've learned what is the useState hook is, let's look at 5 common examples you'll need to know when using the useState hook!

1. Showing/hiding things

Number 1 on our list is showing and hiding things. This can be a range of things:

Showing and hiding a modal
Showing a loading spinner
Toggling the display of a component

Let's look at an example where if the user clicks a button, the text "This text will show" will appear on the page:

import React, { useState } from 'react';

export default function App() {
    const [showText, setShowText] = useState(false);

    return (
        <div className='App'>
            <button onClick={() => setShowText(!showText)}>Toggle Text</button>

            {showText && <div>This text will show!</div>}
        </div>
    );
}

We have a state object:

const [showText, setShowText] = useState(false);

This is to indicate wether the text should show or not. In other words, this holds the state of the text, which will either be shown/or hidden.

We then have some logic around the component we want to show based on this:

{
    showText && <div>This text will show!</div>;
}

This basically reads as if showText is true, render the JSX. So since showText is initally false, the text won't appear. If you initialised the showText state object to be true, the text would appear.

Having to manually change code to show and hide the text isn't the best user experience, so let's look at how we can show/hide this component using a button click. When the button is clicked, it will change the state to the opposite of what it was previously:

<button onClick={() => setShowText(!showText)}>Toggle Text</button>

Notice we use the setShowText function along with a lovely inline arrow function to change the state when the button is clicked. This sets it to the opposite of what it currently is. When this changes, the component rerenders, and displays the text based on the new showText value.

2. Conditional Rendering

Similar to showing and hiding things, we can conditionally render based on a state value. Lets take the example of a logged in user. If a user goes to our app who isn't logged in, we want to show them the "Sign in" screen. If they are logged in, we want to show them the "Dashboard":

import React, { useState } from 'react';

function SignInScreen() {
    return <div>Please login!</div>;
}

function DashboardScreen() {
    return <div>Hello! Welcome to your dashboard</div>;
}

export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return <div className='App'>{isLoggedIn ? <DashboardScreen /> : <SignInScreen />}</div>;
}

Firstly, we store a value called isLoggedIn in state. This tells us if the user is logged in or not. Next, we use the ternary operator to decide which component to render:

isLoggedIn ? <DashboardScreen /> : <SignInScreen />;

This means "if logged in is true, show the DashboardScreen component. Else, show the SignInScreen component.

In a fully fledged app, the "SignInScreen" component would do some stuff to log the user in and then change the isLoggedIn state value to true. This would rerender the component App component and the user will be shown the Dashboard. Hurray!

3. Holding a list of data

Quite often you'll need to display a list of data in your app (did someone say TODO LIST?). To do this, you can store the list in state, and render each item in the list as a component:

import React, { useState } from 'react';

export default function App() {
    const [todos, setTodos] = useState([
        { description: 'First thing on the list', isComplete: false },
        { description: 'Second thing on the list', isComplete: false },
        { description: 'Last thing todo', isComplete: false },
    ]);

    return (
        <>
            {todos.map((todo) => (
                <div>
                    Description:
                    {todo.description} - Completed:
                    {todo.isComplete.toString()}
                </div>
            ))}
        </>
    );
}

Notice how we initialised the state value with our data - in this case it's an array of objects. Each object holds some information about a Todo item - the items description and whether the item is completed or not.

We then use the map function to iterate over the todos state object and display the description and whether it is completed or not to the screen.

Since we stored this data in state, if the list changes in any way, such as if we removed or added an item, this would trigger a state change and update the component with the new list.

4. Holding form values

Working with forms can be a pain, luckily for us using React hooks makes it easier. Let's say we have a simple login form, when the user logs in and alert pops up showing the information they enter. OK so I never said it was a very good login form. Anyways...

import React, { useState } from 'react';

export default function App() {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const handleFormSubmit = () => {
        alert(`username is ${username}, password is ${password}`);
    };

    return (
        <>
            <form onSubmit={handleFormSubmit}>
                Username:
                <input value={username} onChange={(e) => setUsername(e.target.value)} />
                Password:
                <input value={password} onChange={(e) => setPassword(e.target.value)} />
                <button type='submit'>Submit</button>
            </form>
        </>
    );
}

Our form has 2 values, each of which has their own state value. Whenever the user types into a form field, we change the state value for that form field. Since we have quick access to the form field values, we can perform other logic easily, such as validation in the handleFormSubmit function:

const handleFormSubmit = () => {
    if (!username || !password) {
        alert(`Please enter a username and password!`);
    }
};

Want to try putting these ideas into action?

Fast track your React learning with these 12 Tips!

Chris Blakely — Fri, 14 Aug 2020 09:40:26 +0000

If you're learning React you might be overwhelmed by how much stuff there is. Components, classes, props, state, hooks, reducers the list is endless! Here are the top 12 tips that helped me focus and learn React.

Quick note, I am by no means saying you HAVE to follow this advice, this is just what worked for me. In the end, it's all about doing what works for you. With that out of the way, let's get into it!

1) Learn the right amount of JavaScript and ES6

It’s easy to jump into a framework right off the bat, but you’ve got to walk before you can run, right? I bet you're sick of hearing that! Another thing you're probably sick of hearing is “you need to know JavaScript before learning a framework!”. While this advice is true, it offers another, often unanswered question. “How MUCH JavaScript do I need to know before learning React?”

I was far from a JavaScript expert when I taught myself React 3 years ago. But there are some important things I did know which you should too before learning React (or any library/framework for that matter).

Functions (including ES6 arrow functions)
Variables (const & let)
Data types
Objects and arrays (And how to work with them)
Importing/Exporting modules
Working with an API
Understand how manipulating the DOM works

If you have a basic idea of how these things work, you’ll be able to have a good crack at React. Working with React will make you a better JavaScript developer as you're still working with JavaScript - React is a JavaScript library after all!

2) Use create-react-app

Using creating-create-app you can find the GitHub for more information here is a great way to get started. It gives you a working example project out the box, so you don't have to worry about setting one up from scratch yourself!

This means you can ignore things like Babel, webpack, and all the other fancy buzzwords for now at least. When you have a good handle on React, you can deep deeper into these topics.

3) Forget about Redux, Context API, and other fancy State Management Things

Speaking of buzzwords, you may have come across Redux, which is a state management framework for React. While Redux is pretty cool and has its uses for larger apps, You do not need to learn Redux when starting with React! React has it’s own state management features, which are easier to understand and more than enough to get you going in the beginning.

4) Focus on functional components

If you wanted to store state in a component, you would have traditionally needed to use an ES6 class component. Class components are a bit clunky (having to worry about binding “this”, dealing with constructors, difficult to store/update complex state, and so on):

// function component
const App = (props) => {
    return <h2>Hello my name is {props.name}.</h2>;
};

// class based component
class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h2>Hello my name is {this.props.name}.</h2>;
    }
}

Function components and hooks are becoming the “nicer” way to create react components. Function components are just normal JavaScript functions that return JSX. These combined with the “useState” hook make creating and working with components a much nicer experience.

I’m not saying “stay away from class components!”, if you want to learn them, by all means, go ahead! It'll be useful knowledge to have. Things are leaning towards Hooks more though, so don't neglect them!

5) Pick one way to style a component

There are several ways to style a component in React (who would have thought, right?) Last I counted there were at least 8. Crazy.

Anyways, try not to confuse yourself by learning all the different ways you can style a component. Plain old CSS and stylesheets work just as well when you’re starting out. Not to mention most companies I've worked with recently use plain CSS, so it's a pretty standard way to do things even with React.

6) Learn the useState Hook

I mentioned the useState hook previously, so what is it?

The useState hook lets us store state in a functional component (previously we needed to use a class component for that). It looks like this:

const [name, setName] = useState('Chris');

This stores a variable called name in state. We can change the variable using setName() , and initialise it by passing a value to the useState function (in this case "Chris")

The useState hook makes managing complex state nicer (we can have “multiple state hooks” per component), and we don’t have to worry about using “this” every time we want to work with state:

const App = (props) => {
    const [name, setName] = useState('Chris');
    const [age, setAge] = useState(28);

    return (
        <h2>
            Hello my name is {name}. and I am {age} years old
        </h2>
    );
};

7) Learn the useEffect hook

The useEffect hook is a React hook that lets us run code at different parts of the lifecycle of a component.

The useEffect hook is where you typically do API calls, update your component if the props change, and run any clean-up code.

You can solve a lot of problems nicely with the useEffect and useState hooks, so make sure to have them in your arsenal of React knowledge!

8) Begin with one component

React is all about components, but that doesn’t mean we have to go overboard creating components for every little thing in our project! A suggestion is to start with one component, and when this component gets too large, break things out into smaller components. Avoiding “over abstracting” will make your code easier to follow early on, and avoid prop drilling - this is when you have to pass props through multiple components, and can become a pain to manage.

9) Props vs State

It will be important to learn what props are, what state is, and when to use each. These are cornerstones of React and you’ll be using them a lot. At a high level:

Props are data that gets passed to your components from their parent. This data can be anything - numbers, strings, objects, arrays, functions, etc.

Heres an example of passing name and age to the UserDetails component from the App component (i.e the parent):

const App = () => {
    return <UserDetails name='chris' age={25} />;
};

State is data that can represent parts of an app that can change. For example, a list of users, a boolean flag that shows if a modal is open, and input field value can all be stored in state:


const App = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [inputValue, setInputValue] = useState("hello React");
    const [userList, setUserList] =useState([
        {name: "chris", age: 28},
        {name: "jenny", age: 20},
        {name: "alfred", age: 32}
    ])

    return(
        // ...JSX
    )
}

10) Ignore the server - use fake data or existing API’s

If you’re trying to learn React, its normally best to focus on React. Makes sense right?. When practicing fetching data from an API, it can be tempting to think, “Damn, I need to build an API for this! Guess I gotta learn Node.js!”.

If your goal is to become a full-stack dev, this isn’t a bad idea. But if you’re in it to learn React, try and use existing APIs or mock data to practice working with an API. This helps keep you focused on React (I’m a big believer in learning one thing at a time!).

11) Stay away from other frameworks

This is a mistake I see beginners make (including myself). There are a lot of frameworks, and for some reason, we think we have to learn them all!. But we don't. I have yet to see a job opening that says “Must have React, Vue, and Angular experience” - If I did, I’d steer clear.

If you’re learning React, focus on React. You can always play with the others if you like, you might even think, “Hey, I like Vue better!”, and shift your focus to that. Whatever framework you side with, try and focus on it until you can at least build a few projects

12) Learn the life cycle and how a component rerenders

It’s important to know the React life cycle and how/when a component re-renders. I’ve wasted many hours bug-fixing by not fully understanding this stuff! Here are some tips to get you started with this:

When a components state changes, React will re-render the component
When a component rerenders, it will automatically re-render its children
Use useEffect() to run code at certain parts of the lifecycle

Have fun!

Ultimately, try and have fun. The reason why we are developers is that we love to create things, so make sure to enjoy your journey to learning React!

What next? Build some projects!

Heres a React Project you can build today. Starter code, tips, challenges to try & video walkthrough!

Chris Blakely — Mon, 03 Aug 2020 14:02:25 +0000

What we're building

In this beginner React Project, we're going to learn how to use state hooks, handle events, apply CSS based on state, and more! Check it out:

Try it yourself

If you want to have a go yourself first, here are the scenarios (you can also grab the CSS/starter code below):

When the user clicks the "increase button", the temperature should increase
The temperature cannot go above 30
When the user clicks the "decrease button", the temperature should decrease
The temperature cannot go below 0
When the temperature is 15 or above, the background color should change to red (HINT: I've included a style called "hot" you can use)
When the temperature is below 15, the background color should be blue (HINT: I've included a style called "cold" you can use)

Getting setup

I recommend using create-react-app or CodeSandbox to get started.

Heres the CSS:

body {
    font-family: sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.app-container {
    height: 400px;
    width: 300px;
    background: #2b5870;
    border-radius: 20px;
    box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}

.temperature-display-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70%;
}

.temperature-display {
    display: flex;
    border-radius: 50%;
    color: #ffffff;
    height: 220px;
    width: 220px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    border: 3px #ffffff solid;
    transition: background 0.5s;
}

button {
    border-radius: 100px;
    height: 80px;
    width: 80px;
    font-size: 32px;
    color: #ffffff;
    background: rgb(105, 104, 104);
    border: 2px #ffffff solid;
}

button:hover {
    background: rgb(184, 184, 184);
    cursor: pointer;
}

button:focus {
    outline: 0;
}

.button-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.neutral {
    background: rgb(184, 184, 184);
}

.cold {
    background: #035aa6;
}

.hot {
    background: #ff5200;
}

Here's what your App.js file should look like:

import React from 'react';

const App = () => {
    return (
        <div className='app-container'>
            <div className='temperature-display-container'>
                <div className='temperature-display'>10°C</div>
            </div>
            <div className='button-container'>
                <button>+</button>
                <button>-</button>
            </div>
        </div>
    );
};

export default App;

Video Walkthrough

Challenges to Try

Add functionality that allows the user to save a given temperature, and a button to apply their last saved temperature.
HINT: A state value which holds the saved temperature will come in handy here ;)

Stuck?

Drop a message in the comments!

Let's build a contact list using React Hooks, function components, and a real API

Chris Blakely — Sat, 16 May 2020 12:45:39 +0000

So you want to learn React eh? This guide will walk through everything you need to know when getting started with React. We'll get set up, explain the "hows and whys" behind the basic concepts, and build a small project which pulls data from an API to see everything in action.

This will be a long one, so skip/re-read sections as you need using the "Jump to Section" links below. With that out of the way, grab a drink, buckle up, and let's get started.

This was originally posted on my new blog where I will be writing loads of JavaScript and React tutorials. Make sure to stop by www.jschris.com and say hello!

Jump to Section

Development Environment
- Node.js
- VS Code
Creating a React App
Lets Build a Contacts List!
- Get the Styles
- Creating the Contact Card
- Making Our Contact Card Reusable
- Lets talk about State
- Updating State
- Introducing Props
- Using Props within a component
- Rendering components from a List
- Pulling data from an API
- Introducing useEffect
Conclusion

Development Environment

The first thing we're going to do is set up a development environment. If you already setup Node.js and installed Visual Studio Code (or your preferred IDE), you can go ahead and skip to the next section [ADD LINK TO NEXT SECTION HERE]

Node.js

Go here and download the right package for your OS (Mac/windows etc)

When the installation completes, open a terminal and type this command:

node -v

This should show output the version of node you just installed:

This means that the node command works and node has installed successfully - hurray! If you see any errors, try reinstalling Node from the package you downloaded and retry the command again.

Visual Studio Code

Visual studio code is a popular open-source IDE that works well for frontend development. There are a bunch of others you can try - see what your favourite is and download that if you prefer. For now, we'll run with VS Code.

Click here and download the version for your platform:

Follow the installation steps, and you should be good to go. Go ahead and fire up Visual Studio Code.

That's enough development setup for now. There are other nice things you can install (VS Code extensions etc) but we don't need those right now -We're here to learn React!

Creating a React App

The next step is to create a React project. Lucky for us, the fine folk at Facebook have made this really simple. All we have to do is run a command within our terminal:

npx create-react-app my-app

This creates a project for us called "my-app" and sets everything up automatically. Pretty cool.

Go ahead and open up a terminal in the directory you want to create your app, e.g a "projects" folder, and run the command. Let the terminal do its thing, and after a while, this will complete and show you some commands:

Notice the create-react-app output has told us what we need to do to start the app. Go ahead and run the commands in your terminal:

cd my-app
yarn start

This will start a development server and open up a web browser for you:

You've just set up your first React App! If you want to learn more about what's going on, (check out the "create-react-app" GitHub:)[https://github.com/facebook/create-react-app]

Lets Build a Contacts List!

Our contacts list will display a number of a contacts, including their name, email, age and avatar (or, profile image).
We’ll build this up gradually, eventually pulling data from an API. How exciting!

Get the styles

Since this is a React tutorial, we’re going to focus on the inner workings of React and not worry about creating nice styles. In your source folder, create a new file styles.css and paste in the following code:

.contact-card {
  display: flex;
  padding: 10px;
  color: #ffffff;
  background-color: rgb(42, 84, 104);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 10px 10px 25px -16px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  max-width: 500px;
  max-height: 125px;
  margin-bottom: 10px;
}

.contact-card p {
  margin-left: 10px;
  margin-top: 0;
}

button {
  margin-left: 10px;
  margin-bottom: 10px;
}

Next, go into App.js and import the stylesheet like so:

import "./styles.css";

Creating the Contact Card

While we’re still in App.js, let’s add the basic JSX to get our layout for the contact card in place. Remove everything from the return statement and add the following:

<div className="contact-card">
    <img src="https://via.placeholder.com/150" alt="profile" />
    <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        <p>Age: 25</p>
    </div>
</div>

All we’re doing here is creating a div to “wrap” the contact card details, adding an image (the image will use a placeholder taken from the web for now), and adding a few p tags to hold the details we need in the contact card. Finally we’re adding some CSS classes taken from styles.css;

NOTE: to reference CSS classes, we need to use the className keyword. This is because we are writing JSX, and “class” is a reserved word in JavaScript.

Here’s what we have so far in our App.js file:

import React from "react";
import "./styles.css";

const App = () => {
  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        <p>Age: 25</p>
      </div>
    </div>
  );
}

If you run this in the browser, you should see something similar to the following:

Making our Contact Card Reusable

OK so we have our contact card! However it’s not very reusable. We know that we are going to need to reuse this code if we want to render more than one card, so it makes sense to break this out into it’s own component

NOTE - To make it easier to follow, I am going to a put all the components we make into App.js . In the real world it would be better to split these different components into their own files, and import/export them where appropriate.

Just beneath the App function, create a new function called ContactCard, and copy the JSX from App to ContactCard like so:

const ContactCard = () => {
  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        <p>Age: 25</p>
      </div>
    </div>
  );
};

Again, a component in React is just a function that returns some JSX. Now that we’ve moved our JSX to the ContactCard we can use this component within our main*App component*:

const App = () => {
  return (
    <>
      <ContactCard />
    </>
  );
}

We use our own components like any old HTML/JSX tag. We just put the name of our component in angle brackets. Our App.js file should look like this:

// App.js
import React from "react";
import "./styles.css";

const App = () => {
  return (
    <>
      <ContactCard />
    </>
  );
};

const ContactCard = () => {
  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        <p>Age: 25</p>
      </div>
    </div>
  );
};

Now if you run this in the browser, things will look the same as they did before - which is what we want. We now have a ContactCard component that we can use as many times as we like:

const App = () => {
  return (
    <>
      <ContactCard />
      <ContactCard />
      <ContactCard />
    </>
  );
};

Update the App component to include another 2 ContactCard components. The above example will render 3 contact cards in the browser. Go and check it out!

Think of this like a “stamp” on the page. Every ContactCard component we add is another “stamp” and renders the same markup on the page

Let’s talk about State - the useState Hook

If you’ve been getting started with React already, you may have heard of the term state. State is quite a big deal in React. So what is it?

State is basically an object that represents a part of an app that can change, which the UI “reacts” to. State can be anything; objects, booleans, arrays, strings or integers

Let’s take an example.

Some people who appear in our contact list are shy and do not want their age being displayed until a button is clicked. We can store whether the age should be shown or not in state by using the useState hook within the component. Which looks like this:

const [showAge, setShowAge] = useState(false);

“what the hell is going on here?” Let me explain.

The useState object gives us a variable with the current value, and a function that lets us change that value. When we call useState we can define an initialvalue (in this case, false).

We use destructuring assignment **on the **useState hook to get these. You don’t have to worry about destructuring assignment right now, just remember that the first variable lets us access the state value, the second one lets us change it.

Go ahead and add the above code snippet to the*ContactCard* component like so:

const ContactCard = () => {
  const [showAge, setShowAge] = useState(false);

  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        <p>Age: 25</p>
      </div>
    </div>
  );
};

Now we have a state object, how do we use it? Well, we can reference the showAge variable like any other variable. In this case, we want to _only show the age if the showAge variable is true.

We can do this using the ternary operator :

{showAge === true ? <p>Age: 25</p> : null}

This example reads as if the showAge variable is true, render the age, if not, render nothing.

Go ahead and add this to the ContactCard component, like so:

const ContactCard = () => {
  const [showAge, setShowAge] = useState(false);

  return (
    <div className="contact-card">
      <img src="https://via.placeholder.com/150" alt="profile" />
      <div className="user-details">
        <p>Name: Jenny Han</p>
        <p>Email: Jenny.Han@notreal.com</p>
        {showAge === true ? <p>Age: 25</p> : null}
      </div>
    </div>
  );
};

Now, if you run the app in the browser, you’ll see the age disappears - that’s because our showAge variable has been initialised with false. If we initialise our showAge variable with true:

const [showAge, setShowAge] = useState(true);

The age will appear on the contact card. Nice! Although, its not great — we don’t want to change the code whenever we want to show the age on the contact card!

Before we look at how to dynamically change our showAge variable, lets tidy the code a bit. Go ahead and replace this line:

{showAge === true ? <p>Age: 25</p> : null}

With:

{showAge && <p>Age: 25</p> }

This gives the same result, just in a more concise way.

TIP: Shorten code where it makes sense to, don’t feel like you have to shorten every line of code you write! Readability should come first.

Updating State

Ok back to updating state. If we remember back, the useState() hook gives us a function to update the state. Let’s wire this up to a button, which, when clicked, will toggle showing the age on the contact card.

We can do this with the following:

<button onClick={() => setShowAge(!showAge)}>
    Toggle Age 
</button>

What this is doing is calling the setShowAge function (which we get from the useState hook) to change the value of show age to the opposite of what it currently is.

NOTE: I’m using the Arrow Function syntax here to pass a function to the onClick property. If you’re not familiar we this, a quick reminder that you can get my [book where I discuss the important bits of JavaScript to know before React here].

When the state updates, React will re-render the component and since the value of showAge is true, the age will be displayed.

If the user clicks the button again, this will set showAge to false, React will re-render the component, and the age will be hidden:

Look at our fancy toggle in action!

TIP: Whenever the components state changes, React will re-render the component with the new state

Notice how even though we have 3 ContactCard components being rendered, when we click the button the age only displays for one of the cards, and not all of them. This is because state belongs to the individual component. In other words, each ContactCard component that renders is a copy, and has its own state/data.

Introducing Props

So now we have a lovely new ContactCard component that we’re reusing a few times. Although its not really reusable, since the name, email, age and avatar are the same for each of our components. Oh dear! We can make this data more dynamic with what are called props.

Since you’re just getting started with React, you can think of*Props* as data that gets passed to a component, which the component can then use. For example, we can pass in our avatar , ** email*, **name* and age as props to our Contact Card component like so:

<ContactCard
  avatar="https://via.placeholder.com/150"
  name="Jenny Han"
  email="jenny.han@notreal.com"
  age={25}
/>

As you can see, we define a prop by giving it a name. Eg. name and using the equals to assign some value to that prop e.g Jenny Han.

We can have as many props as we want, and we can name these props whatever we want, so they’re pretty flexible.

Props can hold different types of data, i.e strings, numbers, booleans, objects, arrays and so on.

NOTE: Props must be defined using quoted text (e.g name=“Jenny Han”) or within braces (e.g age={25}. If we leave out the braces for anything other than strings things start to break - age=25 );

Go ahead and replace the current*ContactCard* components within our App component with the following:

<ContactCard
  avatar="https://via.placeholder.com/150"
  name="Jenny Han"
  email="jenny.han@notreal.com"
  age={25}
/>

<ContactCard
  avatar="https://via.placeholder.com/150"
  name="Jason Long"
  email="jason.long@notreal.com"
  age={45}
/>

<ContactCard
  avatar="https://via.placeholder.com/150"
  name="Peter Pan"
  email="peter.pan@neverland.com"
  age={100}
/>

All we’re doing here is passing the data that the component needs to each component as props. Notice how the data is different for each component.

Using Props within a component

We’ve sent a bunch of props down to the ContactCard component, so let’s tell the ** ContactCard** how to use them.

Until now, our ** ContactCard** function doesn’t accept any parameters. React, being the magical thing that it is, automatically puts all our props into a lovely props object, that gets passed into the component:

const ContactCard = props => {
    //...other code
};

Notice the props variable. This is an object containing the props we defined previously. We can access our defined props by using the dot notation like so:

const ContactCard = props => {
    console.log(props.avatar); 
    console.log(props.name);
    console.log(props.email);
    console.log(props.age);

    //...other code
};

Finally, we want to replace the hardcoded values in our JSX, with the values we receive from the props:

return (
  <div className="contact-card">
    <img src={props.avatar} alt="profile" />
    <div className="user-details">
      <p>Name: {props.name}</p>
      <p>Email: {props.email}</p>
      <button onClick={() => setShowAge(!showAge)}>Toggle Age </button>
      {showAge && <p>Age: {props.age}</p>}
    </div>
  </div>
);

Notice how we have set the image source using whatever value we received from props. We did similar for name, email, and age. Also notice how we wrap this code in curly braces, so it gets executed as JavaScript.

Our final App.js file looks like this:

// App.js
const App = () => {
  return (
    <>
      <ContactCard
        avatar="https://via.placeholder.com/150"
        name="Jenny Han"
        email="jenny.han@notreal.com"
        age={25}
      />
      <ContactCard
        avatar="https://via.placeholder.com/150"
        name="Jason Long"
        email="jason.long@notreal.com"
        age={45}
      />
      <ContactCard
        avatar="https://via.placeholder.com/150"
        name="Peter Pan"
        email="peter.pan@neverland.com"
        age={100}
      />
    </>
  );
};

const ContactCard = props => {
  const [showAge, setShowAge] = useState(false);

  return (
    <div className="contact-card">
      <img src={props.avatar} alt="profile" />
      <div className="user-details">
        <p>Name: {props.name}</p>
        <p>Email: {props.email}</p>
        <button onClick={() => setShowAge(!showAge)}>
            Toggle Age 
        </button>
        {showAge && <p>Age: {props.age}</p>}
      </div>
    </div>
  );
};

If you run this in the browser, you should see something similar to this:

Hurray! Our component works the same as before, but its now more dynamic. We can reuse the same ContactCard but passing in different data - whilst keeping the layout, styles, and state objects the same.

Rendering components from a List

Our contacts list is coming along nicely, we have some well crafted, reusable code so time to leave it alone right? Wrong! Let’s take it a step further.

In a real application, data usually comes in the form of an array of data, e.g after an API call. Let’s pretend we’ve made an API call to retrieve some users from a database and have received the following data:

const contacts = [
    { name: "Jenny Han", email: "jenny.han@notreal.com", age: 25 },
    { name: "Jason Long", email: "jason.long@notreal.com", age: 45 },
    { name: "Peter Pan", email: "peter.pan@neverland.com", age: 100 }
];

Paste this into the App() component at the top of the function. The eagled eye amongst you will notice how this data is similar to what we already have. But how we we turn this data into ContactCard components? Well, remember all those days you spent learning how to loop over an array using .map()? Now is the day we put that into action!

To display a list of components, we:

1) Loop over the array using .map()
2) For each item in the array, create a new ContactCard component
3) Pass the data from each object in the array to the ContactCard component as props

Let’s see how this works. In our app*App()* component, replace the return statement with this:

return (
  <>
    {contacts.map(contact => (
      <ContactCard
        avatar="https://via.placeholder.com/150"
        name={contact.name}
        email={contact.email}
        age={contact.age}
      />
    ))}
  </>
);

As you can see, we map over the array. For each object in the array, we want to create a new ContactCard component. For the props, we want to take the name, email, and age from the current object the map function is on. In other words, from the contact variable.

NOTE: I’ve left the “avatar” prop alone, as this is the same for now - it’ll change later in the tutorial

And that’s it! Our App.js file looks like this:

//App.js
const App = () => {
  const contacts = [
    { name: "Jenny Han", email: "jenny.han@notreal.com", age: 25 },
    { name: "Jason Long", email: "jason.long@notreal.com", age: 45 },
    { name: "Peter Pan", email: "peter.pan@neverland.com", age: 100 },
    { name: "Amy McDonald", email: "amy@email.com", age: 33 }
  ];

  return (
    <>
      {contacts.map(contact => (
        <ContactCard
          avatar="https://via.placeholder.com/150"
          name={contact.name}
          email={contact.email}
          age={contact.age}
        />
      ))}
    </>
  );
};

Run this in the browser and things should look the same. We haven’t change our ContactCard, merely changed where we got the data from. The cool thing about this is that if you added another row to the contacts array, the extra component will get rendered automatically- you don’t have to do anything else! Try this for yourself and see.

Pulling data from an API

We’ve got a nice looking React App now, nice and dynamic and things are working well. Which is a good place to be since we’re just getting started with React! But there are some tidy ups we need to make. In a real application, data will be pulled in from an API.

For the next part of the tutorial, we are going to get real contacts (when I say real contacts, I mean fake contacts - you know what I mean) from a real API: [https://randomuser.me/]. Feel free to browse the website and look at the response we will get back — this is where we will get our data to populate our components.

Firstly, let’s create a state variable to hold the data we get back from the API. Remember, state is good for holding that that can change. Our contacts list can definitely change!

In App.js, remove the contacts array add the following:

const [contacts, setContacts] = useState([]);

Here, we’re doing here is creating a state object, and initialising it to an empty Array. When we make the API call, we’ll update the state to contain a list of contacts. Since we named this state object contacts, our rendering logic within the JSX will look for this array instead (as opposed to the old contacts array we just deleted).

Next, let’s grab the data from the API. We’ll use the standard Fetch API. For now, we’ll log the data to the console. Add the following below the state object we just created:

fetch("https://randomuser.me/api/?results=3")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

All we’re doing here is:

Making a GET request to the randomuser API, asking for three results
Convert the response into JSON
Logging the JSON to the console.

If you run this in the browser, you’ll notice the ContactCard components no longer render - thats fine, we haven’t saved any new data to state yet, and our state variable is currently empty. If you look at the console (in your browser dev tools) you’ll notice the response object is logged. Which will look something like this:

You’ll see we have a results array, which has 3 objects. Each of these objects contain the details of a user (or a “Contact” in our case). This is similar to the contacts array we manually created ourselves in the previous section - just an array full of objects.

Let’s update our App components JSX to pick data from this object. Update the JSX like so:

return (
  <>
    {contacts.map(contact => (
      <ContactCard
        avatar={contact.picture.large}
        name={contact.name.first + " " + contact.name.last}
        email={contact.email}
        age={contact.dob.age}
      />
    ))}
  </>
);

This works similar to what we had before:

We are looping through the contacts variable (which, at the moment is an empty array)
When we eventually save the response to state (the next step) we look through each object in the array, for the appropriate things we need: in this case picture, name, email, and dob objects.

Next we want to store the results array in state, so our JSX can loop over it (using the map() function we seen previously) and render some lovely ContactCards. Within our fetch function, add the call to setContacts(data.results) like so:

fetch("https://randomuser.me/api/?results=3")
  .then(response => response.json())
  .then(data => {
    console.log(data);
    setContacts(data.results);
  });

Our App component now looks like this:

//App.js
const App = () => {
  const [contacts, setContacts] = useState([]);

fetch("https://randomuser.me/api/?results=3")
  .then(response => response.json())
  .then(data => {
    console.log(data);
    setContacts(data.results);
  });

  return (
    <>
      {contacts.map(contact => (
        <ContactCard
          avatar={contact.picture.large}
          name={contact.name.first + " " + contact.name.last}
          email={contact.email}
          age={contact.dob.age}
        />
      ))}
    </>
  );
};

If you save this, and run it in the browser, you’ll see something like this:

“WTF is going on everything is broken!”, don’t panic just yet (If you’re on a slower machine or just getting a bit freaked out, you can comment out the setContacts(data.results) line within the fetch function for now).

What’s happening here is that we’re stuck in a bit of a loop:

1) We make a call to fetch and get some data back
2) We then save this data to state
3) Remember, React does a re-render when the state changes
4) When the component re-renders, the fetch api call happens again, and sets the state
5) Since the state updated, the component re-renders again
6) After the component re-renders, fetch is called again…
7) You get the idea

So how do we stop this? We have to delete everything and start again. Nah just kidding, don’t run away yet. We can fix this with another built in React Hook - useEffect.

Introducing useEffect

The useEffect hook is a special hook that runs a function. By default, the useEffect hook runs on every re-render. However, we can configure it to only run under certain condition, e.g when a component mounts, or if a variable changes. The useEffect hook looks like this:

useEffect(() => {
    // code to run 
});

This will run every time. If we want to specify “only run once” we pass in an empty array as a second argument like so.

useEffect(() => {
    // code to run 
},[]); //<-- notice the empty array

This is called a dependency array. When the dependency array is empty, this means the useEffect function will only run when the component loads for the first time. For additional re-renders, the useEffect function is skipped.

This is a perfect place to put our API call, as we only want to get the data once, when the component loads. Go ahead and place a useEffect()function into our*App* component, and move the fetch API call into the useEffect function. Our App component now looks like this:

//App.js
const App = () => {
  const [contacts, setContacts] = useState([]);

  useEffect(() => {
    fetch("https://randomuser.me/api/?results=3")
      .then(response => response.json())
      .then(data => {
        setContacts(data.results);
      });
  }, []);

  return (
    <>
      {contacts.map(contact => (
        <ContactCard
          avatar={contact.picture.large}
          name={contact.name.first + " " + contact.name.last}
          email={contact.email}
          age={contact.dob.age}
        />
      ))}
    </>
  );
};

Now, if you run the code in your browser, you should see 3 contact cards appear! Refresh the page to see another randomised list of contacts:

Conclusion

Congrats! You just completed your first real-world app and laid the foundation to move onto more advanced topics.

Make sure to subscribe here to stay up to date with my latest React content, course discounts and early access, as well as some free stuff!

Let's build a basic calculator using flexbox and vanilla JavaScript

Chris Blakely — Tue, 10 Dec 2019 09:04:27 +0000

Before we begin

Beginner JavaScript Project tutorials are a great way to learn and apply your knowledge. Rather than just show you how I do things, I'll explain WHY I do things. I recommend you try this yourself first, and see how I've done it by following along with the guide. There is a completed CodePen at the end. I will use CodePen.io throughout the tutorial but you can use your IDE if you like. Enjoy!

What we're building

This is the amazing calculator we will be building. We can input numbers, add, subtract, multiply and divide, as well as reset the display. Isn't it marvellous?

Build the UI

Let's start by adding the UI. This helps us visualise things as we go, such as user interactions and state changes.

Add a Container

In your HTML section add the following:



<div class="container">

</div>

and in your CSS section add the following:



.container{
    background: lightGrey;
    width: max-content;
    margin: auto;
}

You won't see anything yet but all we're doing here is adding a container, which gives us better control and structure of the calculator elements which we'll add later. We're also giving it a width (we want it to expand to fit the content), a background color, and centering everything in the view.

The display

When building the UI, can you build it however you like - For something like this I like to work "top-down", so I'll start with the display. This displays the calculations and results to the user and goes at the top of our container.

It makes sense for the display to be it's own element (so we can style it, and identify it clearly in the code/browser inspector). We'll create a separate div for this and also hard code a dummy value (989), so we can visually see what the display will look like, which should make it easier to style.

Add the following to your HTML, just inside the container:



  <div class="display">989</div>

The completed HTML so far should look like this;



<div class="container">
  <div class="display">989</div>
</div>

And add the following to your CSS:



.display{
  width: 100%;
  background-color: darkGrey;
  height: 50px;
}

All we're doing here is making sure the display isn't too big (height: 50px), takes up the width of the container (width: 100%) and has a background color that differs from the container.

So far, our project should look like this:

We still have some work to do. The number appears at the top left, we want it to appear towards the right-hand side of the display, and have a bigger font-size.

When we need to arrange items, in a single direction (e.g horizontally or vertically) Flexbox is a good option, so we'll use that here to style our display input.

Amend the .display style in your CSS with the following:



.display{
    width: 100%;
    background-color: darkGrey;
    height: 50px;
    font-size: 48px;
    display: flex;
    justify-content: flex-end;

}

Note the bottom 2 lines - display:flex and justify-content: flex-end;. This means that the display is a flex container and that it's children (in this case, the text content, i.e the number) should align to the END (the right side) of the container. Lastly, we're making the font bigger.

With our fancy flexbox stuff added, the display should look like this:

If you add more numbers to the dummy text, the inputted number stays justified to the right of the container (this is thanks to our flex-end)

Add the buttons

Now that we have our display in place and formatted, it's time to add the buttons - this would be a pretty useless calculator otherwise!

We'll add a container div to hold our buttons - remember, adding a container div around related items makes it easier to manage/style related elements, and makes our code easier to read. We'll also add our buttons, in order of left-to-right (like we were reading a book) to match our design. We'll use flexbox to arrange the buttons later.

Go ahead and update your HTML so that it looks like this:



<div class="container">
    <div class="display">989</div>
    <div class="buttons">
        <button class="btn-number">1</button>
        <button class="btn-number">2</button>
        <button class="btn-number">3</button>
        <button class="btn-operator">+</button>
        <button class="btn-number">4</button>
        <button class="btn-number">5</button>
        <button class="btn-number">6</button>
        <button class="btn-operator">-</button>
        <button class="btn-number">7</button>
        <button class="btn-number">8</button>
        <button class="btn-number">9</button>
        <button class="btn-operator">X</button>
        <button class="btn-clear">C</button>
        <button class="btn-number">0</button>
        <button class="btn-equals">=</button>
        <button class="btn-operator">/</button>
    </div>
</div>

Note that the number buttons have a class btn-number, operator buttons have a class btn-operator, the equals button has a class btn-equals and the clear button has a class of btn-clear. We'll use these classes to style the buttons later.

So our buttons are in, but the layout is wrong and they look a bit crappy.

The reason why we arranged our buttons in a single row like this is that we can use flexbox to control the layout. Remember, our buttons are wrapped in a buttons div, so we will make this our flex container. Update the .buttons CSS to include the following:




.buttons{
    max-width: 400px;
    display:flex;
    flex-wrap: wrap;
}

Ok so what's happening here?

We're setting our buttons div to be a flex container
We're setting the width to be 400px;
We're saying that we want the items of the flex container (i.e, our buttons) to wrap (i.e take a new line). This will happen when the length of the row, goes over 400px (our width).

You should now see this:

Now I know what you're thinking: "Chris, WTF? I'm setting up all this stuff and nothings working". Yes, but stay with me, the magic is about to happen. We've merely set up our flex container layout, now we need to add some properties to our flex items i.e buttons.

Add the following to your CSS:




button{
  flex: 1 25%;
}

Our calculator should now look like this:

If you were WTF'ing before, you still might be now, but in a more curious tone. Let's explain what just happened when we added flex: 1 25% to each button:

This is shorthand syntax for flex-grow: 1 and flex-basis: 25%, e.g, our button CSS above could be rewritten like:




button{
  flex-grow: 1; 
  flex-basis: 25%;
}

This means "each item (i.e button) should take up 25% of the space available, and the item itself should grow to fill said space". Let's do some maths to explain further. Remember, our container has a max-width of 400px. We've told the container any overflowing items should break onto the next line by using flex-wrap: wrap.

This means we have 400px of space per row before a line break happens. Since we've said that each button should take up 25% of the space available, each button should have a width of 100px (since 25% of 400px is 100px) giving us 4 buttons per row. By inspecting the dev tools, we can see this is true:

If we wanted 2 buttons per row, we should change the percentage in our CSS:



button{
  flex: 1 50%;
}

Why do we need to do this?!

This makes it easier to align/arrange items in a few lines of code. If you look at our HTML and CSS, there isn't very much there. Should our design change in the future (e.g change of button layouts, more responsive design, etc) it will be less complex to change.

I encourage you to stop here and play about with some of the flex properties we talked about, so you really understand what's going on. Have a look at This Guide To Flexbox on CSS-Tricks for reference. It's amazing. I'm going to get a coffee while you do that, then we'll get into JavaScript mode!

Let's wrap up our UI by adding some styling to the buttons. Add the following to your CSS:



button{
  flex: 1 25%;
  padding: 15px;
  font-size: 26px;
} 

.btn-number {
  background-color:grey;
}

.btn-operator {
  background-color:orange;
}

.btn-equals {
  background-color:green;
}

.btn-clear {
   background-color:crimson;
}

And let's remove the dummy data in the display. In your HTML, remove the 989 value from the div:



  <div class="display"></div>

Our finished UI should look like this:

Look at our amazing calculator! It looks nice but does nothing yet. So let's get everything wired up.

NOTE: See the CodePen at the bottom to see the completed HTML/CSS if you're having issues.

Add the JavaScript

When you're starting the JavaScript-y parts of a project, it can be hard to know where to start. I like to begin by thinking about what functionality I need, and making a list (this is why I built the UI first, so it's easier to visualize the functionality).

Why not take this time to come up with a list of functionality, and compare it to my list below?

Ready? Ok good, here's my list:

When the user clicks a number or operator button, the display should update with the value of the button
When the clear button is clicked, the display should reset/clear
When the equals button is clicked, the display should update with the result of the equation that is displayed

There's probably other stuff I missed that you think is important - you can always expand on this code later to add your own stuff!

Update the display when a number or operator button click

This is a good place to start, we'll worry about the other stuff later. Let's think more about how our JavaScript is going to look before jumping into the code.

"when a button is clicked, the display should update with the value of the button"

Some things that jump out when re-reading that functionality:

We'll need to get all the buttons and their values from the DOM
We'll need to add an event listener to handle the clicks
We're updating the display, so we'll need to get the display from the DOM as well

That should be enough to get us going! Let's start by updating the display when an operator button or number button is clicked. We will handle the clear and equals later.

Why are the equals and clear buttons code separate? Can I not get all the buttons at once and add all the event listeners at once?

The answer is yes, you can do whatever you want as there is no "right" way to write code. However, splitting the code out in this way has a few advantages:

It keeps similar logic together, enforcing good separation of concerns for our functions
If we have to add more buttons & logic, we don't touch existing code
It makes the code easier to read & reason about; it's easier to see which buttons do what

Get the number & operator buttons from the DOM

Add the following to your JS section in CodePen (or to your JavaScript script if you're using an IDE):




const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const display = document.querySelector('.display')

All we're doing here is using querySelectorAll to get our buttons (number buttons and operator buttons) and get our display.

, In this case, it's a good idea to assign DOM elements to top-level variables, as it makes it easier for us to access these elements without having to repeatedly use document.querySelectorAll() throughout the code. It also helps if the querySelector changed for some reason (e.g from .display to .calculator-input-display), as we only have to change the querySelector in one place!

Next, we're going to add a data-num attribute to the HTML of our buttons, which will hold the value of that button. Update your HTML to match the following:



<div class="container">
  <div class="display"></div>
  <div class="buttons">
    <button class="btn-number" data-num="1">1</button>
    <button class="btn-number" data-num="2">2</button>
    <button class="btn-number" data-num="3">3</button>
    <button class="btn-operator" data-num="+">+</button>
    <button class="btn-number" data-num="4">4</button>
    <button class="btn-number" data-num="5">5</button>
    <button class="btn-number" data-num="6">6</button>
    <button class="btn-operator" data-num="-">-</button>
    <button class="btn-number" data-num="7">7</button>
    <button class="btn-number" data-num="8">8</button>
    <button class="btn-number" data-num="9">9</button>
    <button class="btn-operator" data-num="*">X</button>
    <button class="btn-clear">C</button>
    <button class="btn-number" data-num="0">0</button>
    <button class="btn-equals" data-num="=">=</button>
    <button class="btn-operator" data-num="/">/</button>
  </div>
</div>

"Why do we need to do this?! Why can I not get the value from the button text?"

Good question! This technique is used to separate data from presentation. Take the example of the multiply sign:



    <button class="btn-operator" data-num="*">X</button>

The text of the button is X but the value is actually *, since this is how we multiply in JavaScript. Using this approach means the text can be whatever we want, but the value never changes. e.g:



<!-- If we ever change the text of any of the buttons, the value stays the same  -->
<button class="btn-operator" data-num="*">X</button>
<button class="btn-operator" data-num="*">Multiply</button>
<button class="btn-operator" data-num="*"><img src="link-to-multiply-image"/></button>

OK! So we've stored the data for each button and got the DOM elements. Next, let's handle what happens when a button is clicked.

Add the event listeners

When we use querySelectorAll(), this returns a NodeList (this is basically a list of matching elements, which we can loop over). This means we can loop over our buttons variable and attach an onClick listener.

Add the following to your JavaScript:



const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const display = document.querySelector('.display')

//add an eventListener to each of the buttons
buttons.forEach(button => {
  button.addEventListener('click', () => { 
      // logic that run when the button is "clicked"
      alert("button was clicked!")
  })
})

As you can hopefully see, we're using the forEach() higher-order function to loop over the buttons that were returned from our querySelectorAll() function.

For each button we are adding a click eventListener. When a button is clicked, it should show an alert box:

Hurray! Success!

(If you're having issues and not seeing the alert box, check out the CodePen at the end of the article to see the finished solution).

Get the value of the button that was clicked

Next, we need to get the value of the clicked button from the data-num attribute we added earlier. When we want to get attributes from DOM elements, we can use the getAttribute(name) function. Add the following to the event listener logic in your JavaScript:



const buttonValue = button.getAttribute('data-num');  
alert(buttonValue + " was clicked!")

The JavaScript so far looks like this:



const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const display = document.querySelector('.display')

//add an eventListener to each of the buttons
buttons.forEach(button => {
  button.addEventListener('click', () => { 
    // logic that run when the button is "clicked"
    const buttonValue = button.getAttribute('data-num');  
    alert(buttonValue + " was clicked!")
  })
})

When you click a button, the alert should show the value of the button that was clicked.

Update the display

Now that we have working event handlers, and can get the value of the button that was clicked, we can start updating our display.

Remember, it's good practice to separate data from presentation whenever possible. So let's create a variable called displayData to hold the data for our display. In your JavaScript add the following:




let displayData = "";

and update the eventListener logic by replacing the alert with this line:



displayData += buttonValue;
alert("Display is now: " + displayData)

The completed JavaScript so far looks like this:




//get our buttons from the DOM
const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const display = document.querySelector('.display')

let displayData = "";

//loop over the buttons
buttons.forEach(button => {

    //for each button, we want to add a "click" event listener
    button.addEventListener('click', () => { 

        //get the value of the clicked button from the attribute
        const buttonValue = button.getAttribute('data-num');

        //update our displayData variable with the value of the clicked button
        displayData += buttonValue;
        alert("Display is now: " + displayData)
    })
})

Now when you click a button, you will see an alert with the equation displayed!

Now we know what our displayData successfully updates when a button is clicked, we can go ahead and update the actual display with this data. Remove the alert in your event listener and add the following:



display.textContent = displayData;

Now, our display should update when a number or operator button is clicked:

Woohoo! Looking good so far, but you will have noticed the equals and clear buttons do not work yet. So let's wire those up.

Update the display with the result

If we take some time to think about what we need to do here, it'll make our life easier when writing the code.

We need to get the equals button from the DOM
When the button is clicked, we want to evaluate the expression that is displayed
We want to show the result of the expression in the display

Why not try this next part yourself first before following on? HINT: We've used similar patterns already, referencing other code for help is a good way to solve problems!

Get the Equals button from the DOM

Just like before, we will get the equals button from the DOM. Add the following to your JavaScript:



const equalsButton = document.querySelector('.btn-equals')

Notice we use querySelector here instead of querySelectorAll as we know there is only one element with this selector. querySelector returns a single element instead of a NodeList which means we don't need to use a loop!

Next we'll add an eventListener, and use the eval() function to evaluate the displayData expression. We'll set this evaluated expression to our displayData variable, and update our display:



equalsButton.addEventListener('click', () => { 
    displayData=eval(displayData)
    display.textContent = displayData
})

The complete JavaScript so far looks like this:



//get our buttons from the DOM
const buttons = document.querySelectorAll('.btn-number, .btn-operator')
const equalsButton = document.querySelector('.btn-equals')
const display = document.querySelector('.display')

let displayData = "";

//loop over the buttons
buttons.forEach(button => {

    //for each button, we want to add a "click" event listener
    button.addEventListener('click', () => { 

        //get the value of the clicked button from the attribute
        const buttonValue = button.getAttribute('data-num');

        //update our displayData variable with the value of the clicked button
        displayData += buttonValue;

        //output the displayData value to the display element
        display.textContent = displayData;
    })
})

// add an event listener to the equals button
equalsButton.addEventListener('click', () => { 

    // use the eval() function to evaluate the expression and output it to the display
    displayData=eval(displayData)
    display.textContent = displayData
})

And that's it - if you perform an equation e.g "2+2", you should see the result in the display.

Clear the display

The last thing we need to do is clear the display when the C button is clicked. Just like before, we will get the clear button from the DOM. Add the following to our JavaScript:



const clearButton = document.querySelector('.btn-clear')

And add our eventListener:



clearButton.addEventListener('click', () => { 
  displayData = "";
  display.textContent = displayData;
})

Here, we are resetting our displayData variable to empty string, which effectively clears the display. Finally, we're updating our display in the usual way.

If all went well, you should have a fully working calculator! If not, check out the CodePen at the bottom so see the finished example.

Thing's to Try

Before we wrap up, here are some thing's you can try:

The numbers will overflow if the user types in too many numbers, how would you fix this?
The calculator won't work correctly if the user enters too many operators, e.g 2++2. How can you prevent the user from doing this?
Why not try adding an undo feature?

Finished Example

See the Pen simple-js-calculator by Chris Blakely
(@chrisblakely01) on CodePen.

Thanks for reading!

If you enjoyed this article, why not subscribe to my newsletter?

Every week I send out a list of 10 things I think are worth sharing — my latest articles, tutorials, tips and interesting links for upcoming developers like you. I also give out some free stuff from time to time :)

Ace your first year in the job as a junior developer with this advice

Chris Blakely — Mon, 09 Dec 2019 13:26:50 +0000

Are you a junior developer embarking on your software development career?

Or a recent computer science graduate who has recently started a new job?

Maybe a self-taught developer wondering what to do next?

Starting your software development career can be scary, but also very exciting.

I know the feeling, having been there myself. Over the past 5 years, I have gone from junior developer to lead developer at a SaaS startup, learning lots along the way.

I have written this guide with my top tips, to not only survive but strive in your first year as a junior developer.

It’s OK to have gaps in your knowledge

University degrees, coding boot camps, and online courses do a great job at teaching you how to code.

Yet, the truth is that in the real world of software development there is a bit more to it than writing code. You’ll have to understand:

Which technologies are best for different problems
Code written by other people
Design patterns and best practices
How to test code
CI/CD, source control, and branching strategies
The software development lifecycle and different methodologies
Working not only with your team, but with other teams, management, and clients …to name a few things.

You may already know some of this stuff, or you may have never heard of any of it before. And that’s OK. You are there as a junior software developer, your manager and your teammates know this.

So there will be gaps in your knowledge. Every developer has them! Try not to feel overwhelmed if it all doesn’t make sense straight away.

In fact, part of the beauty of being a software developer is that technology is always changing. We will always be learning, regardless of what level we are at.

Questions are good — so is asking for help

You have your first task, you get excited and dive straight in. But then…you’re stuck. Your code doesn’t work as expected, and all you have to go by is a strange, confusing error message. You've tried solving the problem yourself, but some time has passed and alas, no luck.

Stumped, you think about asking one of the other developers on your team for help, but you think:

“What if they think I can’t code? and laugh at me?!”

But in reality, that will never happen. What they will actually think is:

“OK, I’ll take a quick look and see if I can help. Ah! Yes, I’ve encountered this issue before, you can use someMethod() from somePackage() to fix it.”

Which isn’t so bad right?

Your team is there to support you, especially in the early parts of your career, so ask them for help (if you're interested, I go into a bit more detail about how to be a good teammate here).

Likewise, if you do not understand something, ask questions. I’m still asking loads of questions every day! There is no such thing as a stupid question. Your team would rather help you instead of having you stare at your screen with confusion for most of the day.

Code Reviews are your friend

I’ll never forget my first code review as part of my first junior developer job. My code was being reviewed by an experienced senior developer. At the time I found this nerve-wracking. And, of course, there were more comments from him than I could count!

But in hindsight, this was a good thing.

Code reviews are not a stage for criticism, but for learning and giving feedback on all sides.

The senior developer sat down with me and explained what each of the comments meant, and also why he had made them. Needless to say, I learned a lot. So when your code is being reviewed, remember that any feedback is to help you learn and improve as a software developer.

Likewise, when you come to review code for other people, you will be able to see how different people approach different problems. You will even help them improve by making suggestions of your own!

Break it down, and break it down some more
Ok so you have your first real task, depending on the size of the task, you might feel a bit overwhelmed:

“Where do I start? I guess I’ll start by doing X, but what about Y? But then if I do Y there’s A, B, and C….what’s happening with X again?!”

Don’t worry we’ve all been there. It’s easy to get lost in the proverbial rabbit hole when trying to solve a problem. The next time you have a large problem to solve, try remembering this quote,

“How do you eat an elephant? One bite at a time.”

In other words, make a task that seems impossible more manageable by breaking it up into smaller tasks.

So how do you do that?

Before writing any code, try writing out the steps in plain English (or the language of your choice). Let’s take an example.

How do you pour a glass of water?

A plain English approach would be

Open the cupboard
Get a glass
Place glass under the tap
Turn on the tap
When the glass is full, turn off the tap
Remove glass from under the tap
By writing out the steps, it is easier to visualize each part of the problem and come up with a solution for each step.

Keep it simple

A common mistake many junior developers make (myself included when I started) is to try and reinvent the wheel.

It might look impressive to solve a problem by using a super-fancy technique within your code.

But this causes other problems:

Code that is completely different from how similar parts of the system - work is harder to maintain
Your code may become more verbose that it needs to be, and there will be an increased risk of bugs -It may take you longer to complete your task

So how exactly do you keep it simple?

Make it work. Don’t overthink too much, and do whatever your gut says to get your code working
Refactor. Now that your code is working, it’s time to refactor. Make your code easy to read by naming things well, and use of proper formatting. More on this in ‘Learn how to write clean code’ below
Speed it up. Once you have finished refactoring, you might notice bottlenecks in the performance of your code. Now is the time to optimize it. Be wary not to fall into the trap of over-optimizing too early! Only do this if you need to.

BONUS TIP. Consider writing some failing tests before writing any code. This is called Test Driven Development. Not only will this give you good test coverage, but it will help you think about the structure of your code.

Learn how to write clean code

So, clean code is a bit of a vague term. Some people swear by it, some people think it's nonsense. A better way to put it is learn how to write readable, maintainable, testable code

Any fool can write code that a computer can understand. Good programmers write code that humans can understand. — Martin Fowler

I won’t go into too much detail here, but the book, Clean Code: A Handbook of Agile Software Craftsmanship by Robert C Martin will give a much deeper insight into this area. If you are serious about writing clean code and breaking out of the junior developer level, I highly recommend this book.

Writing clean code shows that you are passionate about what you do, and can create maintainable reliable software. Not to mention that you will be making life a bit easier for the next person who comes along to add to your code.

“There’s a library for that”

Have you ever told a friend about a problem you were having, and they respond with “Yeah, there’s an app for that”?

Software development is a bit like this.

There are already a lot of answers to the problems you are trying to solve. So when you are trying to complete a task, check to see if someone else has already solved the problem.

You can do this by:

Looking for existing packages and libraries
Browsing sites such as GitHub and StackOverflow for similar solutions to your problem.

But hold it right there! This doesn’t give you free rein to copy and paste code without a thought. If you are using someone else’s code as an example, it is important that you understand what their code is doing and why.

Why is it using a particular design pattern?
Why is it written in a particular language? (Node.js vs Python for example)
What are the drawbacks? Will it work with your current codebase?
If you’re not sure, you can ask someone on your team for some guidance. Searching Google for an answer is a common approach to solving coding tasks. So don’t be afraid to turn to your teammates and say:

“I’m thinking about using this library X or this package Y, I have seen some examples on here, what do you think?”

Not only will this show that you are proactive, but it’ll also spark some conversation/debate from the team. You might have discovered something awesome no one else knew about yet!

Learn how to read code

We have all seen those movies. The ones where a hacker types rapidly as pages of code scroll down the monitors in front of them.

In the real world, developers spend more time reading code than actually writing code.

When adding new features or fixing defects, you will have to understand the current codebase you are working on. How do you do this? Read, read, read!

Reading code is also a beneficial learning technique. Reading existing code lets you see how others have developed a certain feature.

Things to keep an eye out for:

The use of design patterns
The naming of methods, classes, and variables
The use of comments
How to structure project files
The use of tests and how they are structured

So where do you find code to read?

Repositories in your source control at work
Projects on GitHub
Read answers/questions on StackOverflow
Code challenge websites such as codewars.com, which show the answers to challenges

Have fun!

If you take one thing away from this article, let it be this — is it important to have fun. Enjoy writing code, solving problems, and continuing to learn. You are at the start of an exciting career, so sit back and enjoy the ride!

BONUS TIPS

Learn the lingo. We developers have our own funny language (“creating a - branch” has nothing to do with trees!) so make sure you understand the key terms
Get to know your IDE. Learn the hotkeys, shortcuts, and customize it - until you are comfortable with it. This will increase your productivity.
Working on bugs is a great way to learn about the codebase. So don’t be afraid to pick these up!
Bring a notebook, listen with intent and write everything down.
Take on some side projects in your spare time. It’s a great way to learn different technologies you don’t learn in your day job and will boost your CV.
Getting involved in work events is a great way to get to know your colleagues. Why not organize one yourself?

Thanks for reading! If you liked this post, why not subscribe to my newsletter? Every week I send out an email with my latest articles, links, tips, and resources junior developers. You'll also get some free stuff!

Avoiding burnout: Simple tips to stay fresh and motivated

Chris Blakely — Wed, 14 Aug 2019 12:06:30 +0000

Us humans are a funny bunch. We will wake up one day and have an amazing idea. A new exciting hobby to try or adventure to embark on. We will dedicate our waking hours to this exciting new thing, and all of a sudden, we come to a complete halt. Maybe it's because we got bored, maybe it's because we accomplished what we set out to achieve. More often than not, it's due to burnout.

As a software developer, I've experienced my fair share of burnout over the past 5 years. It's an easy trap to fall into and it happens to more people than you would think (and oh man, it sucks when it does).

What is burnout and how can it affect developers?

"Chris, you sit in front of a computer most of the day, how can you have burnout?!", was a typical response I got when I told non-techie people that I was feeling burnt out. After resisting the urge to raise my middle finger and point it in their general direction, I realised not everyone understands what burnout is, or how easily it can occur.

If you're feeling exhausted, losing motivation or interest in coding (or, other hobbies) then you're probably experiencing burnout.

But fear not! If you want to avoid burnout, keep your motivation, and continue to reach your goals, here are some tips.

It's a marathon, not a sprint

If you're learning JavaScript, Python, or trying to become a Web Design pro, it's important to realise that it won't happen overnight. It will take many months (or even years) of learning and practicing before you feel like you "know it".

If you wake up every morning and think, "Ok, I must learn these 17491 web development technologies and I must learn them today!", there's only one place you'll end up - burnout city.

So the trick here is to focus on the long game. Instead of trying to rush, tell yourself "I will dedicate some time to learning React.js. It'll take me as long as it takes, and there's no rush to learn it today".

I see a lot of aspiring developers make this mistake. So remember, take your time and enjoy the journey.

There's always tomorrow

We've all been there - we are in the zone, cranking out code like there's no tomorrow. Lunchtime comes and goes, and we think 'meh, I'll skip lunch and have a bigger dinner'. Hours tick by and all of a sudden - a bug appears. Determined, we power through and vow not to give up before it's fixed. After Hours of debugging and a few hundred console.log() statements later, the bug is fixed. Mission accomplished. However this victory is bittersweet, as it's 2am, we're tired and exhausted, and all we can fell is "how we hate code" as we fall into bed.

Let's take a step back and think. Did I need to do that? Did I need to stay up late and get that code working, making myself tired and stressed in the process? Could it have waited until the morning?

The answer to the last question is more than likely yes.

It's important to understand that work is a never-ending process. There will always be a task to complete or something new to learn. So learn to switch off and tell yourself "there's always tomorrow".

Take breaks

This is why regular breaks are important. Taking a break every 30-60 minutes allows you to well, have a break. Powering down your brain for even 10 minutes allows your mind to reset. You'll find that you'll come back feeling fresh and see the problems you're facing with more clarity.

Similarly, if you have been going hard at it for a few weeks/months in a row, now may be a good time to have a week or 2 off from coding. Go on holiday, binge watch Netflix or read a book - anything that is easy on your mind.

Think of it as a race car going around a track. At some point, the car will become low on fuel, and the tires will become worn out. Sure, the driver can keep going, trundling around the track, or they can come in for a pit stop - get some fresh tires, more fuel, and come out on track feeling "fresher" than before.

Focus on one thing at a time

Learning to code is hard. Really hard. How many technologies are there? Loads. You might feel like you have to learn them all at once. You might start by learning some React.js, then some Node.js, then REST API's, then Python…

Trying to learn too much too quickly will burn you out. Don't fret my friend - the easy remedy for this is to simply focus on one thing at a time, and remember not to rush. Learn at your own pace and let the knowledge sink in.

For example, if your goal is to become a full-stack developer, you could begin by creating simple React.js (or whatever frontend framework you choose) apps, without worrying about server-side code, databases or REST API's. When you feel comfortable (which may happen after weeks/months) you can move onto the next thing, which might be creating an API using Node.js. Your next step might be connecting to a database.

You get the idea. By splitting things up and focusing on one thing at a time, you'll avoid becoming overwhelmed, and you might find you actually learn stuff faster.

Have other Hobbies

Learning to code might be your hobby (I know it was my only hobby for a while) but it's a good idea to have other hobbies that you enjoy. It helps to relieve stress, and is good for your mental health - provided your hobby doesn't add more stress to your life!

You could take up jogging or swimming. Maybe take the dog for a walk more often (if you don't have a dog, you could get one). Join a cookery class, photography class, or learn another language (I don't mean a coding language!). Have you tried meditation?

Thanks for reading!

If you want to keep up to date with my latest tips and guides for junior developers, make sure to join the mailing list at chrisblakely.dev!

Here's how to build your own projects from scratch

Chris Blakely — Wed, 24 Jul 2019 11:32:48 +0000

There are many great tutorials that walk you through creating apps, from simple todo lists to fully working web apps. But how do you start your own projects from scratch? Without the safety net of a tutorial, you might feel a bit lost on what to build, or even how to get started.

These are the steps I followed that helped me create my own projects when I was a junior developer - and also set me up with the skills I needed to become a software team lead. But first...

Why build my own projects when I can follow tutorials?

Good question, curious reader!
Tutorials are great up to a point, but creating your own projects gives soo many other benefits:

It makes you think

When sitting down and starting your own project, there are many thing's to think about.

• How do I start?
• What will it look like?
• What technologies do I need?

And other stuff like that (we'll talk about how to get started in a minute). This is exactly what your job as a developer will entail - designing a solution and seeing it through to the finish. Creating your own projects allows you to practice these skills, and will set you up for the start of your career.

You'll encounter problems you never knew existed

Often when following a tutorial, you are exposed to the happy path - which is basically;

"OK we're building a thing, here are the steps to get the thing working, it works! Hurray! The End"

Which is great if you're learning a new technology - plus it would be a pretty terrible tutorial if the thing you are building didn't work at the end.

Unfortunately, the lives of web developer's are not as straight forward as this. When you're writing code, you will hit issues at some point. Plain and simple.

By creating your own projects, you'll encounter problems naturally and it gives you a chance to practice overcoming them. This what developers do every day and practicing will make this a lot easier.

It's fun & you'll always learn something

We’re a lucky bunch, us developers. We can sit down to a laptop, and build whatever we want, using whatever technology we want. We can also do it more or less for free. I doubt Bill the Aerospace engineer would get a good response from his boss if he asked, “to borrow that Boeing 747 for the weekend because he wants to try out a new jet engine he made at home”.

It’s fun to build your own projects. Something you can use, show off to friends and family, or learn from. And it’s a pretty safe hobby. It might work, it might not. You might like it, you might f*** the whole thing up. But it’s not a big deal, just throw the project files in the virtual trashcan and start again. Easy!

On to the good stuff...

Ok! Now we're happy that creating our own project's is a great way to learn and have fun. Let's look at how to get started creating your very own projects.

Expand on your tutorial projects

There is something intimidating about starting a brand new piece of work. You'll sit down to a new file, and think, "what do I do first?". The nicer way to start building your own projects is to build upon your existing tutorial apps and coding exercises. This gives you a bit of a head start, as opposed to starting from a blank slate.

So, if you have completed a todo app tutorial (if you haven't, where have you been?!), you could build upon it in whatever way you want. For example, you could:

• Allow saving the todo list (to a database, localStorage etc) so the user can come back it later
• Give the user some customisation options (change the color of todo items)
• Add login ability

You get the idea — basically, use your imagination! The possibilities are endless, so throw caution to the wind and build whatever you feel like!

Build stuff you'll use

Everyone has their own ideas for a web app. Use your newly found web development skills to build your own! Write down some ideas for an app that you've had over the years, specifically those that you would actually use. It doesn't have to be an overly complex app, and can be as simple as a todo list.

By creating an app that you’ll use, it’ll keep you interested enough to see the project through to completion. Also, by using the app once it’s finished, you’ll naturally find ways to make it better, which gives you another project to complete— and the circle of (coding) life repeats!

Another similar approach, is to replicate a popular app that you use. You don't have to go into the same level of detail as the app you are replicating, but see if you can get the basic functionality working. For example:

• Use the GitHub API to create your own GitHub dashboard
• Use the Twitter API and make your own Twitter feed
• A web app that allows you to manage your budget

Start small

A sure-fire way to get overwhelmed when starting your own projects is to go all out and try to create massive projects. While the ambition is good, you might find yourself getting stuck and frustrated at your progress.

Start small for your first few projects. Instead of making a fully-fledged scientific calculator, create a basic one that does simple additions and subtractions, for example. Then as you become more comfortable, add new features. Before you know it, your small project will have turned into a fully-fledged app.

This also gives you the added benefit of practicing how software is built in the real world. Small features will often be developed, tested, and deployed in increments. This is typically called Agile Development (I won't go into that here).

Have a goal in mind

There is a popular quote by Leonardo da Vinci:

Art is never finished, only abandoned.

The same can be said for software. Once you've started your own project, it can often be difficult to know when to keep going, and when to stop and move onto the next one. If you start with a goal in mind, it will give you something to aim for, as opposed to feeling like you are aimlessly wandering the desert.

So what do I mean by a goal? A goal in this sense is basically what you want to achieve with your project.

Instead of simply aiming to build a GitHub dashboard you could say:

"I am going to build a dashboard that shows how many commits I've made to my own repositories last month ".

This gives you a clear direction in which to work. Once you have reached that goal, you could add more features, or move onto another project. A goal can be anything you want:

• "I want to learn how to write clean code"
• "I want to learn CSS Grid"
• "I want to be able to call an API using React"
• "I want to learn how to write tests in Python"

BONUS TIP - remember to put everything onto your own GitHub repository, and state the goal in the description (you should put projects on your CV/Resume as well!).

This will show employers that you are passionate about learning, and will also be good motivation for yourself when you look back on old projects!

Example projects to try

Here are some example projects to get your creative flow going.

(Quick note: I will be creating these projects myself, along with articles on how I did each one, how/why I made the decisions I made and my general thought process. As well as completed code, of course. Make sure to subscribe to my blog to get updated when these articles are available!)

Calculator web app

Create a calculator that allows the user to perform basic operations: add, subtract, multiply & divide. When you have got that far, you can build upon it:

• Add more scientific calculations (modulus etc)
• Improve the UI (HINT: CSS Grid will be your friend here)
• Create "undo" functionality (HINT: the react tutorial has a good example of this)

GitHub dashboard

Use the GitHub API to create your own dashboard. This dashboard can be anything you want. A possible starting point would be to display information about your own GitHub account.

• Total commits over the past month
• Total number of repositories
• Displays your most used/favourite language

HINT: Even though this is a client-side project, you will have to interact with an API. Use Postman or similar to get a feel for how the API works, how to authenticate requests and things like that.

A Quiz app

Create a quiz app that randomly displays a question with a multiple choice of answers to the user. If the user gets the answer correct, display a "hurray!" message, update their score, you get the idea. I like this app as the possibilities are endless when it comes to expanding on it:

• Add categories
• Add high scores
• Add a countdown
• Allow multiple players (HINT: You could go really advanced and use Socket.io to allow online play!)

HINT: Remember not to go overboard at the beginning! Set your goal for the initial project, and get to that point first. Then, see if you want to add more stuff or move onto something else.

A Real Time weather app

Use something like Open Weather Map to create an app that displays the latest weather for a certain location in real-time.

HINT: Try not to be put off by the term real-time. At it's simplest level, this could be writing some logic that calls the API every 5 seconds and displays the data.

A shopping cart

We all know how shopping cart's work, but can you build one? Display a list of products to the user, and let them add it to their cart. As a starting point, you could create functionality that:

• Let's the user add an item from the product page to their cart
• Shows the items in the cart
• Shows the total cost of the items in the cart

HINT - You can simply hardcode the products that appear on the product's page as a first step to get going.
More projects!

If you're looking to get your hands on more projects, check out this GitHub repo. There are projects for different levels that will keep you busy for a while!

Thanks for reading!

To get the latest tips and guides for junior developers straight to your inbox, make sure to join the mailing list at www.chrisblakely.dev!