https://github.com/jobadsayas/dashtodd

A dashboard for my toddler to know time, date, weather in a simple way
https://github.com/jobadsayas/dashtodd

javascript responsive-web-design tailwind-css

Last synced: about 2 months ago
JSON representation

A dashboard for my toddler to know time, date, weather in a simple way

• Host: GitHub
• URL: https://github.com/jobadsayas/dashtodd
• Owner: JobadSayas
• Created: 2024-09-25T06:31:55.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-24T04:18:32.000Z (3 months ago)
• Last Synced: 2024-10-24T18:56:01.056Z (3 months ago)
• Topics: javascript, responsive-web-design, tailwind-css
• Language: JavaScript
• Homepage: https://dashtodd.visssible.com/
• Size: 7.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DashTodd - Time/Weather Dashboard for Toddlers

## Description

DashTodd is a web app I developed to help my curious toddler with understanding the time, weather, and calendar. My child used to ask endless questions like "Is it cold outside?", "Can I go out and play?", "How much longer until nap time?", "What day is it?", "What are we going to do today?". These questions sparked the idea for DashTodd, which not only answers these questions but also helps my child follow a routine.

I've set it up on an old phone mounted inside a frame to resemble a dashboard, hanging on the wall. The app runs continuously, updating in real-time, just like a clock. It has been a game-changer in helping my child grasp concepts of time, weather, and daily structure.

## Features

- **Dynamic Clock and Visuals**:

  - Displays the current time in a 12-hour format, updating every second.

  - Adjusts the background and associated visuals to reflect the position of the sun based on the time of day (morning, afternoon, evening, night).

- **Traffic Light**:

  - Changes colors based on specific time ranges during the day to communicate time to play (green), time to prepare (yellow), time to sleep (red).

- **Real-Time Temperature Display**:

  - Fetches and displays the real-time temperature from API, updates every 30 minutes and moves a thermometer slider according to the temperature.

- **Weekly Calendar**:

  - Automatically updates and highlights the current day of the week.

- **Night Mode**:

  - A "curtain" effect is shown during night hours (10:00 PM - 6:00 AM) to simulate screen off.

## Technologies Used

- HTML

- Tailwind.css

- Vanilla JavaScript

## Weather API Used

Visual Crossing Web Services

## Screenshots