greetings-based-on-time-js-tailwind Tailwind Templates

Greetings Based On Time Js Tailwind

This project features an interactive webpage that updates greetings, background color, and images based on user input (day, afternoon, or night) using JavaScript and Tailwind CSS. It showcases conditional logic and DOM manipulation for dynamic user interaction.

Hi there! I'm Andrea Guarneri πŸ‘‹

Welcome to my GitHub! I'm passionate about front-end development and am currently focused on honing my skills in JavaScript through hands-on projects and exercises. Here, you’ll find a showcase of my journey in coding, problem-solving, and experimenting with HTML, CSS, and Tailwind CSS.

πŸ’» What I’m Currently Working On

I’m building a solid foundation in JavaScript by working on real-world solutions and adopting a professional approach to code. Below is one of the key projects I’m actively working on:

πŸŒ‡ Time-Based Greetings with JavaScript & Tailwind CSS 🌞🌜

This project offers dynamic greetings based on the time of day. Users input the time of day ("day", "afternoon", or "night"), and the page responds by changing its background color, displaying a matching image, and showing a relevant greeting messageβ€”all powered by JavaScript and Tailwind CSS.

🌐 Live Demo

You can view this app live on Netlify: Greetings Based on Time

🌟 Key Features

  • User Prompt: The page prompts users to specify the time of day (day, afternoon, night) via prompt().
  • Dynamic Page Update: Background color, image, and greeting text update based on the user’s input.
  • Error Handling: If the user provides an invalid input, an error message and fallback image are displayed.
  • Tailwind CSS Integration: The project leverages Tailwind CSS to create a clean, responsive design using utility-first classes.
  • DOM Manipulation: Backgrounds and images are changed dynamically based on the time of day.
  • Responsive Design: The layout adjusts seamlessly across different screen sizes.

πŸ› οΈ Technologies and Skills

  • JavaScript (ES6+): Writing modular, clean code while practicing key concepts.
  • HTML5 & CSS3: Building structured, accessible, and responsive user interfaces.
  • Tailwind CSS: Utilizing utility-first CSS for efficient and rapid UI development.
  • DOM Manipulation: Dynamically altering page elements and styles based on user interactions.
  • Error Handling: Implementing user-friendly error messages and fallback designs.

Feel free to clone, explore, and provide feedback on any of my projects! Each one represents a step in my journey to becoming a skilled front-end developer.

πŸ“« Get in Touch

You can reach me on LinkedIn or follow my progress right here on GitHub as I continue working on exciting new projects!

Top categories

Loading Svelte Themes