andirkh/redux-like.html

## redux-like.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Redux-like State Management</title>
</head>
<body>
  <button id="updateButton" onclick="actionUpdateButton()">Update State</button>

  <div id="listContainer">
    <ul id="list"></ul>
  </div>

  <div id="unorderedListContainer">
    <ul id="unorderedList"></ul>
  </div>

  <div id="buttonContainer">
    <button id="button1" type="button">
      Button 1
    </button>
    <button id="button2" type="button">
      Button 2
    </button>
    <button id="button3" type="button">
      Button 3
    </button>
  </div>

  <!-- Script for rendering list -->
  <script>
    function renderList() {
      const listElement = document.getElementById('list');
      listElement.innerHTML = '';
      global_state.items.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        listElement.appendChild(listItem);
      });
    }
  </script>

  <!-- Script for rendering unordered list -->
  <script>
    function renderUnorderedList() {
      const unorderedListElement = document.getElementById('unorderedList');
      unorderedListElement.innerHTML = '';
      global_state.items.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item;
        unorderedListElement.appendChild(listItem);
      });
    }
  </script>

  <!-- Script for rendering buttons -->
  <script>
    function renderButtons() {
      const buttons = document.querySelectorAll('#buttonContainer button');
      buttons.forEach((button, index) => {
        button.textContent = global_state.items[index] || '';
      });
    }
  </script>

  <!-- Script for subscribing and dispatching -->
  <script>
    let global_state = {
      items: ['items7', 'items5', 'items6']
    };

    function subscribers() {
      renderList();
      renderUnorderedList();
      renderButtons();
    }

    // Dispatch function
    function dispatch(state, data) {
      if (state && data) {
        global_state[state] = data
      }
      subscribers();
    }

    // Button click event listener
    function actionUpdateButton() {
      const newArray = ['Item 1', 'Item 2', 'Item 3'];
      dispatch('items', newArray);
    }

    // initialization :
    dispatch()
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Redux-like State Management</title>
	</head>
	<body>
	<button id="updateButton" onclick="actionUpdateButton()">Update State</button>

	<div id="listContainer">
	<ul id="list"></ul>
	</div>

	<div id="unorderedListContainer">
	<ul id="unorderedList"></ul>
	</div>

	<div id="buttonContainer">
	<button id="button1" type="button">
	Button 1
	</button>
	<button id="button2" type="button">
	Button 2
	</button>
	<button id="button3" type="button">
	Button 3
	</button>
	</div>

	<!-- Script for rendering list -->
	<script>
	function renderList() {
	const listElement = document.getElementById('list');
	listElement.innerHTML = '';
	global_state.items.forEach(item => {
	const listItem = document.createElement('li');
	listItem.textContent = item;
	listElement.appendChild(listItem);
	});
	}
	</script>

	<!-- Script for rendering unordered list -->
	<script>
	function renderUnorderedList() {
	const unorderedListElement = document.getElementById('unorderedList');
	unorderedListElement.innerHTML = '';
	global_state.items.forEach(item => {
	const listItem = document.createElement('li');
	listItem.textContent = item;
	unorderedListElement.appendChild(listItem);
	});
	}
	</script>

	<!-- Script for rendering buttons -->
	<script>
	function renderButtons() {
	const buttons = document.querySelectorAll('#buttonContainer button');
	buttons.forEach((button, index) => {
	button.textContent = global_state.items[index] \|\| '';
	});
	}
	</script>

	<!-- Script for subscribing and dispatching -->
	<script>
	let global_state = {
	items: ['items7', 'items5', 'items6']
	};

	function subscribers() {
	renderList();
	renderUnorderedList();
	renderButtons();
	}

	// Dispatch function
	function dispatch(state, data) {
	if (state && data) {
	global_state[state] = data
	}
	subscribers();
	}

	// Button click event listener
	function actionUpdateButton() {
	const newArray = ['Item 1', 'Item 2', 'Item 3'];
	dispatch('items', newArray);
	}

	// initialization :
	dispatch()
	</script>
	</body>
	</html>