From b60d6d03a2d54fc23e3caba2c63bd3a7accb9124 Mon Sep 17 00:00:00 2001 From: Daytons <31025932+Daytons@users.noreply.github.com> Date: Fri, 20 Jun 2025 17:35:43 -0500 Subject: [PATCH] Add mindfulness visualizer web app --- README.md | 12 +++++++++++- index.html | 19 +++++++++++++++++++ script.js | 28 ++++++++++++++++++++++++++++ style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ test.c | 1 - 5 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css delete mode 100644 test.c diff --git a/README.md b/README.md index 1124f79..b2dd919 100644 --- a/README.md +++ b/README.md @@ -1 +1,11 @@ -# Tester \ No newline at end of file +# 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 new file mode 100644 index 0000000..4f8dbc4 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + Mindful Visualizer + + + +

Mindful Visualizer

+
+ + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0b03d0b --- /dev/null +++ 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 new file mode 100644 index 0000000..adcce82 --- /dev/null +++ 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 deleted file mode 100644 index 8b13789..0000000 --- a/test.c +++ /dev/null @@ -1 +0,0 @@ -