Year: 2023

Fonts are letters, numbers, and symbols designed using specific typefaces. They can apply to various design elements such as logos, headings, and body text. On the other hand, PNG (Portable Network Graphics) transparent designs are images with transparent backgrounds that can be layered over other graphics or backgrounds.

The main difference between font vs PNG transparent designs is their application. Font use to create typographic designs, while PNG transparent designs  use for creating image-based designs with transparency.

Fonts are ideal for creating text-heavy designs, while PNG transparent designs are perfect for creating graphics with intricate details such as icons, logos, and illustrations.

Since fonts are letters, numbers and symbols so it is possible they can not be rendered in some UI components. The rendering experience is an empty space with alternate text only. For example;

<a class="foo" title="Delete" href="#" onclick="foo.display(33);CancelEvent(event);\">
	<i class="fa fa-trash\"></i> Trash
</a>

Plus and Minu are universal fonts recognized by almost all components.

<a class="foo" title="Delete" href="#" onclick="foo.display(33);CancelEvent(event);\">
	<i class="fa fa-add\"></i> Trash
</a>

If a component doesn’t support font then + and – symbol will be rendered without any styles.

In the world of modern web, icons have become an indelible and integral part of UI design. Read about Font and SVG (Scalable vector graphics) icons. majority of the web development community prefers to use SVG icons;

Read more about Fonts Vs SVG here

Read about how to use SVG images in CSS and HTML here

Create three dropdown lists, inside an HTML form.

The second and third dropdown list will display different options, depending on the value selected in the parent dropdown list.

Add HTML;

<form name="form1" id="form1" action="/action_page.php">
  Subjects: <select name="subject" id="subject">
    <option value="" selected="selected">Select subject</option>
  </select>
  <br><br>
  Topics: <select name="topic" id="topic">
    <option value="" selected="selected">Please select subject first</option>
  </select>
  <br><br>
  Chapters: <select name="chapter" id="chapter">
    <option value="" selected="selected">Please select topic first</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Add JavaScript;

var subjectObject = {
  "Front-end": {
    "HTML": ["Links", "Images", "Tables", "Lists"],
    "CSS": ["Borders", "Margins", "Backgrounds", "Float"],
    "JavaScript": ["Variables", "Operators", "Functions", "Conditions"]
  },
  "Back-end": {
    "PHP": ["Variables", "Strings", "Arrays"],
    "SQL": ["SELECT", "UPDATE", "DELETE"]
  }
}
window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  var chapterSel = document.getElementById("chapter");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    chapterSel.length = 1;
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    //empty Chapters dropdown
    chapterSel.length = 1;
    //display correct values
    var z = subjectObject[subjectSel.value][this.value];
    for (var i = 0; i < z.length; i++) {
      chapterSel.options[chapterSel.options.length] = new Option(z[i], z[i]);
    }
  }
}

Reference

https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp