DEV Community

jay Maan
jay Maan

Posted on

Dev week 1

#devchallenge #hf26challenge

*This is a submission for the
An AI-powered outdoor activity generator. The user enters their mood, available time, and whether they're alone or with friends, and the app suggests a simple offline activity.

What I Built

I built TouchGrass AI, a lightweight open-source AI-powered web app that helps people step away from their screens and spend time outdoors.
Users enter their mood, available time, and preferred activity type, and the app generates practical outdoor activity ideas. The goal is simple: use technology to encourage people to put their phones down and experience the real world.
The project is designed for students, families, and anyone looking for simple ways to spend more time outside.

Demo

Live Demo: https://touchgrass-ai-demo.vercel.app
Demo description: TouchGrass AI lets users choose their mood, available time, and company, then generates a simple outdoor mission designed to encourage them to step away from their screen and explore the real world.

Code

<!DOCTYPE html>




TouchGrass AI
<br> * {<br> box-sizing: border-box;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>body { margin: 0; font-family: Arial, sans-serif; background: #f4f7f2; color: #1f3024; } .container { max-width: 700px; margin: auto; padding: 40px 20px; } h1 { font-size: 42px; margin-bottom: 10px; } .subtitle { font-size: 18px; line-height: 1.6; } .card { background: white; padding: 25px; margin-top: 25px; border-radius: 18px; box-shadow: 0 5px 20px rgba(0,0,0,.08); } label { display: block; margin-top: 18px; margin-bottom: 7px; font-weight: bold; } select, button { width: 100%; padding: 13px; border-radius: 10px; border: 1px solid #ccc; font-size: 16px; } button { margin-top: 25px; cursor: pointer; background: #2f6b3c; color: white; border: none; font-weight: bold; } button:hover { opacity: .9; } #result { margin-top: 25px; padding: 20px; border-radius: 12px; background: #eef6ed; line-height: 1.6; display: none; } </code></pre></div> <p>

🌱 TouchGrass AI

<p class="subtitle">
  A tiny AI-inspired activity generator that turns screen time
  into real-world time.
</p>

<div class="card">
  <label for="mood">How are you feeling?</label>
  <select id="mood">
    <option>Energetic</option>
    <option>Relaxed</option>
    <option>Bored</option>
    <option>Stressed</option>
    <option>Curious</option>
  </select>

  <label for="time">How much time do you have?</label>
  <select id="time">
    <option>10 minutes</option>
    <option>30 minutes</option>
    <option>1 hour</option>
    <option>2+ hours</option>
  </select>

  <label for="company">Who are you with?</label>
  <select id="company">
    <option>Alone</option>
    <option>Friends</option>
    <option>Family</option>
  </select>

  <button onclick="generateActivity()">
    🌿 Give Me an Outdoor Mission
  </button>

  <div id="result"></div>
</div>

<br> const activities = {<br> &quot;Energetic&quot;: [<br> &quot;Go for a brisk walk and explore a street or park you haven&#39;t visited before.&quot;,<br> &quot;Play a quick outdoor game with friends.&quot;,<br> &quot;Take a short bike ride and discover a new route.&quot;<br> ],<br> &quot;Relaxed&quot;: [<br> &quot;Find a quiet outdoor spot and spend 15 minutes observing nature.&quot;,<br> &quot;Sit outside and listen to the sounds around you without using your phone.&quot;,<br> &quot;Take a slow walk and notice five different things around you.&quot;<br> ],<br> &quot;Bored&quot;: [<br> &quot;Go outside and photograph five interesting things you notice.&quot;,<br> &quot;Try a new outdoor game.&quot;,<br> &quot;Explore your neighborhood on foot and find something you&#39;ve never noticed.&quot;<br> ],<br> &quot;Stressed&quot;: [<br> &quot;Take a calm 10-minute walk and focus on your surroundings.&quot;,<br> &quot;Sit somewhere peaceful outdoors and take a break from your screen.&quot;,<br> &quot;Walk slowly while taking several deep breaths and noticing nature.&quot;<br> ],<br> &quot;Curious&quot;: [<br> &quot;Explore a nearby park and identify three different plants.&quot;,<br> &quot;Look for birds or insects and learn something about one you see.&quot;,<br> &quot;Choose a new route and explore your surroundings.&quot;<br> ]<br> };</p> <div class="highlight"><pre class="highlight plaintext"><code>function generateActivity() { const mood = document.getElementById("mood").value; const time = document.getElementById("time").value; const company = document.getElementById("company").value; const choices = activities[mood]; const activity = choices[Math.floor(Math.random() * choices.length)]; const result = document.getElementById("result"); result.style.display = "block"; result.innerHTML = ` &lt;strong&gt;🌱 Your TouchGrass Mission&lt;/strong&gt;&lt;br&gt;&lt;br&gt; ${activity}&lt;br&gt;&lt;br&gt; &lt;strong&gt;Time available:&lt;/strong&gt; ${time}&lt;br&gt; &lt;strong&gt;Company:&lt;/strong&gt; ${company}&lt;br&gt;&lt;br&gt; 📵 Try putting your phone away while completing the mission. `; } </code></pre></div> <p>

demo

Live Demo: https://touchgrass-ai-demo.vercel.app
Demo description: TouchGrass AI lets users choose their mood, available time, and company, then generates a simple outdoor mission designed to encourage them to step away from their screen and explore the real world.

How I Built it

I built TouchGrass AI with HTML, CSS, and JavaScript. It uses user preferences to generate simple outdoor activities and encourage users to spend less time on screens.

Prize Categories

Open-Source AI / AI Innovation — select the specific category only if the project meets that category's requirements.

Top comments (0)