Daytons · Daytons · Jun 20, 2025
diff --git a/README.md b/README.md
@@ -1 +1,11 @@
-# Tester
+# Mindful Visualizer
+
+This is a simple mindfulness web app that lets you visualize your thoughts and pair them with emotions. Type a thought in the input box and click **Add Thought**. Each thought appears as a bubble that you can click to cycle through different emotions.
+
+Available emotions:
+- calm (blue)
+- happy (yellow)
+- sad (purple)
+- angry (red)
+
+Open `index.html` in a browser to try it out.
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindful Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Mindful Visualizer</h1>
+    <div id="input-section">
+        <input id="thoughtInput" type="text" placeholder="Enter your thought" />
+        <button id="addThoughtBtn">Add Thought</button>
+    </div>
+    <div id="thoughtContainer"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+const emotions = ["calm", "happy", "sad", "angry"];
+
+function createThoughtElement(text) {
+    const div = document.createElement("div");
+    div.className = "thought";
+    div.textContent = text;
+    div.dataset.emotion = "neutral";
+    div.addEventListener("click", () => cycleEmotion(div));
+    return div;
+}
+
+function cycleEmotion(element) {
+    const current = element.dataset.emotion;
+    const index = emotions.indexOf(current);
+    const nextEmotion = emotions[(index + 1) % emotions.length];
+    element.dataset.emotion = nextEmotion;
+}
+
+function addThought() {
+    const input = document.getElementById("thoughtInput");
+    const text = input.value.trim();
+    if (!text) return;
+    const thoughtEl = createThoughtElement(text);
+    document.getElementById("thoughtContainer").appendChild(thoughtEl);
+    input.value = "";
+}
+
+document.getElementById("addThoughtBtn").addEventListener("click", addThought);
diff --git a/style.css b/style.css
@@ -0,0 +1,52 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f2f2f2;
+    min-height: 100vh;
+    margin: 0;
+    padding: 20px;
+}
+
+#input-section {
+    margin-bottom: 20px;
+}
+
+#thoughtContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    max-width: 800px;
+}
+
+.thought {
+    padding: 10px 15px;
+    border-radius: 20px;
+    background: #ccc;
+    color: #000;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.thought:hover {
+    transform: scale(1.1);
+}
+
+/* Emotion Colors */
+.thought[data-emotion="calm"] {
+    background: #a0d8ef;
+}
+
+.thought[data-emotion="happy"] {
+    background: #fff176;
+}
+
+.thought[data-emotion="sad"] {
+    background: #b39ddb;
+}
+
+.thought[data-emotion="angry"] {
+    background: #ef9a9a;
+}
diff --git a/test.c b/test.c