From 0fb614a55191bc9864c6ee211e9a4d40b336654b Mon Sep 17 00:00:00 2001 From: Ronniie Date: Mon, 26 May 2025 20:32:45 -0400 Subject: [PATCH] first commit --- README.md | 20 ++++++++++++++ index.html | 23 ++++++++++++++++ script.js | 31 ++++++++++++++++++++++ styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 152 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..db1f0ab --- /dev/null +++ b/README.md @@ -0,0 +1,20 @@ +# Is My Internet Working? + +A super simple website that tells you if your internet is working. That's it. No fancy stuff. + +## What it does + +- Shows "Yes" by default (because we're optimistic) +- Actually checks your internet connection by pinging Google +- Updates every 5 seconds +- Looks pretty in dark mode +- Has some cool animations + +## How to use + +1. Open `index.html` in your browser +2. That's it. You're done. + +## Why? + +Because sometimes you just need to know if it's your internet or if the website is actually down. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1bd1385 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Is My Internet Working? + + + + + +
+ +

Is My Internet Working?

+ +
+ Yes +
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..aa6c7e8 --- /dev/null +++ b/script.js @@ -0,0 +1,31 @@ +// grab the status element from the DOM +const statusElement = document.getElementById('status'); + +// check if we can actually reach the internet +// using google's favicon as a lightweight ping target +async function checkInternetConnection() { + try { + // try to fetch google's favicon - if this works, we're online + const response = await fetch('https://www.google.com/favicon.ico', { + mode: 'no-cors', // don't care about CORS for this + cache: 'no-cache', // don't cache this request + timeout: 5000 // 5 second timeout + }); + + // we're online! update the UI + statusElement.textContent = 'Yes'; + statusElement.classList.add('online'); + statusElement.classList.remove('offline'); + } catch (error) { + // welp, looks like we're offline + statusElement.textContent = 'No'; + statusElement.classList.add('offline'); + statusElement.classList.remove('online'); + } +} + +// check every 5 seconds +setInterval(checkInternetConnection, 5000); + +// do the first check right away +checkInternetConnection(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4e544fc --- /dev/null +++ b/styles.css @@ -0,0 +1,78 @@ +/* reset some default browser styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* main page styles */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background-color: #0f0f0f; + color: #ffffff; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +/* center everything */ +.container { + text-align: center; + padding: 2rem; +} + +/* make the title look nice and fade in */ +.title { + font-size: 2.5rem; + margin-bottom: 2rem; + opacity: 0; + animation: fadeIn 1s ease forwards; +} + +/* status box styling */ +.status-container { + background-color: #1a1a1a; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; +} + +/* make the status text big and bold */ +.status { + font-size: 4rem; + font-weight: bold; + display: inline-block; + transition: all 0.3s ease; +} + +/* online status is green */ +.status.online { + color: #4CAF50; +} + +/* offline status is red and shakes */ +.status.offline { + color: #f44336; + animation: shake 0.5s ease-in-out; +} + +/* fade in animation for the title */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* shake animation for when we go offline */ +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-10px); } + 75% { transform: translateX(10px); } +} \ No newline at end of file