https://github.com/cfmvcarlos/hyperscripttesting
HyperScriptTesting is a sandbox project for experimenting with HyperScript, a lightweight scripting language designed to make web development more expressive and interactive. This project demonstrates how HyperScript can simplify tasks like DOM manipulation, event handling, and animations directly within HTML.
https://github.com/cfmvcarlos/hyperscripttesting
css3 html5 hyperscript
Last synced: 10 months ago
JSON representation
HyperScriptTesting is a sandbox project for experimenting with HyperScript, a lightweight scripting language designed to make web development more expressive and interactive. This project demonstrates how HyperScript can simplify tasks like DOM manipulation, event handling, and animations directly within HTML.
- Host: GitHub
- URL: https://github.com/cfmvcarlos/hyperscripttesting
- Owner: CFMVCarlos
- License: mit
- Created: 2024-11-21T14:15:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-23T16:18:35.000Z (over 1 year ago)
- Last Synced: 2025-03-25T14:45:44.952Z (about 1 year ago)
- Topics: css3, html5, hyperscript
- Language: HTML
- Homepage:
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HyperScriptTesting
## Overview
**HyperScriptTesting** is a sandbox project for experimenting with **HyperScript**, a lightweight scripting language designed to make web development more expressive and interactive. This project demonstrates how HyperScript can simplify tasks like DOM manipulation, event handling, and animations directly within HTML.
## Features
This project showcases various **HyperScript** functionalities, including:
- Array manipulation: Log, modify, and iterate through arrays.
- String handling: Concatenate, format, and log strings dynamically.
- Conditional rendering: Display elements based on conditions.
- Attribute manipulation: Update or increment attributes dynamically.
- Event handling: Respond to user interactions such as clicks, key presses, and mouse movements.
- Custom events: Trigger and listen to custom events.
- Animations and transitions: Smoothly transition styles or toggle visibility.
- DOM measurements: Retrieve element dimensions and positions.
- Behavior definitions: Modularize interactive behaviors for reuse.
### Highlighted Examples
1. **Button Toggles**: Change styles, toggle visibility, or toggle classes on button clicks.
2. **Custom Events**: Trigger custom events and display responses.
3. **Array Operations**: Random selection, first/last item access, and iteration over arrays.
4. **Dynamic Attributes**: Increment or manipulate attributes like `data-counter` and `placeholder`.
5. **ContentEditable Mutation Handling**: Monitor and count changes to contenteditable elements.
6. **Element Removal**: Remove elements dynamically and adjust related elements.
7. **Real-Time Filtering**: Filter and display list items based on user input.
8. **Timed Transitions**: Queue animations and transitions for seamless effects.
## Installation
To set up the project locally:
1. Clone the repository:
```bash
git clone https://github.com/CFMVCarlos/HyperScriptTesting.git
```
2. Navigate to the project directory:
```bash
cd HyperScriptTesting
```
## Usage
1. Open `index.html` in your preferred web browser.
2. Interact with the various examples on the page to see **HyperScript** in action.
3. Experiment with the code in the `` tag or add new scripts to explore additional **HyperScript** capabilities.
## Requirements
- A modern web browser that supports JavaScript.
- An internet connection to load the HyperScript library from its CDN.
## Resources
- [HyperScript Documentation](https://hyperscript.org/docs)
- [HyperScript GitHub Repository](https://github.com/bigskysoftware/_hyperscript)
## Author
- [Carlos Valente](https://github.com/CFMVCarlos)