Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork, Commit, Merge - Easy Issue (HTMX) #1047

Open
nikohoffren opened this issue Oct 16, 2023 · 0 comments
Open

Fork, Commit, Merge - Easy Issue (HTMX) #1047

nikohoffren opened this issue Oct 16, 2023 · 0 comments

Comments

@nikohoffren
Copy link
Member

Fork, Commit, Merge - Easy Issue (HTMX)

Add Simple HTMX Button

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

How to get started

Open the tasks/htmx/easy directory from the root of your project.
Then open the index.html file and start implementing your solution!

Description

Your task is to add an HTMX button element to the HTML file.
The button should meet the following requirements:

  • The button should have an hx-get attribute that points to a URL of your choice (you can use a placeholder URL like "/your-endpoint").
  • The button should have an hx-trigger attribute set to "click".
  • When the button is clicked, it should load content from the URL specified in the hx-get attribute into an element on the page.
  • Create a target element with a unique ID (e.g., hx-target="#result") below the button and ensure that the button's hx-target attribute corresponds to the ID of the target element.

Once you've added the button with the correct HTMX attributes, you should be able to click it, and it should load content into the specified target element. You can test your implementation by opening the HTML file in a web browser.

At this stage, please be aware that the button's functionality has been implemented without the need for server-side operations.
Purpose of this task is just to use the HTMX attributes.

How to run

If you are using VS Code and have for example Live Server extension, you can simply open index.html with the server and check if it works correctly. If it does, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.


Check out README.md for more instructions and how to make a pull request.

Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant