Code Challenges
Write HTML, CSS & JavaScript directly in your browser. See your code come alive and test your skills with fun challenges!
Move your mouse for magic!
0
Challenges Done
0
Points Earned
0
Day Streak
🎨 CSS Button Magic
EasyCreate a button that changes color and grows when hovered. Make it pink — because pink is the best color. (This is not up for debate.)
💡 Hint
Console ready. Write your code and click Run!
© 2025 DevForge Hub. Code. Test. Ship. Repeat.
Hello, DevForge!
\n|
\n\n\n\n'},
6:{title:"Random Color Generator",icon:"🎨",diff:"Medium",cls:"diff-medium",desc:"Build a button that generates random colors and displays the hex code. Change the background to the generated color!",hint:"Use Math.random() to generate RGB values. Convert to hex using toString(16). Update both the background and a display element.",starter:'\n#ff7096
\n\n\n\n'}
};
var currentChallenge=1;
var completed={};var totalPoints=0;var streak=0;
function loadChallenge(num){
currentChallenge=num;
var c=challenges[num];
document.getElementById('chIcon').textContent=c.icon;
document.getElementById('chTitle').textContent=c.title;
document.getElementById('chDifficulty').textContent=c.diff;
document.getElementById('chDifficulty').className='ch-difficulty '+c.cls;
document.getElementById('chDesc').textContent=c.desc;
document.getElementById('hintText').textContent=c.hint;
document.getElementById('codeInput').value=c.starter;
document.getElementById('hintBox').classList.remove('show');
document.getElementById('consoleBox').innerHTML='Challenge '+num+': '+c.title+'. Write your code and click Run!';
document.getElementById('livePreview').srcdoc="Your preview will appear here...";
document.querySelectorAll('.cn-chip').forEach(function(chip){
chip.classList.toggle('active',chip.dataset.challenge==num.toString());
});
}
// Nav clicks
document.querySelectorAll('.cn-chip').forEach(function(chip){
chip.addEventListener('click',function(){loadChallenge(parseInt(this.dataset.challenge))});
});
// Run code
window.runCode=function(){
var code=document.getElementById('codeInput').value;
var iframe=document.getElementById('livePreview');
var con=document.getElementById('consoleBox');
try{
var doc=iframe.contentDocument||iframe.contentWindow.document;
doc.open();doc.write(code);doc.close();
// Check for completion hints
if(currentChallenge===1&&code.includes(':hover')&&code.includes('transform')){
con.innerHTML='✓ Looks good! You used hover and transform. Button magic achieved!';
markCompleted();
}else if(currentChallenge===2&&code.includes('display:flex')&&code.includes('justify-content:center')){
con.innerHTML='✓ Perfect centering! Flexbox master!';
markCompleted();
}else if(currentChallenge===3&&code.includes('toggle(')){
con.innerHTML='✓ Dark mode toggle detected! Your eyes will thank you.';
markCompleted();
}else if(currentChallenge===4&&code.includes('@keyframes')&&code.includes('rotate')){
con.innerHTML='✓ Spinning like a pro! CSS animations are fun.';
markCompleted();
}else if(currentChallenge===5&&code.includes('setInterval')||code.includes('setTimeout')){
con.innerHTML='✓ Typewriter effect engaged! Now add that blinking cursor.';
markCompleted();
}else if(currentChallenge===6&&code.includes('Math.random')&&code.includes('color')){
con.innerHTML='✓ Random colors incoming! Your page is about to get colorful.';
markCompleted();
}else{
con.innerHTML='Code rendered! Check the preview. Keep going, you are getting there!';
}
}catch(e){
con.innerHTML='Error: '+e.message+'';
}
};
function markCompleted(){
if(!completed[currentChallenge]){
completed[currentChallenge]=true;
totalPoints+=currentChallenge<=2?50:currentChallenge<=4?100:150;
streak++;
document.getElementById('challengesCompleted').textContent=Object.keys(completed).length;
document.getElementById('totalPoints').textContent=totalPoints;
document.getElementById('currentStreak').textContent=streak;
}
}
window.showHint=function(){
var hb=document.getElementById('hintBox');
hb.classList.toggle('show');
};
window.resetCode=function(){
document.getElementById('codeInput').value=challenges[currentChallenge].starter;
document.getElementById('consoleBox').innerHTML='Code reset! Start fresh and try again.';
document.getElementById('livePreview').srcdoc="Preview reset...";
};
// Load first challenge
loadChallenge(1);
})();
Comments (0)
No comments:
Post a Comment