dpdp11 · lhcee3 · Oct 12, 2024
diff --git a/1.number guess/app.js b/1.number guess/app.js
@@ -1,32 +1,31 @@
-let maximum =  parseInt(prompt("Enter the maximum number!"));
+let maximum = 100; // Set a default maximum
+const targetNum = Math.floor(Math.random() * maximum) + 1;
+let attempts = 0;
 
-while(!maximum){
-    let maximum =  parseInt(prompt("Please enter valid number!"));
-}
-const targetNum = Math.floor(Math.random()*maximum)+1;
+function checkGuess() {
+    const guessInput = document.getElementById('guessInput');
+    const messageElement = document.getElementById('message');
+    const guess = parseInt(guessInput.value);
+    attempts++;
 
-console.log(targetNum);
+    if (isNaN(guess)) {
+        messageElement.textContent = "Please enter a valid number!";
+    } else if (guess === targetNum) {
+        messageElement.textContent = `You got it! It took you ${attempts} guess${attempts === 1 ? '' : 'es'}.`;
+        guessInput.disabled = true;
+    } else if (guess > targetNum) {
+        messageElement.textContent = "Too high! Try again.";
+    } else {
+        messageElement.textContent = "Too low! Try again.";
+    }
 
-let guess = parseInt(prompt("Enter your first guess!"));
-let attempts = 1;
+    guessInput.value = '';
+    guessInput.focus();
+}
 
-while(parseInt(guess)!== targetNum){
-    if(guess == 'q')
-    break;
-    attempts++;
-    if(guess>targetNum)
-    {
-        guess = (prompt("Too high! Enter a new guess:"))
+// Optional: Add event listener for Enter key
+document.getElementById('guessInput').addEventListener('keyup', function(event) {
+    if (event.key === 'Enter') {
+        checkGuess();
     }
-    else{
-        guess = (prompt("Too low! Enter a new guess:"))
-    }
-}
-if(guess=='q')
-{
-    console.log("OK, you quit!")
-}
-else
-{
-    console.log(`You got it! It took you ${attempts} guess`);
-}
+});
diff --git a/1.number guess/index.html b/1.number guess/index.html
@@ -4,10 +4,55 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
+    <title>Number Guessing Game</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .container {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        h1 {
+            color: #333;
+        }
+        input, button {
+            margin: 10px 0;
+            padding: 5px 10px;
+            font-size: 16px;
+            border-radius: 5px;
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Number Guessing Game</h1>
+        <p>Guess a number between 1 and 100:</p>
+        <label for="guessInput">Enter your guess:</label>
+        <input type="number" id="guessInput" min="1" max="100" aria-label="Enter your guess">
+        <button onclick="checkGuess()">Submit Guess</button>
+        <p id="message"></p>
+    </div>
+
     <script src="app.js"></script>
 </body>
 </html>
diff --git a/Portfolio-Skeleton/portfolio/.eslintrc.json b/Portfolio-Skeleton/portfolio/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}
diff --git a/Portfolio-Skeleton/portfolio/.gitignore b/Portfolio-Skeleton/portfolio/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/Portfolio-Skeleton/portfolio/README.md b/Portfolio-Skeleton/portfolio/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/Portfolio-Skeleton/portfolio/app/favicon.ico b/Portfolio-Skeleton/portfolio/app/favicon.ico
diff --git a/Portfolio-Skeleton/portfolio/app/fonts/GeistMonoVF.woff b/Portfolio-Skeleton/portfolio/app/fonts/GeistMonoVF.woff
diff --git a/Portfolio-Skeleton/portfolio/app/fonts/GeistVF.woff b/Portfolio-Skeleton/portfolio/app/fonts/GeistVF.woff
diff --git a/Portfolio-Skeleton/portfolio/app/globals.css b/Portfolio-Skeleton/portfolio/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/Portfolio-Skeleton/portfolio/app/layout.tsx b/Portfolio-Skeleton/portfolio/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/Portfolio-Skeleton/portfolio/app/page.tsx b/Portfolio-Skeleton/portfolio/app/page.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronDown, GitHub, Linkedin, Mail } from 'lucide-react'
+
+export default function Portfolio() {
+  const [activeSection, setActiveSection] = useState('home')
+
+  const projects = [
+    { id: 1, title: 'Project 1', description: 'A brief description of Project 1' },
+    { id: 2, title: 'Project 2', description: 'A brief description of Project 2' },
+    { id: 3, title: 'Project 3', description: 'A brief description of Project 3' },
+  ]
+
+  return (
+    <div className="min-h-screen bg-black text-white overflow-hidden">
+      <motion.div
+        className="absolute inset-0 z-0"
+        animate={{
+          backgroundPosition: ['0% 0%', '100% 100%'],
+        }}
+        transition={{
+          duration: 20,
+          repeat: Infinity,
+          repeatType: 'reverse',
+        }}
+        style={{
+          backgroundImage: 'radial-gradient(circle, #300 1px, transparent 1px)',
+          backgroundSize: '50px 50px',
+        }}
+      />
+
+      <main className="relative z-10 container mx-auto px-4 py-16">
+        <section id="home" className="min-h-screen flex flex-col justify-center">
+          <motion.h1
+            className="text-6xl font-bold mb-4"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Hello, I'm <span className="text-red-500">Your Name</span>
+          </motion.h1>
+          <motion.p
+            className="text-xl mb-8"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            A passionate web developer creating amazing digital experiences.
+          </motion.p>
+          <motion.button
+            className="bg-red-500 text-white px-6 py-3 rounded-full font-semibold text-lg transition-colors duration-300 hover:bg-red-600"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setActiveSection('projects')}
+          >
+            View My Work
+          </motion.button>
+        </section>
+
+        <motion.div
+          className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
+          animate={{ y: [0, 10, 0] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+        >
+          <ChevronDown className="w-8 h-8 text-red-500" />
+        </motion.div>
+
+        <section id="projects" className="min-h-screen py-16">
+          <h2 className="text-4xl font-bold mb-8 text-center">Projects</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {projects.map((project) => (
+              <motion.div
+                key={project.id}
+                className="bg-gray-900 p-6 rounded-lg"
+                whileHover={{ scale: 1.03 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <h3 className="text-2xl font-semibold mb-2">{project.title}</h3>
+                <p className="text-gray-400">{project.description}</p>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+
+        <section id="contact" className="min-h-screen flex flex-col justify-center items-center">
+          <h2 className="text-4xl font-bold mb-8">Get in Touch</h2>
+          <div className="flex space-x-6">
+            <motion.a
+              href="https://github.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              whileHover={{ scale: 1.2, color: '#ff0000' }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <GitHub className="w-8 h-8" />
+            </motion.a>
+            <motion.a
+              href="https://linkedin.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              whileHover={{ scale: 1.2, color: '#ff0000' }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Linkedin className="w-8 h-8" />
+            </motion.a>
+            <motion.a
+              href="mailto:your.email@example.com"
+              whileHover={{ scale: 1.2, color: '#ff0000' }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <Mail className="w-8 h-8" />
+            </motion.a>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
diff --git a/Portfolio-Skeleton/portfolio/next.config.mjs b/Portfolio-Skeleton/portfolio/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;