File System Module:
The Node.js file system module allows you to work with the file system on your computer. It exports functions for working with files and directories. The fs module is responsible for all the asynchronous or synchronous file I/O operations.
To include the File System module, use the require() method:
we can perform read, write, delete and many more operations. Let us look at some of the most important operations.
Reading Files Synchronously and Asynchronously
The fs module provides simple methods to read files: fs.readFile() and fs.readFileSync(). The fs.readFile() is for reading file asynchronously and fs.readFileSync() is for reading files synchronously.
Here, file path has to be provided as a first argument and a callback function that will be called with file data.
For fs.readFileSync(), file path has to be provided as a first argument. utf8 is the default encoding, but we can specify any custom encoding that we need as the second parameter in both the methods.
Writing Files Synchronously and Asynchronously
Create a new file using the fs.writeFile() and fs.writeFileSync() method. The fs.writeFile() is for reading file asynchronously and fs.writeFileSync() is for reading files synchronously.
In the synchronous write operation
Deleting a File
To delete a file with the File System module, use the fs.unlink() method.
Renaming a File
A file can be renamed using fs.rename(). Here, it takes old file name, new file name and a callback function as arguments.
Streams in Node.js
What is stream?
Streams are the collection of data like array or strings but the difference is that the all streams might not be available at a once and they don’t have to fit in memory. Stream is very useful to work with large amount of data and the data’s that’s come from the external source. They also give us power of composability in code.
Streams are also objects that we read data from a source or write data to a destination in continuous fashion.
Why Stream?
The advantage of stream is given bellow-
- Memory efficiency: No need to carry the massive amounts of data in memory before process it.
- Time efficiency: It takes way less time to start processing the data as soon as you have it, rather than waiting till the whole data payload is available to start the process.
Types of streams:
There are four types of streams. They are-
- Writable streams
- Readable streams
- Duplex
- Transform
We are going to describe about writable stream and readable stream.
Writable streams: Writable streams are the streams which data can be written. Writable object has a write() method which pass string or buffer to write something to the stream. And also a end() method that close the stream and give value in time of closing.
We can create a writable stream using createWriteStream() method. The example is given bellow-
Readable Stream: Readable stream is read data from source. The source can be simple file in file system, a buffer in memory, or even another stream.
creteReadStream() method is used to create a file readable from fs. Example is given bellow-
We can also read file using readFile() method.
Difference between writable Stream and Readable stream-
Screenshot captured from my Pluralsight course — Advanced Node.js
We know web technology works on the server site and client site. We will not go deep through this fact but we will just see how this simply works with http module in node.js.
In this article, we will know What is HTTP Module?, How can HTTP module be used to create server?. Then let’s start—-
Http Module:
Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP).
To include the HTTP module, use the require() method:
How can we use node.js as a web server using Http Module:
We can use createServer() method to create the server.
In above code, we imported {createServer} module using require directive to access HTTP module. The function passed into the http.createServer() method, will be executed when someone tries to access the computer on port 8000. The request and response bindings are objects representing the incoming and outgoing data. The first contains information about the request, such as its url property which tells us to what URL the request was made.
So, when one open that page in the browser, it sends a request to his/her own computer. This the causes the created server (In this case, server) to run and send back a response, which can be seen in the browser.
To send something back, response object works. writeHead() method set the server response type. Here, the content will be shown as html page. Multiple header may be use. The actual response method is sent with write() method. The call to server.listen() causes the server to start waiting for connections on port 8000. Finally, the response ends with response.end() method. If we initiate our code as –
We will see this in the browser as expected.
That’s for today. Happy Coding!!!!!
Reference-https://eloquentjavascript.net/20_node.html
CSS is a complex language that packs quite a bit of power. We know that CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
All styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses. We already know that CSS is a vast thing, so, I’ll discuss some important rules. Such as,
- Class and Id selectors
- Grouping and Nesting
- Pseudo Classes
- Shorthand Properties
- Background Images
- Page Layout
Class and Id selectors
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
Grouping and Nesting
You can give the same properties to a number of selectors without having to repeat them.
You can simply separate selectors with commas in one line and apply the same properties.
Nesting
If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
Shorthand Properties
Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.
Margins and Padding
Margin allows you to amalgamate margin-top, margin-right, margin-bottom,
and margin-left in the form of property: top right bottom left;
Borders
Border-width can be used in the same way as margin and padding, too. You can also combine border-width, border-color, and border-style with the border property.
Background image
CSS background images are a powerful way to add detailed presentation to a page.
Page Layout
Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose. You can place these chunks absolutely or relative to another chunk.
The position property is used to define whether a box is absolute, relative, static or fixed
Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns. Using float, you can float: left or float: right.
Positioning
The position property is used to define whether a box is absolute, relative, static or fixed:
- static is the default value and renders a box in the normal order of things, as they appear in the HTML.
- relative is much like static but the box can be offset from its original position with the properties top, right, bottom and left.
- absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left.
- fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.
How a box’s position is calculated
A box can be positioned with the top, right, bottom, and left properties. These will have different effects depending on the value of position.
relative: Position is offset from the initial position.
absolute: Taken out of the flow and positioned in relation to the containing box.
fixed: Taken out of the flow and positioned in relation to the viewport. It will not scroll with the rest of the page’s content.
Floating
Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.
Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.
Using float, we can use float: left or float: right
Example:
Rounded Corners
Rounded corners used to be the stuff of constricting solid background images or, for flexible boxes, numerous background images, one per-corner, slapped on multiple nested div elements.
Border radius?
Border radius. Fear not, though — don’t have to have borders. The border-radius property can be used to add a corner to each corner of a box.
Before After
Example: different type of borders –radius measurements
Box Shadows
- The first value is the horizontal offset — how far the shadow is nudged to the right (or left if it’s negative)
- The second value is the vertical offset — how far the shadow is nudged downwards (or upwards if it’s negative)
- The third value is the blur radius — the higher the value the less sharp the shadow. (“0” being absolutely sharp). This is optional — omitting it is equivalent of setting “0”.
- The fourth value is the spread distance — the higher the value, the larger the shadow (“0” being the inherited size of the box). This is also optional — omitting it is equivalent of setting “0”.
- The fifth value is a color. That’s optional, too.
Targeting media types
@media can be used to apply styles to a specific media, such as print.
Embedding fonts
It is now widely used as a technique for embedding fonts in a web page
Reference
HTML Basics
HTML (Hypertext Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript).
“Hypertext” refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.
A Simple HTML Document
HTML uses “markup” to annotate text, images, and other content for display in a Web browser. HTML markup includes special “elements” such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>,
<video> and many others.
HTML Elements
An HTML element usually consists of a start tag and an end tag, with the content inserted in between
- The opening tag:This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
- The closing tag:This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
- The content:This is the content of the element, which in this case, is just text.
- The element:The opening tag, the closing tag and the content together comprise the element.
HTML Attributes
Attributes provide additional information about HTML elements.
Attributes contain extra information about the element that you don’t want to appear in the actual content. Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
In the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element.
HTML Empty Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break):
This contains two attributes, but there is no closing </img> tag and no inner content. This is because an image element doesn’t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML Document
- <!DOCTYPE html>— the doctype. It is required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don’t do much, and are basically just needed to make sure your document behaves correctly. That’s all you need to know for now.
- <html></html>— the <html> This element wraps all the content on the entire page and is sometimes known as the root element.
- <head></head>— the <head> This element acts as a container for all the stuff you want to include on the HTML page that isn’t the content you are showing to your page’s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
- <meta charset=”utf-8″>— This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
- <title></title>— the <title> This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.
- <body></body>— the <body> This contains all the content that you want to show to web users when they visit your page, whether that’s text, images, videos, games, playable audio tracks or whatever else.
Lists
Marking up lists always consist of at least 2 elements. Lists are two types
- Ordered list
- Unordered list
Ordered List
Ordered list are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.
Unordered List
Unordered lists are for lists where the order of the items doesn’t matter, such as a shopping list. These are wrapped in a <ul> element.
Links
Links are very important — they are what makes the web a web!
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
To add a link, we need to use a simple element — <a> — “a” being the short form for “anchor”.
We also fill in the value of this attribute with the web address that you want the link to link to:
Reference Links:
- https://developer.mozilla.org/en-US/docs/Web/HTML
- https://www.w3schools.com/html/default.asp
- https://en.wikipedia.org/wiki/HTML
CSS Basics
Cascading Stylesheets — or CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:
- A set of properties, which have values set to update how the HTML content is displayed.
- A selector, which selectsthe element(s) we want to apply the updated property values to.
At its most basic level, CSS consists of two building blocks:
- Properties: Human-readable identifiers that indicate which stylistic features (e.g., font, width, background color) you want to change.
- Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g., what you want to change the font, width, or background color to.)
CSS is case-sensitive so be careful with your capitalization. CSS has been adopted by all major browsers and allows you to control:
- color
- fonts
- positioning
- spacing
- sizing
- decorations
- transitions
How to Use CSS?
There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style-attribute. Alternatively, you can place CSS rules within style-tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document. Even though the first two options have their use cases, most developers prefer external style sheets because they keep the styles separate from the HTML elements. This improves the readability and reusability of your code. The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.
External Style Sheet
With an external style sheet, we can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
Example:
Inline style sheet
An inline style may be used to apply a unique style for a single element.
Example:
Internal style sheet
An internal style sheet may be used if one single page has a unique style.
Example:
CSS Selector
In CSS, selectors are used to target the HTML elements on our web pages that we want to style
There are three types of selectors:
- ID Selectors
- Class Selectors
- Groping Selectors
ID Selectors
- The id selector uses the id attribute of an HTML element to select a specific element.
- The id of an element should be unique within a page, so the id selector is used to select one unique element!
Class Selectors
- The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
Grouping Selectors
If we have elements with the same style definitions, like this:
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Reference
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
- https://learn.freecodecamp.org/responsive-web-design/basic-css/
- https://www.w3schools.com/css/default.asp
This blog is a pixel art editor implements. please read the previous blog.
link: 1. http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
2. http://enlightsolution.com/javascript/drawing-tools-in-a-pixel-art-editor/
When we’ve drawn our masterpiece, we’ll want to save it for later. So that we use this picture. We should add a button for downloading the current picture as an image file.
How to work save button?
The first step create the save button by elt() function. The elt() function get type, properties and child than finally return the DOM structure. Details elt() function please visit a previous blog, link: http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
save() function call when the click save button. The component keeps track of the current picture so that it can access it when saving. The current picture get by state.picture. To create the image file, it uses a <canvas> element that it draws the picture on (at a scale of one pixel per pixel) by drawPicture() function. If you details, how to work drawPicture() function, visit previous blog, link: http://enlightsolution.com/javascript/a-pixel-art-editor-how-to-create-a-canvas-draw-on-it/
Again elt() function create another(<a>) tag. Here another tag attributes is href and download. The toDataURL method on a canvas element creates a URL. They are usually very long, but they allow us to create working links to arbitrary pictures, right here in the browser.
To actually get the browser to download the picture, we then create a link element that points at this URL and has a download attribute. The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink(href). Such links, when clicked, make the browser show a file save dialog. We add that link to the document by document.boby.appendchild(), simulate a click on it, and remove it again.
How to work load-Button?
We’ll also want to be able to load existing image files into our application and edit this image. To do that, we again define a button component.
The load button create by elt() function, similarly to save button.
startLoad() function call when the click load button. To get access to a file on the user’s computer, we need the user to select the file through a file input field. But I don’t want the load button to look like a file input field, so we create the file input when the button is clicked and then pretend that this file input itself was clicked.
Finishload() call when input field change, here change means this input remove.
If a user no file selected, no execute other code. When the user has selected a file, we can use FileReader to get access to its contents, again as a data URL. That URL can be used to create an <img> element by elt() function, but because we can’t get direct access to the pixels in such an image, we can’t create a Picture object from that. The image path get by reader.result.
We already get the image. We’ll limit the size of images to 100 by 100 pixels since anything bigger will look huge on our display and might slow down the interface. Canvas tag again create by elt() function. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.So getcontext method returns a drawing context on the canvas.
we use for drawing an image onto a canvas is the drawImage() function. context.drawImage(img,x,y), here img means specifies the image, x coordinate where to place the image on the canvas and y coordinate where to place the image on the canvas. Finally, draw in canvas. But, we do not have any color information. For that finish the work.
The data property of the object returned by getImageData is an array of color components. For every pixel in a getmageData object there are four pieces of information, which represent the red, green, blue, and alpha components of the pixel’s color. We need red, green, blue values, but not need alpha value. So we use the slice() function.
The hex() function return the hexadecimal digits. We have to make sure that each number takes up two digits, so the hex helper function calls padStart to add a leading zero when necessary. Finally, return the picture object.
First we have to understand what Pixel Art is. A Pixel Art is a form of digital art, created through the use of software, where images are edited on the pixel level.
Figure: A pixel art
To draw a picture in a pixel art editor we need a dynamic set of drawing tools and controls. The controls are the interface elements that appear below the picture.
The controls will be provided as an array of components constructors. Other the other hand Drawing Tools are things like drawing pixels or filling in an area. The application shows the set of available tools as a <select> field.
The article contents:
· Tool Select
· Color Select
· Drawing Tools
o Draw
o Rectangle
o Fill
o Pick
Tool Select: The first control is tool selection menu. It creates a <select> element with an option for each tool. By sets up a “change” event handler that updates the application state when we selects a different tool.
Color Select: An HTML <input> element with a type attribute of color gives us a form field that is specialised for selecting colors.
Drawing Tool: Draw
The most basic tool is draw tool. It changes any pixel that we click or tap to the currently selected color.
Drawing Tool: Rectangle
For Large shapes it can be useful to quickly create rectangles. The rectangle tool draws a rectangle between the point where we start dragging and the point that we drag to.
An important detail in this implementation is that when dragging, the rectangle is redrawn on the picture from the original state. That way, we can make the rectangle larger and smaller again while creating it, without the intermediate rectangles sticking around in the final picture. This is one of the reasons why immutable picture objects are useful.
Drawing Tool: Fill
The flood fill tool fills the pixel under the pointer and all adjacent pixels that have the same color.“Adjacent” means directly horizontally or vertically adjacent, not diagonally. This picture illustrates the set of pixels colored when the flood fill tool is used at the marked pixel:
Drawing Tool: Pick
The color picker tool allows us to point at a color in the picture to use it as the current drawing color.
‘A pixel art editor’ application will be a pixel drawing program, where one can modify a picture pixel by pixel by manipulating a zoomed-in view of it, shown as a grid of colored squares. One can use the program to open image files, drawing on them with mouse or other pointer device, and save them. An undo operation may be helpful also. That’s how it looks like-
This application has two portion. One is the canvas plot to draw the picture and the other is the different function panel below the canvas. But in this article, we will discuss about only how to create the canvas and draw on it with mouse.
THE STATE
We will go through state by state. The state contains the information of particular scenery of the application.
The application state will be an object with picture, tool, and color properties. The picture is itself an object that stores the width, height, and pixel content of the picture.
The pixels are stored in an array, in the same way as matrix row by row, from top to bottom. The draw method that expects an array of updated pixels—objects with x, y, and color properties—and creates a new picture with those pixels overwritten. This method uses slice without arguments to copy the entire pixel array—the start of the slice defaults to 0, and the end defaults to the array’s length.
Dom Building
We have the state and picture. Now we need to create our canvas. But we have to append the canvas in the document body using dom property. For knowledge about dom https://www.w3schools.com/js/js_htmldom.asp
The elt helper function provides a way to create an element and assigns property to domnode(not attributes) and child. This means we can’t use it to set arbitrary attributes, but we can use it to set properties whose value isn’t a string, such as ‘onclick’, which can be set to a function to register a click event handler.
Now, our dom building function is ready. We can start work for the canvas now.
THE Canvas
We said that, the first portion of the application is Canvas that displays the picture as a color of grid. It is responsible for two things: showing a picture & communicating mouse pointer event on picture. It doesn’t know how the application as a whole works. Rather, when responding to pointer events, it calls a callback function provided by the code that created it, which will handle the application-specific parts.If you need any knowledge about Canvas you can go through this https://www.w3schools.com/html/html5_canvas.asp.
We will draw the each pixel as 10 by 10 measurement as scale =10. The syncState method keeps track of its current picture and does a redraw only when syncState is given a new picture. Now let’s define the drawPicture mehod.
The drawing function sets the size(hight,width) of the canvas based on the scale and picture size and fills it with a series of squares, one for each pixel.
Now, what will happen when mouse pointer works on canavas? Lets do some stuff for that. When the left mouse button is pressed while the mouse is over the picture canvas, the component calls the pointerDown callback, giving it the position of the pixel that was clicked—in picture coordinates. This will be used to implement mouse interaction with the picture. The callback may return another callback function to be notified when the pointer is moved to a different pixel while the button is held down.
The PictureCanvas has additional method called mouse in it’s prototype. If you need to know what prototype is then you may read this article http://enlightsolution.com/uncategorized/prototypes-in-javascript/. Let’s define the pointerPosition method.
We can use getBoundingClientRect to find the position of the canvas on the screen, it is possible to go from mouse event coordinates (clientX and clientY) to picture coordinates. These are always rounded down so that they refer to a specific pixel. So we are getting the mouse position.
We said that we will not do all the functions here in the application. Our goal is to achieve this—
So, baseControls should be updated to baseControls=[ToolSelect,ColorSelect].
Now we’ll implement the main component (PixelEditor class) as a shell around a picture canvas and a dynamic set of tools and controls(Here just ToolSelect,ColorSelect) that we pass to its constructor.
The Control classes are—
Now we have to defind the draw tool that dispatches an action that updates the picture to a version in which the pointed-at pixel is given the currently selected color.
The draw function immediately calls the drawPixel function but then also returns it so that it is called again for newly touched pixels when the user drags or swipes over the picture.
The updateState function can compute a new state. We’ll allow the interface to dispatch actions as objects whose properties overwrite the properties of the previous state.
Now we can test our application—
And here is our desire output—
Thats how the Canvas and drawing a picture works in Pixel Editor tool.
Happy Coding :)!!!!!!!!
Undo Action in Pixel art editor
In pixel art editor undo action is work for remove element which we art in the editor. Always it remove the recent element from the editor and update the image.
Why we need it?
Sometimes we may have some mistakes when we art in the editor. Also some unnecessary things may be drawn. So we have to remove those unnecessary things. That’s why undo action is needed. Undo action is an important feature in this editor.
In picture1 and picture2 the mistakes or unnecessary elements are marked in a circle. We will use undo action to remove those.
How Undo works?
When we press the undo button the latest update is removed from the image. To find the latest update we need to save every update of the image. So we use an done array to save every update state. And to insert the image into the array we use a method historyupdatestate().
To remove the image this editor has an undo button to maintain it.
Firstly we the undo button to start undo action and then to update the picture a update State method is needed.
Undo button:
Undo button does not do everything. It just dispatch undo action when we click in undo button and disable itself when there is nothing to undo.
Here Undo action will be true on click the undo button.
State.done is an array of pictures which we draw in the editor. “State.done.lenght==0” define that there is no image in the array that means no picture is drawn in the editor so nothing to undo. So undo button will be disabled.
Here we can see that undo button is disable when nothing is drawn and enable after drawing.
Image Update:
To update image based on action a historyUpdateState() method is used. When the action is undo then it check in done array for image. If it is empty then no update works otherwise the latest image will be removed from the array.
When we draw anything in editor the image will be saved in first position of done array.
If the action is contain a new picture and last picture is saved more than 1000 milliseconds ago. It takes the new picture as done[0] (first element of the done array) and the previous elements(pictures) are kept from done[1]. And object.assign() update the state.
In historyUpdateState() functions when action is undo it takes the most recent picture as current picture and make doneAt to zero. And state.done.slice(1) extract the pictures from done array. It update the array elements by deleting done[0] element which contains the latest picture. Here Object.assign() is used to update the property of the state.
here the latest image has deleted after click undo button from done array.
After update the state it show the picture which is on the current state that is state.done[0].
