Skip to content

Add helper tooltips for form fields #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
komalharshita merged 3 commits into from
May 16, 2026
Merged

Add helper tooltips for form fields #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3640488
Add helper tooltips for form fields
Muskankr May 11, 2026
e363bf7
Add helper text and tooltips to recommendation form
Muskankr May 12, 2026
8a10d79
Merge branch 'main' into feat/form-tooltips
Muskankr May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1654,3 +1654,28 @@ select:focus {
.container { padding: 0 20px; }
.section-sub { margin-bottom: 40px; }
}



.tooltip {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #6366f1;
color: white;
font-size: 11px;
cursor: help;
font-weight: 700;
}

.form-hint {
display: block;
margin-top: 6px;
font-size: 13px;
color: #94a3b8;
line-height: 1.5;
}
154 changes: 112 additions & 42 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
<meta name="description"
content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
<title>DevPath — Find Projects Based On Your Skills</title>
<link rel="stylesheet" href="/static/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap"
rel="stylesheet" />
</head>

<body>
<!-- ============================================================
Navigation
Expand Down Expand Up @@ -88,7 +93,11 @@ <h1 class="hero-heading">
<div class="hero-visual">
<div class="hero-visual-card hero-visual-card--top">
<div class="hvc-icon hvc-icon--blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6" />
<polyline points="8 6 2 12 8 18" />
</svg>
</div>
<div class="hvc-text">
<span class="hvc-title">Starter Code Ready</span>
Expand All @@ -104,10 +113,12 @@ <h1 class="hero-heading">
<span class="hvm-filename">expense_tracker.py</span>
</div>
<div class="hvm-code">
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">add_expense</span>(category, amount):</span>
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">add_expense</span>(category,
amount):</span>
<span class="hvm-line hvm-indent"><span class="hvm-cm"># Save entry to CSV</span></span>
<span class="hvm-line hvm-indent">date <span class="hvm-op">=</span> datetime.now()</span>
<span class="hvm-line hvm-indent"><span class="hvm-kw">with</span> open(DATA_FILE) <span class="hvm-kw">as</span> f:</span>
<span class="hvm-line hvm-indent"><span class="hvm-kw">with</span> open(DATA_FILE) <span
class="hvm-kw">as</span> f:</span>
<span class="hvm-line hvm-indent2">writer.writerow([date, ...])</span>
<span class="hvm-line">&nbsp;</span>
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">monthly_summary</span>():</span>
Expand All @@ -118,7 +129,10 @@ <h1 class="hero-heading">

<div class="hero-visual-card hero-visual-card--bottom">
<div class="hvc-icon hvc-icon--green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>
</div>
<div class="hvc-text">
<span class="hvc-title">7-Step Roadmap</span>
Expand Down Expand Up @@ -175,15 +189,21 @@ <h3>Enter Your Skills</h3>
<p>Type your programming skills or click quick-select chips. Add as many as you like.</p>
</div>
<div class="step-connector">
<svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg width="32" height="16" viewBox="0 0 32 16">
<path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="step-card">
<div class="step-num">02</div>
<h3>Set Your Preferences</h3>
<p>Select your experience level, area of interest, and how much time you can commit.</p>
</div>
<div class="step-connector">
<svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg width="32" height="16" viewBox="0 0 32 16">
<path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="step-card">
<div class="step-num">03</div>
Expand All @@ -207,7 +227,13 @@ <h2 class="section-title">Everything You Need to Start Building</h2>

<div class="feature-card feature-card--pink">
<div class="feature-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</div>
<h3>Personalized Matches</h3>
<p>Projects are scored against your exact skills, level, and interest — not pulled from a generic list.</p>
Expand All @@ -216,7 +242,10 @@ <h3>Personalized Matches</h3>

<div class="feature-card feature-card--yellow">
<div class="feature-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>
</div>
<h3>Step-by-Step Roadmaps</h3>
<p>Each project includes a numbered roadmap so you always know what to build next, without guessing.</p>
Expand All @@ -225,10 +254,15 @@ <h3>Step-by-Step Roadmaps</h3>

<div class="feature-card feature-card--purple">
<div class="feature-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6" />
<polyline points="8 6 2 12 8 18" />
</svg>
</div>
<h3>Starter Code Included</h3>
<p>Download a working template for every project. Skip the blank-page problem and start building immediately.</p>
<p>Download a working template for every project. Skip the blank-page problem and start building immediately.
</p>
<a href="#find-project" class="feature-card-link">Get starter code</a>
</div>

Expand All @@ -251,9 +285,16 @@ <h2 class="section-title">Find Your Next Project</h2>

<!-- Skills input with chip selector -->
<div class="form-group">
<label for="skills-input">Your Skills</label>
<label for="skills-input">
Your Skills
<span class="tooltip"
title="Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.">
ⓘ
</span>
</label>
<div class="skill-input-wrap" id="skill-input-wrap">
<div class="skill-chips-selected" id="skill-chips-selected"></div>
<input type="text" id="skills-input" placeholder="Type a skill and press Enter..." autocomplete="off" />
<input
type="text"
id="skills-input"
Expand All @@ -267,7 +308,9 @@ <h2 class="section-title">Find Your Next Project</h2>
</div>
<!-- Hidden field holds the final comma-separated value -->
<input type="hidden" id="skills" name="skills" />
<span class="form-hint">Or click a popular skill below to add it</span>
<span class="form-hint">
Add one or more skills you are comfortable with. Example: Python, React, SQL, Git.
</span>
<div class="form-error-msg" id="skills-error"></div>
</div>

Expand Down Expand Up @@ -299,7 +342,13 @@ <h2 class="section-title">Find Your Next Project</h2>
</div>

<div class="form-group">
<label for="interest">Area of Interest</label>
<label for="interest">
Area of Interest
<span class="tooltip"
title="Choose the type of projects you enjoy building or want to learn more about.">
ⓘ
</span>
</label>
<div class="select-wrap">
<select id="interest" name="interest">
<option value="" disabled selected>Select interest</option>
Expand All @@ -310,37 +359,51 @@ <h2 class="section-title">Find Your Next Project</h2>
<option value="Games">Games</option>
</select>
</div>
<div class="form-error-msg" id="interest-error"></div>
</div>
</div>


<!-- Time availability -->
<div class="form-group">
<label for="time">Time Availability</label>
<div class="select-wrap">
<select id="time" name="time">
<option value="" disabled selected>How much time can you commit?</option>
<option value="Low">Low — a few hours total</option>
<option value="Medium">Medium — across a weekend</option>
<option value="High">High — a week or more</option>
</select>
</div>
<div class="form-error-msg" id="time-error"></div>
<span class="form-hint">
Pick the domain you want to explore such as Web Development, Automation, or Games.
</span>
<div class="form-error-msg" id="interest-error"></div>
</div>
</div>

<!-- General error (shown above the button) -->
<p class="form-error-general" id="form-error-general"></p>
<!-- Time availability -->
<div class="form-group">
<label for="time">
Time Availability
<span class="tooltip"
title="Estimate how much time you can realistically dedicate to building the project.">
ⓘ
</span>
</label>
<div class="select-wrap">
<select id="time" name="time">
<option value="" disabled selected>How much time can you commit?</option>
<option value="Low">Low — a few hours total</option>
<option value="Medium">Medium — across a weekend</option>
<option value="High">High — a week or more</option>
</select>
</div>
<span class="form-hint">
Include coding, debugging, learning, and reviewing time in your estimate.
</span>
<div class="form-error-msg" id="time-error"></div>
</div>

<!-- Submit button -->
<button type="submit" class="btn-submit" id="submit-btn">
<span id="btn-label">Generate My Projects</span>
<span id="btn-loading" style="display:none;">Finding matches...</span>
</button>
<!-- General error (shown above the button) -->
<p class="form-error-general" id="form-error-general"></p>

</form>
</div>
<!-- Submit button -->
<button type="submit" class="btn-submit" id="submit-btn">
<span id="btn-label">Generate My Projects</span>
<span id="btn-loading" style="display:none;">Finding matches...</span>
</button>

</form>
</div>
</div>
</div>
</section>

<!-- ============================================================
Expand All @@ -364,11 +427,17 @@ <h2 class="section-title">Recommended Projects</h2>
<div id="results-empty" style="display:none;">
<div class="empty-state">
<div class="empty-icon">
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
<h3>No Projects Found</h3>
<p id="empty-message">Try adjusting your skills or selecting a different interest area.</p>
<button class="btn-try-again" onclick="document.getElementById('find-project').scrollIntoView({behavior:'smooth'})">Try Different Inputs</button>
<button class="btn-try-again"
onclick="document.getElementById('find-project').scrollIntoView({behavior:'smooth'})">Try Different
Inputs</button>
</div>
</div>

Expand Down Expand Up @@ -443,4 +512,5 @@ <h4 class="footer-col-title">About</h4>
<script src="/static/data/skills.js"></script>
<script src="/static/script.js"></script>
</body>
</html>

</html>
Loading