diff --git a/ClockJS/digitalclock.js b/ClockJS/digitalclock.js new file mode 100644 index 0000000..455a03f --- /dev/null +++ b/ClockJS/digitalclock.js @@ -0,0 +1,18 @@ +// DIGITAL CLOCK PROGRAM + +function updateClock() { + + const now = new Date(); + let hours = now.getHours(); + const meridiem = hours >= 12 ? "PM" : "AM"; + hours = hours % 12 || 12; + hours = hours.toString().padStart(2, 0); + const minutes = now.getMinutes().toString().padStart(2, 0); + const seconds = now.getSeconds().toString().padStart(2, 0); + const timeString = `${hours}:${minutes}:${seconds} ${meridiem}`; + document.getElementById("clock").textContent = timeString; + +} + +updateClock(); +setInterval(updateClock, 1000); diff --git a/ClockJS/index.html b/ClockJS/index.html new file mode 100644 index 0000000..86ee20f --- /dev/null +++ b/ClockJS/index.html @@ -0,0 +1,18 @@ + + + + + + + AFJ Coder + + + + +
+
00:00:00
+
+ + + + diff --git a/ClockJS/style.css b/ClockJS/style.css new file mode 100644 index 0000000..97fcde8 --- /dev/null +++ b/ClockJS/style.css @@ -0,0 +1,27 @@ +body { + background-image: url(images/neon.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + margin: 0; +} + +#clock-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +#clock { + font-family: monospace; + font-size: 6.5rem; + font-weight: bold; + text-align: center; + color: aliceblue; + backdrop-filter: blur(50px); + background-color: hsla(0, 0%, 50%, 0.1); + width: 100%; + text-shadow: 3px 3px 5px hsl(0, 0%, 0%); +} diff --git a/Now O'Clock/App.jsx b/Now O'Clock/App.jsx new file mode 100644 index 0000000..f58ec7e --- /dev/null +++ b/Now O'Clock/App.jsx @@ -0,0 +1,13 @@ +import DigitalClock from "./DigitalClock"; + +function App() { + + return ( + <> + + + ); + +} + +export default App diff --git a/Now O'Clock/DigitalClock.jsx b/Now O'Clock/DigitalClock.jsx new file mode 100644 index 0000000..06b15b4 --- /dev/null +++ b/Now O'Clock/DigitalClock.jsx @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from "react"; + +function DigitalClock() { + + const [time, setTime] = useState(new Date()); + + useEffect(() => { + document.title = `🕒Now O'Clock`; + }); + + + useEffect(() => { + const intervalId = setInterval(() => { + setTime(new Date()); + }, 1000); + + return () => { + clearInterval(intervalId); + } + }, []); + + function formatTime() { + let hours = time.getHours(); + const minutes = time.getMinutes(); + const seconds = time.getSeconds(); + const meridiem = hours >= 12 ? "PM" : "AM"; + + hours = hours % 12 || 12; + + return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)} ${meridiem}` + } + + function padZero(number) { + return (number < 10 ? "0" : "") + number; + } + + return ( +
+

🕒NOW O'CLOCK🕒

+
+ {formatTime()} +
+
+ ); + +} + +export default DigitalClock; diff --git a/Now O'Clock/NowO'Clock.mp4 b/Now O'Clock/NowO'Clock.mp4 new file mode 100644 index 0000000..a11beca Binary files /dev/null and b/Now O'Clock/NowO'Clock.mp4 differ diff --git a/Now O'Clock/NowO'Clock.png b/Now O'Clock/NowO'Clock.png new file mode 100644 index 0000000..5aa9b66 Binary files /dev/null and b/Now O'Clock/NowO'Clock.png differ diff --git a/Now O'Clock/index.css b/Now O'Clock/index.css new file mode 100644 index 0000000..9df0e12 --- /dev/null +++ b/Now O'Clock/index.css @@ -0,0 +1,33 @@ +body { + background-image: url(assets/neonback.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + margin: 0; + + /*OPTIONAL*/ + display: flex; + justify-content: center; + min-height: 100vh; + align-items: center; +} + +.title { + color: aquamarine; + text-align: center; +} + +.clock-container { + backdrop-filter: blur(5px); + padding: 10px 0; +} + +.clock { + color: silver; + font-size: 6rem; + font-weight: bold; + font-family: monospace; + text-align: center; + text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.75); +} diff --git a/Now O'Clock/index.html b/Now O'Clock/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/Now O'Clock/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/Now O'Clock/main.jsx b/Now O'Clock/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/Now O'Clock/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/Now O'Clock/neonback.jpg b/Now O'Clock/neonback.jpg new file mode 100644 index 0000000..9b63fbd Binary files /dev/null and b/Now O'Clock/neonback.jpg differ diff --git a/timer/Stopwatch.py b/Stopwatches/stopwatchPython/stopwatch.py similarity index 100% rename from timer/Stopwatch.py rename to Stopwatches/stopwatchPython/stopwatch.py diff --git a/Stopwatches/stopwatchReact/App.jsx b/Stopwatches/stopwatchReact/App.jsx new file mode 100644 index 0000000..e97c47e --- /dev/null +++ b/Stopwatches/stopwatchReact/App.jsx @@ -0,0 +1,14 @@ +import StopWatch from "./StopWatch"; + +function App() { + + return ( + <> + + + + ); + +} + +export default App diff --git a/Stopwatches/stopwatchReact/Stopwatch.jsx b/Stopwatches/stopwatchReact/Stopwatch.jsx new file mode 100644 index 0000000..7737fde --- /dev/null +++ b/Stopwatches/stopwatchReact/Stopwatch.jsx @@ -0,0 +1,71 @@ +import React, { useState, useEffect, useRef } from "react"; + +function StopWatch() { + + const [isRunning, setIsRunning] = useState(false); + const [elapsedTime, setElapsedTime] = useState(0); + const intervalIdRef = useRef(null); + const startTimeRef = useRef(0); + + useEffect(() => { + document.title = `⏱️Stopwatch Counter`; + }); + + useEffect(() => { + + if (isRunning) { + intervalIdRef.current = setInterval(() => { + setElapsedTime(Date.now() - startTimeRef.current); + }, 10); + } + + return () => { + clearInterval(intervalIdRef.current); + } + + }, [isRunning]); + + function start() { + setIsRunning(true); + startTimeRef.current = Date.now() - elapsedTime; + } + + function stop() { + setIsRunning(false); + } + + function reset() { + setElapsedTime(0); + setIsRunning(false); + } + + function formatTime() { + let hours = Math.floor(elapsedTime / (1000 * 60 * 60)); + let minutes = Math.floor(elapsedTime / (1000 * 60) % 60); + let seconds = Math.floor(elapsedTime / (1000) % 60); + let milliseconds = Math.floor((elapsedTime % 1000) / 10); + + hours = String(hours).padStart(2, "0"); + minutes = String(minutes).padStart(2, "0"); + seconds = String(seconds).padStart(2, "0"); + milliseconds = String(milliseconds).padStart(2, "0"); + + + return `${hours}:${minutes}:${seconds}.${milliseconds}`; + } + + return ( +
+

⏱️STOPWATCH⏱️

+
{formatTime()}
+
+ + + +
+
+ ); + +} + +export default StopWatch; diff --git a/Stopwatches/stopwatchReact/Stopwatch.mp4 b/Stopwatches/stopwatchReact/Stopwatch.mp4 new file mode 100644 index 0000000..d3f5a12 --- /dev/null +++ b/Stopwatches/stopwatchReact/Stopwatch.mp4 @@ -0,0 +1 @@ + diff --git a/Stopwatches/stopwatchReact/index.css b/Stopwatches/stopwatchReact/index.css new file mode 100644 index 0000000..7ad66c3 --- /dev/null +++ b/Stopwatches/stopwatchReact/index.css @@ -0,0 +1,68 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: beige; +} + +.title { + font-size: 2rem; + color: hsl(180, 72%, 33%); + font-weight: bold; +} + +.stopwatch { + display: flex; + flex-direction: column; + align-items: center; + border: 5px solid; + border-radius: 50px; + background-color: floralwhite; + padding: 30px; +} + +.display { + font-size: 5rem; + font-family: monospace; + font-weight: bold; + color: hsl(0, 0%, 30%); + text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75); + margin-bottom: 25px; +} + +.controls button { + font-size: 1.5rem; + font-weight: bold; + padding: 10px 20px; + margin: 5px; + min-width: 125px; + border: none; + border-radius: 10px; + cursor: pointer; + color: white; + transition: background-color 0.5s ease; +} + +.start-button { + background-color: hsl(120, 54%, 49%); +} + +.start-button:hover { + background-color: hsl(120, 54%, 44%); +} + +.stop-button { + background-color: hsl(0, 75%, 50%); +} + +.stop-button:hover { + background-color: hsl(0, 75%, 45%); +} + +.reset-button { + background-color: hsl(196, 86%, 53%); +} + +.reset-button:hover { + background-color: hsl(196, 86%, 48%); +} diff --git a/Stopwatches/stopwatchReact/index.html b/Stopwatches/stopwatchReact/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/Stopwatches/stopwatchReact/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/Stopwatches/stopwatchReact/main.jsx b/Stopwatches/stopwatchReact/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/Stopwatches/stopwatchReact/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/Stopwatches/stopwatchjs/index.html b/Stopwatches/stopwatchjs/index.html new file mode 100644 index 0000000..3a38115 --- /dev/null +++ b/Stopwatches/stopwatchjs/index.html @@ -0,0 +1,27 @@ + + + + + + + AFJ Coder + + + +

⏱️Stopwatch⏱️

+ +
+
+ 00:00:00:00 +
+ +
+ + + +
+
+ + + + diff --git a/Stopwatches/stopwatchjs/stopwatch.js b/Stopwatches/stopwatchjs/stopwatch.js new file mode 100644 index 0000000..4012310 --- /dev/null +++ b/Stopwatches/stopwatchjs/stopwatch.js @@ -0,0 +1,55 @@ +// STOPWATCH PROGRAM + +const display = document.getElementById("display"); +let timer = null; +let startTime = 0; +let elapsedTime = 0; +let isRunning = false; + +function start() { + + if (!isRunning) { + startTime = Date.now() - elapsedTime; + timer = setInterval(update, 10); + isRunning = true; + } + +} + +function stop() { + + if (isRunning) { + clearInterval(timer); + elapsedTime = Date.now() - startTime; + isRunning = false; + } + +} + +function reset() { + clearInterval(timer); + startTime = 0; + elapsedTime = 0; + isRunning = false; + + display.textContent = "00:00:00:00"; +} + +function update() { + + const currentTime = Date.now(); + elapsedTime = currentTime - startTime; + + let hours = Math.floor(elapsedTime / (1000 * 60 * 60)); + let minutes = Math.floor(elapsedTime / (1000 * 60) % 60); + let seconds = Math.floor(elapsedTime / 1000 % 60); + let milliseconds = Math.floor(elapsedTime % 1000 / 10); + + hours = String(hours).padStart(2, 0); + minutes = String(minutes).padStart(2, 0); + seconds = String(seconds).padStart(2, 0); + milliseconds = String(milliseconds).padStart(2, 0); + + display.textContent = `${hours}:${minutes}:${seconds}:${milliseconds}`; + +} diff --git a/Stopwatches/stopwatchjs/style.css b/Stopwatches/stopwatchjs/style.css new file mode 100644 index 0000000..36b9385 --- /dev/null +++ b/Stopwatches/stopwatchjs/style.css @@ -0,0 +1,69 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + background-color: hsl(0, 0%, 90%); +} + +#myH1 { + font-size: 4rem; + font-family: Arial, Helvetica, sans-serif; + color: firebrick; + text-shadow: 2px 2px 2px darkred; +} + +#container { + display: flex; + flex-direction: column; + align-items: center; + padding: 30px; + border: 5px solid; + border-radius: 50px; + background-color: whitesmoke; +} + +#display { + font-size: 5rem; + font-family: monospace; + font-weight: bold; + color: darkslategrey; + text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75); + margin-bottom: 25px; +} + +#controls button { + font-size: 1.5rem; + font-weight: bold; + padding: 10px 20px; + margin: 5px; + min-width: 125px; + border: none; + border-radius: 10px; + cursor: pointer; + color: white; + transition: background-color 0.5s ease; +} + +#startBtn { + background-color: hsl(120, 95%, 50%); +} + +#startBtn:hover { + background-color: hsl(120, 93%, 40%); +} + +#stopBtn { + background-color: hsl(0, 92%, 50%); +} + +#stopBtn:hover { + background-color: hsl(0, 97%, 40%); +} + +#resetBtn { + background-color: hsl(203, 83%, 50%); +} + +#resetBtn:hover { + background-color: hsl(203, 78%, 40%); +} diff --git a/javaaudio/AudioPlayer.java b/javaaudio/AudioPlayer.java new file mode 100644 index 0000000..e9072f7 --- /dev/null +++ b/javaaudio/AudioPlayer.java @@ -0,0 +1,67 @@ +// Import necessary libraries +import javax.sound.sampled.*; +import java.io.File; +import java.io.FileNotFoundException; +import java.io.IOException; +import java.util.Scanner; + +public class AudioPlayer { + public static void main(String[] args){ + + // Play audio with Java (.wav, .au, .aiff) + System.out.println("🎵🎼🎵🎼🎵🎼🎵🎼"); + System.out.println("AFJ AUDIO PLAYER"); + System.out.println("🎵🎼🎵🎼🎵🎼🎵🎼"); + + // The file to be used + String filePath = "AFJJavaProject\\src\\City of the Wolf - The Mini Vandals (1).wav"; // Put your file path here + File file = new File(filePath); + + // Play audio + try(Scanner scanner = new Scanner(System.in); + AudioInputStream audioInputStream = AudioSystem.getAudioInputStream(file)){ + Clip clip = AudioSystem.getClip(); + clip.open(audioInputStream); + + String response = ""; + + // Play, pause and reset the audio until the user hits "Q" + while(!response.equals("Q")){ + System.out.println("P = Play"); + System.out.println("S = Stop"); + System.out.println("R = Reset"); + System.out.println("Q = Quit"); + + System.out.print("Enter your choice: "); + response = scanner.next().toUpperCase(); + + switch(response){ + case "P" -> clip.start(); + case "S" -> clip.stop(); + case "R" -> clip.setMicrosecondPosition(0); + case "Q" -> clip.close(); + default -> System.out.println("Invalid choice!"); + } + } + } + // Exceptions in case of any kind of failures + catch (FileNotFoundException e){ + System.out.println("Could not locate the file!"); + } + catch (LineUnavailableException e){ + System.out.println("Unable to access audio resource!"); + } + catch (UnsupportedAudioFileException e){ + System.out.println("Audio file not supported!"); + } + catch (IOException e){ + System.out.println("Something went wrong!"); + } + finally { + System.out.println("🎵🎼🎵🎼🎵🎼🎵🎼"); + System.out.println("Bye! Have a musical day!"); + System.out.println("🎵🎼🎵🎼🎵🎼🎵🎼"); + } + + } +} diff --git a/javaaudio/City of the Wolf - The Mini Vandals (1).wav b/javaaudio/City of the Wolf - The Mini Vandals (1).wav new file mode 100644 index 0000000..7421fed Binary files /dev/null and b/javaaudio/City of the Wolf - The Mini Vandals (1).wav differ diff --git a/weatherJS/WeatherApp.mp4 b/weatherJS/WeatherApp.mp4 new file mode 100644 index 0000000..9a34393 Binary files /dev/null and b/weatherJS/WeatherApp.mp4 differ diff --git a/weatherJS/WeatherApp.png b/weatherJS/WeatherApp.png new file mode 100644 index 0000000..6ece83d Binary files /dev/null and b/weatherJS/WeatherApp.png differ diff --git a/weatherJS/index.html b/weatherJS/index.html new file mode 100644 index 0000000..67bc7ed --- /dev/null +++ b/weatherJS/index.html @@ -0,0 +1,27 @@ + + + + + + + + AFJ Coder + + + + + +

⛅JAVASCRIPT WEATHER APPLICATION⛅

+ +
+ + +
+ + + + + + + diff --git a/weatherJS/style.css b/weatherJS/style.css new file mode 100644 index 0000000..9b3cfaf --- /dev/null +++ b/weatherJS/style.css @@ -0,0 +1,89 @@ +body { + font-family: 'Segoe UI', Tahoma, Verdana, sans-serif; + background-color: hsla(0, 0%, 4%, 0.808); + margin: 0; + display: flex; + flex-direction: column; + align-items: center; +} + +.weatherForm { + margin: 20px; +} + +.cityInput { + padding: 10px; + font-size: 2rem; + font-weight: bold; + border: 2px solid hsl(0, 0%, 20%, 0.3); + border-radius: 10px; + margin: 10px; + width: 300px; +} + +button[type="submit"] { + padding: 10px 20px; + font-weight: bold; + font-size: 2rem; + background-color: hsl(122, 40%, 50%); + color: azure; + border: none; + border-radius: 10px; + cursor: pointer; +} + +button:hover { + background-color: hsl(122, 40%, 40%); +} + +.card { + background: linear-gradient(180deg, hsl(210, 100%, 75%), hsl(40, 100%, 75%)); + padding: 50px; + border-radius: 10px; + box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.5); + min-width: 300px; + display: flex; + flex-direction: column; + align-items: center; +} + +h1 { + color: goldenrod; + margin-top: 0; + margin-bottom: 25px; +} + +p { + font-size: 1.5rem; + margin: 5px 0; +} + +.cityDisplay, +.tempDisplay { + font-size: 3.5rem; + font-weight: bold; + color: hsla(0, 0%, 0%, 0.75); + margin-bottom: 25px; +} + +.humidityDisplay { + font-weight: bold; + margin-bottom: 25px; +} + +.descDisplay { + font-style: italic; + font-weight: bold; + font-size: 2rem; +} + +.weatherEmoji { + margin: 0; + font-size: 5.5rem; +} + +.errorDisplay { + font-size: 2.5rem; + font-weight: bold; + color: hsl(0, 69%, 50%); +} diff --git a/weatherJS/weatherapp.js b/weatherJS/weatherapp.js new file mode 100644 index 0000000..1c47fe8 --- /dev/null +++ b/weatherJS/weatherapp.js @@ -0,0 +1,108 @@ +// WEATHER APP + +const weatherForm = document.querySelector(".weatherForm"); +const cityInput = document.querySelector(".cityInput"); +const card = document.querySelector(".card"); +const apiKey = "YOUR API KEY"; + +weatherForm.addEventListener("submit", async event => { + + event.preventDefault(); + + const city = cityInput.value; + + if (city) { + try { + const weatherData = await getWeatherData(city); + displayWeatherInfo(weatherData); + } + catch (error) { + console.error(error); + displayError(error); + } + } + else { + displayError("Please enter a city"); + } + +}); + +async function getWeatherData(city) { + + const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`; + + const response = await fetch(apiUrl); + + if (!response.ok) { + throw new Error("Unable to fetch weather data!"); + } + + return await response.json(); +} + +function displayWeatherInfo(data) { + + const { name: city, + main: { temp, humidity }, + weather: [{ description, id }] } = data; + + card.textContent = ""; + card.style.display = "flex"; + + const cityDisplay = document.createElement("h1"); + const tempDisplay = document.createElement("p"); + const humidityDisplay = document.createElement("p"); + const descDisplay = document.createElement("p"); + const weatherEmoji = document.createElement("p"); + + cityDisplay.textContent = city; + tempDisplay.textContent = `${(temp - 273.15).toFixed(1)}°C`; + humidityDisplay.textContent = `Humidity: ${humidity}%`; + descDisplay.textContent = description; + weatherEmoji.textContent = getWeatherEmoji(id); + + cityDisplay.classList.add("cityDisplay"); + tempDisplay.classList.add("tempDisplay"); + humidityDisplay.classList.add("humidityDisplay"); + descDisplay.classList.add("descDisplay"); + weatherEmoji.classList.add("weatherEmoji"); + + card.appendChild(cityDisplay); + card.appendChild(tempDisplay); + card.appendChild(humidityDisplay); + card.appendChild(descDisplay); + card.appendChild(weatherEmoji); +} + +function getWeatherEmoji(weatherId) { + + switch (true) { + case (weatherId >= 200 && weatherId < 300): + return "⛈️"; + case (weatherId >= 300 && weatherId < 400): + return "🌧️"; + case (weatherId >= 500 && weatherId < 600): + return "🌧️"; + case (weatherId >= 600 && weatherId < 700): + return "❄️"; + case (weatherId >= 700 && weatherId < 800): + return "🌫️"; + case (weatherId === 800): + return "☀️"; + case (weatherId >= 801 && weatherId < 810): + return "☁️"; + default: + return "❓"; + } +} + +function displayError(message) { + + const errorDisplay = document.createElement("p"); + errorDisplay.textContent = message; + errorDisplay.classList.add("errorDisplay"); + + card.textContent = ""; + card.style.display = "flex"; + card.appendChild(errorDisplay); +}