diff --git a/palsa131/HexColorsGradient/index.html b/palsa131/HexColorsGradient/index.html
new file mode 100644
index 0000000..9c3ddee
--- /dev/null
+++ b/palsa131/HexColorsGradient/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+ HexColorsGradient
+
+
+
+
+
+
\ No newline at end of file
diff --git a/palsa131/HexColorsGradient/src/App.js b/palsa131/HexColorsGradient/src/App.js
new file mode 100644
index 0000000..2920418
--- /dev/null
+++ b/palsa131/HexColorsGradient/src/App.js
@@ -0,0 +1,48 @@
+import Button from "./Button.js"
+export default function App({targetEl}){
+
+ this.state ={
+ linearGradient: ['#ffffff','#ffffff'],
+ };
+
+ this.setLinearGradient = (nextState)=>{
+ this.state.linearGradient = nextState;
+ this.render();
+ }
+
+ const guideTextEl = document.createElement('h1');
+ guideTextEl.className = 'gradientText'
+ guideTextEl.textContent = 'CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT HEX COLOR COMBINATION'
+
+ const backgroundInfoTextEl = document.createElement('h2');
+ backgroundInfoTextEl.className = 'gradientText'
+
+ targetEl.appendChild(guideTextEl);
+ targetEl.appendChild(backgroundInfoTextEl);
+
+ this.render = ()=>{
+ backgroundInfoTextEl.textContent = `background: linear-gradient(to right, ${this.state.linearGradient[0]}, ${this.state.linearGradient[1]});`
+ }
+
+ const button = new Button({
+ targetEl,
+ initialState:{
+ value: 'Change!!'
+ },
+ onClick: ()=>{
+ const linearGradient = Array(2).fill(0)
+ .map(()=> Array(3).fill(0)
+ .map((value)=>{
+ value = Math.floor(Math.random() * 256).toString(16)
+ if (value.length === 2) return value;
+ return '0' + value;
+ })
+ .join(''))
+ targetEl.style.background = `linear-gradient(to right,#${linearGradient[0]},#${linearGradient[1]})`;
+ this.setLinearGradient(linearGradient);
+ },
+ })
+
+ this.render();
+}
+
diff --git a/palsa131/HexColorsGradient/src/Button.js b/palsa131/HexColorsGradient/src/Button.js
new file mode 100644
index 0000000..0e82456
--- /dev/null
+++ b/palsa131/HexColorsGradient/src/Button.js
@@ -0,0 +1,18 @@
+export default function Button({targetEl, initialState, onClick}){
+ const elButton = document.createElement('button')
+
+ this.state = initialState
+
+ this.setState = (nextState)=>{
+ this.state = nextState
+ this.render()
+ }
+
+ elButton.textContent = this.state.value
+
+ elButton.addEventListener('click',onClick)
+
+ this.render = ()=>{}
+
+ targetEl.appendChild(elButton)
+}
\ No newline at end of file
diff --git a/palsa131/HexColorsGradient/src/main.css b/palsa131/HexColorsGradient/src/main.css
new file mode 100644
index 0000000..32c71b5
--- /dev/null
+++ b/palsa131/HexColorsGradient/src/main.css
@@ -0,0 +1,49 @@
+body{
+ margin:0;
+ font-size: 16px;
+}
+#app{
+ width: 100vw;
+ height: 100vh;
+ display:flex;
+ flex-direction: column;
+ justify-content: center;
+}
+#app > button{
+ border-width: 1px;
+ border-radius: 4px;
+ padding: 0.25rem 0.75rem;
+ align-self: center;
+ background-color: #fff;
+ color: #343a40;
+ border-color: #343a40;
+ cursor: pointer;
+ line-height: 1.5;
+ text-align: center;
+ font-weight: 400;
+ font-size: 1rem;
+ box-shadow: none;
+}
+#app > button:hover{
+ background-color: #343a40;
+ color: white;
+ transition: ease-out,background-color .15s
+ ease-in-out,border-color .15s
+ ease-in-out,box-shadow .15s;
+}
+#app > button:focus{
+ box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%);
+}
+.gradientText {
+ text-align: center;
+ align-self: center;
+ animation: color-change 5s infinite alternate;
+}
+@keyframes color-change {
+ 0% { color: #fff }
+ 20% { color: #ccc }
+ 40% { color: #999 }
+ 60% { color: #666 }
+ 80% { color: #333 }
+ 100% { color: #fff }
+}
\ No newline at end of file
diff --git a/palsa131/HexColorsGradient/src/main.js b/palsa131/HexColorsGradient/src/main.js
new file mode 100644
index 0000000..1bf1d73
--- /dev/null
+++ b/palsa131/HexColorsGradient/src/main.js
@@ -0,0 +1,5 @@
+import App from './App.js'
+
+const targetEl = document.querySelector('#app')
+
+new App({targetEl})
\ No newline at end of file