Topic 11- Drag and Drop

Any HTML element can be dragged and dropped irrespective of its native behavior.⁣
⁣It is done by using the global attribute draggable i.e setting its value to true.⁣
⁣
Events like ondragstart, ondragover, etc. are used to make elements more functional.⁣
⁣Images and links are by default draggable.

<p draggable="true">
  Drag and Drop me on the other side!
</p>

Topic 12- Progress and Meter Elements

1. <progress> element:
   • Displays a progress bar showing the completion progress of a task.⁣⁣
   • It has two attributes max and value.⁣⁣
   • No min attribute, the minimum value is always 0.⁣⁣ ⁣⁣
2. <meter> element:
   • Displays either a fractional value or a value within a range.⁣⁣
   • It is not only to show the progress(high), it can also fluctuate(high or low).⁣⁣
   • Has the following attributes: max, min, high, low, optimum.

<label >

Topic 13- Play some Music

⁣<audio> element provides a way to add audio resources to a web page without the need to use any other plugin.⁣
Just include a path to the media inside the src attribute.⁣
⁣
A fallback text is enclosed within the tag to be shown to browsers that don't support the element.⁣
⁣
By default, the browser does not show any controls. ⁣
To add the ability for users to play, pause, adjust volume, etc. 'controls' attribute can be used.

<audio controls src="dope_music.mp3">
  Your browser does not support the audio element.
</audio>

Topic 14- Show Insertion and Deletion

<ins> element indicates text that has been added to the document.⁣⁣
<del> is used for the text that has been deleted from the document.⁣⁣

So far, both of these have accessibility concerns which can be overcome by using, before and after pseudo-elements with the CSS content property.

<p>Go to a
  <del>movie</del>
  <ins>conference</ins>
  this weekend.
</p>

Topic 15- Word Break Opportunity

⁣When a word is too long, and you don't want the browser to break it at the random place, <wbr> helps to break the word where you want.⁣
⁣
The <wbr> element specifies a position within text where it would be appropriate to add a line-break.

Day 16- Adding Color picker and Date picker into the forms

⁣<input> element with the attribute of type="color" provides an interface of color picker or the user can also enter the color in hexadecimal format.⁣
⁣
<input> element with the attribute of type="date" creates a date picker or lets the user enter a date.⁣

<label>Choose Color:
</label>
<input type="color" value="#ffffff" />

Happy Learning! 😇