principal screen done

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