As always, I first of all design my projects in Figma before I move to development. This way, I do not get confused. I know exactly how to structure the UI as that thinking has already been done and it's in front of me.

Here is what we are going to build.

If you look at the screenshot of the finished product above, you will see that we have the header and the accordions. In the accordion components, we have the topic, the question underneath it and the answer (what will be shown when the accordion is expanded).

Every one of these pieces is a separate component. I then returned the parent component (accordion) in the App.js to render the app.

I started by creating a file Accordion.jsx in my src directory. This is the file that has all the code for the project.

So let's start with each component in the UI.

function Accordion() {
    return (
        <div></div>
    )
}

For now, we are simply returning an empty div element.

The AccordionItem component.

function AccordionItem() {
    return (
        <div className="container">
            <AccordionQuestion/>
            <AccordionAnswer/>
        </div>
    )
}

Now let's create the two components we are returning here.

The AccordionQuestion component

function AccordionQuestion() {
    return (
        <div className="header">
            <h2>Lorem ipsum dolor sit amet.</h2>
            <div className="question">
                <p>Nam itaque cumque et consectetur magni</p>
                <span>+</span>
            </div>
        </div>
    )
}

The AccordionAnswer component

function AccordionAnswer() {
    return (
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Doloribus soluta molestias accusantium ut eveniet architecto 
        vero repellendus. Officiis, cupiditate necessitatibus.</p>
    )
}

It is always clean and neat for you to write your data in a separate file like JSON or even just a simple object and import it into your app. We have been typing the accordion content manually but that is not the optimal way to do it if we are going to have multiple components.

Let's create a utilities file and write our data in it instead.

We write the following object in the file.

export const accordionData = [
    {
        subject: 'Lorem ipsum dolor sit amet.',
        question: 'Nam itaque cumque et consectetur magni?',
        answer: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Nobis perspiciatis recusandae placeat qui, accusamus molestias 
        voluptates cupiditate culpa quo? Magnam atque vero nemo 
        molestiae tenetur. Placeat vel quas quisquam amet doloremque 
        perferendis numquam ut. Hic aut qui alias molestiae at. 
        Aspernatur quam doloremque dolores blanditiis itaque veniam 
        perferendis voluptate repellendus.`
    },

    {
        subject: 'Lorem ipsum dolor sit amet.',
        question: 'Nam itaque cumque et consectetur magni?',
        answer: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Nobis perspiciatis recusandae placeat qui, accusamus molestias 
        voluptates cupiditate culpa quo? Magnam atque vero nemo 
        molestiae tenetur. Placeat vel quas quisquam amet doloremque 
        perferendis numquam ut. Hic aut qui alias molestiae at. 
        Aspernatur quam doloremque dolores blanditiis itaque veniam 
        perferendis voluptate repellendus.`
    }
]

All we need to do now is to import the parent component (accordion) and the utilities file in the App component to render our static accordion.

import Accordion from "./Accordion";
import { accordionData } from "./Utilities";
import './Style.css'


function App() {
  const items = accordionData;

  return (
   <div>
      <Accordion 
        items={items}
      />
   </div>
  );
}

export default App;

As you can see. Here we created an items variable that points to the accordion data and passed it down to <Accordion />

We are done writing the UI. At this point, we have a static accordion component. It is best to always write the UI first before logic and event handlers.

Create logic and event handlers

We go back to our Accordion and create the state using useState hook and the event handler.

function Accordion({ items }) {
    const [activeIndex, setActiveIndex] = useState(null)

    function handleClick(index) {
        setActiveIndex(activeIndex === index ? null : index)
    }

    return(
        <div>
            <Heading />

            {items.map((item, index) => (
                <AccordionItem 
                    key={index}
                    item={item}
                    isActive={index === activeIndex}
                    onToggle={() => handleClick(index)}
                />
            ))}
        </div>
    )
}

I created the state variables [activeIndex, setActiveIndex] and the handleClick function to toggle the activeIndex that expands or collapses the accordion. If the clicked item is the currently active one, it sets activeIndex to null (collapsing the item), otherwise, it sets activeIndex to the index of the clicked item.

In the return statement, we are returning the <Heading /> of the app and we are also mapping over the array of AccordionItem components. Each AccordionItem receives the following props: key, item, isActive and onToggle.

function AccordionItem({ item, isActive, onToggle}) {
    const {subject, question, answer} = item

    return (

        <div className="container">
             <AccordionQuestion
                 subject={subject}
                 question={question}
                 onToggle={onToggle}
                 isActive={isActive}
             />
             <AccordionAnswer
                 answer={answer}
                 isActive={isActive}
             />
        </div>

    )
}

I used a destructuring assignment to get our subject, question and answer properties from the array of objects.

function AccordionItem({ item, isActive, onToggle}) {
    const {subject, question, answer} = item

function AccordionAnswer({ answer, isActive }) {
    return (
        <>
            {isActive && <p>{answer}</p>}
        </>
    )
}

function AccordionQuestion({ subject, question, onToggle, isActive}) {
    return (
        <div className="header">
                <h2>{subject}</h2>
            <div className="subtitle" onClick={onToggle}>
                <p>{question}</p>
                <span>{ isActive ? '-' : '+'}</span>
            </div>
        </div>
    )
}

In the AccordionAnswer we pass in the answer and isActive props. It conditionally renders the answer only if the item is active (isActive is true).

The AccordionQuestion renders the question and toggle button of an accordion item.

The complete code

The Accordion component

import { useState } from "react";

function AccordionAnswer({ answer, isActive }) {
    return (
        <>
            {isActive && <p>{answer}</p>}
        </>
    )
}

function AccordionQuestion({ subject, question, onToggle, isActive}) {
    return (
        <div className="header">
                <h2>{subject}</h2>
            <div className="subtitle" onClick={onToggle}>
                <p>{question}</p>
                <span>{ isActive ? '-' : '+'}</span>
            </div>
        </div>
    )
}

function Heading() {
    return (
        <h1 className="heading">Accordion</h1>
    )
  }

function AccordionItem({ item, isActive, onToggle}) {

    const {subject, question, answer} = item

    return (

        <div className="container">
             <AccordionQuestion
                 subject={subject}
                 question={question}
                 onToggle={onToggle}
                 isActive={isActive}
             />
             <AccordionAnswer
                 answer={answer}
                 isActive={isActive}
             />
        </div>

    )
}

function Accordion({ items }) {
    const [activeIndex, setActiveIndex] = useState(null)

    function handleClick(index) {
        setActiveIndex(activeIndex === index ? null : index)
    }

    return(
        <div>
            <Heading />

            {items.map((item, index) => (
                <AccordionItem 
                    key={index}
                    item={item}
                    isActive={index === activeIndex}
                    onToggle={() => handleClick(index)}
                />
            ))}
        </div>
    )
}

export default Accordion

The App component

import Accordion from "./Accordion";
import { accordionData } from "./Utilities";
import './Style.css'


function App() {

  const items = accordionData;

  return (
   <div>
      <Accordion 
        items={items}
      />
   </div>
  );
}

export default App;

And we are done.

Then I went to the official docs to start fiddling with it. After reading a fair bit of it, I decided to start building small projects and this is one of them.

Let's get started.

The features

• Alerts the user to enter a task if an empty task is submitted

• Clicking the checkbox against the task marks it as done by crossing a grey line through

• The clear completed button clears all tasks that are marked as done

• The clear all tasks button clears all tasks in the list whether completed or not

Here is the demo of the app. And here is the project on github.

The complete CSS file.

Import Statements

import { useState } from 'react';
import './Style.css';

In React, you can either build “top-down” by starting with building the components higher up in the hierarchy or “bottom-up” by working from components lower down.

So I started writing the components using the bottom-up approach.

The app component

function ToDoApp() {
  return (
    <ToDoContainer />
  );
}

export default ToDoApp;

Here, I created the ToDoApp function that returns the component that contains all the components of the entire app, ToDoContainer.

The Todo Container

function ToDoContainer() {
   // the rest of the code 
}

I put all the states and the functions for the entire app in this component and then I passed them down through props to the child components. But more on that later.

For now, let's write the entire UI (user interface) first as it requires just a little effort of thinking before adding interactivity.

The rest of the components

The Header component.

function Header() {
  return (
    <h1 className='header'>Ta-Da List App</h1>
  )
}

The AddTask component.

function AddTask() {
    return (
    <form className='add-task'>
      <input  type='text'/>
      <button className='add-task-button'>Add Task</button>
    </form>
  )
}

Here we are returning a simple form with an input box and a button to add a task to the list.

The TaskList component

function TaskList() {
    return (
        <ul className='task-list-ul'>
            <li className='task-list-li'></li>
        </ul>
    )
}

The TodoControls component returns the clear completed and clear all task buttons.

function TodoControls() {
  return (
    <div className='tada-wrapper'>
      <button className='btn'>Clear all task</button>
      <button className='btn'>Clear completed</button>
    </div>
  )
}

The UI is done.

As I mentioned earlier, I used the bottom-up approach to write the UI. That means the first component (ToDoContainer) we created at the top is in fact at the very bottom of the app and the last one is at the top.

I then added all of the above components in the ToDoContainer to display the static app.

function ToDoContainer() {

return (
    <div className='container'>
      <Header />
      <AddTask />
      <TaskList />
      <TodoControls />
    </div>
  )
}

This is the result so far.

Add interactivity

I created three state variables for the tasks, the input value and the checkbox in the ToDoContainer. These are the three pieces of the app that change based on user interaction.

Thereafter I added

function ToDoContainer() {
  const [tasks, setTasks] = useState([])
  const [inputValue, setInputValue] = useState('')
  const [checkedTask, setCheckedTask] = useState([])
    // the rest of the code
}

Let us wire the handler functions

I first created the handleChange function that will trigger when clicked in the input.

function handleChange(e) {
    setInputValue(e.target.value)
}

Let's create the handler function that will add the input value to the task list.

function handleSubmit(e) {
    e.preventDefault()

    if (inputValue.trim() !== '') {
      setTasks([...tasks, {text: inputValue, completed: false}])
      setInputValue('')
    } else {
      alert('Please enter task')
    }
}

This handleSubmit function ensures that a new task is added to the To-Do list only if the user has entered a non-empty task. If the input is empty, it displays an alert prompting the user to enter a task.

Let's create the handleToggleTask function that is responsible for toggling the completion status of a task.

 function handleToggleTask(index) {
    const updatedTasks = tasks.map((task, i) => 
      i === index ? {...task, completed: !task.completed} : task
    )
    setTasks(updatedTasks)

    if (checkedTask.includes(index)) {
      setCheckedTask(checkedTask.filter((i) => i !== index))
    } else {
      setCheckedTask(checkedTask.concat(index))
    }
  }

This function toggles the completion status of a task, updates the tasks array with the modified task(s), and updates the checkedTask array to keep track of completed tasks.

 function handleClearCompletedTask() {
    let completedTask = tasks.filter((_, index) => !checkedTask.includes(index))
    setTasks(completedTask)
    setCheckedTask([])
  }

  function handleClearAllTask() {
    tasks.splice(0, tasks.length)
    setTasks([])
  }

The handleClearCompletedTask removes completed tasks by filtering the tasks array based on the indices stored in checkedTask.

And the handleClearAllTask removes or clears all the tasks from the to-do list.

Pass the functions as props

Let us go back to the AddTask component and add the state and the handle functions as props.

function AddTask(props) {

  const {inputValue, handleChange, handleSubmit} = props

  return (
    <form className='add-task'>
      <input
        type='text'
        value={inputValue}
        onChange={handleChange}
        placeholder='Enter task...'
        className='add-task-input'
      />
      <button 
        onClick={handleSubmit}
        className='add-task-button'>Add Task
      </button>
    </form>
  )
}

We are using "destructuring assignment" to destructure the inputValue, handleChange and handleSubmit properties from the props object.

Now, let's go back to our task list and fill out what was missing for the functionality.

function TaskList({tasks, onToggleTask}) {
  return (
    <ul className='task-list-ul'>
      {tasks.map((task, index) => (
        <li key={index} className='task-list-li'>
          <input
              type='checkbox'
              id={`task-checkbox-${index}`}
              className='task-checkbox'
              checked={task.completed}
              onChange={() => onToggleTask(index)}
            /> 
          <label 
              htmlFor={`task-checkbox-${index}`} 
              className='task-checkbox-label'>
           {' '} {task.text}
          </label>
        </li>
      ))}
    </ul>
  )
}

Now our TaskList component renders the list of tasks. It maps over the tasks array, creating a list item for each task with a checkbox input and a corresponding label. The checkbox's state is determined by the completed property of each task. The onToggleTask function is called when a checkbox is clicked, passing the index of the task.

function TodoControls({onClearCompletedTask, onClearAllTask}) {
  return (
    <div className='tada-wrapper'>
      <button 
        className='btn' 
        onClick={onClearAllTask}
        >Clear all task
        </button>
      <button 
        className='btn' 
        onClick={onClearCompletedTask}>
      Clear completed
      </button>
    </div>
  )
}

In this component, we are receiving the functions to clear tasks as props.

The complete code

import { useState } from 'react';
import './Style.css';

function TodoControls({onClearCompletedTask, onClearAllTask}) {
  return (
    <div className='tada-wrapper'>
      <button 
        className='btn' 
        onClick={onClearAllTask}>Clear all task</button>
      <button 
        className='btn' 
        onClick={onClearCompletedTask}>
      Clear completed
      </button>
    </div>
  )
}

function TaskList({tasks, onToggleTask}) {
  return (
    <ul className='task-list-ul'>
      {tasks.map((task, index) => (
        <li key={index} className='task-list-li'>
          <input
              type='checkbox'
              id={`task-checkbox-${index}`}
              className='task-checkbox'
              checked={task.completed}
              onChange={() => onToggleTask(index)}
            /> 
          <label htmlFor={`task-checkbox-${index}`} 
            className='task-checkbox-label'>
           {' '} {task.text}
          </label>
        </li>
      ))}
    </ul>
  )
}

function AddTask(props) {

  const {inputValue, handleChange, handleSubmit} = props

  return (
    <form className='add-task'>
      <input
        type='text'
        value={inputValue}
        onChange={handleChange}
        placeholder='Enter task...'
        className='add-task-input'
      />
      <button 
        onClick={handleSubmit}
        className='add-task-button'>Add Task
      </button>
    </form>
  )
}

function Header() {
  return (
    <h1 className='header'>Ta-Da List App</h1>
  )
}


function ToDoContainer() {

  const [tasks, setTasks] = useState([])
  const [inputValue, setInputValue] = useState('')
  const [checkedTask, setCheckedTask] = useState([])

  function handleChange(e) {
    setInputValue(e.target.value)
  }

  function handleSubmit(e) {
    e.preventDefault()

    if (inputValue.trim() !== '') {
      setTasks([...tasks, {text: inputValue, completed: false}])
      setInputValue('')
    } else {
      alert('Please enter task')
    }
  }

  function handleToggleTask(index) {
    const updatedTasks = tasks.map((task, i) => 
      i === index ? {...task, completed: !task.completed} : task
    )
    setTasks(updatedTasks)

    if (checkedTask.includes(index)) {
      setCheckedTask(checkedTask.filter((i) => i !== index))
    } else {
      setCheckedTask(checkedTask.concat(index))
    }
  }

  function handleClearCompletedTask() {
    let completedTask = tasks.filter((_, index) => !checkedTask.includes(index))
    setTasks(completedTask)
    setCheckedTask([])
  }

  function handleClearAllTask() {
    tasks.splice(0, tasks.length)
    setTasks([])
  }


  return (
    <div className='container'>
      <Header />
      <AddTask 
        inputValue={inputValue}
        handleChange={handleChange}
        handleSubmit={handleSubmit}
      />
      <TaskList
        tasks={tasks}
        onToggleTask={handleToggleTask}
      />
      <TodoControls
        onClearCompletedTask={handleClearCompletedTask}
        onClearAllTask={handleClearAllTask}
      />
    </div>
  )
}

function ToDoApp() {
  return (
    <ToDoContainer />
  );
}

export default ToDoApp;

We are finally done.

I may have not done a good job with this but I will keep it going to get better at it.

Thanks for reading.

But first.

What a brand is not

Let's start with what he says a brand isn't. In his book, The Brand Gap, Marty Neumeier states that the term brand is not a logo, an identity, or even a product.

Many people think when they design a logo, boom! That is it! They now have a brand. But Logos, identities, illustrations, and all those little prints are visual elements (or visual identities) of a company or product. They are the elements you see and sometimes touch.

What brand is

"A brand is a person's gut feeling about a product, service, or organization," says Marty Neumeier. The gut feeling here is the reputation a company or an organization has out there in the world.

With that definition, a brand is not what you or anyone in your business or organization says it is. You don't describe it. It is what happens inside the heads of other people. It's not visual, but emotional.

What do people who use your product or service say about you? What is the feeling they get when they come in contact with the product you offer? What is the first thing that comes to their minds when they see it?

Answers to these questions define your brand.

All of that stems from everything that companies or organizations do. The product design, brand messaging, and interactions with customers/clients all affect the lives of people out there. What is the impression all of that creates on people?

Apple as an example

Why is Apple such an irresistible brand out there? They take their designs extremely seriously. They do not just want to design, they want the design to invoke a certain feeling when you experience it.

And when I say design I'm not just talking about the visual elements but their messaging, consistent use of colours, design patterns like the rounded corners on their product, smooth user interface, etc.

When you hold their product in your hand, you get a feeling. That gut feeling is the brand.

You don't tell people what your brand is. People have to tell you what it is. They feel your brand in their soul.

All that you are thinking about yourself or your business as your brand is a false mental picture. What people are thinking and saying is the real picture.

That is it.

Share the post for others to benefit if you have got value from it.

Introduction

Designing and developing a website from scratch is a complex process.

There's a lot that goes into it. With new web design tools being exploded in the industry now and then, it's difficult to map out an efficient web design workflow process.

From the information gathering to the launch of the website involves a lot of processes.

Web design workflow is different from designer to designer. Ask any web designer, they will tell you something different. After all, our goal is just to design a website that our clients will love.

In this article, I will show you the design process that I find effective and efficient.

Note: I'll not be going through every detail of how I come up with my design solutions, just the main points (or at least what I find relevant to share).

Planning

I use pen and paper to do quick site maps. I want to make sure I capture the main navigation and the home page.

After discussing some ideas about the main navigation with my client, I will then proceed to my mind mapping software to plan the pages and the structure.

That is the information hierarchy of the pages. My goal here is to structure the entire site's information architecture.

Wireframe. I use pen and paper here again first before any software. I try to use my imagination as best as possible to come up with something.

At this stage, I don't go into details. My sight is on the layout. I scribble down ideas. Therefore, I use a pen most of the time because I don't want to erase any initial concepts as I would be tempted to do if I were to use a pencil.

It's now time to clean things up and make them a bit tidy. My go-to software for basic wireframes is Balsamiq. Here, I experiment with my sketches and refine the ideas I want to go with.

I'm not worried about the content or anything else, even though I make use of Lorem Ipsum (dummy text).

I make sure all the sections and call to action are captured. After the wireframe is done, I'll then present (not just show) it to my client for approval. After my client has approved, I move to the next stage.

Design

I use Adobe XD for design. The design part is the fun and best part of the process, or at least for me.

This is the time I consider everything aesthetics. Once my design files are ready, I use the brand guide to capture all the brand elements (colour, typography, icons, logo etc.)

The finished product here should look very much like the result of the real website. My client should see almost exactly what to expect.

Coding

I set up my development environment in the sublime text (code editor). All design files are ready. I primarily use HTML, CSS and JavaScript for front-end development. Back-end development is not yet my thing.

I love UI (User Interface) design so much, maybe because I am coming from a design background.

So, as a freelancer, I have the freedom to choose projects that I feel I'm comfortable working on.

For Content Management Systems, I use WordPress, it's popular, and it has many plugins for all kinds of things one can imagine. it is very easy for my clients to update their sites without no coding knowledge.

Conclusion

As I said earlier, every designer has his/her way of doing things.

there are many tools out there for designers to use to their advantage. A lot of other designers use Sketch and Figma these days.

It is trending in the design industry. It is just a matter of preference sometimes or experience with the tools that determine which one to stick with.

This is not the best or recommended process out there. It is just my process. As I advance in my freelance career, I will be constantly refining this process according to my needs.

Join the discussion below and tell me about your process. I'd love to read them.

“The question of whether a computer can think is no more interesting than the question of whether a submarine can swim.”

~ Edsger W. Dijkstra

Last month, as I was scrolling through TikTok, I came across chatGPT as the new AI tool that will erupt in many industries including web development.

I became curious at this point to take a look.

I started giving it basic text prompts at first to see the type of responses it would generate. And to my greatest surprise, the responses it generated were mind-blowing.

By then I was going through freeCodeCamp's basic algorithms challenges. I gave it simple JavaScript prompts and not only did it give me clear and concise explanations, but it also gave me coding examples. I was blown away. That was my first time seeing its output code on the chat.

Since then I have been figuring out various ways for it to help me understand JavaScript concepts.

The following are the three ways I'm using it so far:

I use it to explain to me specific JavaScript concepts.

Before chatGPT, I would use google or YouTube. I would have to search through the articles that come up in google and click the response that's exactly what I am asking or very close. Even then, I would have to skim through the article to get to the point quickly. It's almost the same for YouTube.

ChatGPT goes straight to the point and explains the prompt I give it. And the cool thing is that it will rephrase the prompt, thereby putting it better or yet still asking me to clarify what I mean.

Simplify unclear or complicated explanations

Whether I'm following a YouTube tutorial or reading an article/book, I usually come across something that the author or instructor did not explain very well, at least to my understanding.

I will type out the code in chatGPT and ask it to explain what's going on in the code in a simple way. It will explain the code to me line-by-line and even give me some other examples to reinforce my understanding.

Debug my code

I spend less time trying to figure out where I'm going wrong. I simply copy my code in the chat and ask it to debug the code. It will not only find the bug and point out where I went wrong, but it will also rewrite it for me.

In summary, it's my personal assistant. I ask it any question (no matter how dumb it is), and it will always give me the answer without getting mad—unlike a person.

All the above is true for me and I like it, but I also acknowledge that it has limitations. It can generate completely useless responses.

I use it with caution and I always try to check other sources if I think it's missing its way with a response.

Thanks for reading.

See you soon

~Umaru.

Last month I decided to take things to a different level this year, 2023.

My dream has always been to become a professional web developer. But the journey has been very rough.

Lack of focus, inconsistency in learning, lack of time and a boatload of other distractions.

Programming and creating stuff for the web have always fascinated me. I like solving problems. And I want to be able to use code to do just that.

As I was writing down my plans, I came across a video that emphasized building projects and documenting the learning journey as keys to success in programming.

That is exactly the reason why I created this blog. In addition to consistent practice and building projects, I want to write about the things am learning in this blog.

I hope this helps deepen my understanding and solidify the concepts I will be learning.

As I write, I know the basics of HTML, CSS and a little bit of JavaScript.

I am excited about what I will be doing here over the next couple of months.

“Everybody should learn to program a computer, because it teaches you how to think.”

~ Steve Jobs