Merge pull request steam-bell-92#1121 from developer-yash03/fix/html

Fixed HTML Tags Rendering

Author: steam-bell-92

web-app/js/projects/bubble-sort.js

@@ -269,8 +269,8 @@ function initBubbleSort() {
         const arr = Array.from({ length: 8 }, () => Math.floor(Math.random() * 90) + 10);
         input.value = arr.join(' ');
         renderBars(arr);
-        resultDiv.textContent = '';
-        statsDiv.textContent = '';
+        resultDiv.innerHTML = '';
+        statsDiv.innerHTML = '';
     });
 
     function sleep(ms) {
@@ -354,31 +354,31 @@ function initBubbleSort() {
 
         const raw = input.value.trim();
         if (!raw) {
-            resultDiv.textContent = `<p style="color:var(--danger-color)">⚠️ Please enter numbers!</p>`;
+            resultDiv.innerHTML = `<p style="color:var(--danger-color)">⚠️ Please enter numbers!</p>`;
             return;
         }
 
         const arr = raw.split(/\s+/).map(Number);
         if (arr.some(isNaN)) {
-            resultDiv.textContent = `<p style="color:var(--danger-color)">⚠️ Please enter valid integers only!</p>`;
+            resultDiv.innerHTML = `<p style="color:var(--danger-color)">⚠️ Please enter valid integers only!</p>`;
             return;
         }
 
         if (arr.length < 2) {
-            resultDiv.textContent = `<p style="color:var(--danger-color)">⚠️ Enter at least 2 numbers!</p>`;
+            resultDiv.innerHTML = `<p style="color:var(--danger-color)">⚠️ Enter at least 2 numbers!</p>`;
             return;
         }
 
         isSorting = true;
         comparisons = 0;
         swaps = 0;
         startBtn.disabled = true;
-        resultDiv.textContent = `<p style="color:var(--text-secondary)">⏳ Sorting...</p>`;
+        resultDiv.innerHTML = `<p style="color:var(--text-secondary)">⏳ Sorting...</p>`;
 
         renderBars([...arr]);
         const sorted = await bubbleSortVisualize([...arr]);
 
-        resultDiv.textContent = `
+        resultDiv.innerHTML = `
             <p style="color:var(--success-color); font-weight:700; font-size:1.2rem">
                 ✅ Sorted: [ ${sorted.join(', ')} ]
             </p>

web-app/js/projects/collatz.js

@@ -173,7 +173,7 @@ function initCollatz() {
         let number = parseInt(numberInput.value);
 
         if (!number || number < 1) {
-            sequenceDiv.textContent = '<p style="color: var(--danger-color);">⚠️ Please enter a positive integer!</p>';
+            sequenceDiv.innerHTML = '<p style="color: var(--danger-color);">⚠️ Please enter a positive integer!</p>';
             statsDiv.innerHTML  = '';
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             return;

web-app/js/projects/hangman.js

@@ -508,7 +508,7 @@ function initHangman() {
 
             if (wrongAttempts >= maxAttempts) {
                 gameOver = true;
-                gameMessage.textContent = ` Game Over! The word was: <strong>${currentWord.toUpperCase()}</strong>`;
+                gameMessage.innerHTML = ` Game Over! The word was: <strong>${currentWord.toUpperCase()}</strong>`;
                 gameMessage.className = 'game-message lose';
                 disableAllKeys();
                 // Reveal word in red

web-app/js/projects/morse-code.js

@@ -201,7 +201,7 @@ function initMorseCode() {
             inputLabel.textContent = 'Enter Text:';
             textInput.placeholder = 'Type your message here...';
             textInput.value = '';
-            morseOutput.textContent = '<p class="placeholder">Your translation will appear here...</p>';
+            morseOutput.innerHTML = '<p class="placeholder">Your translation will appear here...</p>';
             translateBtn.textContent = '📻 Translate to Morse';
         }
     });
@@ -211,7 +211,7 @@ function initMorseCode() {
             inputLabel.textContent = 'Enter Morse Code:';
             textInput.placeholder = "Type morse code (separate letters with space, words with double spaces)...";
             textInput.value = '';
-            morseOutput.textContent = '<p class="placeholder">Your translation will appear here...</p>';
+            morseOutput.innerHTML = '<p class="placeholder">Your translation will appear here...</p>';
             translateBtn.textContent = '📝 Translate to Text';
         }
     });
@@ -231,11 +231,11 @@ function initMorseCode() {
     function translate() {
         const text = textInput.value.toUpperCase();
         if (!text.trim()) {
-            morseOutput.textContent = '<p class="placeholder">Please enter something to translate!</p>';
+            morseOutput.innerHTML = '<p class="placeholder">Please enter something to translate!</p>';
             return;
         }
 
-        morseOutput.textContent = '';
+        morseOutput.innerHTML = '';
 
         if (modeMorseToText.checked) {
             // Morse to Text

web-app/js/projects/prime-analyzer.js

@@ -225,7 +225,7 @@ function initPrimeAnalyzer() {
         });
 
         if (primes.length === 0) {
-            primesDisplay.textContent = '<p style="color: var(--text-secondary);">No primes found in range</p>';
+            primesDisplay.innerHTML = '<p style="color: var(--text-secondary);">No primes found in range</p>';
         }
     }
 
@@ -249,7 +249,7 @@ function initPrimeAnalyzer() {
         });
 
         if (primes.length === 0) {
-            rangeDisplay.textContent = '<p style="color: var(--text-secondary);">No primes found in range</p>';
+            rangeDisplay.innerHTML = '<p style="color: var(--text-secondary);">No primes found in range</p>';
         }
     }
 

web-app/js/projects/resume-analyzer.js

@@ -296,10 +296,10 @@ function initAIResumeAnalyzer() {
         ].slice(0, 6);
 
         if (displaySkills.length === 0) {
-            kwList.textContent = '<p style="color:var(--text-secondary);font-size:0.9rem;">No matching keywords detected. Try a .txt version of your resume.</p>';
+            kwList.innerHTML = '<p style="color:var(--text-secondary);font-size:0.9rem;">No matching keywords detected. Try a .txt version of your resume.</p>';
         } else {
             displaySkills.forEach(({ name, pct, found }) => {
-                kwList.textContent += `
+                kwList.innerHTML += `
                     <div class="resume-keyword-item">
                         <span style="${found ? '' : 'color:var(--text-secondary);opacity:0.6;'}">${capitalise(name)}${found ? '' : ' ❌'}</span>
                         <div class="resume-bar">
@@ -310,11 +310,11 @@ function initAIResumeAnalyzer() {
         }
 
         const suggestionsEl = document.getElementById('resumeSuggestions');
-        suggestionsEl.textContent = '';
+        suggestionsEl.innerHTML = '';
 
         const suggestions = buildSuggestions({ foundSkills, missingSkills, eduFound, expFound, projFound });
         suggestions.forEach(s => {
-            suggestionsEl.textContent += `
+            suggestionsEl.innerHTML += `
                 <div class="resume-suggestion">
                     <i class="fa-solid ${s.ok ? 'fa-check' : 'fa-triangle-exclamation'}" style="color:${s.ok ? 'var(--accent)' : 'var(--warning-color,#f59e0b)'}; margin-top:0.2rem;"></i>
                     <p style="margin:0;">${s.text}</p>