prepare items with images

src/App.js

@@ -1,6 +1,9 @@
 import header from './Components/Header/Header.js'
 import footer from './Components/Footer/Footer.js'
 import panel from './Components/Panel/Panel.js'
+import rock from './images/rock.png'
+import paper from './images/paper.png'
+import scissor from './images/scissor.png'
 
 export default class {
 
@@ -13,12 +16,15 @@ export default class {
 				counter--
 				if(counter <= 0){
 					 clearInterval(interval)
+					panel.innerHTML = ''
 					 resolve('done')
 				}
 			},1000)	
 		}).then((result)=>{
-			let items = ['Paper','Scissor','Rock']
-			document.querySelector('.panel').innerHTML = items[Math.floor(Math.random()*items.length)]
+			let items = [rock,paper,scissor]
+			let img = document.createElement('img')
+			img.src = items[Math.floor(Math.random()*items.length)]
+			document.querySelector('.panel').append(img)
 		})
 	}
 

src/Components/Panel/Panel.css

@@ -2,6 +2,9 @@
 	text-align: center;
 }
 .panel {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
 	width: 500px;
 	height: 400px;
 	line-height: 400px;
@@ -14,6 +17,12 @@
 	font-size: 6em;
 	font-weight: bolder;
 }
+
+.panel img {
+	width: 300px;
+	height: auto;
+}
+
 button{
 	color: #212529;
 	background-color: #ffc107;