Forem: Danielle Richardson

How to Create and Style an HTML Custom Checkbox

Danielle Richardson — Mon, 18 Apr 2022 14:15:43 +0000

If you are like many others, you have repetitive tasks to complete. Whether it be grocery shopping once a month or completing chores throughout the week, often we find that without guidance, we could easily miss something or get distracted. Having the ability to mark something complete using a checkbox allows us to complete repetitive tasks quicker and with fewer mistakes.

Checkboxes are great to use for:

Keeping up with daily tasks
Subscribing to newsletters
Adding toppings to an online order
Completing online surveys
Filling out job applications etc.,

As you can see, creating a checkbox is a common task but sometimes more complicated the more you customize it. But with this easy-to-follow guide, you will learn techniques to style a checkbox to look the way you desire!

This guide is written assuming you are familiar with HTML5. With that said, let's get started!

Create a Basic Checkbox using HTML

In this walkthrough, we'll create a list of school supplies we will need for our first day of class. By the completion of this guide, our checklist will look like this:

Label and Input Elements

In your HTML file, create a <label> tag and assign it a class name (ex: "container"). Nested inside the <label> tag, is an <input> tag assigned a type name of "checkbox". There is also a <span> tag assigned a class name of "checkmark". See the example below:

 <label class="container">Pencils
    <input type="checkbox">
    <span class="checkmark"></span>
  </label>

The <label class="container"> tag does not "necessarily" make physical changes to the code. The label element is used for assigning style to the code with CSS. Please note, if you create a checkbox without a label element, the checkbox will only trigger by specifically clicking on the checkbox rather than the text "Pencils" associated with it. Take a moment and test it for yourself.

The <input type="checkbox"> tag is assigned the type name "checkbox" because it is rendered by default and will give us the properties of a checked box when activated.

The <span class="checkmark"> tag is placed within the label element to style our checkmark with CSS once it is triggered.

The above code will output the following:

Putting the HTML All Together

Now that you can create a basic HTML checkbox, we can fill in the rest of our HTML file.

Link the CSS stylesheet in the <head> of the HTML template.
Add a <div> tag for styling the area around the checkbox, <h2> heading tag for the title, and a few more school supplies to our HTML <body>.
Separate each <label> tag using <br> in order to skip to the next line. See the example below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>School Supply Checklist</title>
</head>

<body>
    <div class="checklist">
        <h2>School Supply Checklist</h2>
        <label class="container">Pencils
            <input type="checkbox">
            <span class="checkmark"></span>
        </label><br>
        <label class="container">Paper
            <input type="checkbox">
            <span class="checkmark"></span>
        </label><br>
        <label class="container">Pens
            <input type="checkbox">
            <span class="checkmark"></span>
        </label><br>
        <label class="container">Notebook
            <input type="checkbox">
            <span class="checkmark"></span>
        </label><br>
        <label class="container">Marker
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>
</body>
</html>

Styling the Checklist using CSS

You have now created multiple fully-functioning checkboxes. It is now time to add some style. In your CSS file (within the same folder as HTML), we will write code to format the HTML by customizing the checkboxes as creative as you like. Follow these simple steps and once you are comforter, feel free to adjust your code.

/* Step 1: Customize the label (the area around the checklist) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 20px;
}

/* Step 2: Remove the default checkboxes so that we can create our own */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Step 3: Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #79e3d0;
}

/* Step 4: When hovering, add a background color */
.container:hover input ~ .checkmark {
    background-color: #c8e9e3;
}

/* Step 5: When the checkbox is checked, add a different background */
.container input:checked ~ .checkmark {
    background-color: #32e0f4;
}

/* Step 6: Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Step 7: Display the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Step 8: Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

The output:

Adding More Style

You have now created a great piece of art (your own customized checklist!). To further your skills consider a few more CSS add-ons:

.checklist {
background-color: #2386f9;
padding: 30px;
margin: auto;
width: 50%;
border: 3px solid #373ae6;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
}

The output:

Conclusion

Creating custom checkboxes are beneficial to enhance your website branding and improve the user experience. You can now successfully:

Create a checkbox in HTML
Add labels to a HTML checkbox
Style the checkbox using CSS

React Library Suggestions

Danielle Richardson — Fri, 08 Oct 2021 22:07:38 +0000

This is a quick introduction to my 3 suggest React Libraries that I think you should try out. Let's dive in.

1. Material UI

Material UI is one of the most popular UI packages in React and is created by Google. It was created to bring unified user experience across various devices and platforms. Material UI also has the option to use web design templates!

To install:

npm install @material-ui/core

Next import the component that you want to use:

import Button from '@material-ui/core/Button'

2. Redux

Redux is a global state management solution. It allows you to connect every React component directly to the entire state, eliminating the need to use props or callbacks.

To install:

npm install react-redux

3. React Bootstrap

React Bootstrap allows React components to be build with the popular CSS framework, Bootstrap.

To install:

npm install react-bootstrap

Next import the component that you want to use:

import Button from 'react-bootstrap/Button'

Happy coding!

Basic Responsive Websites

Danielle Richardson — Mon, 04 Oct 2021 01:06:46 +0000

In this blog, I will share some general concepts of how to implement a responsive design to your website that it is easy to follow. Creating a responsive website can be a bit confusing at first, but once you understand the basic foundations you will be good to go!

What is a Responsive Website?

Responsive Websites allow websites and pages to display on all devices and screen sizes by automatically adapting to the screen, whether it's a desktop, laptop, tablet, or smartphone. We do this by working with CSS using various settings to deliver the best experience to users. To better understand we will discuss the basic concepts of Media Queries and CSS Units.

Media Queries

Media Queries are conditions that you apply to your CSS. You tell the browser to add or remove specific css rules depending on the capabilities of a device. As the screen size changes, we need rearrange our layout. Typically, it would be structured vertically as the screen size decreases.

The syntax for a media query looks like this:

@media <media-type> and (expressions) {
     CSS code;
    }

@media tells the browser that we are starting a media query.
media-type describes the kind of device rules we will apply to. For ex: we can place media-type "screen" here. This is an optional input. If we do not use it the rules will be used for all devices.
(expression) can be a be the width or orientation of the device.
Inside the media query we can specify some css rules that should be applied

Here is an real-life example of Media Query:

@media (max-width: 500px) {
  .Projects .Container .img
    width: 80%;
    padding-right: 20%
}

In this example we did not use the optional media-type. Instead we have the expression max-width: 500px (our breaking point) which tells the browser that the rules inside our media query should be limited to devices that have a screen width of 500px or smaller. Inside our media query we have our regular css code with values of your choice.

CSS Units

CSS Units determine the size of a property you're setting for an element or its content.

Here is an example of a CSS unit:

font-size: 16px;

The font-size is the property, 16px is the value of the property. Px is a css unit called pixel.

CSS Units can be categorized by Absolute Units and Relative Units:

ABSOLUTE UNITS	RELATIVE UNITS
Fixed Value	Scaled Values
does not scale when the screen size changes	they scale relative to something else
Ex: px (pixels)	Ex: Relative to their parent (%), viewport (vw, vh), font size (em, rem)

Relative Units is what will help us build responsive websites. Let's discuss in detail about the most common units.

Relative to their parent(%):

CSS FILE
.App .Parent {
  background-color: blue;
  width: 100%
}
.App .Child {
  background-color: yellow;
  width: 50%
}

In the example, inside a parent div, we have a child div. The child div will be 50% of the parent div.

Viewport (vw, vh)

The viewport is the user's visible area. Whether it is a desktop or a smartphone. vw stands for viewport width. vh stands for viewport height. For example: 100vh is 100% of the viewport height (100% height of a smartphone or 100% height of a desktop).

Font size (em, rem)

em - are relative to the font size (always x times of the parent). For instance, 1em is equal to the font-size of the parent. 2em is twice the font size of the parent. 3em is 3 times the font size of the parent.

HTML:
<div className="Parent">
  <h1>Main Title</h1>
  <h2>Next Title</h2>
</div>

CSS:
.App .Parent {
  font-size:16px
}
.App .Parent h1 {
  font-size: 3em;
}
.App .Parent h2 {
  font-size: 2em;
}

In our Parent div we have a font size of 16px. In our h1 we have a font size of 3em which is 3 times the font size of its parent with 16px. Therefore our h1 has 48px (16px*3em) and our h2 has 32px (16px*2em).

rem - are relative to the roots html font size. If the root html is not defined then it will be equal to the default font size of the browser (16px usually). This is a more preferred method.

CSS:
html {
  font-size: 20px;
}
.App .Parent h1 {
  font-size: 3rem;
}
.App .Parent h2 {
  font-size: 2rem;
}

In this example the root font-size is 20px. Our h1 is 3 times the root (20px*3rem).

Applying Relative Units

In order to apply these relative units for responsive websites, we can go into our CSS file and change our absolute units to relative units where it is needed. We can also add media queries throughout our css file. Now that you understand the basic concepts of making responsive websites try it out. For more complex websites, more concepts will need to be applied. There are many resources you can use for further details such as: YouTube videos and popular sites such as Udemy, Codecademy, Treehouse, etc.

Big O Basics

Danielle Richardson — Sun, 26 Sep 2021 23:04:51 +0000

The code we choose to use can impact the speed and the performance of our program. How would we know which algorithm is most efficient? Big O Notation is used in Computer Science and measures how quickly the runtime of an algorithm based on the number of input in a function.

Big O looks at the worst case scenario or the max number of steps to take in a problem. On the other hand, Big Omega looks at the best case scenario or the least number of steps to take in a problem.

Common Runtimes from least to greatest effectiveness:

O(n^2): Quadratic time - as (n) grows, runtime squares.
O(n): Linear - as (n) scales, runtime scales.
O(log n): Logarithmic time - halves dataset until it finds (n).
O(1): Constant - as (n) grows, there is no impact.

Big O Complexity chart

This chart shows the runtime with green shaded area being the most effective to the red shaded areas being the least effective.

Understanding setState/useState in React

Danielle Richardson — Thu, 05 Aug 2021 19:46:48 +0000

In this Blog I will be answering the question "how do I use setState/useState in Class and Function Components?" Before we answer this question, we will discuss a little of what exact is a State in React.

What is a State?

Like props, States in React are objects that store data and affect how a component renders or behaves. The difference is that unlike props, states are managed within the component and can be changed over time.

How to Access a Component's State?

A component's state can be accessed like other objects by using
this.state.property_name

Note: In a class component we assign the initial state in our constructor.

Example:

class Sports extends React.Component {
  constructor(props) {
    super(props)

  this.state = {
    sports: ['basketball', 'football', 'soccer'],
    count: 0
  }

  render() {
    return (
      <div className = "container">
        <p> I have played {this.state.count} sport(s) </p>
      </div>
    );
   }
  }
}

How to Update a Component's State using Class VS Function Components?

Class Components

There are two types of components in React. There is a class component and a functional component. Class components call the constructor() method and set an initial state. Then we can change state further down by calling setState.

We can use the setState() method because it accepts an object that eventually merges into the component's existing state. This method schedules changes to the component's state object and tells React that the component and its children must re-render with the updated state.

//Instead of doing this this.state.name = 'Michael Jordan';

//Do this this.setState({name: 'Michael Jordan'});

Functional Component

In functional components we can use React Hooks. A Hook is a special function that lets you "hook into" React features. Previously, we had to convert a function to a class if we needed to add some state. Now, we can use a Hook inside the function component.

Unlike a class component, we have no "this" in a function component so we can't assign or read this.state. Instead, we call the useState Hook directly inside our component. The useState Hook is a Hook that lets us add React state to function components.

useState() is a new way to use the exact same capabilities as this.state provides in a class. The only argument to the useState() Hook is the initial state.

Example

import React, {useState} from 'react';

function Example() {
  const [count, setCount] =useState(0);

Conclusion

This concludes our overview of setState()/useState(). Things to remember:

Do not modify state directly. Modifying it directly with produce incorrect behavior causing it not to re-render
We don't need to call setState every time we change a variable. We call setState only when we want the change in a variable to reflect on the UI of the screen.
We import the useState Hook from React. It lets us keep local state in a function component.

Flatiron School Final Project: My Portfolio Website

Danielle Richardson — Wed, 21 Jul 2021 19:43:59 +0000

For my final project at Flatiron School I choose to create my very own portfolio website to add to my resume as I enter the Software Engineering job market. As I reflect over the journey I have had at Flatiron, I am excited to showcase the languages and frameworks that this experience has brought me:

Language/Frameworks I learned
* Ruby / Rails
* Sinatra
* SQLite
* HTML
* CSS
* JavaScript
* React.js
* Readux.js

The requirements for this final project is to use a Rails API backend and a React & Redux frontend. I started my project by establishing goals, creating my user stories, and organizing my models. I like to create tables in GoogleDoc so that I can refer back to my steps without using space on my computer.

Rails Setup

In the same GoogleDoc I like to organize some code before I launch my VS code. I am very analytical and huge notetaker, so this helps me gather my thoughts and prevents errors in the set up process.

Frontend Setup

In prepping for my project, the instructor led videos we have access to in Flatiron Learn Instruct has help me with some things that may not have stuck with me. I like to jot down some notes in the set-up stage so that in the event I have to start over, I already have a foundation.

Using React & Redux

After taking a few notes and establishing my backend I was able to jump right into React by using create-react-app. I found it interesting that React was created by Facebook developers and some of the features include:

A virtual DOM
Declarative writing
Babel
Webpack
Built in ESLint functionality
the create-react-app mentioned above

My First JavaScript+Rails Project

Danielle Richardson — Fri, 16 Jul 2021 03:35:31 +0000

This post showcases my first JavaScript project created as part of the Flatiron School curriculum for Software Engineering. I built a Single Page Application (SPA) using HTML, CSS, and JavaScript frontend to communicate with a Ruby on Rails backend API. The Rails backend needed to have a resource with an has-many relationship, have at least 3 AJAX calls, and a minimum of two of these four: Create, Read, Update, and Delete.

I began the project mapping out my concept and drawing a mock up of how I expected my website to look. Creating a strong and well organized foundation will set the tone for the entire project. I chose to create my project on a passion of mine which is mentorship. The app Hidden Gems Mentorship allows users to sign up to become a mentor in their work environment. The attributes that a mentor will have is their name, title, about me section, a department name and the ability to upload a photo. My goal is to eventually expand the app so that users can be paired with a mentor.

ASSOCIATIONS

After organizing a concept, I began coding! I started with my backend by creating an API and then adding my associations. One important strategy that I used is to VERTICALLY build my application. This means to build out one model/feature at a time to prevent from getting lost.

I began building out my ‘Department model’ by inputting ‘rails g scaffold department name’ into my terminal. I then created some sample seed data in my db-migrate-seed.rb file. Finally, I created my has_many :mentors association in my ‘Department model’ file. I repeated these same steps with my ‘Mentor model’ then tested my data by going into the rails console to make sure my data was present.

ROUTES

To complete my backend I had to implement my routes, controllers and serializers. Eventually, I would like to create different versions of this application, in effort in doing so I decided to namespace my routes to indicate that they are routes associated with the API and this is Version 1 of the application. I then moved on to creating my Controller and Serializer data. I again tested my application by this time opening the rails server and the JSON Viewer (downloaded with Chrome).

FRONTEND

Once my backend included my Minimum Value Product (MVP) I began coding my frontend starting with creating an html/css file, javascript events, manipulating the DOM, and creating fetch requests.

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed so that we can fetch the list of mentors and render a form.

FINAL THOUGHTS

After this process, I immediately began to get impressed with the outcome of my application. The frontend was a lot of fun and the immediate gratification of seeing the changes take place was satisfying.

Source Code:

Link