principal screen done

src/App.js

@@ -2,6 +2,7 @@ import React, {useState} from "react";
 import CurrentScore from "./components/CurrentScore";
 import Hangman from "./components/Hangman/Hangman";
 import Header from "./components/Header";
+import PuzzleWord from "./components/PuzzleWord";
 
 function App() {
 
@@ -13,9 +14,17 @@ function App() {
     <Header language={language}/>
     
     <div className="app">
-      <Hangman />
+
+      <div className='column-1'>
+        <Hangman />
+      </div>
       
-      <CurrentScore currentScore={currentScore} />
+      <div className='column-2'>
+        <CurrentScore currentScore={currentScore} />
+        <PuzzleWord />
+
+      </div>
+
     </div>
    </>
   );

src/components/CurrentScore.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 const CurrentScore = (props) => {
     return (
-        <div>
-            <h2>Current Score: {props.currentScore}</h2>
+        <div className='current-score'>
+            <h2><span className='text'>Current Score: </span>{props.currentScore}</h2>
         </div>
     )
 }

src/components/PuzzleWord.jsx

@@ -0,0 +1,40 @@
+import React, {useState} from 'react'
+
+const PuzzleWord = () => {
+
+    const [actualWord, setActualWord] = useState('murcielagos')
+    const [hiddenWord, setHiddenWord] = useState('')
+
+    console.log(actualWord.length)
+
+    React.useEffect(() => {
+
+        const puzzleWord = document.getElementById('puzzleWord')
+        
+        for (let i = 0; i < actualWord.length; i++) {
+
+            let letter = document.createElement('span')
+            
+            letter.className = 'letter'
+            letter.textContent = ''
+
+            puzzleWord.appendChild(letter)
+        }
+
+        const counter = document.createElement('span')
+        counter.className = 'counter'
+        counter.textContent = '(' + actualWord.length + ')'
+
+        puzzleWord.appendChild(counter)
+
+    }, [])
+
+    return (
+        <div className="puzzleWord" id="puzzleWord">
+            {hiddenWord}
+        </div>
+        
+    )
+}
+
+export default PuzzleWord