create-aziz-app 1.0.0

package/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

package/app.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Vanilla JS App</title>
+
+    <!-- Babel compiles our JSX in the browser -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .header {
+            width: 100%;
+            background-color: #282c34;
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+
+        .main {
+            margin-top: 60px;
+            text-align: center;
+        }
+
+        .counter-box {
+            background-color: white;
+            padding: 40px 60px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+
+        .counter-box h2 {
+            margin-bottom: 20px;
+            color: #333;
+        }
+
+        .count-display {
+            font-size: 64px;
+            font-weight: bold;
+            color: #282c34;
+            margin: 20px 0;
+        }
+
+        .btn {
+            padding: 12px 28px;
+            margin: 0 8px;
+            font-size: 24px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+
+        .btn-plus  { background-color: #61dafb; color: #282c34; }
+        .btn-minus { background-color: #ff6b6b; color: white; }
+
+        .btn-reset {
+            background-color: #ccc;
+            color: #333;
+            font-size: 16px;
+            padding: 12px 24px;
+            margin-top: 20px;
+            display: block;
+            width: 100%;
+            border-radius: 8px;
+            border: none;
+            cursor: pointer;
+        }
+
+        .btn:hover { opacity: 0.85; }
+
+        .footer {
+            margin-top: auto;
+            padding: 20px;
+            color: #888;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="root">       
+    </div>
+
+    <!-- Load components first (Babel compiles each one) -->
+     
+    <script type="text/babel" src="components/Header.jsx"></script>
+    <script type="text/babel" src="components/Counter.jsx"></script>
+    <script type="text/babel" src="components/Footer.jsx"></script>
+
+    <!-- Then load the main app -->
+    <script type="text/babel" src="app.js"></script>
+
+</body>
+</html>

package/app.js

@@ -0,0 +1,88 @@
+/** @jsx h */
+
+// ==============================
+//  h() — our own createElement
+//  Babel compiles JSX like <div class="x"> into h("div", { class: "x" }, ...children)
+//  This function turns that into a real DOM element
+// ==============================
+function h(tag, props, ...children) {
+    // If tag is a function (a component like Header), call it
+    if (typeof tag === "function") {
+        return tag(props, ...children);
+    }
+
+    // Create the real DOM element
+    const el = document.createElement(tag);
+
+    // Apply props (class, onClick, etc.)
+    if (props) {
+        for (let key in props) {
+            if (key.startsWith("on")) {
+                // onClick -> click event
+                const eventName = key.slice(2).toLowerCase();
+                el.addEventListener(eventName, props[key]);
+            } else if (key === "className") {
+                el.className = props[key];
+            } else {
+                el.setAttribute(key, props[key]);
+            }
+        }
+    }
+
+    // Append children (text or elements)
+    for (let child of children) {
+        if (child === null || child === undefined) continue;
+        if (typeof child === "string" || typeof child === "number") {
+            el.appendChild(document.createTextNode(child));
+        } else {
+            el.appendChild(child);
+        }
+    }
+
+    return el;
+}
+
+
+// ==============================
+//  STATE
+// ==============================
+let state = {
+    count: 0
+};
+
+
+// ==============================
+//  RENDER
+// ==============================
+function render() {
+    const root = document.getElementById("root");
+    root.innerHTML = "";
+    root.appendChild(Header());
+    root.appendChild(Counter());
+    root.appendChild(Footer());
+}
+
+
+// ==============================
+//  STATE UPDATER FUNCTIONS
+// ==============================
+function increment() {
+    state.count = state.count + 1;
+    render();
+}
+
+function decrement() {
+    state.count = state.count - 1;
+    render();
+}
+
+function reset() {
+    state.count = 0;
+    render();
+}
+
+
+// ==============================
+//  FIRST RENDER
+// ==============================
+render();

package/components/Counter.jsx

@@ -0,0 +1,18 @@
+/** @jsx h */
+
+function Counter() {
+    return (
+        <div class="main">
+            <div class="counter-box">
+                <h2>Counter App</h2>
+
+                <div class="count-display">{state.count}</div>
+
+                <button class="btn btn-minus" onClick={() => decrement()}>−</button>
+                <button class="btn btn-plus"  onClick={() => increment()}>+</button>
+
+                <button class="btn-reset" onClick={() => reset()}>Reset</button>
+            </div>
+        </div>
+    );
+}

package/components/Footer.jsx

@@ -0,0 +1,9 @@
+/** @jsx h */
+
+function Footer() {
+    return (
+        <div class="footer">
+            <p>Built with Vanilla JS 🍦 — No frameworks needed</p>
+        </div>
+    );
+}

package/components/Header.jsx

@@ -0,0 +1,10 @@
+/** @jsx h */
+
+function Header() {
+    return (
+        <div class="header">
+            <h1>My Vanilla JS App ⚡</h1>
+            <p>A simple React-like app using plain JavaScript</p>
+        </div>
+    );
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "create-aziz-app",
+  "version": "1.0.0",
+  "description": "so close to react ~~ just joking",
+  "keywords": [
+    "js",
+    "hrml",
+    "css",
+    "reactlike"
+  ],
+  "license": "Aziz",
+  "author": "Syed Muhammad Aziz Ahmed",
+  "type": "commonjs",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}