Varshitha713 · Adithyakp86 · Sep 6, 2025 · Sep 19, 2025 · Sep 19, 2025
diff --git a/assets/Calculator.png b/assets/Calculator.png
diff --git a/demos/basic-calculator/index.html b/demos/basic-calculator/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Basic Calculator</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="calc">
+    <input id="display" class="display" type="text" readonly />
+    <div class="keys">
+      <button data-k="7">7</button>
+      <button data-k="8">8</button>
+      <button data-k="9">9</button>
+      <button data-k="/" class="op">÷</button>
+
+      <button data-k="4">4</button>
+      <button data-k="5">5</button>
+      <button data-k="6">6</button>
+      <button data-k="*" class="op">×</button>
+
+      <button data-k="1">1</button>
+      <button data-k="2">2</button>
+      <button data-k="3">3</button>
+      <button data-k="-" class="op">−</button>
+
+      <button data-k="0">0</button>
+      <button data-k=".">.</button>
+      <button id="clear" class="muted">C</button>
+      <button data-k="+" class="op">+</button>
+
+      <button id="equals" class="primary">=</button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+
+
diff --git a/demos/basic-calculator/script.js 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
@@ -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
@@ -45,7 +45,7 @@
   <main>
     <section class="hero fade-in">
       <div class="container">
-        <h1>Showcase Your Front-End Creations</h1>
+        <h1 id="typewriter-heading">Showcase Your Front-End Creations</h1>
         <p>Discover, share, and get inspired by amazing front-end projects from developers around the world. Join the
           community and showcase your creativity!</p>
         <a href="#projects" class="btn-primary">Explore Projects</a>
@@ -245,37 +245,55 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
 
 
   <footer class="footer fade-in">
-    <div class="footer-flex-container">
-      <div class="footer-1">
+    <div class="footer-gradient"></div>
+    <div class="footer-grid container">
+      <div class="footer-brand">
         <div class="footer-logo">CodeCanvas</div>
-        <ul class="socials">
-          <li><a href="https://github.com/Varshitha713/CodeCanvas" target="_blank"><i
-                class="fa-brands fa-github"></i></a></li>
-          <li><a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank"><i
-                class="fa-brands fa-linkedin"></i></a></li>
-          <li><a href="https://discord.com/users/1179807221329182780" target="_blank"><i
-                class="fa-brands fa-discord"></i></a></li>
-          <li><a href="#"><i class="fa-solid fa-envelope"></i></a></li>
+        <p class="footer-tagline">Discover. Build. Showcase.</p>
+        <ul class="footer-socials">
+          <li><a href="https://github.com/Varshitha713/CodeCanvas" target="_blank" aria-label="GitHub"><i class="fa-brands fa-github"></i></a></li>
+          <li><a href="https://www.linkedin.com/in/varshitha-macha/" target="_blank" aria-label="LinkedIn"><i class="fa-brands fa-linkedin"></i></a></li>
+          <li><a href="https://discord.com/users/1179807221329182780" target="_blank" aria-label="Discord"><i class="fa-brands fa-discord"></i></a></li>
+          <li><a href="#contact" aria-label="Email"><i class="fa-solid fa-envelope"></i></a></li>
         </ul>
       </div>
-      <div class="quick-links">
+
+      <div class="footer-links">
+        <h4>Explore</h4>
         <ul>
-          <div class="p-1">
-            <li><a href="#">Home</a></li>
-            <li><a href="#browse">Browse</a></li>
-            <li><a href="#submit">Submit</a></li>
-          </div>
-          <div class="p-2">
-            <li><a href="#about">About</a></li>
-            <li><a href="#reviews">Reviews</a></li>
-            <li><a href="#contact">Contact Us</a></li>
-          </div>
+          <li><a href="#">Home</a></li>
+          <li><a href="#browse">Browse</a></li>
+          <li><a href="#submit">Submit</a></li>
+          <li><a href="#reviews">Reviews</a></li>
+        </ul>
+      </div>
+
+      <div class="footer-links">
+        <h4>About</h4>
+        <ul>
+          <li><a href="#about">Our Mission</a></li>
+          <li><a href="https://github.com/Varshitha713/CodeCanvas" target="_blank">Contribute</a></li>
+          <li><a href="#contact">Contact</a></li>
         </ul>
       </div>
+
+      <div class="footer-newsletter">
+        <h4>Stay Updated</h4>
+        <p>Get occasional updates on new projects and features.</p>
+        <form class="newsletter-form" onsubmit="event.preventDefault(); this.reset();">
+          <input type="email" placeholder="Your email" aria-label="Email" required />
+          <button type="submit" class="btn-primary small">Subscribe</button>
+        </form>
+      </div>
     </div>
-    <div class="container">
-      <p>&copy; 2025 CodeCanvas. Open source project for the developer community.</p>
-      <p>Built with ❤️ for showcasing amazing front-end projects</p>
+
+    <div class="footer-bottom">
+      <div class="container footer-bottom-inner">
+        <p>&copy; 2025 CodeCanvas. Made with <span class="heart">❤</span> for the community.</p>
+        <a href="#" class="back-to-top" id="footerBackToTop" aria-label="Back to top">
+          <i class="fa-solid fa-arrow-up"></i>
+        </a>
+      </div>
     </div>
   </footer>
   <button id="scrollToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>

diff --git 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 += '<span class="cursor">|</span>';
+      }
+    }
+
+    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);
+    }
+  });
diff --git 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;
-}
+}
+
+        /* 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; }
+        }