diff --git a/assets/Calculator.png b/assets/Calculator.png new file mode 100644 index 0000000..bcf7550 Binary files /dev/null and b/assets/Calculator.png differ diff --git a/demos/basic-calculator/index.html b/demos/basic-calculator/index.html new file mode 100644 index 0000000..425fb01 --- /dev/null +++ b/demos/basic-calculator/index.html @@ -0,0 +1,40 @@ + + + + + + Basic Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + diff --git a/demos/basic-calculator/script.js b/demos/basic-calculator/script.js new file mode 100644 index 0000000..c9afdc0 --- /dev/null +++ b/demos/basic-calculator/script.js @@ -0,0 +1,44 @@ +const display = document.getElementById('display'); + +let buffer = ''; + +function append(k){ + buffer += k; + display.value = buffer; +} + +function clearAll(){ + buffer = ''; + display.value = ''; +} + +function evaluateExpr(){ + if(!buffer) return; + try{ + // Safe eval: allow digits, operators, dot and spaces only + if(!/^[-+*/().\d\s]+$/.test(buffer)) throw new Error('invalid'); + const result = Function(`"use strict";return (${buffer})`)(); + buffer = String(result); + display.value = buffer; + }catch{ + display.value = 'Error'; + buffer = ''; + } +} + +document.querySelectorAll('[data-k]').forEach(btn=>{ + btn.addEventListener('click',()=>append(btn.dataset.k)); +}); +document.getElementById('clear').addEventListener('click',clearAll); +document.getElementById('equals').addEventListener('click',evaluateExpr); + +// Keyboard support +window.addEventListener('keydown',(e)=>{ + const k = e.key; + if(/[0-9.+\-*/()]/.test(k)) append(k); + else if(k==='Enter') evaluateExpr(); + else if(k==='Escape') clearAll(); + else if(k==='Backspace'){ buffer = buffer.slice(0,-1); display.value = buffer; } +}); + + diff --git a/demos/basic-calculator/style.css b/demos/basic-calculator/style.css new file mode 100644 index 0000000..6901fd7 --- /dev/null +++ b/demos/basic-calculator/style.css @@ -0,0 +1,10 @@ +*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#0e0e1a;color:#fff;display:grid;place-items:center;min-height:100vh} +.calc{background:#151528;border:1px solid #2a2a42;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.3);width:min(360px,92vw)} +.display{width:100%;height:64px;border-radius:12px;border:1px solid #2a2a42;background:#0a0a14;color:#7dd3fc;font-size:28px;padding:12px 14px;margin-bottom:12px;text-align:right} +.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} +button{appearance:none;border:none;border-radius:12px;padding:14px;font-size:18px;background:#1e1e35;color:#e5e7eb;cursor:pointer;transition:.15s ease;box-shadow:0 2px 0 #0a0a14} +button:hover{filter:brightness(1.05)}button:active{transform:translateY(1px);box-shadow:0 1px 0 #0a0a14} +.op{background:#23234a;color:#a5b4fc}.muted{background:#23233a;color:#94a3b8} +.primary{grid-column:span 4;background:#6d28d9;color:#fff;font-weight:700} + + diff --git a/index.html b/index.html index 8c5ff97..5b3af7d 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@
-

Showcase Your Front-End Creations

+

Showcase Your Front-End Creations

Discover, share, and get inspired by amazing front-end projects from developers around the world. Join the community and showcase your creativity!

Explore Projects @@ -245,37 +245,55 @@

-
-
+
+
+
-
    -
    • -
    • -
    • -
    • +

    Discover. Build. Showcase.

    +
      +
      • +
      • +
      • +
-
+ +
+

Explore

+
+ +
+

About

+
+ +
+

Stay Updated

+

Get occasional updates on new projects and features.

+ +
-
-

© 2025 CodeCanvas. Open source project for the developer community.

-

Built with ❤️ for showcasing amazing front-end projects

+ +
+
+

© 2025 CodeCanvas. Made with ❤ for the community.

+ + + +
diff --git a/script.js b/script.js index ec8d677..2fb5388 100644 --- a/script.js +++ b/script.js @@ -94,17 +94,18 @@ const sampleProjects = [ }, { id: 8, - title: 'Unit Converter', - description: 'A simple and responsive unit converter that allows users to convert between length, weight, and temperature with real-time results.', - repoUrl: 'https://github.com/Bhavya0420/UnitConverter', - demoUrl: 'https://bhavya0420.github.io/UnitConverter/', - difficulty: 'intermediate', - upvotes: 20, + title: 'Basic Calculator', + description: 'A simple Basic Calculator built with HTML, CSS, and JavaScript. Perfect for beginners to practice web development fundamentals including building layouts, styling with CSS, and adding interactivity using JavaScript.', + repoUrl: 'https://github.com/Varshitha713/CodeCanvas', + demoUrl: 'demos/basic-calculator/', + difficulty: 'beginner', + upvotes: 18, hasDemo: true, hasReadme: true, - previewImage: 'assets/UnitConverter.png', - tags: ['HTML', 'CSS', 'JavaScript', 'Responsive'] -} + previewImage: 'assets/Calculator.png', + tags: ['HTML5', 'CSS3', 'JavaScript', 'ES6', 'Responsive'] + }, + // Removed duplicate Unit Converter entry to resolve duplication on homepage ]; @@ -665,3 +666,31 @@ entries.forEach((entry, index) => { }, speed: 700, // smooth transition }); + + // Typewriter Effect + function typeWriter(element, text, speed = 100) { + let i = 0; + element.innerHTML = ''; + + function type() { + if (i < text.length) { + element.innerHTML += text.charAt(i); + i++; + setTimeout(type, speed); + } else { + // Add blinking cursor after typing is complete + element.innerHTML += '|'; + } + } + + type(); + } + + // Initialize typewriter effect when page loads + document.addEventListener('DOMContentLoaded', function() { + const heading = document.getElementById('typewriter-heading'); + if (heading) { + const originalText = heading.textContent; + typeWriter(heading, originalText, 80); + } + }); \ No newline at end of file diff --git a/style.css b/style.css index d313e13..9d808b2 100644 --- a/style.css +++ b/style.css @@ -198,6 +198,23 @@ text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } + /* Typewriter effect styles */ + #typewriter-heading { + white-space: nowrap; + } + + /* Blinking cursor for typewriter effect */ + .cursor { + animation: blink 1s infinite; + color: #667eea; + font-weight: bold; + } + + @keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } + } + .hero p { font-size: 1.2rem; margin-bottom: 2rem; @@ -1584,4 +1601,37 @@ body.dark-theme button:hover { flex-wrap: wrap; font-size: 14px; gap: 50px; -} \ No newline at end of file +} + + /* Enhanced Footer Styles */ + .footer { position: relative; background:#0b0b14; color:#b7b7c3; margin-top:60px; } + .footer-gradient { position:absolute; inset:0; background: radial-gradient(800px 200px at 20% 0%, rgba(147,51,234,.2), transparent), radial-gradient(800px 200px at 80% 0%, rgba(79,70,229,.2), transparent); pointer-events:none; } + .footer-grid { display:grid; grid-template-columns: repeat(12,1fr); gap:24px; padding:48px 20px; position:relative; z-index:1; } + .footer-brand { grid-column: span 5; } + .footer-logo { font-size:1.8rem; font-weight:800; color:#fff; margin-bottom:6px; } + .footer-tagline{ color:#9aa0b4; margin-bottom:14px; } + .footer-socials{ display:flex; gap:10px; list-style:none; padding:0; } + .footer-socials a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:#11111b; border:1px solid #1f2030; border-radius:10px; color:#c8c9d1; transition:.2s ease; } + .footer-socials a:hover{ transform: translateY(-2px); color:#fff; border-color:#343652; } + .footer-links{ grid-column: span 2; } + .footer-links h4{ color:#e6e7ee; margin:6px 0 8px; font-size:1rem; } + .footer-links ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; } + .footer-links a{ color:#aeb2c3; transition:.2s ease; text-decoration:none; } + .footer-links a:hover{ color:#fff; } + .footer-newsletter{ grid-column: span 3; } + .newsletter-form{ display:flex; gap:8px; margin-top:10px; } + .newsletter-form input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #23243a; background:#0f0f19; color:#e5e7eb; outline:none; } + .newsletter-form .btn-primary.small{ padding:10px 14px; font-size:.9rem; } + .footer-bottom{ border-top:1px solid #1f2030; padding:14px 0; background:#090912; position:relative; z-index:1; } + .footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; } + .back-to-top{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; background:#151528; border:1px solid #23243a; color:#d1d5db; transition:.2s ease; text-decoration:none; } + .back-to-top:hover{ transform: translateY(-2px); color:#fff; } + @media (max-width: 900px){ + .footer-grid{ grid-template-columns: repeat(6,1fr); } + .footer-brand{ grid-column: span 6; } + .footer-links{ grid-column: span 3; } + .footer-newsletter{ grid-column: span 6; } + } + @media (max-width: 600px){ + .footer-bottom-inner{ flex-direction:column; gap:10px; } + } \ No newline at end of file