Skip to content

Instantly share code, notes, and snippets.

@vmalep

vmalep/index.html

Created December 16, 2021 21:18
Show Gist options
  • Save vmalep/c67efb57854fd178ff678dc3e7e02f76 to your computer and use it in GitHub Desktop.
Save vmalep/c67efb57854fd178ff678dc3e7e02f76 to your computer and use it in GitHub Desktop.
Download ZIP
Quest 358
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="counter-render"></p>
<button id="button-increment">Increment</button>
<button id="button-decrement">Decrement</button>
<button id="button-increment-by-10">Add 10</button>
<button id="button-decrement-by-10">Remove 10</button>
<button id="button-reset">Reset</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="./main.js" defer></script>
</body>
</html>
Raw
main.js
// ACTIONS
const incrementAction = {
type: "INCREMENT"
};
const decrementAction = {
type: "DECREMENT"
};
const incrementByTenAction = {
type: "INCREMENTBY10"
};
const decrementByTenAction = {
type: "DECREMENTBY10"
};
const resetAction = {
type: "RESET"
};
// REDUCER
let initialState = 0;
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
case "INCREMENTBY10":
return state + 10;
case "DECREMENTBY10":
return state - 10;
case "RESET":
return 0;
default:
return state;
}
};
// STORE
const { createStore } = Redux;
const store = createStore(counterReducer);
const counterRender = document.getElementById("counter-render");
const incrementButton = document.getElementById("button-increment");
const decrementButton = document.getElementById("button-decrement");
const incrementBy10Button = document.getElementById("button-increment-by-10");
const decrementBy10Button = document.getElementById("button-decrement-by-10");
const resetButton = document.getElementById("button-reset");
// MAIN
const render = () => {
counterRender.innerText = store.getState();
};
render();
store.subscribe(render);
incrementButton.addEventListener("click", () =>
store.dispatch(incrementAction)
);
decrementButton.addEventListener("click", () =>
store.dispatch(decrementAction)
);
incrementBy10Button.addEventListener("click", () =>
store.dispatch(incrementByTenAction)
);
decrementBy10Button.addEventListener("click", () =>
store.dispatch(decrementByTenAction)
);
resetButton.addEventListener("click", () =>
store.dispatch(resetAction)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment