Merge pull request #353 from khushi-purwar/dev21-kh

harshita2216 · web-flow · commit 9dab3329b0c4 · 2021-08-05T00:35:08.000+05:30
Added digital white board
diff --git a/Index.md b/Index.md
@@ -134,3 +134,5 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
 |[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.
 |[Survey Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Survey-Form)| It is a simple and responsive urvey-Form.
 |[React Pizza App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-tailwind-app)| It is a simple pizza react app using TailwindCSS.
+|[Digital White Board](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/White-Board)| It is a simple white board where user can write, draw, erase, undo, redo, insert image, open sticky notes and also download it.
+
diff --git a/White-Board/Screenshots/demo.gif b/White-Board/Screenshots/demo.gif
diff --git a/White-Board/Screenshots/ss1.png b/White-Board/Screenshots/ss1.png
diff --git a/White-Board/icons/download.svg b/White-Board/icons/download.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <g fill="#1565C0">
+        <polygon points="24,37.1 13,24 35,24"/>
+        <rect x="20" y="4" width="8" height="4"/>
+        <rect x="20" y="10" width="8" height="4"/>
+        <rect x="20" y="16" width="8" height="11"/>
+        <rect x="6" y="40" width="36" height="4"/>
+    </g>
+</svg>
diff --git a/White-Board/icons/eraser.svg b/White-Board/icons/eraser.svg
@@ -0,0 +1 @@
+<svg id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>eraser</title><g id="eraser"><g id="fill"><path d="M38.81,21.36,24.41,35.5H20.07l-8-7.57a3.07,3.07,0,0,1,0-4.34L16.68,19l9.9-9.89Z" fill="#fff"/><path d="M26.58,9.13l7.23-7.24a3.08,3.08,0,0,1,4.34,0l8,8a3.07,3.07,0,0,1,0,4.34l-7.29,7.17" fill="#b1bfc9"/><polygon points="38.87 21.42 29.11 31.13 16.9 19.26 26.58 9.13 38.87 21.42" fill="#fc3768"/></g><g id="outline"><path d="M24.41,36.5H20.07a1,1,0,0,1-.69-.28l-7.95-7.56a4.09,4.09,0,0,1,0-5.78L33.1,1.19a4.07,4.07,0,0,1,5.76,0l8,8a4.07,4.07,0,0,1,0,5.76L25.11,36.21A1,1,0,0,1,24.41,36.5Zm-3.94-2H24l21.4-21a2.08,2.08,0,0,0,0-2.92l-8-8a2.08,2.08,0,0,0-2.92,0L12.83,24.3a2.07,2.07,0,0,0,0,2.93Z" fill="#252b33"/><rect x="31.73" y="6.58" width="2" height="17.38" transform="translate(-1.21 27.61) rotate(-45)" fill="#252b33"/><rect x="21.23" y="15.89" width="2" height="17.38" transform="translate(-10.87 22.92) rotate(-45)" fill="#252b33"/><path d="M13.78,36.5H1a1,1,0,0,1,0-2H13.78a1,1,0,1,1,0,2Z" fill="#252b33"/><path d="M13.78,48H1a1,1,0,0,1,0-2H13.78a1,1,0,1,1,0,2Z" fill="#252b33"/><path d="M24,42.25H6.11a1,1,0,1,1,0-2H24a1,1,0,0,1,0,2Z" fill="#252b33"/></g></g></svg>
diff --git a/White-Board/icons/pen.svg b/White-Board/icons/pen.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m4.394 507.606c-4.168-4.168-5.508-10.392-3.426-15.906l51.497-136.35c1.8-4.765 5.895-8.291 10.874-9.364 4.979-1.072 10.163.456 13.765 4.058l84.853 84.853c3.602 3.602 5.13 8.786 4.058 13.765-1.073 4.979-4.6 9.074-9.364 10.874l-136.351 51.496c-5.515 2.083-11.738.743-15.906-3.426z" fill="#d5e7f6"/><path d="m156.65 459.535c4.765-1.8 8.291-5.895 9.364-10.874 1.072-4.979-.456-10.163-4.058-13.765l-42.426-42.427-115.136 115.137c4.168 4.168 10.392 5.508 15.906 3.426z" fill="#93c6ec"/><path d="m47.337 179.393h420.539v150h-420.539z" fill="#ff5c5c" transform="matrix(.707 -.707 .707 .707 -104.432 256.666)"/><path d="m162.354 179.94c-5.858-5.858-5.858-15.355 0-21.213l134.35-134.35c13.646-13.646 35.851-13.646 49.497 0l28.284 28.284c5.858 5.858 5.858 15.355 0 21.213s-15.355 5.858-21.213 0l-28.283-28.284c-1.949-1.949-5.122-1.949-7.071 0l-134.35 134.35c-5.859 5.858-15.356 5.858-21.214 0z" fill="#93c6ec"/><path d="m73.854 243.41h420.539v75h-420.539z" fill="#ff3838" transform="matrix(.707 -.707 .707 .707 -115.415 283.182)"/><path d="m501.765 66.803-56.569-56.569c-13.645-13.645-35.848-13.645-49.496 0l-.001.001-53.033 53.033 106.066 106.066 53.033-53.033c13.647-13.647 13.647-35.852 0-49.498z" fill="#d5e7f6"/><path d="m473.481 38.519-77.782 77.782 53.033 53.033 53.033-53.033c13.646-13.646 13.646-35.851 0-49.498z" fill="#93c6ec"/></g></svg>
diff --git a/White-Board/icons/pic.svg b/White-Board/icons/pic.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="256" y1="506.777" x2="256" y2="-1.37" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0" style="stop-color:#F64E68"/>
+	<stop offset="1" style="stop-color:#743695"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M512,118.23v275.54C512,459.07,459.07,512,393.77,512H118.23C52.93,512,0,459.07,0,393.77  V118.23C0,52.93,52.93,0,118.23,0h275.54C459.07,0,512,52.93,512,118.23z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="256" y1="502.89" x2="256" y2="2.68" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0" style="stop-color:#D04258"/>
+	<stop offset="1" style="stop-color:#512D6F"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2_);" d="M118.23,508C55.243,508,4,456.757,4,393.77V118.23C4,55.243,55.243,4,118.23,4h275.54  C456.757,4,508,55.243,508,118.23v275.54C508,456.757,456.757,508,393.77,508H118.23z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="251.74" y1="262.12" x2="491.74" y2="22.12" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0" style="stop-color:#530B30"/>
+	<stop offset="1" style="stop-color:#6B2D4D;stop-opacity:0"/>
+</linearGradient>
+<path style="opacity:0.5;fill:url(#SVGID_3_);enable-background:new    ;" d="M512,239.66v154.11C512,459.07,459.07,512,393.77,512  H239.38L119.75,392.37l272.48-272.48L508,235.66L512,239.66z"/>
+<path style="opacity:0.3;fill:#1A1A1A;enable-background:new    ;" d="M404.083,141.499c0-13.024-10.558-23.583-23.583-23.583  H141.499c-13.024,0-23.583,10.558-23.583,23.583v227.665c0,0.001,0,0.002,0,0.002v11.335c0,5.291,1.743,10.176,4.686,14.11  c1.357,1.816,2.971,3.429,4.786,4.786c3.935,2.943,8.819,4.686,14.111,4.686H380.5c5.292,0,10.176-1.743,14.111-4.686  c1.816-1.358,3.429-2.971,4.786-4.786c2.943-3.935,4.686-8.819,4.686-14.11v-11.334v-0.002V141.499z"/>
+<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="255.9995" y1="400.52" x2="255.9995" y2="115.05" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0" style="stop-color:#BAEAF3"/>
+	<stop offset="0.994" style="stop-color:#5FCEE2"/>
+</linearGradient>
+<path style="fill:url(#SVGID_4_);" d="M375.501,399.083H136.499c-13.024,0-23.583-10.558-23.583-23.583V136.499  c0-13.024,10.558-23.583,23.583-23.583H375.5c13.024,0,23.583,10.558,23.583,23.583V375.5  C399.083,388.525,388.525,399.083,375.501,399.083z"/>
+<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="256" y1="398.53" x2="256" y2="117.05" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.006" style="stop-color:#5FCEE2"/>
+	<stop offset="1" style="stop-color:#29ABE2"/>
+</linearGradient>
+<path style="fill:url(#SVGID_5_);" d="M136.499,397.083c-11.9,0-21.582-9.682-21.582-21.582V136.499  c0-11.9,9.682-21.582,21.582-21.582h239.002c11.9,0,21.582,9.682,21.582,21.582v239.002c0,11.9-9.682,21.582-21.582,21.582  L136.499,397.083L136.499,397.083z"/>
+<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="310.84" y1="241.41" x2="310.84" y2="114.98" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#8B851F"/>
+	<stop offset="1" style="stop-color:#8A652E"/>
+</linearGradient>
+<path style="fill:url(#SVGID_6_);" d="M399.08,322.08v53.42c0,13.03-10.55,23.58-23.58,23.58H222.6l126.74-126.74L399.08,322.08z"/>
+<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="242.425" y1="276.03" x2="242.425" y2="115" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#BDB42B"/>
+	<stop offset="1" style="stop-color:#BC8A3E"/>
+</linearGradient>
+<path style="fill:url(#SVGID_7_);" d="M371.93,399.08H136.5c-13.03,0-23.58-10.55-23.58-23.58v-40.27l97.58-97.58l161.43,150.097  V399.08z"/>
+<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="310.84" y1="252.75" x2="310.84" y2="126.31" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#CAC12D"/>
+	<stop offset="0.749" style="stop-color:#C9A63A"/>
+</linearGradient>
+<path style="fill:url(#SVGID_8_);" d="M399.08,310.747v53.42c0,13.03-10.55,23.58-23.58,23.58H222.6l126.74-126.74L399.08,310.747z"/>
+<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="310.754" y1="252.92" x2="310.754" y2="128.31" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#CAC12D"/>
+	<stop offset="1" style="stop-color:#C99443"/>
+</linearGradient>
+<path style="fill:url(#SVGID_9_);" d="M224.428,385.747L349.34,260.835l47.74,47.74v55.592c0,11.899-9.681,21.58-21.58,21.58  L224.428,385.747L224.428,385.747z"/>
+<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="242.425" y1="287.37" x2="242.425" y2="126.33" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#FCF039"/>
+	<stop offset="1" style="stop-color:#FBD048"/>
+</linearGradient>
+<path style="fill:url(#SVGID_10_);" d="M371.93,387.747H136.5c-13.03,0-23.58-10.55-23.58-23.58v-40.27l97.58-97.58L371.93,387.747z  "/>
+<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="242.511" y1="287.54" x2="242.511" y2="128.33" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#FCF039"/>
+	<stop offset="1" style="stop-color:#FBB953"/>
+</linearGradient>
+<path style="fill:url(#SVGID_11_);" d="M136.5,385.747c-11.899,0-21.58-9.681-21.58-21.58v-42.442l95.58-95.58l159.602,159.603  H136.5V385.747z"/>
+<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="294.49" y1="354.81" x2="294.49" y2="284.48" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.006" style="stop-color:#4EAABA"/>
+	<stop offset="1" style="stop-color:#228DBA"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_12_);" cx="294.49" cy="194.3" r="35.25"/>
+<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="291.25" y1="358.05" x2="291.25" y2="287.72" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#BEB52B"/>
+	<stop offset="1" style="stop-color:#BD8B3E"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_13_);" cx="291.25" cy="191.07" r="35.25"/>
+<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="291.25" y1="362.71" x2="291.25" y2="292.38" gradientTransform="matrix(1 0 0 -1 0 514)">
+	<stop offset="0.005" style="stop-color:#FCF039"/>
+	<stop offset="1" style="stop-color:#FBB953"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_14_);" cx="291.25" cy="186.4" r="35.25"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/White-Board/icons/redo.svg b/White-Board/icons/redo.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <g fill="#00BCD4">
+        <polygon points="43,18 29,6.3 29,29.7"/>
+        <path d="M20,14h12v8H20c-2.8,0-5,2.2-5,5s2.2,5,5,5h3v8h-3c-7.2,0-13-5.8-13-13S12.8,14,20,14z"/>
+    </g>
+</svg>
diff --git a/White-Board/icons/sticky.svg b/White-Board/icons/sticky.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><style>.cls-1{fill:#40bdff;}.cls-2{fill:#effafe;}.cls-3{fill:#2197f7;}.cls-4{fill:#e4ebed;}.cls-5{fill:#fd0;}.cls-6{fill:#263238;}</style></defs><title>notes job seeker employee unemployee work</title><path class="cls-1" d="M223.94,68.75l-1,.09L58.18,219l3.25,18.42a8,8,0,0,0,9.29,6.5l170.66-30.09a8,8,0,0,0,6.51-9.29Z"/><path class="cls-2" d="M29.62,25.62V206.94a8,8,0,0,0,8,8H169.38V167.38a2,2,0,0,1,2-2h47.57V25.62Z"/><path class="cls-3" d="M247.88,204.5,223.94,68.75l-4.06-1.87-3.82,8.23L238.88,204.5a8,8,0,0,1-6.51,9.29L65.77,243.16a8,8,0,0,0,4.94.72l170.66-30.09A8,8,0,0,0,247.88,204.5Z"/><path class="cls-4" d="M209.94,25.62V165.38h9V25.62Z"/><rect class="cls-5" x="32.27" y="45.75" width="34.32" height="7.35" transform="translate(-20.47 49.43) rotate(-45)"/><polygon class="cls-2" points="190.75 190.74 212.12 169.38 169.38 169.38 169.38 212.12 190.75 190.74"/><polygon class="cls-4" points="207.12 169.38 185.75 190.74 169.38 207.12 169.38 212.12 190.75 190.74 212.12 169.38 207.12 169.38"/><path class="cls-5" d="M55.61,37.39,33,14.74A9.34,9.34,0,0,0,19.74,28L42.39,50.61Z"/><rect class="cls-5" x="32.27" y="45.75" width="34.32" height="7.35" transform="translate(-20.47 49.43) rotate(-45)"/><path class="cls-5" d="M55.61,37.39,33,14.74A9.34,9.34,0,0,0,19.74,28L42.39,50.61Z"/><path class="cls-6" d="M219.44,40V23.62a2.5,2.5,0,0,0-2.5-2.5H40.7l-9.56-9.56A13.84,13.84,0,0,0,11.56,31.14l9.56,9.56V206.94a12.53,12.53,0,0,0,12.52,12.52H49.69l3.3,18.7a12.51,12.51,0,0,0,14.5,10.15l170.66-30.09a12.52,12.52,0,0,0,10.16-14.5ZM15.09,27.6A8.85,8.85,0,0,1,27.6,15.09l22.3,22.3L37.39,49.9ZM59,35.4l4.49,4.49L39.89,63.45,35.4,59Zm-7.17,179H33.64a7.53,7.53,0,0,1-7.52-7.52V45.69l7.74,7.74L30.1,57.19a2.5,2.5,0,0,0,0,3.54l8,8a2.5,2.5,0,0,0,3.54,0L53.44,57,67.72,71.25a2.5,2.5,0,1,0,3.54-3.54L57,53.44,68.75,41.66a2.5,2.5,0,0,0,0-3.54l-8-8a2.5,2.5,0,0,0-3.54,0l-3.76,3.76L45.7,26.12H214.44c0,4.6,0,134.17,0,138.76H167.38a2.5,2.5,0,0,0-2.5,2.5v47.07Zm159.12-44.57L190.4,190.39l-20.53,20.53v-41Zm26.37,43.42L66.62,243.38a7.53,7.53,0,0,1-8.71-6.1l-3.14-17.83h112.6a2.5,2.5,0,0,0,1.77-.73l49.57-49.57a2.49,2.49,0,0,0,.39-.53l.08-.15a2.49,2.49,0,0,0,.21-.58s0-.05,0-.08a2.5,2.5,0,0,0,0-.43V68.83l23.94,135.75A7.52,7.52,0,0,1,237.28,213.29Z"/><path class="cls-6" d="M66.2,83.19H194.25a2.5,2.5,0,0,0,0-5H66.2a2.5,2.5,0,0,0,0,5Z"/><path class="cls-6" d="M46.31,103.09H194.25a2.5,2.5,0,1,0,0-5H46.31a2.5,2.5,0,1,0,0,5Z"/><path class="cls-6" d="M46.31,123H194.25a2.5,2.5,0,0,0,0-5H46.31a2.5,2.5,0,1,0,0,5Z"/><path class="cls-6" d="M46.31,142.88H194.25a2.5,2.5,0,0,0,0-5H46.31a2.5,2.5,0,0,0,0,5Z"/><path class="cls-6" d="M147.48,157.78H46.31a2.5,2.5,0,0,0,0,5H147.48a2.5,2.5,0,0,0,0-5Z"/><path class="cls-6" d="M147.48,177.67H46.31a2.5,2.5,0,0,0,0,5H147.48a2.5,2.5,0,0,0,0-5Z"/><path class="cls-6" d="M147.48,197.57H46.31a2.5,2.5,0,0,0,0,5H147.48a2.5,2.5,0,0,0,0-5Z"/><path class="cls-5" d="M239.1,52h-4V48a1,1,0,0,0-2,0v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0V54h4a1,1,0,0,0,0-2Z"/><path class="cls-1" d="M233.1,20.5h-4v-4a1,1,0,0,0-2,0v4h-4a1,1,0,0,0,0,2h4v4a1,1,0,0,0,2,0v-4h4a1,1,0,0,0,0-2Z"/><path class="cls-1" d="M236,90.79a6,6,0,1,1,6-6A6,6,0,0,1,236,90.79Zm0-10a4,4,0,1,0,4,4A4,4,0,0,0,236,80.79Z"/></svg>
diff --git a/White-Board/icons/undo.svg b/White-Board/icons/undo.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enable-background="new 0 0 48 48">
+    <g fill="#00BCD4">
+        <polygon points="5,18 19,6.3 19,29.7"/>
+        <path d="M28,14H16v8h12c2.8,0,5,2.2,5,5s-2.2,5-5,5h-3v8h3c7.2,0,13-5.8,13-13S35.2,14,28,14z"/>
+    </g>
+</svg>
diff --git a/White-Board/index.html b/White-Board/index.html
@@ -0,0 +1,47 @@
+<!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>White Board</title>
+	<link rel="stylesheet" href="style.css" /> </head>
+
+<body>
+	<div class="tools-container">
+		<div class="tools-content">
+			<div class="tool active-tool" id="pen"> <img src="./icons/pen.svg" alt="" />
+				<div class="tool-options hide">
+					<div class="pen-size">
+						<input type="range" id="pensize" value="1" min="1" max="40" /> </div>
+					<div class="pen-colors">
+						<div class="black"></div>
+						<div class="yellow"></div>
+						<div class="blue"></div>
+						<div class="green"></div>
+						<div class="red"></div>
+					</div>
+				</div>
+			</div>
+			<div class="tool fade" id="eraser"> <img src="./icons/eraser.svg" alt="" />
+				<div class="tool-options hide">
+					<div class="eraser-size">
+						<input type="range" id="erasersize" value="1" min="1" max="40" /> </div>
+				</div>
+			</div>
+			<div class="tool" id="undo"> <img src="./icons/undo.svg" alt="" /> </div>
+			<div class="tool" id="redo"> <img src="./icons/redo.svg" alt="" /> </div>
+			<div class="tool" id="sticky"> <img src="./icons/sticky.svg" alt="" /> </div>
+			<div class="tool" id="photo"> <img src="./icons/pic.svg" alt="" />
+				<input type="file" class="hide" name="" id="photo-upload" /> </div>
+			<div class="tool" id="download"> <img src="./icons/download.svg" alt="" /> </div>
+		</div>
+	</div>
+	<div class="drawing-container">
+		<canvas id="canvas"></canvas>
+	</div>
+	<script src="script.js"></script>
+</body>
+
+</html>
diff --git a/White-Board/readme.md b/White-Board/readme.md
@@ -0,0 +1,41 @@
+# Digital White Board
+
+## About the Project
+It is a simple digital white board built using HTML, CSS and Javascript. It has multiple features : 
+
+1. Pen with different sizes & colors
+2. Eraser with different sizes
+3. Undo
+4. Redo
+5. Sticky Notes
+6. Image Upload
+7. Download
+
+
+## Tech Stack Used
+
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+
+## How to use the Project
+
+- Download or clone the repository
+
+```
+git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the index.html file
+- Start playing with board, explore different features
+
+## Screenshots
+
+<img src="./Screenshots/ss1.png" />
+
+## Live Demo
+
+<img src="./Screenshots/demo.gif" />
diff --git a/White-Board/script.js b/White-Board/script.js
diff --git a/White-Board/style.css b/White-Board/style.css
