DEV Community

Cover image for Neuro Glitch
Dan
Dan

Posted on

Neuro Glitch

#deved #learngoogleaistudio #ai #gemini

Education Track: Build Apps with Google AI Studio

My Submission for DEV Education Track: Build Apps with Google AI Studio
What I Built
I built a Business Logo Generator App that turns a simple business idea into a clean, stylized logo using HTML, CSS, and JavaScript. The app takes inputs like business name, tagline, industry keywords, and style, then generates a logo on an HTML using a dynamic color palette and emoji‑based icon selection.

I used Google AI Studio to help brainstorm the app structure, refine the UI, and generate the initial logic for palettes, icon mapping, and layout.

Demo
Live Demo
(Add your deployed link here — Netlify, Vercel, GitHub Pages, etc.)

codepen.io

Screenshots
(Upload screenshots in DEV’s editor — they’ll appear here.)

Code
Below is the full code for the app.

index.html
html
<!DOCTYPE html>



Business Logo Generator




Business Logo Generator

<form id="logo-form">
  <label>
    Business name
    <input type="text" id="businessName" required />
  </label>

  <label>
    Tagline (optional)
    <input type="text" id="tagline" />
  </label>

  <label>
    Industry / keywords
    <input type="text" id="industry" placeholder="tech, coffee, fitness..." />
  </label>

  <label>
    Style
    <select id="style">
      <option value="modern">Modern</option>
      <option value="playful">Playful</option>
      <option value="elegant">Elegant</option>
      <option value="bold">Bold</option>
    </select>
  </label>

  <button type="submit">Generate Logo</button>
</form>

<div class="preview-section">
  <h2>Preview</h2>
  <canvas id="logoCanvas" width="600" height="300"></canvas>
  <button id="downloadBtn">Download PNG</button>
</div>




style.css
css

  • { box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

body {
margin: 0;
background: #0f172a;
color: #e5e7eb;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 2rem;
}

.app {
background: #020617;
border-radius: 16px;
padding: 2rem;
max-width: 900px;
width: 100%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
border: 1px solid #1f2937;
}

h1, h2 {
margin-top: 0;
}

form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem 2rem;
margin-bottom: 2rem;
}

label {
display: flex;
flex-direction: column;
font-size: 0.9rem;
color: #9ca3af;
}

input, select, button {
margin-top: 0.4rem;
padding: 0.6rem 0.8rem;
border-radius: 8px;
border: 1px solid #374151;
background: #020617;
color: #e5e7eb;
}

input:focus, select:focus {
outline: 2px solid #6366f1;
border-color: transparent;
}

button {
cursor: pointer;
background: linear-gradient(135deg, #6366f1, #ec4899);
border: none;
font-weight: 600;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}

button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.preview-section {
margin-top: 1rem;
}

logoCanvas {

margin-top: 1rem;
width: 100%;
max-width: 600px;
border-radius: 12px;
border: 1px solid #1f2937;
background: #020617;
}
app.js
javascript
const form = document.getElementById("logo-form");
const canvas = document.getElementById("logoCanvas");
const ctx = canvas.getContext("2d");
const downloadBtn = document.getElementById("downloadBtn");

form.addEventListener("submit", (e) => {
e.preventDefault();

const name = document.getElementById("businessName").value.trim();
const tagline = document.getElementById("tagline").value.trim();
const industry = document.getElementById("industry").value.trim().toLowerCase();
const style = document.getElementById("style").value;

generateLogo({ name, tagline, industry, style });
});

downloadBtn.addEventListener("click", () => {
const link = document.createElement("a");
link.download = "logo.png";
link.href = canvas.toDataURL("image/png");
link.click();
});

function generateLogo({ name, tagline, industry, style }) {
const { bg, primary, accent } = pickPalette(industry, style);
const icon = pickIcon(industry);

ctx.clearRect(0, 0, canvas.width, canvas.height);

const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, bg);
gradient.addColorStop(1, accent);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

const iconX = 120;
const iconY = canvas.height / 2;
const radius = 60;

ctx.beginPath();
ctx.arc(iconX, iconY, radius, 0, Math.PI * 2);
ctx.fillStyle = "rgba(15,23,42,0.9)";
ctx.fill();

ctx.fillStyle = primary;
ctx.font = "48px system-ui";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(icon, iconX, iconY);

ctx.textAlign = "left";
ctx.fillStyle = "#f9fafb";
ctx.font = "bold 40px system-ui";
ctx.fillText(name, 220, canvas.height / 2 - 10);

if (tagline) {
ctx.fillStyle = "rgba(226,232,240,0.8)";
ctx.font = "20px system-ui";
ctx.fillText(tagline, 220, canvas.height / 2 + 30);
}

ctx.fillStyle = primary;
ctx.fillRect(220, canvas.height / 2 + 50, 140, 4);
}

function pickPalette(industry, style) {
const palettes = {
tech: [
{ bg: "#0f172a", primary: "#38bdf8", accent: "#6366f1" },
{ bg: "#020617", primary: "#22c55e", accent: "#0ea5e9" },
],
food: [
{ bg: "#451a03", primary: "#f97316", accent: "#facc15" },
{ bg: "#1b4332", primary: "#84cc16", accent: "#f97316" },
],
fitness: [
{ bg: "#111827", primary: "#22c55e", accent: "#ef4444" },
{ bg: "#0b1120", primary: "#f97316", accent: "#22c55e" },
],
default: [
{ bg: "#020617", primary: "#ec4899", accent: "#6366f1" },
{ bg: "#111827", primary: "#a855f7", accent: "#22c55e" },
],
};

let key = "default";
if (industry.includes("tech") || industry.includes("saas") || industry.includes("software")) key = "tech";
else if (industry.includes("coffee") || industry.includes("food") || industry.includes("restaurant")) key = "food";
else if (industry.includes("gym") || industry.includes("fitness") || industry.includes("health")) key = "fitness";

let palette = palettes[key][Math.floor(Math.random() * palettes[key].length)];

if (style === "elegant") {
palette = { bg: "#020617", primary: "#e5e7eb", accent: "#4b5563" };
} else if (style === "playful") {
palette = { bg: "#0f172a", primary: "#f97316", accent: "#22c55e" };
}

return palette;
}

function pickIcon(industry) {
if (industry.includes("tech") || industry.includes("software")) return "💻";
if (industry.includes("ai") || industry.includes("data")) return "🧠";
if (industry.includes("coffee") || industry.includes("cafe")) return "☕";
if (industry.includes("food") || industry.includes("restaurant")) return "🍽️";
if (industry.includes("fitness") || industry.includes("gym")) return "💪";
if (industry.includes("finance") || industry.includes("bank")) return "💰";
if (industry.includes("eco") || industry.includes("green")) return "🌱";
return "⭐";
}
My Experience
Working through the Google AI Studio track was a great way to explore how AI can speed up early‑stage app development. A few things stood out:

AI was extremely helpful for rapid prototyping, especially generating UI structure and color palette logic.

Iterating on prompts helped refine the app’s personality and visual style.

The workflow made it easy to go from idea → prototype → polished app in a short time.

The track reinforced how AI can act as a creative partner, not just a code assistant.

Overall, this was a fun project that blended creativity, design, and lightweight coding.

Top comments (0)