diff --git a/README.md b/README.md index 788ab5a..4c83751 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,32 @@ -# 📊 Project: Simple API 2 - -### Goal: Display data returned from an api - -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +# ☕ Here for Advice — Advice API App + +A calm, cozy space where you can type a **topic** or tap **Random** to receive a bit of wisdom from the **Advice Slip API**. +Built with soft chocolate-nude tones to feel comforting, grounded, and easy on the eyes — like a warm note passed across the table. + +[Link to project](https://simple-advice-api.vercel.app/) +![screenshot](img/advice.png "Here for Advice — Advice API App") + +--- + +## How It’s Made: +**Tech used:** HTML, CSS, JavaScript + +Here for Advice fetches quotes from the Advice Slip API and displays them on a note-style card once you click **Get Advice** or **Random**. +The interface stays minimal and centered, keeping the focus on the message while blending warm tones and soft gradients for a relaxing atmosphere. + +--- + +## Optimizations +- Add a fade-in transition when advice appears. +- Include a short loading state or animation between fetches. +- Let users save favorite advice notes locally. +- Add a toggle for light/dark or seasonal color themes. +- Display a timestamp for when each note was received. + +--- + +## Lessons Learned +- A minimal layout can still feel emotionally engaging through color and spacing. +- Adding small UX touches — like hiding content until it’s ready — makes the experience more intentional. +- Warm tones and subtle design choices can set the emotional tone of a project. +- Even the simplest API can inspire thoughtful, finished design. diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..f444fab --- /dev/null +++ b/css/styles.css @@ -0,0 +1,196 @@ +/* css/styles.css */ +* { + box-sizing: border-box; +} + +html, +body { + height: 100%; + margin: 0; +} + +body { + font-family: "Inter", Arial, Helvetica, sans-serif; + color: #fdf6ec; + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; + padding: 0 20px; + background: linear-gradient(135deg, #2c1a0f 0%, #4e2e1a 40%, #8b5a2b 70%, #c8a27a 100%); + background-attachment: fixed; + text-align: center; +} + +body::before { + content: ""; + position: fixed; + inset: 0; + background: + radial-gradient(circle at 50% 60%, rgba(255, 240, 200, 0.05), transparent 60%), + radial-gradient(circle at 10% 20%, rgba(255, 220, 160, 0.08), transparent 50%), + radial-gradient(circle at 90% 80%, rgba(180, 90, 30, 0.1), transparent 50%); + z-index: 0; + pointer-events: none; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + max-width: 480px; + width: 100%; + background: rgba(50, 30, 20, 0.8); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 14px; + padding: 32px 24px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); +} + + +h1 { + font-family: "Playfair Display", Georgia, serif; + font-size: 2.4rem; + font-weight: 700; + margin-bottom: 4px; + color: #ffe9c4; +} + +.subtitle { + color: #f4caa1; + font-size: 1rem; + margin-bottom: 22px; +} + + +input[type="text"] { + width: 100%; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 10px; + background: rgba(255, 255, 255, 0.08); + color: #fff6e5; + font-size: 1rem; + margin-bottom: 20px; +} + +input::placeholder { + color: #e7ccb2; +} + +input:focus { + border-color: #e0b97f; + outline: none; +} + +.buttons { + display: flex; + justify-content: center; + gap: 18px; + margin-bottom: 15px; +} + + +button { + background: linear-gradient(180deg, rgba(224, 185, 127, 0.25), rgba(143, 97, 60, 0.18)); + color: #fff8ef; + border: 1px solid rgba(255, 255, 255, 0.25); + padding: 12px 24px; + border-radius: 10px; + font-weight: 600; + cursor: pointer; + transition: background 0.2s ease, transform 0.1s ease; +} + +button:hover { + background: rgba(235, 191, 136, 0.35); +} + +button:active { + transform: translateY(1px); +} + +#random { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.18); +} + +/* output */ +/* chocolate paper note */ +#output { + margin-top: 32px; + font-size: 1.06rem; + line-height: 1.6; + color: #fff2dd; + position: relative; + display: inline-block; + max-width: 42rem; + padding: 12px 18px; + border-radius: 10px; + border: 1px solid rgba(36, 23, 14, 0.6); + + /* layered “paper” style idea from ChatGPT */ + background: + /* subtle fibers */ + repeating-linear-gradient(8deg, + rgba(255, 240, 200, 0.06) 0px, + rgba(255, 240, 200, 0.06) 2px, + rgba(0, 0, 0, 0.0) 3px, + rgba(0, 0, 0, 0.0) 6px), + linear-gradient(180deg, #5a3b26, #6b472f); + box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.08); + opacity: 0; + transform: translateY(6px) scale(0.99); + transition: opacity .25s ease, transform .25s ease; +} + +/* “washi tape” style idea from ChatGPT */ +#output::before { + content: ""; + position: absolute; + top: -10px; + left: 50%; + transform: translateX(-50%) rotate(-2deg); + width: 74px; + height: 16px; + border-radius: 4px; + background: linear-gradient(180deg, #e8c8a5, #d9b791); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); + opacity: 0.95; +} + +#output::after { + content: ""; + position: absolute; + inset: -10px; + border-radius: 14px; + background: radial-gradient(circle at 50% 80%, + rgba(255, 230, 180, 0.15), + transparent 70%); + z-index: -1; + filter: blur(8px); +} + +#output.show { + opacity: 1; + transform: translateY(0) scale(1); + position: relative; +} + + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(5px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + diff --git a/img/advice.png b/img/advice.png new file mode 100644 index 0000000..4784f65 Binary files /dev/null and b/img/advice.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e535021 --- /dev/null +++ b/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + + +
+
+

Here for advice?

+

Take a breath, type a topic, and we’ll pull a little wisdom for you.

+
+ +
+
+ + + +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..4a333fd --- /dev/null +++ b/js/main.js @@ -0,0 +1,68 @@ +// set output variable +const output = document.querySelector('#output'); + +// grab input so we can clear it on Random +const inputEl = document.querySelector('input'); + +// start hidden so it only appears after a result +output.style.display = 'none'; + +// input +document.querySelector('button').addEventListener('click', () => { + const query = document.querySelector('input').value; + if (!query) { + output.textContent = 'Please type a word first.'; + output.style.display = 'inline-block'; + output.classList.add('show'); + return; + } + getAdvice(); +}); + +// create function to get data from database +function getAdvice() { + const query = document.querySelector('input').value; + const url = `https://api.adviceslip.com/advice/search/${query}`; + + fetch(url) + .then(res => res.json()) + .then(data => { + if (data.slips && data.slips[0]) { + output.textContent = data.slips[0].advice; + output.style.display = 'inline-block'; + // retrigger the pop-in + output.classList.remove('show'); + requestAnimationFrame(() => output.classList.add('show')); + } + }) + .catch(err => { + output.textContent = 'Could not fetch advice.'; + output.style.display = 'inline-block'; + console.error(err); + }); +} + +// listen for when random button is clicked +document.querySelector('#random').addEventListener('click', getRandomAdvice); + +// create function for random advice +function getRandomAdvice() { + // NEW: clear the input so it doesn’t look stale + if (inputEl) inputEl.value = ''; + + const randomUrl = "https://api.adviceslip.com/advice"; + fetch(randomUrl) + .then(res => res.json()) + .then(data => { + if (data && data.slip && data.slip.advice) { + output.textContent = data.slip.advice; + output.style.display = 'inline-block'; + output.classList.remove('show'); + requestAnimationFrame(() => output.classList.add('show')); + } + }) + .catch(() => { + output.textContent = 'Could not fetch advice.'; + output.style.display = 'inline-block'; + }); +}