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>

[jsfiddle url="https://jsfiddle.net/kkandasamy/15Lw20go/" height="300px" include="result,html,js,css"]

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 for="download">Download Progress</label>
<progress id="download" max="100" value="50">
</progress>
<br />
<label for="temp">Temperature Meter:</label>
<meter id="temp" min="0" max="100" low="30" high="60" optimum="80" value="10">
</meter>

[jsfiddle url="https://jsfiddle.net/kkandasamy/9yr6socm/1/" height="300px" include="result,html,js,css"]

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>

[jsfiddle url="https://jsfiddle.net/km4444/afb7zL8e/2/" height="300px" include="result,html,js,css"]

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>

[jsfiddle url="https://jsfiddle.net/kkandasamy/ebmp03rc/" height="300px" include="result,html,js,css"]

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.

[jsfiddle url="https://jsfiddle.net/kkandasamy/x9uLvnj8/" height="300px" include="result,html,js,css"]

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" />

[jsfiddle url="https://jsfiddle.net/kkandasamy/Lm3jbtp2/" height="300px" include="result,html,js,css"]

Happy Learning! 😇