ProjectBoard is a web app for note taking, like google keep or samsung notes or any other apps that you have seen for taking notes. We are using react for this.React is a JavaScript library for building user interfaces.We'll be creating an app that let's you to take notes in colorful containers.The UI we are building will be draggable and user friendly.This app can do the following:<ol><li>Allows user to type something in an input and press ENTER to generate a note of a random colour.</li><li>Allows user to drag the note anywhere. Its position, colour and content will be saved even after the user exits the app.</li><li>Allows the user to delete the note by clicking on the top-right 'X' button.</li></ol><h2> </h2><h2>Install &amp; import packages</h2>Initialize a new Create React App by running the command:<pre class="ql-syntax" spellcheck="false">npx create-react-app projectboard
cd projectboard
</pre>Then, in the project's root folder, install the following packages that we need:<ol><li><a href="https://www.npmjs.com/package/react-draggable" rel="noopener noreferrer" target="_blank" style="color: rgba(0,0,0,var(--text-opacity)); background-color: rgb(240, 239, 237);">react-draggable</a>: to implement draggable features for the notes</li><li><a href="https://www.npmjs.com/package/randomcolor" rel="noopener noreferrer" target="_blank" style="color: rgba(0,0,0,var(--text-opacity)); background-color: rgb(240, 239, 237);">randomcolor</a>: allow notes to be generated in random colours</li><li><a href="https://www.npmjs.com/package/uuid" rel="noopener noreferrer" target="_blank" style="color: rgba(0,0,0,var(--text-opacity)); background-color: rgb(240, 239, 237);">uuid</a>: generates a unique identifier for each note</li></ol>Install with the command:<pre class="ql-syntax" spellcheck="false">npm install react-draggable randomcolor uuid
</pre>In&nbsp;App.js, import the packages and React&nbsp;useEffect&nbsp;and&nbsp;useState&nbsp;hooks.<pre class="ql-syntax" spellcheck="false">import React, { useState, useEffect } from "react";
import "./App.css";
import Draggable from "react-draggable";
import { v4 as uuidv4 } from "uuid";
var randomColor = require("randomcolor");
</pre> <h2>Initialize states</h2>We need to create and initialize 2 states using&nbsp;useState&nbsp;hook.<ol><li>item: this is the value of the input field. Initialize as empty string.</li><li>items: this is an array that contains all the notes generated, saved to localStorage. Initialize as empty array if localStorage has no saved&nbsp;items.</li></ol><pre class="ql-syntax" spellcheck="false">const [item, setItem] = useState("");
const [items, setItems] = useState(
 JSON.parse(localStorage.getItem("items")) || []
 );
</pre> <h2>Create input element</h2>We can create the HTML input and button elements in the return function of&nbsp;App.js&nbsp;as follows:<pre class="ql-syntax" spellcheck="false">&lt;input
 value={item}
 onChange={(e) =&gt; setItem(e.target.value)}
 placeholder="Enter something..."
 onKeyPress={(e) =&gt; keyPress(e)}
/&gt;
&lt;button onClick={newitem}&gt;ENTER&lt;/button&gt;
</pre>&lt;input&gt;&nbsp;has the following attributes:<ul><li>value: set to the value of the&nbsp;item&nbsp;state</li><li>onChange: update&nbsp;item&nbsp;state every time there is a change in the input's value</li><li>placeholder: description when there's nothing in the input field</li><li>onKeyPress: calls the&nbsp;keyPress&nbsp;function that checks if the key pressed is ENTER, call the&nbsp;newitem&nbsp;function.</li></ul> The keyPress function is written like so:<pre class="ql-syntax" spellcheck="false">const keyPress = (event) =&gt; {
 var code = event.keyCode || event.which;
 if (code === 13) {
 newitem();
 }
 };
</pre>This way, the user can type something in the input field then press ENTER key or click on the ENTER button to generate a new note on screen.As for the ENTER button, when the user clicks on it, the&nbsp;newitem&nbsp;function will be called. Let's write this function next. <h2>newitem</h2>This function generates a new note on the screen with the string the user typed in input (i.e.&nbsp;item). A note is an object with the following properties:<ul><li>id: unique identifier generated using uuidv4()</li><li>item: the string content of the note, which is the state&nbsp;item's value</li><li>color: the background colour of the note, generated with&nbsp;randomColor({luminosity: "light",})</li><li>defaultPos: the x and y coordinates of the note. Initialized to&nbsp;{x:100, y:0}.</li></ul><pre class="ql-syntax" spellcheck="false">const newitem = () =&gt; {
 if (item.trim() !== "") {
 //if input is not blank, create a new item objectconst newitem = {
 id: uuidv4(),
 item: item,
 color: randomColor({luminosity: "light",}),
 defaultPos: { x: 100, y: 0 },
 };
 //add this new item object to the items arraysetItems((items) =&gt; [...items, newitem]);
 //reset item value to empty stringsetItem("");
 } else {
 alert("Enter a item");
 setItem("");
 }
};
</pre>Now, let's update our localStorage every time our&nbsp;items&nbsp;array is updated. We can use the&nbsp;useEffect&nbsp;hook to achieve this:<pre class="ql-syntax" spellcheck="false">useEffect(() =&gt; {
 localStorage.setItem("items", JSON.stringify(items));
 }, [items]);
</pre>Now we should display our note objects from our&nbsp;items&nbsp;array on screen.<h2> </h2><h2>Display items</h2>In our return function, below our input and button element, we can display our notes using the&nbsp;map&nbsp;array method:<pre class="ql-syntax" spellcheck="false">{items.map((item, index) =&gt; {
 return (
 &lt;Draggablekey={item.id}defaultPosition={item.defaultPos}onStop={(e, data) =&gt; {
 updatePos(data, index);
 }}
 &gt;
 &lt;div style={{ backgroundColor: item.color }} className="box"&gt;
 {`${item.item}`}
 &lt;button id="delete" onClick={(e) =&gt; deleteNote(item.id)}&gt;
 X
 &lt;/button&gt;&lt;/div&gt;&lt;/Draggable&gt;
 );
 })}
</pre>For every note object in the&nbsp;items&nbsp;array, we will create a&nbsp;&lt;Draggable&gt;&nbsp;component in which:<ul><li>key&nbsp;attribute =id&nbsp;of the object.</li><li>defaultPosition&nbsp;of the component =&nbsp;defaultPos&nbsp;of the object.</li><li>onStop, which is when the user stops dragging the note on screen, will call the&nbsp;updatePos&nbsp;function.</li></ul>Inside the&nbsp;&lt;Draggable&gt;&nbsp;component, we have the&nbsp;&lt;div&gt;&nbsp;that will render the note's&nbsp;item&nbsp;property on a background with the note's&nbsp;colour&nbsp;property. And finally, we have an 'X' button which calls the&nbsp;deleteNote&nbsp;function upon clicked.Now, we should be able to generate a new randomly-coloured note on screen every time we type something in the input and press ENTER.However, if we dragged the note and reload the page, the note's position will not be saved because we haven't written our&nbsp;updatePos&nbsp;function. Let's write that function next. <h2>updatePos</h2>This function is called every time we stop dragging the note. That way, we can save the final position of the note to our&nbsp;items&nbsp;array in localStorage.The next time we visit the page, the app will remember the last position of the note. It won't reset to&nbsp;{x:100, y:0}` all the time.Here's how the function works:<ol><li>We pass&nbsp;data&nbsp;as the first parameter of the function. It contains the x and y coordinates of our note.</li><li>Clone our&nbsp;items&nbsp;array into a new array called&nbsp;newArr.</li><li>Get the index of the note in the array we want to update from the 2nd parameter&nbsp;index.</li><li>Set the new coordinate values of the note in its&nbsp;defaultPos&nbsp;property.</li><li>Set&nbsp;items&nbsp;to the value of the&nbsp;newArr.</li></ol><pre class="ql-syntax" spellcheck="false">const updatePos = (data, index) =&gt; {
 let newArr = [...items];
 newArr[index].defaultPos = { x: data.x, y: data.y };
 setItems(newArr);
 };
</pre>Great! Now the position of any note will be updated and saved to localStorage whenever it changes. Let's move on to the final function:&nbsp;deleteNote. <h2>deleteNote</h2>In this function, the note will be deleted from both on screen and from the&nbsp;items&nbsp;array in localStorage.This function is pretty straightforward. We can simply use the&nbsp;filter&nbsp;array method to remove the note whose&nbsp;id&nbsp;property matches the&nbsp;id&nbsp;parameter of the function.<pre class="ql-syntax" spellcheck="false">const deleteNote = (id) =&gt; {
 setItems(items.filter((item) =&gt; item.id !== id));
 };
</pre> Your app is ready.<a href="https://projecthub.blogue.tech/" rel="noopener noreferrer" target="_blank">sourcecode</a>Happy Coding ...

ProjectBoard with React

Related blogs

About us: