UNCAFFEINATED - Low Stress News

App Title

“UNCAFFEINATED - Low Stress News”

• Added required “Title (H1) + short descriptor” to the top of README.md

Authorship & Attribution

Website Development and Photography by Aiden (A.J.) Ramsden

Resources

• W3Schools HTML, CSS, Javascript, and Javascript JSON tutorials
• WebAIM https://webaim.org/resources/contrastchecker/
• Google Fonts - Getting Started
• web.dev
  • Resource Hints
  • Optimize Resource Loading
  • Optimize Web Fonts

Inspirations

• Wordpress Uncaffeinated News site
  • Used inspiration from Wordpress layouts and user interfaces.
• Professor Barry Cumbie, Computer Information Systems, University of North Alabama
  • Used code shared by Professor Cumbie on his website or in class.

Libraries & Frameworks

• Bootstrap 5.3.0: a frontend toolkit for building fast, responsive websites.
  • Used Bootstrap to set up the news grid system, navigation bar, and UI components.

Assets

• Logos, banners, and articles from my Uncaffeinated Wordpress and YouTube social media sites.
• News data - a structured data file with content used to create dynamic news cards & grids.
• Google Fonts
• Google APIs and Gstatic: used to find fonts and speed them up on my website.
• Roboto font

One-liner Quote/Tagline

“Low-stress news about Northern Alabama and UNA student life.”

User Story

“I want to showcase my UNA media projects and campus stories in a digital portfolio to demonstrate my skills and abilities to potential employers.”

GitHub Links

• Repo: https://github.com/ajuna345/uncaffeinated-website
• Deployed App: https://ajuna345.github.io/uncaffeinated-website/
• Wiki: https://github.com/ajuna345/uncaffeinated-website/wiki/Design-Ideas

Model/Inspiration

• UNCAFFEINATED Wordpress News Posts
  • This site inspired my news grids, cards, and layout for this project.
  • I used my portfolio photos for news stories and improved the CIS-376 news site by adding a search bar and changing the layout.

Code block + explanation (“news-search.js”)

This code waits for a user to type in the search bar, then it finds every news card that was just built from your data file. It changes text to lowercase to improve matching, then checks the title and story text of each card to see if they match. If a card doesn't have the words you're looking for, the script set the item display to ‘none’ and hides it so users only see matching items.

// search for matching news items
if (searchInput) {
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();

        // Search items on the page again and turn off the display for ones that don't match
        const newsItems = document.querySelectorAll('.news-item');

        newsItems.forEach(item => {
            const title = item.querySelector('.card-title').textContent.toLowerCase();
            const text = item.querySelector('.card-text').textContent.toLowerCase();

            if (title.includes(searchTerm) || text.includes(searchTerm)) {
                item.style.display = '';
            } else {
                item.style.display = 'none';
            }
        });
    });
}
})

Architecture / Infrastructure Notes

• The UNCAFFEINATED news application uses Bootstrap to handle the news grid, button styling, and search bars, which helps the site work on both desktop and mobile browsers.
• My application uses:
  • A dynamic approach to show news grids and cards.
    • Instead of adding every news story directly as HTML, it reads the articles from a JSON data asset file.
  • The JavaScript fetch method to get stories from an internal file (news-data.json).
    • Once the data is read, the JavaScript code creates HTML cards and adds them to the news grid.
    • This makes the site much easier to update in the future because I only have to add articles to the JSON data file.
  • The Bootstrap Modal on the main page for user login.
    • Once users enter the correct password, it stores the "logged-in" state in temporary session storage.
    • This remembers the user during the session but wipes data for better security when the page is closed or the user logs out.

Verification

Browser Compatibility

I tested the functionality and layout of the UNcaffeinated News application on these browsers:

• Desktop
  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
• Mobile
  • Chrome (Android)
  • Safari (iOS)

Android Phone Screenshots