{"id":7217,"date":"2024-05-06T14:08:01","date_gmt":"2024-05-06T14:08:01","guid":{"rendered":"https:\/\/foolishdeveloper.com\/?p=7217"},"modified":"2024-05-06T15:29:17","modified_gmt":"2024-05-06T15:29:17","slug":"music-kit-using-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/foolishdeveloper.com\/music-kit-using-html-css-and-javascript\/","title":{"rendered":"Music Kit Using HTML, CSS and JavaScript"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Introduction:<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This project is a simple music kit implemented using HTML, CSS, and JavaScript. It allows users to play different drum sounds by clicking on buttons or pressing corresponding keys on the keyboard. The HTML file provides the structure of the user interface, the CSS file styles the elements, and the JavaScript file handles the logic for playing sounds and highlighting the pressed buttons.<\/p>

This project represents a dynamic and interactive music kit designed to engage users in creating rhythmic compositions effortlessly. Leveraging the power of web technologies like HTML, CSS, and JavaScript, it provides a seamless platform for users to explore their musical creativity.<\/p>

Overall, the project serves as a testament to the boundless potential of web technologies in fostering creativity and innovation. Whether used as a standalone tool for musical experimentation or integrated into larger multimedia projects, the music kit represents a harmonious blend of artistry and technology, inviting users to embark on a journey of sonic exploration and self-expression<\/p>

At its core, the project offers a visually intuitive interface comprising drum buttons, each mapped to a distinct percussive sound. Users can trigger these sounds either by clicking on the graphical buttons or by pressing corresponding keys on their keyboards, fostering a fluid and immersive user experience.<\/p>

Through a combination of HTML for structure, CSS for styling, and JavaScript for interactivity, the project encapsulates the essence of web development, showcasing the synergy between design and functionality. This synergy not only facilitates seamless interaction but also ensures that users of all skill levels can effortlessly navigate and utilize the music kit to express themselves creatively.<\/p>

By encapsulating audio files within a JavaScript module and dynamically associating them with button clicks or key presses, the project demonstrates the versatility and extensibility of modern web development techniques. This modular approach not only enhances maintainability but also allows for easy scalability, enabling the addition of new sounds or features with minimal effort.<\/p>

Overall, the project serves as a testament to the boundless potential of web technologies in fostering creativity and innovation. Whether used as a standalone tool for musical experimentation or integrated into larger multimedia projects, the music kit represents a harmonious blend of artistry and technology, inviting users to embark on a journey of sonic exploration and self-expression.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Explanation :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

HTML (index.html):<\/h4>
  • The HTML file defines the structure of the web page.<\/li>
  • It includes references to the JavaScript file (musickit.js<\/code>) and the CSS file (styles.css<\/code>).<\/li>
  • Inside the <body><\/code> tag, there is a <div><\/code> with the class “set”, which contains buttons representing different drum sounds.<\/li><\/ul>

    CSS (styles.css):<\/h4>
    • Defines the styles for the drum buttons and their hover effects.<\/li>
    • Each drum button has a specific background image and styling for its appearance.<\/li>
    • It also includes media queries for adjusting the layout on different screen sizes.<\/li><\/ul>

      JavaScript (musickit.js):<\/h4>
      • Imports audio files for each drum sound.<\/li>
      • Defines a map (sounds<\/code>) that maps drum button characters to their corresponding audio files.<\/li>
      • Adds event listeners to each drum button to play the associated sound when clicked.<\/li>
      • Listens for keypress events and plays the corresponding sound.<\/li>
      • Provides functions (makeSound<\/code> and highlightPressedButton<\/code>) to play the sound and highlight the pressed button, respectively.<\/li><\/ul>

        JavaScript Logic:<\/h2>
        1. Imports<\/strong>: Import audio files for each drum sound.<\/li>
        2. sounds Map<\/strong>: Maps drum button characters to their corresponding audio files.<\/li>
        3. Event Listeners<\/strong>:
          • Adds click event listeners to each drum button to play the associated sound and highlight the pressed button.<\/li>
          • Listens for keypress events to play the corresponding sound and highlight the pressed button.<\/li><\/ul><\/li>
          • makeSound Function<\/strong>: Plays the sound associated with the pressed button.<\/li>
          • highlightPressedButton Function<\/strong>: Highlights the pressed button by adding the “pressed” class and removes the class from the previously pressed button.<\/li><\/ol>

            At the heart of the project lies the JavaScript file, which orchestrates the interactive behavior of the music kit. Leveraging modern ES6 features such as modules and arrow functions, it encapsulates functionality in a modular and maintainable manner. Through the use of the import<\/code> statement, audio files for each drum sound are seamlessly integrated into the project, facilitating code organization and reuse. A Map<\/code> data structure is employed to establish a mapping between drum button characters and their corresponding audio files, enabling efficient retrieval and playback.<\/p>

            Event Handling:<\/h4>

            The JavaScript file implements event listeners to capture user interactions and trigger appropriate responses. Click event listeners are attached to each drum button, allowing users to play sounds by clicking on the graphical interface. Similarly, a keypress event listener listens for keyboard input, enabling users to trigger sounds by pressing corresponding keys. This dual input mechanism enhances accessibility and user engagement, catering to diverse preferences and input modalities.<\/p>

            Functions and Modularity:<\/h4>

            To promote code readability and maintainability, the JavaScript file defines reusable functions that encapsulate distinct pieces of functionality. The makeSound<\/code> function encapsulates the logic for playing audio files based on user input, facilitating code reuse and abstraction. Similarly, the highlightPressedButton<\/code> function manages the visual highlighting of pressed buttons, enhancing user feedback and interaction. By adopting a modular approach, the project exhibits best practices in software design, fostering extensibility and scalability.<\/p>

            In conclusion, the music kit project represents a harmonious fusion of design, functionality, and user experience, showcasing the transformative power of web technologies in fostering creativity and innovation. Through meticulous attention to detail, modular design principles, and a user-centric approach, the project exemplifies best practices in web development, serving as a testament to the limitless possibilities of digital expression and artistic exploration. Whether used as a standalone tool for musical experimentation or integrated into larger multimedia endeavors, the music kit embodies the ethos of web development as a catalyst for creativity and self-expression.<\/p>

            Purpose of Functions:<\/h2>
            • makeSound<\/strong>: Plays the audio file associated with the pressed drum button or key.<\/li>
            • highlightPressedButton<\/strong>: Highlights the currently pressed button visually by adding a CSS class and removes the highlight from the previously pressed button.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t

              SOURCE CODE :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t

              HTML (index.html)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t
              \n\t\t\t
              \n\t\t\t\t\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n\r\n<head>\r\n  <script src=\"musickit.js\" type=\"module\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"styles.css\" \/>\r\n  <title>Music Kit<\/title>\r\n<\/head>\r\n\r\n<body>\r\n  <div class=\"set\">\r\n    <button class=\"w drum\">w<\/button>\r\n    <button class=\"a drum\">a<\/button>\r\n    <button class=\"s drum\">s<\/button>\r\n    <button class=\"d drum\">d<\/button>\r\n    <button class=\"j drum\">j<\/button>\r\n    <button class=\"k drum\">k<\/button>\r\n    <button class=\"l drum\">l<\/button>\r\n  <\/div>\r\n<\/body>\r\n\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd65329 elementor-widget elementor-widget-heading\" data-id=\"dd65329\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS (style.css)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-109d0c5 elementor-widget elementor-widget-code-highlight\" data-id=\"109d0c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\r\n.set {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-top: 2rem;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.drum {\r\n  border: 2px solid #333;\r\n  background-color: #fff;\r\n  font-size: 1.5rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  transition: background-color 0.2s, transform 0.2s;\r\n  border: 10px solid #404b69;\r\n  font-size: 5rem;\r\n  line-height: 2;\r\n  font-weight: 900;\r\n  color: #da0463;\r\n  text-shadow: 3px 0 #dbedf3;\r\n  width: 115px;\r\n  height: 115px;\r\n  border-radius: 15px;\r\n  margin: 10px;\r\n}\r\n\r\n\/* Add hover effect to drum buttons *\/\r\n.drum:hover {\r\n  background-color: #333;\r\n  color: blue;\r\n  transform: scale(1.1);\r\n}\r\n\r\n.w {\r\n  background-image: url('images\/tom1.png');\r\n}\r\n\r\n.a {\r\n  background-image: url('images\/tom2.png');\r\n}\r\n\r\n.s {\r\n  background-image: url('images\/tom3.png');\r\n}\r\n\r\n.d {\r\n  background-image: url('images\/tom4.png');\r\n}\r\n\r\n.j {\r\n  background-image: url('images\/snare.png');\r\n}\r\n\r\n.k {\r\n  background-image: url('images\/crash.png');\r\n}\r\n\r\n.l {\r\n  background-image: url('images\/kick.png');\r\n}\r\n\r\n.pressed {\r\n  box-shadow: 0 3px 4px 0 #dbedf3;\r\n  opacity: 0.5;\r\n}\r\n\r\n.red {\r\n  color: red;\r\n}\r\n\r\n@media (width >=768px) {\r\n  .set {\r\n    margin: 10% auto;\r\n  }\r\n\r\n  .drum {\r\n    width: 150px;\r\n    height: 150px;\r\n  }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c7be94 elementor-widget elementor-widget-heading\" data-id=\"9c7be94\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">JavaScript ( musickit.js)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6aee8f7 elementor-widget elementor-widget-code-highlight\" data-id=\"6aee8f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript \">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import tom1 from '.\/sounds\/tom-1.mp3';\r\nimport tom2 from '.\/sounds\/tom-2.mp3';\r\nimport tom3 from '.\/sounds\/tom-3.mp3';\r\nimport tom4 from '.\/sounds\/tom-4.mp3';\r\nimport snare from '.\/sounds\/snare.mp3';\r\nimport crash from '.\/sounds\/crash.mp3';\r\nimport kick from '.\/sounds\/kick-bass.mp3';\r\n\r\nconst sounds = new Map([\r\n  ['w', tom1],\r\n  ['a', tom2],\r\n  ['s', tom3],\r\n  ['d', tom4],\r\n  ['j', snare],\r\n  ['k', crash],\r\n  ['l', kick],\r\n]);\r\n\r\nconst numberOfDrumButtons = document.querySelectorAll('.drum').length;\r\n\r\nfor (let i = 0; i < numberOfDrumButtons; i++) {\r\n  document.querySelectorAll('.drum')[i].addEventListener('click', function () {\r\n    const buttonInnerHTML = this.textContent;\r\n    makeSound(buttonInnerHTML);\r\n    highlightPressedButton(buttonInnerHTML);\r\n  });\r\n}\r\n\r\ndocument.addEventListener('keypress', function (event) {\r\n  makeSound(event.key);\r\n  highlightPressedButton(event.key);\r\n});\r\n\r\nfunction makeSound(key) {\r\n  const audio = new Audio(sounds.get(key));\r\n  audio.play();\r\n}\r\n\r\nfunction highlightPressedButton(currentKey) {\r\n  const pressedButton = document.querySelector('.pressed');\r\n  if (pressedButton) {\r\n    pressedButton.classList.remove('pressed');\r\n  }\r\n\r\n  const activeButton = document.querySelector('.' + currentKey);\r\n  activeButton?.classList.add('pressed');\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59e2bec elementor-widget elementor-widget-heading\" data-id=\"59e2bec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Download the images and sounds used in this project :<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1799a95 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"1799a95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/music-kit.zip\" download=\"source_code\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Download<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-99aa219 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"99aa219\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4543a99\" data-id=\"4543a99\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ca1d52f elementor-widget elementor-widget-heading\" data-id=\"ca1d52f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">OUTPUT :<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b5448a elementor-widget elementor-widget-image\" data-id=\"6b5448a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-1024x436.png\" class=\"attachment-large size-large wp-image-7220\" alt=\"output\" srcset=\"https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-1024x436.png 1024w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-300x128.png 300w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-768x327.png 768w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-1536x655.png 1536w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op-150x64.png 150w, https:\/\/foolishdeveloper.com\/wp-content\/uploads\/2024\/05\/op.png 1917w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction: This project is a simple music kit implemented using HTML, CSS, and JavaScript. It allows users to play different drum sounds by clicking on buttons or pressing corresponding keys on the keyboard. The HTML file provides the structure of the user interface, the CSS file styles the elements, and the JavaScript file handles the [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":7219,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[41,1],"tags":[559],"class_list":["post-7217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript_app","category-uncategorized","tag-music-kit-using-html-css-and-javascript","entry","has-media"],"_links":{"self":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/comments?post=7217"}],"version-history":[{"count":17,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7217\/revisions"}],"predecessor-version":[{"id":7238,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/posts\/7217\/revisions\/7238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media\/7219"}],"wp:attachment":[{"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/media?parent=7217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/categories?post=7217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foolishdeveloper.com\/wp-json\/wp\/v2\/tags?post=7217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}