DEV Community: Hikari

How to Create a To Do List by vanilla JavaScript

Hikari — Mon, 03 Oct 2022 19:28:56 +0000

Creating a "to-do list" app is the one of essential ways to deepen your DOM manipulation knowledge. I made it once before, however, it was a pretty redundant code so wasn't satisfied with my work at the time.

However, I learned DOM essence again and how to use them effectively recently. So I'd like to share what I learned and hope it would be some ideas to create your own "to-do list" by vanilla JavaScript.

Basic Steps

These are basic steps to create apps by vanilla JS which you already might know😁

Add HTML
Add CSS
Add JavaScript!

The Sample

And here's the sample of the "to-do list"!

HTML

<!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" />
    <title>Note Manager</title>
    <script
      src="https://kit.fontawesome.com/d4e1c36ab6.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h2 id="heading">To Do List</h2>
      </header>

      <div class="note-list">
        <ul id="list"></ul>
      </div>

      <div class="add-note">
        <form id="add">
          <input type="text" placeholder="Add note..." id="add-input" />
          <button type="submit" id="add-btn">Add Note</button>
        </form>
      </div>
    </div>

    <script src="exercise.js"></script>
  </body>
</html>

I haven't added <li> and <p> inside of the <div class="note-list"> which is the basic area of the note yet because they'll be implemented by DOM later on!
So, the blueprint is important since it makes orgnaized to think which part will be added by JavaScript.

Also, when it comes to adding <form>, I recommend making sure to think whether to mark it up with type="submit"!
Because using an <input type=submit> in the form, which is what gets the automatic Enter Key behaviour so can be a good user-friendly experience.

CSS

Enjoy to write your codes for whatever your preferable design🎨

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Concert One", cursive;
  color: #333;
}

.wrapper {
  width: 90%;
  max-width: 760px;
  margin: 20px auto;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 0 0 20px;
  border: 1px solid lightgray;
}

.changeBg {
  background-color: yellow;
}

.changeFt {
  font-style: italic;
  font-size: 40px;
}

input {
  color: #777;
  outline: none;
  border: 1px solid #777;
}

header {
  text-align: center;
  background: #ffd1d1;
}

header h2 {
  padding: 40px 0 20px 0;
  color: #555;
}

header #search-note input {
  padding: 5px 2px;
  width: 200px;
  border-radius: 2px;
  margin: 10px 0 40px 0;
}

.note-list ul {
  list-style: none;
  padding: 40px;
}

.note-list ul li {
  padding: 5px;
  margin-bottom: 10px;
  border-bottom: 0.1px solid #ccc;
  border-left: 5px solid #ffd1d1;
}

.note-list ul li p:nth-child(2) {
  text-align: right;
}

.note-list ul li p i {
  cursor: pointer;
  margin-left: 5px;
}

//the icon which is from font awesome
.note-list ul li p i.fa-pencil-square-o {
  color: #228b22;
}

//the icon which is from font awesome
.note-list ul li p i.fa-times {
  color: #dc143c;
}
.note-list ul li input {
  display: none;
  padding: 5px 0;
  width: 70%;
  margin: 5px auto 0 auto;
}

#add-notes {
  padding: 60px 0;
}

form#add {
  margin-top: 10px;
  text-align: center;
}

form#add input {
  border-radius: 2px;
}

form#add input[type="text"] {
  padding: 6px;
  width: 250px;
}

#add-btn {
  padding: 4px;
  border-radius: 2px;
}

The edit icon and delete icon appear once the user inputs the note. So these are already supposed to be added in CSS and hidden and displayed by JS.

JavaScript

All right, let's start writing JavaScript then!
Let's see the very basic flow of implementing DOM first.

Basically, when you implement the DOM function, we will follow the below flow for the elements.

1. Select

To manipulate an element inside the DOM, you need to select it and store a reference to it inside a variable at first.


// Get the first <p> element:
document.querySelector("p");

//Get the first element with class="example":
document.querySelector(".example");

2. Manipulate
We can start to manipulate the elements using the properties and methods available.

I'll introduce some are used in the "to-do list" below.

style
: returns the values of an element's style attribute.

element.style.backgroundColor = "red";

document.createElement()
: creates the HTML element specified by tagName

const newDiv = document.createElement("div");

Element.className
: gets and sets the value of the class attribute of the specified element.

secondIcon.className = "fa fa-times";
//(It was also used to add font awesome in this work)

Element.setAttribute()
: Sets the value of an attribute on the specified element.

setAttribute(name, value)

Event.target
: Returns the element that triggered the event.

alert(event.target);

Element appendChild()
: Appends a node (element) as the last child of an element.

document.getElementById("myList1").appendChild(node);

removeChild()
: Remove the first element from a list

list.removeChild(list.firstElementChild);

3. Events
Responding to user inputs and actions!
Such as The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.


//1. Select
const ul = document.querySelector("#list");


//3. Events 
document.getElementById("add-btn").addEventListener("click", function (e) {
  e.preventDefault();

  const addInput = document.getElementById("add-input");

  if (addInput.value !== "") {
    //2. Manipulate

    //create note elements
    const li = document.createElement("li"),
      firstP = document.createElement("p"),
      secondP = document.createElement("p"),
      firstIcon = document.createElement("i"),
      secondIcon = document.createElement("i"),
      input = document.createElement("input");

    //create attributes
    firstIcon.className = "fa fa-pencil-square-o";
    secondIcon.className = "fa fa-times";
    input.className = "edit-note";
    input.setAttribute("type", "text");

    //add text to first paragraph
    firstP.textContent = addInput.value;

    //appending stage
    secondP.appendChild(firstIcon);
    secondP.appendChild(secondIcon);
    li.appendChild(firstP);
    li.appendChild(secondP);
    li.appendChild(input);
    ul.appendChild(li);

    addInput.value = "";
  }
});

// Editing and deconsting
ul.addEventListener("click", function (e) {
  // console.log(this);
  // console.log(e.target.classList);

  if (e.target.classList[1] === "fa-pencil-square-o") {
    //<li>: the parent of the icon <p>
    const parentP = e.target.parentNode;
    parentP.style.display = "none";

    //note
    const note = parentP.previousElementSibling;
    //<input>: the previousElementSibling of <li>
    const input = parentP.nextElementSibling;

    //show the block section
    input.style.display = "block";
    input.value = note.textContent;

    input.addEventListener("keypress", function (e) {
      //e.keyCode === 13 represents "Enter"
      if (e.keyCode === 13) {
        if (input.value !== "") {
          //add the text which was input
          note.textContent = input.value;
          parentP.style.display = "block";
          input.style.display = "none";
        }
      }
    });
  }

  if (e.target.classList[1] === "fa-times") {
    const list = e.target.parentNode.parentNode;
    list.parentNode.removeChild(list);
  }
});

Tips for creating a "to-do list by DOM"

Lastly, I'd like to share some parts which I think it would be nice tips for creating a "to-do list".

Programatic approach
Instead of the DOM, you can also wrtie the note section by InnerHTML like this:

 `<li>${addInput.value}</li>`

Even if it's a redundant code, I guess basically creating elements through the DOM is easier to manipulate them eventually b because I also put the edit and delete functions smoothly for each element.

How to reset the value
Once the user add the note, how can we reset the value?
It's easy to solove this, just you can put an empty string.

 addInput.value = "";

How to add the editing part

Select the edit icon


ul.addEventListener("click", function(e){
console.log(this)
console.log(e.target.classList)
}

//"event.target" returns the value of where the user is clicking on.

The console result will be like below which means you have an object called DOMTokenList and has the class.

So, you can access the index[1] through the e.target to choose the edit icon (the pencil icon) and set the condition to check if the user clicks that. And then put them inside of the addEventLisetener.

Manipulate inside of the addEventLisetener

Let's manipulate the inside of the function which the user clicked the edit button then!

The flow is like these:

Create the note section with invoking CSS
Set the input.value with the textContent
Add the event contents to show what the user keypressed

I also added some comments on the above codes so please refer to them as well!

Conclusion

DOM manipulations are very important essense to understand JavaScript. I hope it will be helpful to understand the JavaScript libraries in the future🤗

Thank you so much for reading and happy coding!

What I learned during the 100 Days of Code Challenge

Hikari — Fri, 02 Sep 2022 23:37:57 +0000

I completed the #100DaysOfCode challenge (almost in a row every day)🎉! The challenge was a great journal to track my coding experience so I'd like to look it back, and set a goal for the next challenge!

Here's my very first post of the challenge:

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 1 of #100DaysOfCode

It's the very first time to post #100DaysOfCode!
I practiced animation effects and also learned how to work border-radius to make a distorted circle by CSS🌸

02:42 AM - 28 Apr 2022

At this point, what I had coding skills were

Basic coding skills of HTML and CSS
Bits of basic knowledge Javascript syntax

Let's see what I have learned during 100days!

What I learned

HTML
CSS, Sass
Algorithms solving
JavaScript: DOM manipulation, API
Java: OOP, DataBase, Spring tool, PostgreSQL
React: JSX, Props, State, class component, Hooks (UseState)
Tools: Command line, Github, Heroku, Figma, Semantic UI

What I created (excerpt)

HTML and CSS (Sass)

Challenges from Fronted menter were good to train my HTML and CSS skills and gave me some ideas about designs. Especially getting used to implementing responsive design took me time, but Sass function such as @mixin makes my life easier😂

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 19 of #100DaysOfCode
☑️Finally done with building this site!
The background-position property sets the initial position for each background image. (background-attachment might work as well!)
- My mentor put the JS function🤗🌠
☑️Learned how to work git-merge and npm files!

04:43 AM - 16 May 2022

JavaScript: DOM munpilation

During these 100days, I think one of the most parts I focused on was learning DOM. At the beginning, I've completed the #JavaScript30 tutorials to get general ideas about what I can do with it.

After finishing the tutorials, I tried to create several small components or projects to get used to writing codes by myself from scratch.

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 46 of #100DaysOfCode
☑️Finally I've done with setting the dark mode theme!👏🎉The things I like is checking if a user has previously set an OS theme and the color theme is also associated depending on that.
I'm so happy to create a dark mode theme on my website🥰💫

07:05 AM - 12 Jun 2022

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 59 of #100DaysOfCode
I created the scoreboard from scratch to practice a JS DOM function (including the design✌️). It was pretty hard to associate with CSS but I'm content with this work. My favourite part is a deuse game mode by efficient if statement. I hope you like it😁

05:15 AM - 03 Jul 2022

Many bugs and getting stuck taught me these essential JavaScript DOM methods such as below.
Here are some examples:

✅getElementId (to access any element virtually)
const myExample = document.getElementById(“example_btn”);

✅Node (to access each nodes)
const myNodeList = document.body.childNodes;

✅createElement
const myNewListItem = document.createElement(“li”)

✅appendChild
myList.appendChild(myNewListItem);

✅removeChild
myList.removeChild(myRemoveLink);

✅innerHTML
myList.innerHTML = “<p> </p>”;

Below work helped me a lot to get hang of this method.

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 66 of #100DaysOfCode
☑️Put edit and delete all functions on my grocery list project. I was able to get a concept about the DOM tree through this work✌️
But there are a lot of bugs and my codes got messy too much so it is out of control now. Oops...🫠

04:19 AM - 11 Jul 2022

✅setAttribute (to set the value of an attribute on the specified element)

add.addEventListener("click", () => {
    i++; 
    const img = document.createElement("img"); 
    const section = document.querySelector("section"); 
    img.src = "https://i.pravatar.cc/100?u=" + i;
    section.appendChild(img);
  });

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 53 of #100DaysOfCode
☑️Practiced DOM function
- learned src method, event.target property
☑️Worked on my personal project
- Fixed some bugs✌️🐛

06:24 AM - 19 Jun 2022

JavaScript: API

I also learned about API to get ready to go through React since I'm aspiring to become a front-end developer.
The below project is for fetching the Breaking Bad character information. Invoking too many DOM was tiring me a bit so my friends told me I'm going to fall in love with React😂

But through this project, I reviewed some JavaScript objects such as
filter(), includes(), toLowerCase(), map() methods
and learned the difference between static and dynamic variables as well.

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 77 of #100DaysOfCode
☑️Java
☑️Worked on a personal project
- Manipulated DOM function to style the page.
I drew it by Javascript like writing HTML & CSS and that was very redundant. I cannot wait to use React since it is a more straightforward way, I believe😂

00:18 AM - 23 Jul 2022

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 82-84 of #100DaysOfCode
☑️Finally! Finished my Breaking bad API project!😎👨‍🔬
I felt the codes were too long tho, it was a perfect practice to be close with Javascript along the way haha
I'll focus on a school project which used Java for a few days and will get start React😎

06:44 AM - 30 Jul 2022

Java (OOP)

It's not JavaScript, it is Java! I got confused to understand the concept of OOP so I watched the class recording over and over again. The struggle moments gave me some general idea of programming😇

This is an application I made by Java:

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 64 of #100DaysOfCode
☑️Completed JAVA CLI project😂💖
I made the hotel booking ish system by JAVA. I hated to work on this at first but I was obsessed to make this eventually🤣 I was also glad to make it because my previous job was related to a hotel booking site😁✌️

02:13 AM - 08 Jul 2022

And also I experienced a group project to make a company management system by Java. Through it, I learned how to corporate with other developers and use Github.

React (JSX, Props, State, class component)

It has been already a month since to start learning React so far and already gotten confused a lot to understand some concepts. But the knowledge of JavaScript helps me sometimes!

Hikari🇨🇦🇯🇵

@hk_vancouver

Day 96 of #100DaysOfCode
☑️ React tutorial
- Completed making the app that detects what season the user is currently experiencing☀️❄️ I'm still confused tho, nice to feel how class components and state work.
☑️Worked on creating an infographic by HTML/CSS
- class assignment

07:11 AM - 13 Aug 2022

What I want to learn next 100days of code challenge

Hikari🇨🇦🇯🇵

@hk_vancouver

🌟Day 100🌟 of #100DaysOfCode
☑️React tutorial
- Made API request
- Built Lists of records
☑️Reviewed how to use Github

Achieved day 100! I enjoyed this challenge so much, and will keep learning to get a job as a web developer for sure😊
Anyway, Happy coding everyone!🫰♥️

06:19 AM - 17 Aug 2022

I'm currently working on round 2 of the 100 Days Of Code challenge. After finishing the next 100days, I assume I'm getting the ball rolling to prepare a job hunting.
So my goal for the next challenge is to learn and work about:

React
TypeScript
UI framework
making a few projects for my upcoming portfolio (4 or 5 projects)
Contributing to Open source
etc...😉

I feel learning programming is repeating the cycle that learning new knowledge, getting confused, seeing tons of errors and figuring them out, and then getting to know somehow. But I love this process to see how I grew up and feel it.

There's no end to learning programming. I will keep it up consistently with fun🤗🔥

Why I want to be a web developer?

Hikari — Fri, 06 May 2022 01:22:22 +0000

Hello! I'm Hikari. I want to be a front-end developer in Vancouver. I’m trying to change my career from a customer service specialist in Japan to a front-end developer in Canada. Here's my story.

What I learned in a university

I graduated from Seinan Gakuin University with an intercultural study. At that moment, I acquired the knowledge necessary for cross-cultural understanding comprehensively through fieldwork in some European countries and multiple languages training (Italian, French, Spanish, and English). That brought me the skill of solving problems with flexible thinking aptitudes. And also working overseas became my dream, indeed.

Work Experiences

1. What I didn't like about my first company

Those fabulous experiences at the university encouraged me to work in a company that can help people with my skills and strengths. Afterward, I started working in a trading company dedicated to supporting the company as an office clerk. The job was not that hard, but it was dull paperwork mostly and less interaction with people. The work environment was pretty exhausting for me, and I realized that it would be better to put my communication skills to good use. So, I decided to put myself in a different company.

2. Work experiences as a customer service specialist

Next, I changed my job to a business service company specializing in customer engagement and business performance. My career as a customer service specialist started with technical support. And eventually, I worked there for three years and got involved in three projects from their launch! It was quite a rare situation to work on several projects in that company. But my flexibility supported me and got me involved with various clients and coworkers.
These projects were about customer technical support. But their contents were different depending on the project, such as supporting the launch of a hotel property’s website on the online travel agency site and helping a game player and a home gadget.
Especially for the first project, my KPI score was the highest in the team. Because of that, my boss suggested I promote roles as an SME(subject matter expert) and a trainer for the next project. Although it was a bit challenging for me, but I took up on it. Eventually, I trained more than 150 employees, and my achievement was evaluated officially so I got a company award for that year.

Why do I want to be a web developer?

The best thing about working in that company was the experiences there that made me get curious about becoming a developer.
Here are the reasons and experiences.

Reason1: Realized the impact of a website

As I mentioned before, I supported the launch of a hotel property’s website on an online travel agent site for over one year. At that moment, I saw various massive hotel websites. It allowed me to think about what kind of website attracts people. Even though the property itself is very attractive, if the website is unappealing, no one gets interested in them. Sometimes I feel sorry for such a poorly attractive website because they can show themselves way better. Therefore, I realized how a website has an impact on website users. And also it was really fun for me to see a lot of websites!

Reason2: Loved using cutting edge tools

Because of working in a company that outsourced business processes to clients, I needed to get used to using each of my client’s systems. I was having so much fun and impressed using some platforms such as Salesforce, AWS, SAP, Slack, or even their in-house tools. My first hired company was very old-fashion (they used FAX! ), so these useful tools blew my mind, and I really liked to use them.

Reason3: Had fun solving a problem

One of my roles was called SME which stands for subject matter expert. That role and responsibilities are answering the customer operator’s questions or consultation. Most of the contents were rare cases so I had to figure out myself by researching in the knowledge sources or just google efficiency. That was quite fun for me. Especially when I was able to get the answer by researching or figuring it out flexibly with my knowledge. Since working in the role, I would say I'm good at finding accurate answers by researching.

Reason4: Wanted a specific skill

I was pretty satisfied with the job itself. However, every project was so unstable since the project's contact term was dependent on my clients. We really needed to work for our clients, but we were forced our projects to close twice due to the COVID-19 situation, and some coworkers got fired, unfortunately. Those harsh experiences encouraged me to get a specific skill to get through the unstable society.

My goal as a front-end developer

Therefore, I decided to change my career above reasons. In addition, being a front-end engineer is still needed to have communication with people like designers or clients. That is also the reason why I selected the career pass.
I'm currently studying web development at Cornerstone International Community College of Canada. Before coming here, I taught myself HTML, CSS, and JavaScript, and am loving learning and developing the web so far. Because I know how huge an impact a website has, so I'm excited to create it on my own. I would love to continue to learn this skill set to become a professional front-end developer and get a job in Vancouver.