diff --git a/README.md b/README.md index d8e5dea..c15f7cc 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ In order to run this project you need:
  • Open the index.html file in your preferred web browser.
    • -

    Feel free to explore, modify, and experiment with the code to better understand how these animations and transitions are achieved.

    +

    Feel free to explore, modify, and experiment with the code to better understand.

    (back to top)

    @@ -166,6 +166,435 @@ In order to run this project you need: +
  • +
    +Choice Picker +

    A cutting-edge web application leveraging HTML, CSS, and JavaScript technologies to facilitate user selection from a customizable range of options. The application features an intuitive interface with a text input field, where users can enter their preferred choices. Upon submission, the system randomly cycles through the entered options and lands on a selected choice, which is prominently highlighted with a distinct color scheme, distinguishing it from the other options.

    + +
    +
    • + +
  • +
    +Word Counter +

    Word Counter App is a simple and efficient tool built using HTML, CSS, and JavaScript. This application provides users with an easy way to count words, characters, sentences, and paragraphs in a given text. Additionally, it offers features such as readability score and estimated reading time.

    + +
    +
    • + +
  • +
    +Weight Converter +

    Weight Converter is a simple and efficient tool built using HTML, CSS, and JavaScript. The Weight Converter project is a beginner-friendly web development project designed to help users convert weight measurements seamlessly. Users can input a weight in kilograms and instantly see conversions to grams, pounds, and ounces.

    + +
    +
    • + +
  • +
    +Random Color Generator +

    Random Color Generator is a user-friendly tool built using HTML, CSS, and JavaScript. The Random Color Generator project is a beginner-friendly web development project designed to help users generate random colors effortlessly. Users can click a button to instantly see randomly generated colors.

    + +
    +
    • + +
  • +
    +Age Calculator +

    Age Calculator is a user-friendly tool built using HTML, CSS, and JavaScript. The Age Calculator project is a beginner-friendly web development project designed to help users calculate their age effortlessly. Users can input their date of birth and instantly see their age in years.

    + +
    +
    • + +
  • +
    +BMI Calculator +

    The BMI Calculator is a simple web application built using HTML, CSS, and JavaScript. It allows users to easily calculate their Body Mass Index (BMI) by entering their height and weight. The application then computes the BMI and displays the result, helping users understand their body mass relative to their height and weight. This project is beginner-friendly and provides a practical example of using basic web development skills to create a functional tool.

    + +
    +
    • + +
  • +
    +Gradient Background Generator +

    The Gradient Background Generator is a user-friendly tool built using HTML, CSS, and JavaScript. This project allows users to create beautiful gradient backgrounds effortlessly. Users can select two colors to generate a gradient background and see the corresponding CSS code, which they can easily copy and use in their own projects. The tool is designed to be beginner-friendly, making it an excellent project for those new to web development.

    + +
    +
    • + +
  • +
    +Calculator +

    Calculator is a straightforward and user-friendly tool developed using HTML, CSS, and JavaScript. This beginner-friendly web development project is designed to help users perform basic arithmetic operations such as addition, subtraction, multiplication, and division seamlessly. Users can input numbers and choose an operator to instantly see the calculated result. The calculator also includes functionalities for clearing the input and handling decimal numbers.

    + +
    +
    • + +
  • +
    +Analog Watch +

    Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.

    + +
    +
    • + +
  • +
    +FAQ Application +

    The FAQ Application is a responsive web-based tool designed to provide users with quick and easy access to frequently asked questions and their answers. Built with HTML, CSS, and JavaScript, this project showcases a clean and intuitive interface that allows users to expand and collapse answers with a simple click.

    + +
    +
    • + +
  • +
    +Countdown Timer +

    The Countdown Timer is an intuitive and visually appealing tool built using HTML, CSS, and JavaScript. This project allows users to set a countdown to a specific event or deadline, providing a real-time display of the remaining days, hours, minutes, and seconds. It's a great project for beginners to practice and enhance their web development skills.

    + +
    +
    • + +
  • +
    +Image Filter +

    The Image Filter Web Application allows users to upload and edit images by applying various filters (brightness, contrast, saturation, and vibrance) and effects (vintage, lomo, clarity, etc.). Users can preview changes on a canvas, download the edited image, or revert to the original. This application is built using HTML, CSS, and vanilla JavaScript.

    + +
    +
    • + +
  • +
    +Day Predictor +

    A Simple Week Day Predictor App written in HTML, CSS, and JavaScript. This app displays the current day of the week along with a corresponding motivational quote, using local computer time.

    + +
    +
    • + +
  • +
    +Github Profile Finder +

    The GitHub User Info Finder is a web application designed to fetch and display detailed information about GitHub users. By simply entering a GitHub username, users can retrieve profile information including the avatar, name, bio, number of public repositories, followers, and following count. This project leverages the GitHub API to provide real-time data, and it is built using HTML, CSS, and JavaScript for a seamless user experience.

    + +
    +
    • + +
  • +
    +Battery Indicator +

    This project is a simple web application that dynamically displays the battery level of the user's device and includes a dark mode toggle feature. The battery level is visually represented as a progress bar and also shown as a percentage. The application leverages the Battery Status API to fetch the battery information and updates the display in real-time. Additionally, the user can switch between light and dark modes by clicking a toggle button, enhancing the user interface's customization options.

    + +
    +
    • + +
  • +
    +Stop Watch +

    This project is a simple and interactive stopwatch application created using HTML, CSS, and JavaScript. The stopwatch can be started, stopped, and reset, allowing users to measure elapsed time accurately. It displays minutes, seconds, and milliseconds, providing a clear and precise time tracking interface. The application is styled with CSS for a clean and modern look, and it is fully responsive, ensuring usability across different devices.

    + +
    +
    • + +
  • +
    +Dinosaur Game +

    This project is a simple, interactive "Dinosaur Game" built using HTML, CSS, and JavaScript. Inspired by the classic offline game in Google Chrome, the player controls a dinosaur character that must jump over moving obstacles (cacti) to avoid collision. The game features basic animations and a scoring system, providing an engaging experience. The project demonstrates fundamental concepts of web development, including DOM manipulation, event handling, and CSS animations.

    + +
    +
    • + +
  • +
    +Jump Game +

    This project is a simple browser-based "Jump Game" where players control a character that must jump over blocks to avoid collisions. It demonstrates the use of HTML, CSS, and JavaScript to create an interactive game with basic animations and collision detection. The player uses the spacebar to jump and scores points based on survival time. The game includes two types of moving obstacles, adding a layer of challenge.

    + +
    +
    • + +
  • +
    +Memory Card Game +

    The Memory Card Game is a classic card-matching game designed to enhance cognitive skills and memory. Players are presented with a grid of face-down cards. The goal is to find and match all pairs of cards. This project demonstrates fundamental web development skills using HTML, CSS, and JavaScript.

    + +
    +
    • + +
  • +
    +TO DO LIST +

    This project is a simple web-based To-Do List application that allows users to add tasks, categorize them, and filter tasks by category. The application is built using HTML, CSS, and JavaScript, with JavaScript modules to separate concerns and improve maintainability.

    + +
    +
    • + +
  • +
    +Password Generator +

    The Password Generator App is a web application that allows users to create secure, customizable passwords based on user-defined criteria such as length and character types. It offers a simple interface for generating and copying passwords to the clipboard. This tool enhances online security by providing strong, random passwords.

    + +
    +
    • + +
  • +
    +Notes Keeper +

    The Notes Keeper App is a web-based application designed for creating, storing, and managing personal notes. It offers a simple and intuitive interface for adding, searching, and deleting notes using local storage, ensuring data persistence across sessions.

    + +
    +
    • + +
  • +
    +Currency Converter +

    This project is a Currency Converter application built using HTML, CSS, and JavaScript. It allows users to convert one currency into another by inputting an amount and selecting the currencies they want to convert from and to.

    + +
    +
    • + +
  • +
    +Just Relax +

    The Just Relax App is a breathing exercise web application built with HTML, CSS, and JavaScript (ES6+). It guides users through a breathing exercise by animating visual cues and displaying text prompts such as "Breathe In," "Hold," and "Breathe Out." This helps users relax and practice mindfulness.

    + +
    +
    • + +
  • +
    +Recipe App +

    The Recipe App is designed to make cooking enjoyable and easy for everyone, from beginners to seasoned chefs. Discover a wide range of recipes, create your own, and share them with the community. With an intuitive interface and smart features, it helps you explore new dishes, organize your favorite recipes, and plan meals for any occasion.

    + +
    +
    • + +
  • +
    +Music Player +

    A simple, user-friendly Music Player built using HTML, CSS, and JavaScript. This app allows users to upload and manage their favorite songs dynamically, creating a personalized playlist.

    + +
    +
    • + +
  • +
    +Quiz App +

    A simple quiz app built using HTML, CSS, and JavaScript. The app presents multiple-choice questions, and the user can select answers to test their knowledge. At the end of the quiz, the user's score is displayed along with an option to restart the quiz.

    + +
    +
    • + +
  • +
    +Meme Generator +

    A fun and interactive Meme Generator app built using HTML, CSS, and JavaScript. This app fetches random memes from an API and displays them for the user to enjoy. It also provides options for users to download the meme or share it on social media.

    + +
    +
    • + +
  • +
    +Typing Speed Test +

    The Typing Speed Test app is a simple web-based tool that allows users to test and improve their typing speed. The app displays a random sentence, and the user is asked to type it as quickly and accurately as possible. It calculates the typing speed in words per minute (WPM) and measures the accuracy based on the user's input.

    + +
    +
    • + +
  • +
    +Movie Search App +

    The Movie Search App is a simple and responsive web application that allows users to search for movies and view their details. It utilizes a public API like OMDB to fetch and display movie information, including the title, year of release, and poster.

    + +
    +
    • + +
  • +
    +Pomodoro Timer +

    The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.

    + +
    +
    • + +
  • +
    +E-Commerce Website +

    This is a simple e-commerce product page built using **HTML**, **CSS**, and **JavaScript**. It displays a list of products fetched from a public API and allows users to add products to their cart. The page features a cart modal where users can view the products they have added, including quantity and total price.

    + +
    +
    • + +
  • +
    +Language Translator +

    The Language Translator App is a simple and user-friendly web application that allows users to translate text between various languages. It uses the MyMemory Translation API to fetch translations.

    + +
    +
    • + +
  • +
    +Food Ordering App +

    The Food Order App is a simple web application that allows users to order food items from a menu. Users can view the available items, add them to their cart, and see the total price. The app also enables users to place an order, and upon successful placement, the cart is cleared.

    + +
    +
    • + +
  • +
    +Tic Tac Toe App +

    This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to alternate turns and try to win by getting three of their symbols (X or O) in a row, either horizontally, vertically, or diagonally. The game will automatically check for a winner or draw after each move, and players can restart the game at any time.

    + +
    +
    • + +
  • +
    +Simple Chat App +

    This is a simple chat application that simulates a conversation where the app echoes the user's messages as a response. Messages are stored in the browser's local storage, so they persist even after the page is refreshed.

    + +
    +
    • + +
  • +
    +Interactive Polling App +

    This is an interactive polling app that allows users to vote on a specific question. Users can vote for their preferred options and view the results in real-time. The app tracks the votes for each option and stores them in the local storage so the votes persist even after the page is refreshed.

    + +
    +
    • + +
  • +
    +Drag and Drop App +

    This is a simple drag-and-drop app where users can move items from one list to another. It's a basic implementation of a task manager or an image gallery where users can organize their items by dragging and dropping.

    + +
    +
    • + +
  • +
    +Ads Blocker Extension +

    This is a simple Ad Blocker Extension. AdBlocker is a lightweight browser extension designed to block intrusive advertisements and enhance your browsing experience.

    + +
    +
    • +

    (back to top)

    @@ -195,6 +624,15 @@ In order to run this project you need: - Wellfound: [tajul-afreen](https://wellfound.com/u/tajul-afreen) - Twitter: [tajulafreen](https://www.twitter.com/tajulafreen) +👤 **Olanike Olatunji** + +- GitHub: [olanikegloria](https://github.com/olanikegloria) +- LinkedIn: [olanikegloria](https://www.linkedin.com/in/olani/) + +👤 **amiii123malviya** + +- GitHub: [amiii123malviya](https://github.com/amiii123malvi) +

    (back to top)

    ## ⭐️ Show your support diff --git a/Source-Code/AdsBlockerExtension/content.js b/Source-Code/AdsBlockerExtension/content.js new file mode 100644 index 0000000..7e719d8 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/content.js @@ -0,0 +1,42 @@ +/* eslint-disable no-undef */ +const adSelectors = [ + 'iframe[src*="ads"]', + 'div[class*="ad"]', + 'div[id*="ad"]', + 'ins.adsbygoogle', + '[data-ad]', + '.ad-banner', +]; + +// Normalize domain +const normalizeDomain = (domain) => domain.replace(/^www\./, ''); + +chrome.storage.local.get( + { adBlockerEnabled: true, whitelist: [] }, + ({ adBlockerEnabled, whitelist }) => { + if (!adBlockerEnabled) return; + + const currentSite = normalizeDomain(window.location.hostname); + const normalizedWhitelist = whitelist.map(normalizeDomain); + + if (normalizedWhitelist.includes(currentSite)) { + console.log(`Whitelist active: Ads are allowed on ${currentSite}`); + return; // Skip ad blocking + } + + // Ad blocking logic + const blockAds = () => { + adSelectors.forEach((selector) => { + const ads = document.querySelectorAll(selector); + console.log(`Found ${ads.length} ads for selector: ${selector}`); + ads.forEach((ad) => ad.remove()); + }); + }; + + blockAds(); // Initial blocking + + // Observe dynamically loaded ads + const observer = new MutationObserver(blockAds); + observer.observe(document.body, { childList: true, subtree: true }); + }, +); diff --git a/Source-Code/AdsBlockerExtension/icons/icon128.png b/Source-Code/AdsBlockerExtension/icons/icon128.png new file mode 100644 index 0000000..fbebcc8 Binary files /dev/null and b/Source-Code/AdsBlockerExtension/icons/icon128.png differ diff --git a/Source-Code/AdsBlockerExtension/icons/icon16.png b/Source-Code/AdsBlockerExtension/icons/icon16.png new file mode 100644 index 0000000..d3a0408 Binary files /dev/null and b/Source-Code/AdsBlockerExtension/icons/icon16.png differ diff --git a/Source-Code/AdsBlockerExtension/icons/icon48.png b/Source-Code/AdsBlockerExtension/icons/icon48.png new file mode 100644 index 0000000..10d3a1f Binary files /dev/null and b/Source-Code/AdsBlockerExtension/icons/icon48.png differ diff --git a/Source-Code/AdsBlockerExtension/manifest.json b/Source-Code/AdsBlockerExtension/manifest.json new file mode 100644 index 0000000..3982ced --- /dev/null +++ b/Source-Code/AdsBlockerExtension/manifest.json @@ -0,0 +1,27 @@ +{ + "manifest_version": 2, + "name": "Ad Blocker", + "version": "1.0", + "description": "A simple ad blocker to remove advertisements from websites.", + "permissions": ["activeTab", "storage"], + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"] + } + ], + "browser_action": { + "default_popup": "popup.html", + "default_icon": { + "16": "./icons/icon16.png", + "48": "./icons/icon48.png", + "128": "./icons/icon128.png" + } + }, + "icons": { + "16": "./icons/icon16.png", + "48": "./icons/icon48.png", + "128": "./icons/icon128.png" + } + } + \ No newline at end of file diff --git a/Source-Code/AdsBlockerExtension/popup.css b/Source-Code/AdsBlockerExtension/popup.css new file mode 100644 index 0000000..5ba01a8 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/popup.css @@ -0,0 +1,34 @@ +body { + font-family: Arial, sans-serif; + margin: 10px; + width: 250px; +} + +h1 { + font-size: 1.5em; + margin-bottom: 10px; +} + +label { + display: block; + margin-bottom: 20px; +} + +input { + margin-right: 10px; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + margin: 5px 0; + display: flex; + justify-content: space-between; +} + +button { + cursor: pointer; +} diff --git a/Source-Code/AdsBlockerExtension/popup.html b/Source-Code/AdsBlockerExtension/popup.html new file mode 100644 index 0000000..de88f92 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/popup.html @@ -0,0 +1,24 @@ + + + + + + Ad Blocker + + + +

    Ad Blocker

    + +
    +

    Whitelist

    + + + +
    +

    + + + diff --git a/Source-Code/AdsBlockerExtension/popup.js b/Source-Code/AdsBlockerExtension/popup.js new file mode 100644 index 0000000..2a544a6 --- /dev/null +++ b/Source-Code/AdsBlockerExtension/popup.js @@ -0,0 +1,34 @@ +const whitelistInput = document.getElementById('whitelist-input'); +const addToWhitelist = document.getElementById('add-to-whitelist'); +const whitelist = document.getElementById('whitelist'); +let whitelistData = JSON.parse(localStorage.getItem('whitelist')) || []; + +// Load whitelist +function loadWhitelist() { + whitelist.innerHTML = ''; + whitelistData.forEach((site) => { + const li = document.createElement('li'); + li.textContent = site; + const removeBtn = document.createElement('button'); + removeBtn.textContent = 'Remove'; + removeBtn.addEventListener('click', () => { + whitelistData = whitelistData.filter((item) => item !== site); + localStorage.setItem('whitelist', JSON.stringify(whitelistData)); + loadWhitelist(); + }); + li.appendChild(removeBtn); + whitelist.appendChild(li); + }); +} + +addToWhitelist.addEventListener('click', () => { + const site = whitelistInput.value.trim(); + if (site && !whitelistData.includes(site)) { + whitelistData.push(site); + localStorage.setItem('whitelist', JSON.stringify(whitelistData)); + whitelistInput.value = ''; + loadWhitelist(); + } +}); + +loadWhitelist(); diff --git a/Source-Code/AgeCalculator/index.html b/Source-Code/AgeCalculator/index.html new file mode 100644 index 0000000..39f9756 --- /dev/null +++ b/Source-Code/AgeCalculator/index.html @@ -0,0 +1,23 @@ + + + + + + Age Calculator + + + +
    +
    +

    +

    Enter the DOB in format: (MM/DD/YYYY)

    + + +
    +
    +

    +
    +
    + + + diff --git a/Source-Code/AgeCalculator/script.js b/Source-Code/AgeCalculator/script.js new file mode 100644 index 0000000..c7cc5d4 --- /dev/null +++ b/Source-Code/AgeCalculator/script.js @@ -0,0 +1,26 @@ +document.addEventListener('DOMContentLoaded', () => { + const currDate = document.getElementById('currDate'); + const dateOfBirth = document.querySelector('#DOB'); + const calcAgeButton = document.getElementById('CalcAge'); + const displayAge = document.getElementById('displayAge'); + const ageText = document.getElementById('age'); + const today = new Date(); + + currDate.innerText = `Today's Date is: ${today.toLocaleDateString('en-US')}`; + + calcAgeButton.addEventListener('click', () => { + const birthDate = new Date(dateOfBirth.value); + let age = today.getFullYear() - birthDate.getFullYear(); + const monthDifference = today.getMonth() - birthDate.getMonth(); + + if ( + monthDifference < 0 + || (monthDifference === 0 && today.getDate() < birthDate.getDate()) + ) { + age -= 1; + } + + displayAge.style.visibility = 'visible'; + ageText.innerText = `You are ${age} years old.`; + }); +}); diff --git a/Source-Code/AgeCalculator/style.css b/Source-Code/AgeCalculator/style.css new file mode 100644 index 0000000..a1fdad4 --- /dev/null +++ b/Source-Code/AgeCalculator/style.css @@ -0,0 +1,82 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: cursive; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + display: flex; + width: 600px; + + /* margin:auto; + margin-top:10%; + margin-bottom:10%; */ + align-items: center; + justify-content: center; + flex-direction: column; + background-color: rgb(169, 216, 80); + box-shadow: 8px 8px black; + color: white; + padding: 5% 0%; +} + +#currDate { + font-size: 30px; + margin: 20px; + font-weight: bold; +} + +input { + font-size: 20px; + padding: 15px; + margin: 20px; + text-align: center; + border-radius: 20px; + border: 1px solid yellow; + cursor: pointer; +} + +button { + font-size: 20px; + padding: 10px 20px; + border-radius: 10px; + border: none; + background-color: yellow; + color: black; + margin: 20px; + text-transform: uppercase; + font-weight: bold; + cursor: pointer; +} + +button:hover { + background-color: white; + color: rgb(169, 216, 80); +} + +#displayAge { + display: flex; + align-items: center; + justify-content: center; + width: 620px; + height: 490px; + background-color: rgb(91, 228, 141); + border-radius: 30px; + position: absolute; + visibility: hidden; +} + +#age { + color: white; + font-size: 50px; + margin: 20px; + font-weight: bold; +} diff --git a/Source-Code/AnalogWatch/assets/clock.png b/Source-Code/AnalogWatch/assets/clock.png new file mode 100644 index 0000000..3a4b1f3 Binary files /dev/null and b/Source-Code/AnalogWatch/assets/clock.png differ diff --git a/Source-Code/AnalogWatch/index.html b/Source-Code/AnalogWatch/index.html new file mode 100644 index 0000000..3ab34e9 --- /dev/null +++ b/Source-Code/AnalogWatch/index.html @@ -0,0 +1,23 @@ + + + + + + Analog Watch + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + diff --git a/Source-Code/AnalogWatch/script.js b/Source-Code/AnalogWatch/script.js new file mode 100644 index 0000000..de963ae --- /dev/null +++ b/Source-Code/AnalogWatch/script.js @@ -0,0 +1,18 @@ +document.addEventListener('DOMContentLoaded', () => { + const hr = document.querySelector('#hr'); + const mn = document.querySelector('#mn'); + const sc = document.querySelector('#sc'); + + const deg = 6; + + setInterval(() => { + const day = new Date(); + const h = day.getHours() * 30; + const m = day.getMinutes() * deg; + const s = day.getSeconds() * deg; + + hr.style.transform = `rotate(${h + m / 12}deg)`; + mn.style.transform = `rotate(${m}deg)`; + sc.style.transform = `rotate(${s}deg)`; + }); +}); diff --git a/Source-Code/AnalogWatch/style.css b/Source-Code/AnalogWatch/style.css new file mode 100644 index 0000000..f219a4f --- /dev/null +++ b/Source-Code/AnalogWatch/style.css @@ -0,0 +1,97 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #2a083d; + z-index: -1; +} + +.clock { + width: 350px; + height: 350px; + background: url("./assets/clock.png"); + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 4px solid #091921; + box-shadow: + 0 -15px 15px rgba(255, 255, 255, 0.25), + inset 0 -15px 15px rgba(255, 255, 255, 0.05), + 0 15px 15px rgba(0, 0, 0, 0.3), + inset 0 15px 15px rgba(0, 0, 0, 0.3); +} + +.clock::before { + content: ""; + position: absolute; + width: 15px; + height: 15px; + background: #848484; + border: 2px solid #fff; + z-index: 10; + border-radius: 50%; +} + +.hour, +.min, +.sec { + position: absolute; +} + +.hour, +.hr { + width: 160px; + height: 160px; +} + +.min, +.mn { + height: 190px; +} + +.hr, +.mn, +.sc { + display: flex; + justify-content: center; + border-radius: 50%; +} + +.hr::before { + content: ""; + position: absolute; + width: 8px; + height: 80px; + background: #848484; + z-index: 1; + border-radius: 6px 6px 0 0; +} + +.mn::before { + content: ""; + position: absolute; + width: 4px; + height: 90px; + background: #d6d6d6; + z-index: 2; + border-radius: 6px 6px 0 0; +} + +.sc::before { + content: ""; + position: absolute; + width: 2px; + height: 150px; + background: #ff6767; + z-index: 3; + border-radius: 6px 6px 0 0; +} diff --git a/Source-Code/BMICalculator/index.html b/Source-Code/BMICalculator/index.html new file mode 100644 index 0000000..5e84c84 --- /dev/null +++ b/Source-Code/BMICalculator/index.html @@ -0,0 +1,52 @@ + + + + + + BMI Calculator + + + + +
    +
    +

    Body Mass Index Calculator

    +

    Height in cm

    + +

    Weight in kg

    + +

    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    BMICategory
    less than 18.5Underweight
    between 18.5 and 24.9Ideal
    between 25 and 29.9Overweight
    over 30Obesity
    +
    +
    + + + diff --git a/Source-Code/BMICalculator/script.js b/Source-Code/BMICalculator/script.js new file mode 100644 index 0000000..78dddd5 --- /dev/null +++ b/Source-Code/BMICalculator/script.js @@ -0,0 +1,20 @@ +document.getElementById('btn').addEventListener('click', () => { + const height = parseFloat(document.getElementById('height').value); + const weight = parseFloat(document.getElementById('weight').value); + + if ( + Number.isNaN(height) + || Number.isNaN(weight) + || height <= 0 + || weight <= 0 + ) { + document.getElementById('result').innerHTML = 'Please enter valid positive numbers for height and weight.'; + return; + } + + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + const bmio = bmi.toFixed(2); + + document.getElementById('result').innerHTML = `Your BMI is ${bmio}`; +}); diff --git a/Source-Code/BMICalculator/style.css b/Source-Code/BMICalculator/style.css new file mode 100644 index 0000000..9195295 --- /dev/null +++ b/Source-Code/BMICalculator/style.css @@ -0,0 +1,98 @@ +body { + text-align: center; + font-family: 'Courier New', Courier, monospace; + background: linear-gradient(rgb(63, 217, 220) 0%, rgb(238, 248, 248) 100%); + min-height: 100vh; +} + +.container { + margin: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.bmi { + width: 350px; + background-color: #fff; + padding: 20px; + border-radius: 10px; + margin: auto; +} + +h2 { + font-size: 30px; + font-weight: 600; +} + +.text { + text-align: center; +} + +#weight, +#height { + color: #222f3e; + text-align: left; + font-size: 20px; + font-weight: 200; + outline: none; + border: 1px solid black; + border-radius: 7px; + width: 200px; + height: 35px; +} + +#weight:focus, +#height:focus { + width: 250px; + transition: 0.5s; +} + +#result { + color: #971f1f; + font-size: large; + font-weight: 400; +} + +#btn { + font-size: medium; + font-family: inherit; + margin-top: 10px; + border: none; + background: lightblue; + width: 150px; + padding: 10px; + border-radius: 30px; + outline: none; + cursor: pointer; + transition: 0.5s; +} + +#btn:hover { + transform: scale(1.1); + transition: 0.5s; +} + +table { + width: 400px; + border-collapse: collapse; + margin: 20px auto; +} + +tr { + background: lightblue; +} + +th { + background: #fff; + color: #000; + font-weight: bold; +} + +td, +th { + padding: 10px; + border: 1px solid #000; + text-align: center; + font-size: 18px; +} diff --git a/Source-Code/BatteryIndicator/index.html b/Source-Code/BatteryIndicator/index.html new file mode 100644 index 0000000..d70a435 --- /dev/null +++ b/Source-Code/BatteryIndicator/index.html @@ -0,0 +1,32 @@ + + + + + + + Battery Indicator + + + +
    +
    +
    +
    +

    Battery Percentage

    +
    +
    +
    +
    +
    +
    50%
    +
    +
    +
    + + + diff --git a/Source-Code/BatteryIndicator/script.js b/Source-Code/BatteryIndicator/script.js new file mode 100644 index 0000000..8b3d32a --- /dev/null +++ b/Source-Code/BatteryIndicator/script.js @@ -0,0 +1,15 @@ +document.addEventListener('DOMContentLoaded', () => { + const percentage = document.querySelector('.percentage'); + const percent = document.querySelector('.percent'); + + navigator.getBattery().then((battery) => { + percentage.style.width = `${battery.level * 100}%`; + percent.innerHTML = `${Math.floor(battery.level * 100)}%`; + }); + + const sec = document.querySelector('.sec'); + const toggle = document.querySelector('.toggle'); + toggle.addEventListener('click', () => { + sec.classList.toggle('dark'); + }); +}); diff --git a/Source-Code/BatteryIndicator/style.css b/Source-Code/BatteryIndicator/style.css new file mode 100644 index 0000000..2259c77 --- /dev/null +++ b/Source-Code/BatteryIndicator/style.css @@ -0,0 +1,188 @@ +/* stylelint-disable */ +@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +section { + position: relative; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +section.dark { + background: #161623; +} + +section::before { + content: ""; + position: absolute; + width: 240px; + height: 240px; + background: linear-gradient(#6cff47, #3d1046); + border-radius: 50%; + transform: translate(-150px, -100px); +} + +section.dark::before { + background: linear-gradient(#ffc107, #e91e63); +} + +section::after { + content: ""; + position: absolute; + width: 250px; + height: 250px; + background: linear-gradient(#f10050, rgb(8, 216, 253)); + border-radius: 50%; + transform: translate(150px, 100px); +} + +section.dark::after { + background: linear-gradient(#2196f3, #31ff38); +} + +.box { + position: relative; + width: 240px; + height: 300px; + background: rgba(255, 255, 255, 0.1); + z-index: 1; + box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25); + border: 1px solid rgba(255, 255, 255, 0.25); + border-right: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(25px); + border-radius: 10px; + display: flex; + justify-content: center; + align-items: center; +} + +.content { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.box h3 { + color: #000; + font-weight: 500; + font-size: 1.2rem; + letter-spacing: 1px; +} + +section.dark .box h3 { + color: #fff; +} + +.batteryShape { + position: relative; + width: 140px; + height: 65px; + margin: 20px 0; + border: 3px solid #333; + border-radius: 10px; +} + +section.dark .batteryShape { + border: 3px solid #fff; +} + +.batteryShape::before { + content: ""; + position: absolute; + top: 50%; + right: -12px; + transform: translateY(-50%); + width: 7px; + height: 16px; + background: #333; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +section.dark .batteryShape::before { + background: #fff; +} + +.batteryShape::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50%; + background: rgba(255, 255, 255, 0.1); +} + +.level { + position: absolute; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; + + /* background: #333; */ + overflow: hidden; +} + +.percentage { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 50%; + background: linear-gradient(90deg, #ffeb3b, #27ff00); + border-radius: 4px; +} + +section.dark .percentage { + background: linear-gradient(90deg, #ffeb3b, #27ff00); +} + +.percent { + color: #000; + font-size: 2em; + font-weight: 700; +} + +section.dark .percent { + color: #fff; +} + +.toggle { + position: absolute; + top: 20px; + right: 20px; + background: #070716; + width: 30px; + height: 30px; + cursor: pointer; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.dark .toggle { + background: #fff; +} + +.toggle::before { + content: "\f186"; + font-family: fontAwesome; + color: #fff; +} + +.dark .toggle::before { + content: "\f185"; + color: #161623; +} diff --git a/Source-Code/BluringImage/index.html b/Source-Code/BluringImage/index.html index 1ce1b36..9c9100e 100644 --- a/Source-Code/BluringImage/index.html +++ b/Source-Code/BluringImage/index.html @@ -3,13 +3,13 @@ - Bluring Image + Blurring Image
    0%
    - + - \ No newline at end of file + diff --git a/Source-Code/BluringImage/script.js b/Source-Code/BluringImage/script.js index bb96822..c76678c 100644 --- a/Source-Code/BluringImage/script.js +++ b/Source-Code/BluringImage/script.js @@ -1,19 +1,25 @@ -/* eslint-disable*/ -const loadingText = document.querySelector(".loading-text"); -const bg = document.querySelector(".bg"); -let load = 0; +/* eslint-disable */ -const blurring = () => { - load += 1; - if (load > 99) { - clearInterval(int); - } - loadingText.innerText = `${load}%`; - loadingText.style.opacity = scale(load, 0, 100, 1, 0); - bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`; -}; +document.addEventListener("DOMContentLoaded", () => { + const loadingText = document.querySelector(".loading-text"); + const bg = document.querySelector(".bg"); + let load = 0; -const int = setInterval(blurring, 20); -const scale = (num, in_min, in_max, out_min, out_max) => { - return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min; -}; + // Function to update the loading state and apply styles + const blurring = () => { + load++; + if (load > 99) { + clearInterval(intervalId); + } + loadingText.innerText = `${load}%`; + loadingText.style.opacity = scale(load, 0, 100, 1, 0); + bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`; + }; + + // Start the interval to run the blurring function every 20ms + const intervalId = setInterval(blurring, 20); + + // Utility function to scale a number from one range to another + const scale = (num, inMin, inMax, outMin, outMax) => + ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; +}); diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html new file mode 100644 index 0000000..e601605 --- /dev/null +++ b/Source-Code/Calculator/index.html @@ -0,0 +1,39 @@ + + + + + + Calculator + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + + diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js new file mode 100644 index 0000000..a924bde --- /dev/null +++ b/Source-Code/Calculator/script.js @@ -0,0 +1,111 @@ +let firstOperand = ''; +let secondOperand = ''; +let currentOperator = null; +let awaitingSecondOperand = false; + +const display = document.querySelector('.calculator-screen'); +const keys = document.querySelector('.calculator-keys'); + +const updateDisplay = () => { + display.value = awaitingSecondOperand ? secondOperand : firstOperand; +}; + +const resetCalculator = () => { + firstOperand = ''; + secondOperand = ''; + currentOperator = null; + awaitingSecondOperand = false; + updateDisplay(); +}; + +const inputNumber = (number) => { + if (awaitingSecondOperand) { + secondOperand += number; + } else { + firstOperand += number; + } + updateDisplay(); +}; + +const inputDecimal = () => { + if (awaitingSecondOperand) { + if (!secondOperand.includes('.')) { + secondOperand += '.'; + } + } else if (!firstOperand.includes('.')) { + firstOperand += '.'; + } + updateDisplay(); +}; + +const calculate = () => { + let result; + const first = parseFloat(firstOperand); + const second = parseFloat(secondOperand); + + if (Number.isNaN(first) || Number.isNaN(second)) return; + + switch (currentOperator) { + case '+': + result = first + second; + break; + case '-': + result = first - second; + break; + case '*': + result = first * second; + break; + case '/': + result = first / second; + break; + default: + return; + } + + firstOperand = String(result); + secondOperand = ''; + awaitingSecondOperand = false; + currentOperator = null; + updateDisplay(); +}; +const inputOperator = (operator) => { + if (!firstOperand) return; + + if (secondOperand) { + calculate(); + } + + currentOperator = operator; + awaitingSecondOperand = true; +}; + +keys.addEventListener('click', (event) => { + const { target } = event; + const { value } = target; + + if (!target.matches('button')) return; + + switch (value) { + case 'all-clear': + resetCalculator(); + break; + case '=': + calculate(); + break; + case '.': + inputDecimal(); + break; + case '+': + case '-': + case '*': + case '/': + inputOperator(value); + break; + default: + if (Number.isInteger(parseFloat(value))) { + inputNumber(value); + } + } +}); + +document.addEventListener('DOMContentLoaded', updateDisplay); diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css new file mode 100644 index 0000000..b48d8d0 --- /dev/null +++ b/Source-Code/Calculator/style.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #f9f6ee; + font-family: 'Roboto', sans-serif; +} + +.calculator { + border-radius: 10px; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); +} + +.calculator-screen { + width: 100%; + height: 100px; + border: none; + background-color: #252525; + color: white; + text-align: right; + padding: 10px 20px; + font-size: 2.5rem; +} + +.calculator-keys { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + padding: 20px; + background-color: #f1f3f6; +} + +button { + height: 60px; + border-radius: 5px; + border: none; + font-size: 1.5rem; + color: white; + background-color: #333; + cursor: pointer; + transition: background-color 0.2s ease; +} + +button:hover { + background-color: #555; +} + +.operator { + background-color: #f39c12; +} + +.operator:hover { + background-color: #d87a0d; +} + +.equal-sign { + height: calc(80px + 10px); + grid-column: span 4; + font-size: 30px; +} + +.all-clear { + background-color: #e74c3c; +} + +.all-clear:hover { + background-color: #c0392b; +} + +.decimal { + background-color: #9b59b6; +} + +.decimal:hover { + background-color: #8e44ad; +} diff --git a/Source-Code/ChatApp/index.html b/Source-Code/ChatApp/index.html new file mode 100644 index 0000000..11bd23d --- /dev/null +++ b/Source-Code/ChatApp/index.html @@ -0,0 +1,20 @@ + + + + + + Chat App + + + +
    +

    Simple Chat App

    +
    +
    + + +
    +
    + + + diff --git a/Source-Code/ChatApp/script.js b/Source-Code/ChatApp/script.js new file mode 100644 index 0000000..38bc0da --- /dev/null +++ b/Source-Code/ChatApp/script.js @@ -0,0 +1,45 @@ +const chatBox = document.getElementById('chatBox'); +const chatForm = document.getElementById('chatForm'); +const messageInput = document.getElementById('messageInput'); + +// Display a message in the chat box +const displayMessage = (message, sender) => { + const messageElement = document.createElement('div'); + messageElement.classList.add('message', sender); + messageElement.textContent = message; + chatBox.appendChild(messageElement); + chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom +}; + +// Load messages from local storage +const loadMessages = () => { + const messages = JSON.parse(localStorage.getItem('chatMessages')) || []; + chatBox.innerHTML = ''; + messages.forEach(({ user, bot }) => { + displayMessage(user, 'user'); + displayMessage(bot, 'bot'); + }); +}; + +// Add messages to local storage +const addMessagesToStorage = (userMessage, botReply) => { + const messages = JSON.parse(localStorage.getItem('chatMessages')) || []; + messages.push({ user: userMessage, bot: botReply }); + localStorage.setItem('chatMessages', JSON.stringify(messages)); +}; + +// Handle form submission +chatForm.addEventListener('submit', (e) => { + e.preventDefault(); + const userMessage = messageInput.value.trim(); + if (userMessage) { + const botReply = userMessage; // Echo the user message + displayMessage(userMessage, 'user'); + displayMessage(botReply, 'bot'); + addMessagesToStorage(userMessage, botReply); + messageInput.value = ''; + } +}); + +// Initialize the app +loadMessages(); diff --git a/Source-Code/ChatApp/style.css b/Source-Code/ChatApp/style.css new file mode 100644 index 0000000..f05b489 --- /dev/null +++ b/Source-Code/ChatApp/style.css @@ -0,0 +1,82 @@ +body { + font-family: Arial, sans-serif; + background-color: #cbdc30; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.chat-container { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 400px; + padding: 20px; +} + +h1 { + text-align: center; + color: #333; +} + +.chat-box { + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; + padding: 10px; + height: 300px; + overflow-y: auto; + margin-bottom: 10px; +} + +.chat-box .message { + display: flex; + flex-direction: column; + margin: 5px 0; + padding: 10px; + border-radius: 12px 2px; + font-size: 14px; +} + +.message.user { + background-color: #cdf2f7; + color: #025f54; + float: right; + width: 50%; +} + +.message.bot { + background-color: #fbcfdd; + color: #d81b60; + float: left; + width: 50%; +} + +form { + display: flex; +} + +input[type="text"] { + flex: 1; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 14px; +} + +button { + padding: 10px 20px; + border: none; + background-color: #049786; + color: white; + font-size: 14px; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #005f4b; +} diff --git a/Source-Code/ChoicePicker/index.html b/Source-Code/ChoicePicker/index.html new file mode 100644 index 0000000..50c69db --- /dev/null +++ b/Source-Code/ChoicePicker/index.html @@ -0,0 +1,24 @@ + + + + + + + Document + + +
    +

    Enter all of the choices divided by a comma (','). +
    Press enter when you're done

    + +
    + +
    + Choice 1 + Choice 2 + Choice 3 +
    + + + + \ No newline at end of file diff --git a/Source-Code/ChoicePicker/script.js b/Source-Code/ChoicePicker/script.js new file mode 100644 index 0000000..a5d62d9 --- /dev/null +++ b/Source-Code/ChoicePicker/script.js @@ -0,0 +1,60 @@ +const tagsEl = document.getElementById('tags'); +const textarea = document.getElementById('textarea'); + +textarea.focus(); + +const createTags = (input) => { + const tags = input.split(',').filter((tag) => tag.trim() !== '').map((tag) => tag.trim()); + tagsEl.innerHTML = ''; + tags.forEach((tag) => { + const tagEl = document.createElement('span'); + tagEl.classList.add('tag'); + tagEl.innerText = tag; + tagsEl.appendChild(tagEl); + }); +}; + +const pickRandomTag = () => { + const tags = document.querySelectorAll('.tag'); + return tags[Math.floor(Math.random() * tags.length)]; +}; + +const highlightTag = (tag) => { + tag.classList.add('highlight'); +}; + +const unHighlightTag = (tag) => { + tag.classList.remove('highlight'); +}; + +const randomSelect = () => { + const times = 30; + const interval = setInterval(() => { + const randomTag = pickRandomTag(); + highlightTag(randomTag); + + setTimeout(() => { + unHighlightTag(randomTag); + }, 100); + }, 100); + + setTimeout(() => { + clearInterval(interval); + + setTimeout(() => { + const randomTag = pickRandomTag(); + + highlightTag(randomTag); + }, 100); + }, times * 100); +}; + +textarea.addEventListener('keyup', (e) => { + createTags(e.target.value); + if (e.key === 'Enter') { + setTimeout(() => { + e.target.value = ''; + }, 10); + randomSelect(); + } +}); \ No newline at end of file diff --git a/Source-Code/ChoicePicker/style.css b/Source-Code/ChoicePicker/style.css new file mode 100644 index 0000000..ad607c3 --- /dev/null +++ b/Source-Code/ChoicePicker/style.css @@ -0,0 +1,50 @@ +* { + box-sizing: border-box; +} + +body { + background-color: blueviolet; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +h3 { + color: white; + margin: 10px 0 20px; + text-align: center; +} + +.container { + width: 500px; +} + +textarea { + border: none; + display: block; + width: 100%; + height: 100px; + font-family: inherit; + padding: 10px; + font-size: 16px; + margin: 0 0 20px; +} + +.tag { + background-color: #f0932b; + color: white; + border-radius: 50px; + padding: 10px 20px; + margin: 0 5px 10px 0; + font-size: 14px; + display: inline-block; +} + +.tag.highlight { + background-color: plum; +} diff --git a/Source-Code/CountdownTimer/assets/eid.jpg b/Source-Code/CountdownTimer/assets/eid.jpg new file mode 100644 index 0000000..6603387 Binary files /dev/null and b/Source-Code/CountdownTimer/assets/eid.jpg differ diff --git a/Source-Code/CountdownTimer/index.html b/Source-Code/CountdownTimer/index.html new file mode 100644 index 0000000..c5c6e82 --- /dev/null +++ b/Source-Code/CountdownTimer/index.html @@ -0,0 +1,33 @@ + + + + + + Countdown Timer + + + +

    EID CELEBRATIONS

    + +
    +
    +

    0

    + days +
    +
    +

    0

    + hours +
    +
    +

    0

    + mins +
    +
    +

    0

    + seconds +
    +
    + + + + \ No newline at end of file diff --git a/Source-Code/CountdownTimer/script.js b/Source-Code/CountdownTimer/script.js new file mode 100644 index 0000000..82113f0 --- /dev/null +++ b/Source-Code/CountdownTimer/script.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', () => { + const daysEl = document.getElementById('days'); + const hoursEl = document.getElementById('hours'); + const minsEl = document.getElementById('mins'); + const secondsEl = document.getElementById('seconds'); + + const eid = '30 Mar 2025'; + const formatTime = (time) => (time < 10 ? `0${time}` : time); + const countdown = () => { + const EidDate = new Date(eid); + const currentDate = new Date(); + + const totalSeconds = (EidDate - currentDate) / 1000; + + const days = Math.floor(totalSeconds / 3600 / 24); + const hours = Math.floor(totalSeconds / 3600) % 24; + const mins = Math.floor(totalSeconds / 60) % 60; + const seconds = Math.floor(totalSeconds) % 60; + + daysEl.innerHTML = days; + hoursEl.innerHTML = formatTime(hours); + minsEl.innerHTML = formatTime(mins); + secondsEl.innerHTML = formatTime(seconds); + }; + + // initial call + countdown(); + + setInterval(countdown, 1000); +}); diff --git a/Source-Code/CountdownTimer/style.css b/Source-Code/CountdownTimer/style.css new file mode 100644 index 0000000..3bea40f --- /dev/null +++ b/Source-Code/CountdownTimer/style.css @@ -0,0 +1,44 @@ +* { + box-sizing: border-box; +} + +body { + background-image: url(./assets/eid.jpg); + background-size: cover; + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + font-family: "Roboto", sans-serif; + margin-top: 4rem; + color: #c9cc6b; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 10rem; + flex-wrap: wrap; +} + +h1 { + font-size: 4rem; + margin-top: 1rem; + text-align: center; + flex-wrap: wrap; +} + +.big-text { + font-weight: bold; + font-size: 8rem; + line-height: 0.5; + margin: 1rem 2rem; +} + +.countdown { + text-align: center; +} + +.countdown span { + font-size: 2rem; +} diff --git a/Source-Code/CurrencyConverter/index.html b/Source-Code/CurrencyConverter/index.html new file mode 100644 index 0000000..52d77f6 --- /dev/null +++ b/Source-Code/CurrencyConverter/index.html @@ -0,0 +1,33 @@ + + + + + + Currency Converter + + + +
    +

    Currency Converter

    +
    + + + to + + +
    +
    +
    + + + \ No newline at end of file diff --git a/Source-Code/CurrencyConverter/script.js b/Source-Code/CurrencyConverter/script.js new file mode 100644 index 0000000..afb6869 --- /dev/null +++ b/Source-Code/CurrencyConverter/script.js @@ -0,0 +1,27 @@ +document.getElementById('convert').addEventListener('click', () => { + const amount = document.getElementById('amount').value; + const fromCurrency = document.getElementById('from-currency').value; + const toCurrency = document.getElementById('to-currency').value; + + if (amount === '' || Number.isNaN(Number(amount))) { + alert('Please enter a valid amount'); + return; + } + + const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; + + fetch(apiUrl) + .then((response) => response.json()) + .then((data) => { + const exchangeRate = data.rates[toCurrency]; + const convertedAmount = (amount * exchangeRate).toFixed(2); + document.getElementById( + 'result', + ).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; + }) + .catch((error) => { + document.getElementById( + 'result', + ).innerText = `Error fetching exchange rates. ${error}Try again later.`; + }); +}); diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css new file mode 100644 index 0000000..e318503 --- /dev/null +++ b/Source-Code/CurrencyConverter/style.css @@ -0,0 +1,48 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +input, +select, +button { + margin: 10px 0; + padding: 10px; + font-size: 16px; +} + +button { + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +} diff --git a/Source-Code/DayPredictor/index.html b/Source-Code/DayPredictor/index.html new file mode 100644 index 0000000..5d567f3 --- /dev/null +++ b/Source-Code/DayPredictor/index.html @@ -0,0 +1,25 @@ + + + + + + + + Day Predictor + + + +
    +

    Today is:

    + +
    + + + diff --git a/Source-Code/DayPredictor/script.js b/Source-Code/DayPredictor/script.js new file mode 100644 index 0000000..7b37a7c --- /dev/null +++ b/Source-Code/DayPredictor/script.js @@ -0,0 +1,49 @@ +document.addEventListener('DOMContentLoaded', () => { + // Grab day of the week from local computer + const date = new Date(); + const dayOfWeekNumber = date.getDay(); + let nameOfDay; + let quote; + + switch (dayOfWeekNumber) { + case 0: + nameOfDay = 'Sunday'; + quote = 'Time to chillax!'; + break; + case 1: + nameOfDay = 'Monday'; + quote = 'Monday morning blues!'; + break; + case 2: + nameOfDay = 'Tuesday'; + quote = 'Taco Time!'; + break; + case 3: + nameOfDay = 'Wednesday'; + quote = 'Two more days to the weekend.'; + break; + case 4: + nameOfDay = 'Thursday'; + quote = 'The weekend is almost here...'; + break; + case 5: + nameOfDay = 'Friday'; + quote = 'Weekend is here!'; + break; + case 6: + nameOfDay = 'Saturday'; + quote = 'Time to party!'; + break; + default: + nameOfDay = 'Unknown'; + quote = ''; + } + + // Display the day of the week + const weekdayDiv = document.getElementById('weekday'); + weekdayDiv.innerHTML = `${nameOfDay}`; + + // Display quote + const quoteDiv = document.getElementById('phrase'); + quoteDiv.innerHTML = `${quote}`; +}); diff --git a/Source-Code/DayPredictor/style.css b/Source-Code/DayPredictor/style.css new file mode 100644 index 0000000..c63b418 --- /dev/null +++ b/Source-Code/DayPredictor/style.css @@ -0,0 +1,41 @@ +body { + font-family: Arial, Helvetica, sans-serif; + margin: 50px; + background: #fff; +} + +#container { + width: 500px; + height: 350px; + background-color: rgb(157, 255, 0); + margin: auto; + border-radius: 30px; + padding: 20px; +} + +h1 { + font-size: 40px; + font-weight: 900; + text-transform: uppercase; + text-align: center; + color: #f533e8; +} + +ul { + list-style-type: none; + display: flex; + flex-direction: column; + align-items: center; +} + +#weekday { + font-size: 40px; + color: #dd5800; + font-weight: 800; +} + +#phrase { + font-size: 40px; + color: #00f; + font-weight: 800; +} diff --git a/Source-Code/DinosaurGame/assets/cactus.png b/Source-Code/DinosaurGame/assets/cactus.png new file mode 100644 index 0000000..5d6dcbe Binary files /dev/null and b/Source-Code/DinosaurGame/assets/cactus.png differ diff --git a/Source-Code/DinosaurGame/assets/dinosaur.png b/Source-Code/DinosaurGame/assets/dinosaur.png new file mode 100644 index 0000000..a6d05c6 Binary files /dev/null and b/Source-Code/DinosaurGame/assets/dinosaur.png differ diff --git a/Source-Code/DinosaurGame/index.html b/Source-Code/DinosaurGame/index.html new file mode 100644 index 0000000..f285bcd --- /dev/null +++ b/Source-Code/DinosaurGame/index.html @@ -0,0 +1,21 @@ + + + + + + + DINOSAUR GAME + + +

    DINOSAUR GAME 🦕

    +
    +
    + dino +
    +
    + cactus +
    +
    + + + diff --git a/Source-Code/DinosaurGame/script.js b/Source-Code/DinosaurGame/script.js new file mode 100644 index 0000000..c249b6b --- /dev/null +++ b/Source-Code/DinosaurGame/script.js @@ -0,0 +1,41 @@ +document.addEventListener('DOMContentLoaded', () => { + const character = document.querySelector('.dino'); + const block = document.querySelector('.cactus'); + + const jump = () => { + // Add class to initiate jump + character.classList.add('animate'); + + // Remove class after animation duration (500ms) + setTimeout(() => { + character.classList.remove('animate'); + }, 500); + }; + + // Trigger jump on spacebar press + document.addEventListener('keydown', (event) => { + if (event.code === 'Space') { + jump(); + } + }); + + // Check for collision + const checkDead = setInterval(() => { + const blockLeft = parseInt( + window.getComputedStyle(block).getPropertyValue('left'), + 10, + ); + const characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top'), + 10, + ); + + // Check for collision + if (blockLeft < 20 && blockLeft > 0 && characterTop >= 178) { + block.style.animation = 'none'; + block.style.display = 'none'; + alert('Uh..Oh, you lose.'); + clearInterval(checkDead); // Stop checking for collisions + } + }, 100); +}); diff --git a/Source-Code/DinosaurGame/style.css b/Source-Code/DinosaurGame/style.css new file mode 100644 index 0000000..46ceea6 --- /dev/null +++ b/Source-Code/DinosaurGame/style.css @@ -0,0 +1,78 @@ +* { + margin: 0; + padding: 0; + background-color: rgb(27, 75, 133); +} + +.game-heading { + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: rgb(0, 247, 255); + text-shadow: 3px 2px rgb(128, 0, 0); + font-size: 5em; + margin: 40px 0; +} + +.game { + width: 800px; + height: 300px; + margin: 60px auto; + display: flex; + border: 3px solid rgb(0, 247, 255); +} + +.cactus { + height: 40px; + object-fit: contain; + position: relative; + top: 261px; + left: 670px; + animation: block 3s infinite linear; +} + +.block { + height: 40px; +} + +.character { + height: 100px; +} + +.dino { + height: 100px; + object-fit: contain; + position: relative; + top: 200px; +} + +.animate { + animation: character 500ms; +} + +@keyframes block { + 0% { + left: 670px; + } + + 100% { + left: -60px; + } +} + +@keyframes character { + 0% { + top: 203px; + } + + 30% { + top: 140px; + } + + 70% { + top: 140px; + } + + 100% { + top: 203px; + } +} diff --git a/Source-Code/DragAndDrop/index.html b/Source-Code/DragAndDrop/index.html new file mode 100644 index 0000000..c49e5d6 --- /dev/null +++ b/Source-Code/DragAndDrop/index.html @@ -0,0 +1,32 @@ + + + + + + Drag and Drop App + + + +
    +
    +

    Task List 1

    +
      +
    • Task 1
      • +
    • Task 2
      • +
    • Task 3
      • +
    +
    + +
    +

    Task List 2

    +
      +
    • Task 4
      • +
    • Task 5
      • +
    • Task 6
      • +
    +
    +
    + + + + diff --git a/Source-Code/DragAndDrop/script.js b/Source-Code/DragAndDrop/script.js new file mode 100644 index 0000000..0cee99d --- /dev/null +++ b/Source-Code/DragAndDrop/script.js @@ -0,0 +1,54 @@ +// Get all the lists and list items +const lists = document.querySelectorAll('.list'); +const items = document.querySelectorAll('li'); + +// Drag start function to add the dragging class +function dragStart(e) { + e.target.classList.add('dragging'); +} + +// Drag end function to remove the dragging class +function dragEnd(e) { + e.target.classList.remove('dragging'); +} + +// Drag over function to allow dropping on the list +function dragOver(e) { + e.preventDefault(); +} + +// Drag enter function to style the list when an item is dragged over +function dragEnter(e) { + e.target.classList.add('over'); +} + +// Drag leave function to remove the styling when the item leaves the list +function dragLeave(e) { + e.target.classList.remove('over'); +} + +// Drop function to move the dragged item into the list +function drop(e) { + e.preventDefault(); + const draggedItem = document.querySelector('.dragging'); + e.target.classList.remove('over'); + + // If the target is a list, append the dragged item to it + if (e.target.classList.contains('list')) { + e.target.querySelector('ul').appendChild(draggedItem); + } +} + +// Add event listeners for dragging items +items.forEach((item) => { + item.addEventListener('dragstart', dragStart); + item.addEventListener('dragend', dragEnd); +}); + +// Add event listeners for the lists to accept dropped items +lists.forEach((list) => { + list.addEventListener('dragover', dragOver); + list.addEventListener('dragenter', dragEnter); + list.addEventListener('dragleave', dragLeave); + list.addEventListener('drop', drop); +}); diff --git a/Source-Code/DragAndDrop/style.css b/Source-Code/DragAndDrop/style.css new file mode 100644 index 0000000..b862af5 --- /dev/null +++ b/Source-Code/DragAndDrop/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.container { + display: flex; + gap: 20px; +} + +.list { + background-color: #fff; + border-radius: 8px; + padding: 20px; + width: 200px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; + margin-bottom: 20px; +} + +ul { + list-style-type: none; +} + +li { + padding: 10px; + margin: 5px 0; + background-color: #4caf50; + color: white; + border-radius: 4px; + cursor: grab; + transition: background-color 0.3s ease; +} + +li:hover { + background-color: #45a049; +} + +/* When dragging an item */ +li.dragging { + opacity: 0.5; +} + +.list.over { + border: 2px dashed #4caf50; + background-color: #f9f9f9; +} diff --git a/Source-Code/E-CommerceWebsite/index.html b/Source-Code/E-CommerceWebsite/index.html new file mode 100644 index 0000000..2f8fbc7 --- /dev/null +++ b/Source-Code/E-CommerceWebsite/index.html @@ -0,0 +1,33 @@ + + + + + + E-Commerce Product Page + + + +
    +
    +

    E-Commerce Store

    + +
    +
    + +
    +

    Products

    +
    +
    + + +
    +
    +

    Your Cart

    +
      + +
      +
      + + + + diff --git a/Source-Code/E-CommerceWebsite/script.js b/Source-Code/E-CommerceWebsite/script.js new file mode 100644 index 0000000..7d34ddb --- /dev/null +++ b/Source-Code/E-CommerceWebsite/script.js @@ -0,0 +1,93 @@ +/* eslint-disable no-unused-vars */ +// Fake API URL (you can replace this with a real API if needed) +const apiUrl = 'https://fakestoreapi.com/products'; + +// Elements +const productsContainer = document.getElementById('products-container'); +const cartBtn = document.getElementById('cart-btn'); +const cartModal = document.getElementById('cart-modal'); +const closeCartBtn = document.getElementById('close-cart'); +const cartItemsList = document.getElementById('cart-items'); + +// Cart array to store added products +const cart = []; + +// Display fetched products +const displayProducts = (products) => { + productsContainer.innerHTML = ''; // Clear previous products + + products.forEach((product) => { + const productElement = document.createElement('div'); + productElement.classList.add('product'); + productElement.innerHTML = ` + ${product.title} +

      ${product.title}

      +

      $${product.price}

      + + `; + productsContainer.appendChild(productElement); + }); +}; + +// Fetch products from API +async function fetchProducts() { + try { + const response = await fetch(apiUrl); + const products = await response.json(); + displayProducts(products); + } catch (error) { + console.error('Error fetching products:', error); + } +} + +// Add product to cart +const addToCart = (id, title, image, price) => { + const existingProductIndex = cart.findIndex((item) => item.id === id); + + if (existingProductIndex === -1) { + cart.push({ + id, + title, + image, + price, + quantity: 1, + }); + } else { + cart[existingProductIndex].quantity += 1; + } + + console.log(cart); // You can replace this with a cart UI or alert + alert(`${title} added to cart!`); +}; + +// Close cart modal +closeCartBtn.addEventListener('click', () => { + cartModal.style.display = 'none'; +}); + +// Display cart contents +const displayCart = () => { + cartItemsList.innerHTML = ''; // Clear previous cart items + + cart.forEach((item) => { + const cartItem = document.createElement('li'); + cartItem.innerHTML = ` + ${item.title} (x${item.quantity}) + $${item.price * item.quantity} + `; + cartItemsList.appendChild(cartItem); + }); +}; + +// Open cart modal +cartBtn.addEventListener('click', () => { + if (cart.length === 0) { + alert('Your cart is empty.'); + } else { + displayCart(); + cartModal.style.display = 'flex'; + } +}); + +// Initialize +fetchProducts(); diff --git a/Source-Code/E-CommerceWebsite/style.css b/Source-Code/E-CommerceWebsite/style.css new file mode 100644 index 0000000..c7c8624 --- /dev/null +++ b/Source-Code/E-CommerceWebsite/style.css @@ -0,0 +1,144 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f9f9f9; +} + +header { + background-color: #333; + color: #fff; + padding: 10px 20px; + text-align: center; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; +} + +#cart-btn { + background-color: #28a745; + color: white; + border: none; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; +} + +#cart-btn:hover { + background-color: #218838; +} + +.container { + margin: 50px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 1000px; +} + +h1 { + margin-bottom: 30px; +} + +.products-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; +} + +.product { + border: 1px solid #ddd; + border-radius: 10px; + padding: 10px; + text-align: center; + background-color: #fff; +} + +.product img { + max-width: 100%; + height: 300px; + border-radius: 10px; +} + +.product .title { + font-size: 1.1rem; + font-weight: bold; + margin: 10px 0; + height: 60px; + overflow: hidden; +} + +.product .price { + font-size: 1rem; + color: #333; + margin: 10px 0; +} + +.product button { + background-color: #007bff; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + width: 100%; +} + +.product button:hover { + background-color: #0056b3; +} + +/* Cart Modal Styles */ +.cart-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.cart-content { + background-color: white; + padding: 20px; + border-radius: 10px; + max-width: 500px; + width: 100%; + text-align: left; +} + +#cart-items { + list-style-type: none; + padding: 0; +} + +#cart-items li { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +#close-cart { + margin-top: 20px; + background-color: #dc3545; + color: white; + border: none; + padding: 10px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; +} + +#close-cart:hover { + background-color: #c82333; +} diff --git a/Source-Code/FAQApplication/index.html b/Source-Code/FAQApplication/index.html new file mode 100644 index 0000000..cba4bb8 --- /dev/null +++ b/Source-Code/FAQApplication/index.html @@ -0,0 +1,91 @@ + + + + + + FAQ Application + + + + +
      +

      Frequently Asked Questions

      +
      +
      +

      1. What are the prerequisites for the training ?

      + +
      +
      +

      + Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

      +
      +
      +
      +
      +

      2. When can I start my training ?

      + +
      +
      +

      + Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

      +
      +
      +
      +
      +

      3. What will be the timings of the training ?

      + +
      +
      +

      + Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

      +
      +
      +
      +
      +

      4. Will I get a hard copy of the certificate ?

      + +
      +
      +

      + Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

      +
      +
      +
      +
      +

      5. What are the benifits of this training ?

      + +
      +
      +

      + Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, + vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum + quidem dolorem commodi laborum possimus voluptatibus quod minus, id + ipsum quo ducimus! +

      +
      +
      +
      + + + diff --git a/Source-Code/FAQApplication/script.js b/Source-Code/FAQApplication/script.js new file mode 100644 index 0000000..8f4b892 --- /dev/null +++ b/Source-Code/FAQApplication/script.js @@ -0,0 +1,7 @@ +const faqs = document.querySelectorAll('.faq'); + +faqs.forEach((faq) => { + faq.addEventListener('click', () => { + faq.classList.toggle('active'); + }); +}); diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css new file mode 100644 index 0000000..ead0e59 --- /dev/null +++ b/Source-Code/FAQApplication/style.css @@ -0,0 +1,108 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Times New Roman", Times, serif; + background: linear-gradient(to right, #26265a, #2f1532); + color: white; + background-attachment: fixed; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +section { + justify-items: center; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; +} + +.title { + font-size: 35px; + margin: 40px 0; + color: rgb(234, 209, 231); +} + +.faq { + max-width: 700px; + margin-top: 20px; + padding: 20px; + border: 2px solid greenyellow; + cursor: pointer; + border-radius: 15px; +} + +.question { + display: flex; + justify-content: space-between; + align-items: center; +} + +h3 { + font-size: 25px; + color: rgb(234, 209, 231); +} + +.answer { + max-height: 0; + overflow: hidden; + transition: max-height 1.4s ease; + color: rgb(191, 253, 233); +} + +.answer p { + padding-top: 20px; + line-height: 1.6; + font-size: 20px; +} + +.faq.active .answer { + max-height: 300px; + animation: fade 1s ease-in-out; +} + +i { + transition: transform 0.5s ease-in; + color: yellow; +} + +.faq.active i { + transform: rotate(180deg); +} + +@keyframes fade { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +/* @media screen and (max-width: 768px) { + section { + margin: 0 auto; + } + } + + @media screen and (max-width: 1024px) { + section { + margin: 0 auto; + } + } */ + +::-webkit-scrollbar { + width: 0; + height: 0; +} + +body::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} diff --git a/Source-Code/FoodOrdering/index.html b/Source-Code/FoodOrdering/index.html new file mode 100644 index 0000000..07813f6 --- /dev/null +++ b/Source-Code/FoodOrdering/index.html @@ -0,0 +1,51 @@ + + + + + + Food Order App + + + +
      +

      Food Order App

      +
      +
      + Burger +
      +

      Burger

      +

      $5.99

      + +
      +
      +
      + Pizza +
      +

      Pizza

      +

      $8.99

      + +
      +
      +
      + Pasta +
      +

      Pasta

      +

      $7.49

      + +
      +
      +
      + +
      +

      Your Cart

      +
        + +
      +

      Total: $0.00

      + +
      +
      + + + + diff --git a/Source-Code/FoodOrdering/script.js b/Source-Code/FoodOrdering/script.js new file mode 100644 index 0000000..0d0ffe8 --- /dev/null +++ b/Source-Code/FoodOrdering/script.js @@ -0,0 +1,50 @@ +const addToCartButtons = document.querySelectorAll('.add-to-cart'); +const cartItemsList = document.getElementById('cart-items'); +const totalPriceElement = document.getElementById('total-price'); +const placeOrderButton = document.getElementById('place-order'); + +let cart = []; +let totalPrice = 0; + +const addToCart = (event) => { + const itemName = event.target.dataset.name; + const itemPrice = parseFloat(event.target.dataset.price); + + // Add item to cart + cart.push({ name: itemName, price: itemPrice }); + + // Update total price + totalPrice += itemPrice; + + // Add item to the cart UI + const cartItem = document.createElement('li'); + cartItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`; + cartItemsList.appendChild(cartItem); + + // Update the total price displayed + totalPriceElement.textContent = totalPrice.toFixed(2); + + // Enable the "Place Order" button + placeOrderButton.disabled = false; +}; + +addToCartButtons.forEach((button) => { + button.addEventListener('click', addToCart); +}); + +const placeOrder = () => { + if (cart.length === 0) return; + + alert('Order placed successfully!'); + cart = []; + totalPrice = 0; + + // Clear cart UI + cartItemsList.innerHTML = ''; + totalPriceElement.textContent = '0.00'; + + // Disable the "Place Order" button again + placeOrderButton.disabled = true; +}; + +placeOrderButton.addEventListener('click', placeOrder); diff --git a/Source-Code/FoodOrdering/style.css b/Source-Code/FoodOrdering/style.css new file mode 100644 index 0000000..8e1defe --- /dev/null +++ b/Source-Code/FoodOrdering/style.css @@ -0,0 +1,88 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: #a5ef9d; + height: 100vh; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + width: 70%; + max-width: 1000px; +} + +h1 { + text-align: center; + font-size: 32px; +} + +.menu { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.menu-item { + text-align: center; + width: 30%; + background-color: #f9f9f9; + padding: 10px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.menu-item img { + width: 100%; + max-height: 200px; + object-fit: cover; + border-radius: 10px; +} + +.add-to-cart { + margin-top: 10px; + padding: 10px 20px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.add-to-cart:hover { + background-color: #218838; +} + +.cart { + margin-top: 30px; + text-align: center; +} + +.cart ul { + list-style-type: none; + padding: 0; +} + +.cart li { + margin: 10px 0; +} + +#place-order { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#place-order:disabled { + background-color: #aaa; + cursor: not-allowed; +} diff --git a/Source-Code/GithubProfileFinder/assets/github-logo.png b/Source-Code/GithubProfileFinder/assets/github-logo.png new file mode 100644 index 0000000..e927dc1 Binary files /dev/null and b/Source-Code/GithubProfileFinder/assets/github-logo.png differ diff --git a/Source-Code/GithubProfileFinder/assets/github.avif b/Source-Code/GithubProfileFinder/assets/github.avif new file mode 100644 index 0000000..a8958f3 Binary files /dev/null and b/Source-Code/GithubProfileFinder/assets/github.avif differ diff --git a/Source-Code/GithubProfileFinder/index.html b/Source-Code/GithubProfileFinder/index.html new file mode 100644 index 0000000..497556a --- /dev/null +++ b/Source-Code/GithubProfileFinder/index.html @@ -0,0 +1,55 @@ + + + + + + Github Profile Finder + + + + + + + + +
      +
      + + +
      + +
      +
      + avatar + Tajul Afreen + +
      +
      +

      A full stack developer

      +

      58 Repositories

      +
      + +
      +
      + + + + diff --git a/Source-Code/GithubProfileFinder/script.js b/Source-Code/GithubProfileFinder/script.js new file mode 100644 index 0000000..0468f0b --- /dev/null +++ b/Source-Code/GithubProfileFinder/script.js @@ -0,0 +1,46 @@ +const inputUser = document.querySelector('#input'); + +const userImg = document.querySelector('.main-info'); +const search = document.getElementById('search'); +const bio = document.querySelector('#bio'); +const repos = document.querySelector('#repo'); +const followers = document.querySelector('#followers'); +const following = document.querySelector('#following'); + +const fetchUser = (username) => { + fetch(`https://api.github.com/users/${username}`) + .then((data) => data.json()) + .then((jsonData) => { + if (jsonData.message === 'Not Found') { + alert('User Not Found'); + } else { + userImg.innerHTML = ` + avatar + ${jsonData.name} + @${jsonData.login} + `; + bio.innerHTML = jsonData.bio ? jsonData.bio : 'No bio available.'; + repos.innerHTML = jsonData.public_repos; + followers.innerHTML = jsonData.followers; + following.innerHTML = jsonData.following; + } + }) + .catch((err) => { + console.log(`Catch: ${err.message}`); + }); +}; + +const getUser = () => { + const username = inputUser.value.trim(); + + if (username.length === 0) { + alert('Please enter a valid GitHub username'); + } else { + fetchUser(username); + } + + inputUser.value = ''; +}; + +// Attach event listener to the search button +search.addEventListener('click', getUser); diff --git a/Source-Code/GithubProfileFinder/style.css b/Source-Code/GithubProfileFinder/style.css new file mode 100644 index 0000000..964856f --- /dev/null +++ b/Source-Code/GithubProfileFinder/style.css @@ -0,0 +1,131 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: url(./assets/github.avif); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-blend-mode: darken; +} + +.search-container { + width: 550px; + height: 50px; + background-color: #fff; + display: flex; + justify-content: space-evenly; + margin: 0 auto; + margin-top: 50px; + box-shadow: 0 3px 10px gray; +} + +#input { + width: 70%; + height: 100%; + background-color: #fff; + border: none; + outline: none; + padding: 5px 160px 5px 15px; + box-sizing: border-box; +} + +#search { + height: 100%; + width: 30%; + background-color: #000; + color: white; + cursor: pointer; + text-transform: uppercase; +} + +.profile-card { + width: 500px; + background-color: rgba(255, 255, 255, 0.6); + margin: 25px auto; + border-radius: 15px; + overflow: hidden; + margin-bottom: 15px; + box-shadow: 0 3px 10px gray; + font-family: 'Lobster Two', cursive; +} + +.main-info { + display: flex; + flex-direction: column; + align-items: center; + border-bottom: 1px solid gray; +} + +#prof-img { + height: 70px; + width: auto; + border-radius: 50%; + margin: 10px 0; + box-shadow: 0 3px 10px rgb(96, 93, 93); +} + +.name { + margin-top: 15px; + font-size: 25px; +} + +#username { + font-size: 20px; + text-decoration: none; + margin-top: 5px; + margin-bottom: 8px; +} + +a { + text-decoration: none; +} + +.bio { + width: 100%; + text-align: center; + padding: 20px 10px; + font-size: 23px; +} + +#bio { + font-weight: bold; + color: rgb(28, 99, 109); +} + +p { + margin-top: 12px; +} + +.follow { + width: 100%; + display: flex; + height: 60px; + border-top: 1px solid grey; + font-size: 20px; +} + +.follow div { + width: 50%; + text-align: center; + padding-top: 15px; +} + +.followers { + border-right: 1px solid grey; +} + +@media screen and (max-width: 600px) { + .profile-card { + width: 450px; + margin: 0 45px; + margin-top: 30px; + border-radius: 15px; + overflow: hidden; + margin-bottom: 15px; + box-shadow: 0 3px 10px gray; + } +} diff --git a/Source-Code/GradientBackgroundGenerator/index.html b/Source-Code/GradientBackgroundGenerator/index.html new file mode 100644 index 0000000..3d90334 --- /dev/null +++ b/Source-Code/GradientBackgroundGenerator/index.html @@ -0,0 +1,38 @@ + + + + + + Gradient Background Generator + + + +

      Gradient Background Generator

      + + + + +

      Current CSS Background

      +
      +

      + +
      + + + diff --git a/Source-Code/GradientBackgroundGenerator/script.js b/Source-Code/GradientBackgroundGenerator/script.js new file mode 100644 index 0000000..c29aa31 --- /dev/null +++ b/Source-Code/GradientBackgroundGenerator/script.js @@ -0,0 +1,33 @@ +document.addEventListener('DOMContentLoaded', () => { + const gradient = document.getElementById('gradient'); + const color1 = document.querySelector('.color1'); + const color2 = document.querySelector('.color2'); + const cssBackground = document.getElementById('css-background'); + const copyBtn = document.getElementById('copy-btn'); + + const updateBackground = () => { + const color1Value = color1.value; + const color2Value = color2.value; + const background = `linear-gradient(to right, ${color1Value}, ${color2Value})`; + + gradient.style.background = background; + cssBackground.textContent = `background: ${background};`; + }; + + const copyToClipboard = () => { + const textToCopy = cssBackground.textContent; + navigator.clipboard.writeText(textToCopy).then( + () => { + alert('CSS background value copied to clipboard!'); + }, + (err) => { + console.error('Failed to copy: ', err); + }, + ); + }; + color1.addEventListener('input', updateBackground); + color2.addEventListener('input', updateBackground); + copyBtn.addEventListener('click', copyToClipboard); + // Initialize background on page load + updateBackground(); +}); diff --git a/Source-Code/GradientBackgroundGenerator/style.css b/Source-Code/GradientBackgroundGenerator/style.css new file mode 100644 index 0000000..21535ab --- /dev/null +++ b/Source-Code/GradientBackgroundGenerator/style.css @@ -0,0 +1,54 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + text-align: center; + background: linear-gradient(to right, #f00, #ff0); + transition: 0.5s ease; +} + +h1 { + margin-top: 20px; +} + +input { + margin: 10px; + border: none; + height: 40px; + width: 100px; +} + +h2, +h3 { + margin: 20px; +} + +button { + width: 250px; + height: 40px; + background: #eeeff1; + color: rgb(16, 16, 16); + border: none; + border-radius: 0.6em; + cursor: pointer; + font-size: large; + font-weight: 500; + margin-top: 1rem; + transition: 0.5s, color 0.5s, transform 0.5s; +} + +button:hover { + background: #8ce0ea; + color: #eeeff1; + transform: scale(1.1); +} + +@keyframes button-press { + 0% { transform: scale(1); } + 50% { transform: scale(0.9); } + 100% { transform: scale(1); } +} + +button:active { + animation: button-press 0.2s; +} diff --git a/Source-Code/ImageFilter/index.html b/Source-Code/ImageFilter/index.html new file mode 100644 index 0000000..bb4d815 --- /dev/null +++ b/Source-Code/ImageFilter/index.html @@ -0,0 +1,88 @@ + + + + + + + Image Filter + + + + +
      +
      +
      +
      + +
      + + +

      Filters

      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      +
      + + + +
      +
      +
      + +

      Effects

      +
      + + + + + + + +
      + +
      + + + + + + + +
      +
      + + + +
      +
      +
      +
      + + + diff --git a/Source-Code/ImageFilter/script.js b/Source-Code/ImageFilter/script.js new file mode 100644 index 0000000..2083c12 --- /dev/null +++ b/Source-Code/ImageFilter/script.js @@ -0,0 +1,239 @@ +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +const img = new Image(); +const fileName = 'edited-image'; +let brightness = 0; +let contrast = 0; +let saturation = 0; +let vibrance = 0; + +// Handle file upload +document.getElementById('upload-file').addEventListener('change', (e) => { + const file = e.target.files[0]; + const reader = new FileReader(); + + reader.onload = (event) => { + img.src = event.target.result; + }; + + if (file) { + reader.readAsDataURL(file); + } +}); + +// Helper function to clamp values +const clamp = (value) => Math.min(Math.max(value, 0), 255); + +// Draw image to canvas +img.onload = () => { + canvas.width = img.width; + canvas.height = img.height; + ctx.drawImage(img, 0, 0); +}; + +// Redraw image with current adjustments +const drawImage = () => { + ctx.drawImage(img, 0, 0); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const { data } = imageData; + + // Apply brightness + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] + brightness); // Red + data[i + 1] = clamp(data[i + 1] + brightness); // Green + data[i + 2] = clamp(data[i + 2] + brightness); // Blue + } + + // Apply contrast + const factor = (259 * (contrast + 255)) / (255 * (259 - contrast)); + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(factor * (data[i] - 128) + 128); // Red + data[i + 1] = clamp(factor * (data[i + 1] - 128) + 128); // Green + data[i + 2] = clamp(factor * (data[i + 2] - 128) + 128); // Blue + } + + // Apply saturation + for (let i = 0; i < data.length; i += 4) { + const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = clamp(avg + (data[i] - avg) * (1 + saturation / 100)); // Red + data[i + 1] = clamp(avg + (data[i + 1] - avg) * (1 + saturation / 100)); // Green + data[i + 2] = clamp(avg + (data[i + 2] - avg) * (1 + saturation / 100)); // Blue + } + + // Apply vibrance + for (let i = 0; i < data.length; i += 4) { + const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + const max = Math.max(data[i], data[i + 1], data[i + 2]); + const amount = (((max - avg) * 2) / 255) * vibrance; + data[i] = clamp(data[i] + amount); // Red + data[i + 1] = clamp(data[i + 1] + amount); // Green + data[i + 2] = clamp(data[i + 2] + amount); // Blue + } + ctx.putImageData(imageData, 0, 0); +}; + +// Apply brightness +const applyBrightness = (value) => { + brightness += value; + drawImage(); +}; + +// Apply contrast +const applyContrast = (value) => { + contrast += value; + drawImage(); +}; + +// Apply saturation +const applySaturation = (value) => { + saturation += value; + drawImage(); +}; + +// Apply vibrance +const applyVibrance = (value) => { + vibrance += value; + drawImage(); +}; + +// Apply effect +const applyEffect = (effect) => { + drawImage(); + const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + const { data } = imageData; + + if (effect === 'vintage') { + // Vintage effect + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] * 0.9); // Red + data[i + 1] = clamp(data[i + 1] * 0.7); // Green + data[i + 2] = clamp(data[i + 2] * 0.5); // Blue + } + } else if (effect === 'lomo') { + // Lomo effect + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] * 1.2); // Red + data[i + 1] = clamp(data[i + 1] * 1.2); // Green + data[i + 2] = clamp(data[i + 2] * 1.2); // Blue + } + } else if (effect === 'clarity') { + // Clarity effect + // (Increase contrast) + applyContrast(20); + } else if (effect === 'sincity') { + // Sin City effect + for (let i = 0; i < data.length; i += 4) { + const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = avg; // Red + data[i + 1] = avg; // Green + data[i + 2] = avg; // Blue + } + } else if (effect === 'crossprocess') { + // Cross Process effect + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] * 1.3); // Red + data[i + 1] = clamp(data[i + 1] * 1.1); // Green + data[i + 2] = clamp(data[i + 2] * 0.9); // Blue + } + } else if (effect === 'pinhole') { + // Pinhole effect + for (let i = 0; i < data.length; i += 4) { + const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + data[i] = avg * 0.9; // Red + data[i + 1] = avg * 0.9; // Green + data[i + 2] = avg * 0.9; // Blue + } + } else if (effect === 'nostalgia') { + // Nostalgia effect + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] * 0.9 + 50); // Red + data[i + 1] = clamp(data[i + 1] * 0.7 + 20); // Green + data[i + 2] = clamp(data[i + 2] * 0.5 + 10); // Blue + } + } else if (effect === 'hermajesty') { + // Her Majesty effect + for (let i = 0; i < data.length; i += 4) { + data[i] = clamp(data[i] * 1.1); // Red + data[i + 1] = clamp(data[i + 1] * 0.95); // Green + data[i + 2] = clamp(data[i + 2] * 1.3); // Blue + } + } + + ctx.putImageData(imageData, 0, 0); +}; + +// Download image +const downloadImage = () => { + const link = document.createElement('a'); + link.download = fileName; + link.href = canvas.toDataURL('image/jpeg'); + link.click(); +}; + +// Revert filters +const revertFilters = () => { + brightness = 0; + contrast = 0; + saturation = 0; + vibrance = 0; + drawImage(); +}; + +// Event listeners for filter buttons +document + .querySelector('.brightness-add') + .addEventListener('click', () => applyBrightness(10)); +document + .querySelector('.brightness-remove') + .addEventListener('click', () => applyBrightness(-10)); +document + .querySelector('.contrast-add') + .addEventListener('click', () => applyContrast(10)); +document + .querySelector('.contrast-remove') + .addEventListener('click', () => applyContrast(-10)); +document + .querySelector('.saturation-add') + .addEventListener('click', () => applySaturation(10)); +document + .querySelector('.saturation-remove') + .addEventListener('click', () => applySaturation(-10)); +document + .querySelector('.vibrance-add') + .addEventListener('click', () => applyVibrance(10)); +document + .querySelector('.vibrance-remove') + .addEventListener('click', () => applyVibrance(-10)); + +// Event listeners for effect buttons +document + .querySelector('.vintage-add') + .addEventListener('click', () => applyEffect('vintage')); +document + .querySelector('.lomo-add') + .addEventListener('click', () => applyEffect('lomo')); +document + .querySelector('.clarity-add') + .addEventListener('click', () => applyEffect('clarity')); +document + .querySelector('.sincity-add') + .addEventListener('click', () => applyEffect('sincity')); + +document + .querySelector('.crossprocess-add') + .addEventListener('click', () => applyEffect('crossprocess')); +document + .querySelector('.pinhole-add') + .addEventListener('click', () => applyEffect('pinhole')); +document + .querySelector('.nostalgia-add') + .addEventListener('click', () => applyEffect('nostalgia')); +document + .querySelector('.hermajesty-add') + .addEventListener('click', () => applyEffect('hermajesty')); + +// Event listeners for download and revert buttons +document + .getElementById('download-btn') + .addEventListener('click', downloadImage); +document.getElementById('revert-btn').addEventListener('click', revertFilters); diff --git a/Source-Code/ImageFilter/style.css b/Source-Code/ImageFilter/style.css new file mode 100644 index 0000000..ce958f4 --- /dev/null +++ b/Source-Code/ImageFilter/style.css @@ -0,0 +1,146 @@ +body { + font-family: Arial, sans-serif; + background-color: #f8f9fa; + margin: 0; + padding: 0; +} + +nav { + background-color: #17a2b8; + padding: 1rem; + text-align: center; +} + +.navbar-brand { + color: #fff; + text-decoration: none; + font-size: 1.5rem; +} + +.container { + max-width: 700px; + margin: 0 auto; + padding: 1rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; +} + +#canvas { + margin: auto; + background: #eae7e7; + width: 100%; +} + +.custom-file { + width: 100%; + height: 2.5rem; + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +canvas { + display: block; + max-width: 100%; + margin: 1rem 0; + border: 1px solid #ced4da; +} + +h4 { + font-size: 1.5rem; + margin: 1rem 0; + text-align: center; + color: #495057; +} + +.row { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin: 1rem auto; + gap: 3px; +} + +.filter-btn { + margin-bottom: 1rem; + width: 40px; + height: 30px; + color: #f8fafc; + background-color: #17a2b8; + border-color: #007bff; + border-radius: 7px; + font-size: medium; + cursor: pointer; +} + +.filter-btn:hover { + background-color: #0069d9; + border-color: #0056b3; +} + +.btn-disabled { + width: 80px; + height: 25px; + border-color: #1d2124; + border-radius: 3px; + background-color: #fcfcfc; + color: #343739; +} + +.btn-dark { + color: #fff; + font-size: medium; + background-color: #343a40; + border-color: #343a40; + border-radius: 7px; + width: 100px; + height: 40px; + cursor: pointer; +} + +.btn-dark:hover { + color: #fff; + background-color: #23272b; + border-color: #1d2124; +} + +.btn-primary { + color: #fff; + font-size: medium; + background-color: #007bff; + border-color: #007bff; + height: 50px; + width: 150px; + border-radius: 9px; + cursor: pointer; +} + +.btn-primary:hover { + color: #fff; + background-color: #0056b3; + border-color: #004085; + height: 56px; + width: 160px; +} + +.btn-danger { + font-size: medium; + color: #fff; + background-color: #dc3545; + border-color: #dc3545; + height: 50px; + width: 150px; + border-radius: 9px; +} + +.btn-danger:hover { + color: #fff; + background-color: #c82333; + border-color: #bd2130; + height: 56px; + width: 160px; +} diff --git a/Source-Code/InteractivePolling/index.html b/Source-Code/InteractivePolling/index.html new file mode 100644 index 0000000..2d67c99 --- /dev/null +++ b/Source-Code/InteractivePolling/index.html @@ -0,0 +1,29 @@ + + + + + + Interactive Polling App + + + +
      +

      Vote for Your Favorite Programming Language

      +
      + + + + +
      +
      +

      Results

      +
        + +
      +
      +
      + + + + + diff --git a/Source-Code/InteractivePolling/script.js b/Source-Code/InteractivePolling/script.js new file mode 100644 index 0000000..e0b4d0b --- /dev/null +++ b/Source-Code/InteractivePolling/script.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', () => { + const pollOptions = document.querySelectorAll('.poll-option'); + const resultsList = document.getElementById('results-list'); + + const votes = JSON.parse(localStorage.getItem('votes')) || { + Ruby: 0, + Python: 0, + Java: 0, + Javascript: 0, + }; + + // Update the results on the page + function updateResults() { + resultsList.innerHTML = ''; // Clear previous results + + const totalVotes = Object.values(votes).reduce( + (total, count) => total + count, + 0, + ); + + // Display the updated results + Object.entries(votes).forEach(([option, count]) => { + const percentage = totalVotes + ? ((count / totalVotes) * 100).toFixed(1) + : 0; + + const resultItem = document.createElement('li'); + resultItem.innerHTML = ` + ${option}: ${count} votes (${percentage}%) +
      + `; + resultsList.appendChild(resultItem); + }); + } + + // Display initial poll results + updateResults(); + + // Event listener for voting + pollOptions.forEach((option) => { + option.addEventListener('click', () => { + const selectedVote = option.getAttribute('data-vote'); + votes[selectedVote] += 1; + localStorage.setItem('votes', JSON.stringify(votes)); + updateResults(); + }); + }); +}); diff --git a/Source-Code/InteractivePolling/style.css b/Source-Code/InteractivePolling/style.css new file mode 100644 index 0000000..f85b2e4 --- /dev/null +++ b/Source-Code/InteractivePolling/style.css @@ -0,0 +1,67 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f9f9f9; +} + +.poll-container { + background: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; + text-align: center; +} + +.poll-question { + font-size: 1.2rem; + margin-bottom: 20px; +} + +label { + display: block; + margin: 10px 0; + font-size: 1rem; +} + +button { + margin-top: 20px; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.poll-results { + margin-top: 20px; + text-align: left; +} + +.poll-results ul { + list-style: none; + padding: 0; +} + +.poll-results li { + padding: 5px 0; + font-size: 1rem; +} + +.poll-results .bar { + background-color: #007bff; + height: 10px; + border-radius: 4px; + margin-top: 5px; +} diff --git a/Source-Code/JumpGame/index.html b/Source-Code/JumpGame/index.html new file mode 100644 index 0000000..e3373ea --- /dev/null +++ b/Source-Code/JumpGame/index.html @@ -0,0 +1,20 @@ + + + + + + Jump Game + + + +

      Jump Game

      +

      Press space to jump

      +
      +
      +
      +
      +
      +

      Score:

      + + + diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js new file mode 100644 index 0000000..9b02e9b --- /dev/null +++ b/Source-Code/JumpGame/script.js @@ -0,0 +1,66 @@ +const character = document.getElementById('character'); +const block = document.getElementById('block'); +const block2 = document.getElementById('block2'); +let counter = 0; + +const jump = () => { + if (character.classList.contains('animate')) return; + character.classList.add('animate'); + setTimeout(() => { + character.classList.remove('animate'); + }, 300); +}; + +// eslint-disable-next-line no-unused-vars +const checkDead = setInterval(() => { + const characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top'), + 10, + ); + const blockLeft = parseInt( + window.getComputedStyle(block).getPropertyValue('left'), + 10, + ); + if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) { + block.style.animation = 'none'; + alert(`Game Over. Score: ${Math.floor(counter / 100)}`); + counter = 0; + block.style.animation = 'block 1s infinite linear'; + } else { + counter += 1; + document.getElementById('scoreSpan').innerText = Math.floor(counter / 100); + } +}, 10); + +const add = () => { + block2.classList.add('animate1'); + setTimeout(() => { + block2.classList.remove('animate1'); + }, 9000); +}; + +// Call the `add` function at regular intervals to animate block2 +setInterval(add, 7000); + +// eslint-disable-next-line no-unused-vars +const ka = () => { + const characterTop = parseInt( + window.getComputedStyle(character).getPropertyValue('top'), + 10, + ); + const blockTop = parseInt( + window.getComputedStyle(block2).getPropertyValue('left'), + 10, + ); + if (blockTop < 20 && characterTop === 100) { + block2.classList.remove('animate1'); + alert(`Game Over. Score: ${Math.floor(counter / 100)}`); + counter = 0; + } +}; + +window.addEventListener('keydown', (event) => { + if (event.keyCode === 32) { + jump(); + } +}); diff --git a/Source-Code/JumpGame/style.css b/Source-Code/JumpGame/style.css new file mode 100644 index 0000000..fe3c090 --- /dev/null +++ b/Source-Code/JumpGame/style.css @@ -0,0 +1,117 @@ +* { + padding: 0; + margin: 0; + overflow: hidden; + text-align: center; + background-color: blue; +} + +.game { + top: 40px; + width: 500px; + height: 200px; + border: 1px solid black; + margin: 10% auto; + background-color: aqua; +} + +h2 { + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: rgb(0, 247, 255); + text-shadow: 3px 2px rgb(128, 0, 0); + font-size: 5em; +} + +p { + color: white; + font-size: 20px; + text-align: center; +} + +#character { + width: 30px; + height: 50px; + background-color: red; + position: relative; + top: 150px; + border-radius: 70%; +} + +.animate { + animation: jump 0.3s linear; +} + +@keyframes jump { + 0% { + top: 150px; + } + + 30% { + top: 100px; + } + + 70% { + top: 100px; + } + + 100% { + top: 150px; + } +} + +#block { + background-color: blue; + width: 20px; + height: 20px; + position: relative; + top: 130px; + left: 500px; + animation: block 1s infinite linear; +} + +#block2 { + background-color: orange; + width: 20px; + height: 20px; + position: relative; + top: 30px; + left: 500px; +} + +.animate1 { + animation: blocke 1.5s infinite linear; +} + +@keyframes blocke { + 0% { + left: 500px; + } + + 100% { + left: -20px; + } +} + +@keyframes block { + 0% { + left: 500px; + } + + 100% { + left: -20px; + } +} + +#co { + margin-bottom: 10px; + font-weight: bold; +} + +.animate2 { + animation: pa 1s ease-in-out; +} + +.show { + opacity: 0; +} diff --git a/Source-Code/JustRelax/index.html b/Source-Code/JustRelax/index.html new file mode 100644 index 0000000..796e484 --- /dev/null +++ b/Source-Code/JustRelax/index.html @@ -0,0 +1,24 @@ + + + + + + + Just Relax App + + + + +

      Just Relax !!

      +
      +
      +

      +
      + +
      +
      +
      + + + + \ No newline at end of file diff --git a/Source-Code/JustRelax/script.js b/Source-Code/JustRelax/script.js new file mode 100644 index 0000000..e7098fe --- /dev/null +++ b/Source-Code/JustRelax/script.js @@ -0,0 +1,32 @@ +/* eslint-disable no-use-before-define */ +const container = document.querySelector('.container'); +const text = document.querySelector('#text'); + +const TOTAL_TIME = 7500; +const BREATHE_TIME = (TOTAL_TIME / 5) * 2; +const HOLD_TIME = TOTAL_TIME / 7; + +// Start the animation +const startBreathingAnimation = () => { + animateBreathing(); + setInterval(animateBreathing, TOTAL_TIME); +}; + +const animateBreathing = () => { + text.textContent = 'Breathe In!'; + container.classList.add('grow'); + container.classList.remove('shrink'); + + setTimeout(() => { + text.textContent = 'Hold...'; + + setTimeout(() => { + text.textContent = 'Breathe Out!'; + container.classList.add('shrink'); + container.classList.remove('grow'); + }, HOLD_TIME); + }, BREATHE_TIME); +}; + +// Initialize the animation +startBreathingAnimation(); diff --git a/Source-Code/JustRelax/style.css b/Source-Code/JustRelax/style.css new file mode 100644 index 0000000..447fe0c --- /dev/null +++ b/Source-Code/JustRelax/style.css @@ -0,0 +1,116 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@550;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(90deg, #5567b7, #53a0ad); + color: rgb(243, 250, 235); + font-family: 'Dancing Script', sans-serif; + font-size: large; + font-weight: 500; + min-height: 100vh; + overflow: hidden; + display: flex; + align-items: center; + flex-direction: column; + margin: 0; +} + +.container { + display: flex; + align-items: center; + justify-content: center; + height: 300px; + width: 300px; + margin: auto; + position: relative; + transform: scale(1); +} + +.gradient-circle { + background: + conic-gradient( + #5567b7 0%, + #954ca4 40%, + #fff 40%, + #fff 60%, + #53afb3 60%, + #53a0ad 100% + ); + height: 320px; + width: 320px; + position: absolute; + top: -10px; + left: -10px; + z-index: -2; + border-radius: 50%; +} + +.circle { + background-color: rgb(2, 16, 43); + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + border-radius: 50%; +} + +.pointer-container { + position: absolute; + top: -40px; + left: 140px; + width: 20px; + height: 190px; + animation: rotate 7.5s linear forwards infinite; + transform-origin: bottom center; +} + +.pointer { + background-color: lavender; + border-radius: 50%; + height: 20px; + width: 20px; + display: block; +} + +.container.grow { + animation: grow 3s linear forwards; +} + +.container.shrink { + animation: shrink 3s linear forwards; +} + +@keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@keyframes grow { + from { + transform: scale(1); + } + + to { + transform: scale(1.2); + } +} + +@keyframes shrink { + from { + transform: scale(1.2); + } + + to { + transform: scale(1); + } +} diff --git a/Source-Code/LanguageTranslator/index.html b/Source-Code/LanguageTranslator/index.html new file mode 100644 index 0000000..2359393 --- /dev/null +++ b/Source-Code/LanguageTranslator/index.html @@ -0,0 +1,82 @@ + + + + + + Language Translator App + + + +
      +

      Language Translator

      +
      + +
      + + + +
      + +
      +
      + + + diff --git a/Source-Code/LanguageTranslator/script.js b/Source-Code/LanguageTranslator/script.js new file mode 100644 index 0000000..ee14549 --- /dev/null +++ b/Source-Code/LanguageTranslator/script.js @@ -0,0 +1,32 @@ +const translateButton = document.getElementById('translateButton'); +const sourceText = document.getElementById('sourceText'); +const translatedText = document.getElementById('translatedText'); +const sourceLang = document.getElementById('sourceLang'); +const targetLang = document.getElementById('targetLang'); + +// Replace with your own API key +const API_URL = 'https://api.mymemory.translated.net/get'; + +translateButton.addEventListener('click', async () => { + const text = sourceText.value.trim(); + const fromLang = sourceLang.value; + const toLang = targetLang.value; + + if (!text) { + alert('Please enter text to translate.'); + return; + } + + try { + const response = await fetch( + `${API_URL}?q=${encodeURIComponent(text)}&langpair=${fromLang}|${toLang}`, + ); + const data = await response.json(); + const translated = data.responseData.translatedText; + + translatedText.value = translated; + } catch (error) { + console.error('Error fetching translation:', error); + alert('Failed to translate. Please try again later.'); + } +}); diff --git a/Source-Code/LanguageTranslator/style.css b/Source-Code/LanguageTranslator/style.css new file mode 100644 index 0000000..1d9b219 --- /dev/null +++ b/Source-Code/LanguageTranslator/style.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + background-color: #a4bef2; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-width: 500px; +} + +h1 { + font-size: 24px; + margin-bottom: 20px; +} + +.translator { + display: flex; + flex-direction: column; +} + +textarea { + width: 90%; + height: 100px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.controls { + display: flex; + justify-content: space-around; + align-items: center; +} + +select { + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 10px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} diff --git a/Source-Code/MemeGenerator/index.html b/Source-Code/MemeGenerator/index.html new file mode 100644 index 0000000..241acb9 --- /dev/null +++ b/Source-Code/MemeGenerator/index.html @@ -0,0 +1,24 @@ + + + + + + Meme Generator + + + +
      +

      Random Meme Generator

      +
      + Random Meme +
      +
      + + + +
      +
      + + + + diff --git a/Source-Code/MemeGenerator/script.js b/Source-Code/MemeGenerator/script.js new file mode 100644 index 0000000..b505ede --- /dev/null +++ b/Source-Code/MemeGenerator/script.js @@ -0,0 +1,47 @@ +const memeImage = document.getElementById('meme-image'); +const newMemeButton = document.getElementById('new-meme'); +const downloadMemeButton = document.getElementById('download-meme'); +const shareMemeButton = document.getElementById('share-meme'); + +// Fetch random meme from the API +async function fetchMeme() { + try { + const response = await fetch('https://api.imgflip.com/get_memes'); + const data = await response.json(); + const { memes } = data.data; + const randomMeme = memes[Math.floor(Math.random() * memes.length)]; + memeImage.src = randomMeme.url; + } catch (error) { + console.error('Error fetching meme:', error); + } +} + +// Download the meme +const downloadMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const a = document.createElement('a'); + a.href = memeUrl; + a.download = 'meme.jpg'; + a.click(); + } +}; + +// Share the meme +const shareMeme = () => { + const memeUrl = memeImage.src; + if (memeUrl) { + const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent( + memeUrl, + )}`; + window.open(shareUrl, '_blank'); + } +}; + +// Event listeners +newMemeButton.addEventListener('click', fetchMeme); +downloadMemeButton.addEventListener('click', downloadMeme); +shareMemeButton.addEventListener('click', shareMeme); + +// Load an initial meme on page load +fetchMeme(); diff --git a/Source-Code/MemeGenerator/style.css b/Source-Code/MemeGenerator/style.css new file mode 100644 index 0000000..921ae3a --- /dev/null +++ b/Source-Code/MemeGenerator/style.css @@ -0,0 +1,51 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f1f1f1; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.meme-container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 80%; + max-width: 500px; +} + +h1 { + color: #333; +} + +#meme-box img { + width: 100%; + height: auto; + border-radius: 8px; + margin: 20px 0; +} + +#meme-buttons button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + margin: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#meme-buttons button:hover { + background-color: #45a049; +} + +#meme-buttons button:disabled { + background-color: #ccc; + cursor: not-allowed; +} diff --git a/Source-Code/MemoryCard/index.html b/Source-Code/MemoryCard/index.html new file mode 100644 index 0000000..0037ab2 --- /dev/null +++ b/Source-Code/MemoryCard/index.html @@ -0,0 +1,19 @@ + + + + + + Memory Card Game + + + +
      +

      Memory Card Game

      +
      + +
      + +
      + + + diff --git a/Source-Code/MemoryCard/script.js b/Source-Code/MemoryCard/script.js new file mode 100644 index 0000000..e493312 --- /dev/null +++ b/Source-Code/MemoryCard/script.js @@ -0,0 +1,107 @@ +const cardValues = [ + '🍎', + '🍎', + '🍌', + '🍌', + '🍮', + '🍮', + '🎂', + '🎂', + '🍟', + '🍟', + '🍫', + '🍫', + '🍇', + '🍇', + '🥝', + '🥝', +]; +let shuffledValues = []; +let cardElements = []; +let flippedCards = []; +let matchedCards = []; + +const shuffleArray = (array) => { + let currentIndex = array.length; + let temporaryValue; + let randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; +}; + +const checkMatch = () => { + const [card1, card2] = flippedCards; + + if ( + card1.querySelector('.card-back').textContent + === card2.querySelector('.card-back').textContent + ) { + matchedCards.push(card1, card2); + } else { + card1.classList.remove('flipped'); + card2.classList.remove('flipped'); + } + flippedCards = []; + + if (matchedCards.length === cardElements.length) { + alert('Congratulations! You found all pairs!'); + } +}; + +const flipCard = (card) => { + if ( + flippedCards.length < 2 + && !card.classList.contains('flipped') + && !matchedCards.includes(card) + ) { + card.classList.add('flipped'); + flippedCards.push(card); + + if (flippedCards.length === 2) { + setTimeout(checkMatch, 1000); + } + } +}; +const startGame = () => { + shuffledValues = shuffleArray(cardValues); + const board = document.getElementById('game-board'); + board.innerHTML = ''; + matchedCards = []; + cardElements = []; + for (let i = 0; i < shuffledValues.length; i += 1) { + const card = document.createElement('div'); + card.classList.add('card'); + + const cardInner = document.createElement('div'); + cardInner.classList.add('card-inner'); + + const cardFront = document.createElement('div'); + cardFront.classList.add('card-front'); + + const cardBack = document.createElement('div'); + cardBack.classList.add('card-back'); + cardBack.textContent = shuffledValues[i]; + + cardInner.appendChild(cardFront); + cardInner.appendChild(cardBack); + card.appendChild(cardInner); + + card.addEventListener('click', () => flipCard(card)); + board.appendChild(card); + cardElements.push(card); + } +}; + +const btn = document.querySelector('.btn'); +btn.addEventListener('click', startGame); +// Initialize the game when the page loads +window.onload = startGame; diff --git a/Source-Code/MemoryCard/style.css b/Source-Code/MemoryCard/style.css new file mode 100644 index 0000000..c787a6f --- /dev/null +++ b/Source-Code/MemoryCard/style.css @@ -0,0 +1,87 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #eeddf0; +} + +h1 { + color: #d38692; + font-size: 2em; +} + +.container { + text-align: center; + background-color: #a7f1c5; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.game-board { + display: grid; + grid-template-columns: repeat(4, 100px); + grid-template-rows: repeat(4, 100px); + gap: 10px; + margin-bottom: 20px; +} + +.card { + width: 100px; + height: 100px; + background-color: #eee; + display: flex; + align-items: center; + justify-content: center; + font-size: 2em; + cursor: pointer; + color: transparent; + perspective: 1000px; /* Added for 3D effect */ +} + +.card-inner { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.6s; + transform-style: preserve-3d; + position: relative; +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card-front { + background-color: #e68ce0; +} + +.card-back { + background-color: #fff; + font-size: 60px; + color: #000; + transform: rotateY(180deg); +} + +.card.flipped .card-inner { + transform: rotateY(180deg); +} + +button { + padding: 15px 20px; + font-size: 18px; + font-weight: 600; + color: rgb(228, 240, 240); + border: none; + cursor: pointer; + background-color: #008cba; +} diff --git a/Source-Code/MovieSearchApp/index.html b/Source-Code/MovieSearchApp/index.html new file mode 100644 index 0000000..6434f2c --- /dev/null +++ b/Source-Code/MovieSearchApp/index.html @@ -0,0 +1,20 @@ + + + + + + Movie Search App + + + +
      +

      Movie Search App

      +
      + + +
      +
      +
      + + + diff --git a/Source-Code/MovieSearchApp/script.js b/Source-Code/MovieSearchApp/script.js new file mode 100644 index 0000000..860da01 --- /dev/null +++ b/Source-Code/MovieSearchApp/script.js @@ -0,0 +1,59 @@ +const searchBtn = document.getElementById('search-btn'); +const searchInput = document.getElementById('search'); +const movieContainer = document.getElementById('movie-container'); + +// API Details +const API_KEY = '40bbd9b4'; // Replace with your OMDB or TMDB API key +const API_URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=`; + +// Display Movies +const displayMovies = (movies) => { + movieContainer.innerHTML = ''; // Clear previous results + + movies.forEach((movie) => { + const movieCard = document.createElement('div'); + movieCard.classList.add('movie-card'); + + movieCard.innerHTML = ` + ${movie.Title} +

      ${movie.Title}

      +

      Year: ${movie.Year}

      + `; + + movieContainer.appendChild(movieCard); + }); +}; + +// Show Error Message +const showError = (message) => { + movieContainer.innerHTML = `

      ${message}

      `; +}; + +// Fetch Movies +async function fetchMovies(query) { + try { + const response = await fetch(`${API_URL}${query}`); + const data = await response.json(); + + if (data.Response === 'True') { + displayMovies(data.Search); + } else { + showError(data.Error); + } + } catch (error) { + console.error('Error fetching data:', error); + showError('Unable to fetch data. Please try again later.'); + } +} + +// Event Listener +searchBtn.addEventListener('click', () => { + const query = searchInput.value.trim(); + if (query) { + fetchMovies(query); + } else { + showError('Please enter a movie name.'); + } +}); diff --git a/Source-Code/MovieSearchApp/style.css b/Source-Code/MovieSearchApp/style.css new file mode 100644 index 0000000..2c8a42c --- /dev/null +++ b/Source-Code/MovieSearchApp/style.css @@ -0,0 +1,78 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + text-align: center; +} + +.container { + padding: 20px; +} + +h1 { + color: #333; +} + +.search-container { + margin: 20px 0; +} + +#search { + padding: 10px; + width: 300px; + border: 1px solid #ccc; + border-radius: 4px; +} + +#search-btn { + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#search-btn:hover { + background-color: #0056b3; +} + +.movie-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-top: 20px; +} + +.movie-card { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + width: 250px; + text-align: left; + overflow: hidden; +} + +.movie-card img { + width: 100%; + height: auto; +} + +.movie-card h3 { + padding: 10px; + font-size: 18px; +} + +.movie-card p { + padding: 0 10px 10px; + font-size: 14px; + color: #555; +} + +.error { + color: red; + margin-top: 20px; +} diff --git a/Source-Code/MusicPlayer/index.html b/Source-Code/MusicPlayer/index.html new file mode 100644 index 0000000..1c3f58f --- /dev/null +++ b/Source-Code/MusicPlayer/index.html @@ -0,0 +1,35 @@ + + + + + + Music Player + + + +
      +

      Music Player

      +
      +

      No song playing

      + +
      + + + +
      + +
      +
      +

      Your Playlist

      +
        +
        +
        +

        Add Your Songs

        + + +
        +
        + + + + \ No newline at end of file diff --git a/Source-Code/MusicPlayer/script.js b/Source-Code/MusicPlayer/script.js new file mode 100644 index 0000000..980df0e --- /dev/null +++ b/Source-Code/MusicPlayer/script.js @@ -0,0 +1,95 @@ +// script.js + +const audio = document.getElementById('audio'); +const songTitle = document.getElementById('song-title'); +const playButton = document.getElementById('play'); +const nextButton = document.getElementById('next'); +const prevButton = document.getElementById('prev'); +const volumeControl = document.getElementById('volume'); +const playlist = document.getElementById('playlist'); +const fileInput = document.getElementById('file-input'); +const addSongButton = document.getElementById('add-song-btn'); + +const songs = []; +let currentSongIndex = 0; + +// Load song by index +const loadSong = (index) => { + const song = songs[index]; + audio.src = song.src; + songTitle.textContent = song.title; +}; + +// Play/Pause functionality +const togglePlay = () => { + if (audio.paused) { + audio.play(); + playButton.textContent = '⏸️'; + } else { + audio.pause(); + playButton.textContent = '▶️'; + } +}; + +// Next song +const nextSong = () => { + currentSongIndex = (currentSongIndex + 1) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Previous song +const prevSong = () => { + currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; +}; + +// Volume control +const changeVolume = () => { + audio.volume = volumeControl.value; +}; + +// Update playlist display +const updatePlaylist = () => { + playlist.innerHTML = ''; + songs.forEach((song, index) => { + const li = document.createElement('li'); + li.textContent = song.title; + li.addEventListener('click', () => { + currentSongIndex = index; + loadSong(currentSongIndex); + audio.play(); + playButton.textContent = '⏸️'; + }); + playlist.appendChild(li); + }); +}; +// Add a song to the playlist +function addSong(file) { + const song = { + title: file.name, + src: URL.createObjectURL(file), + }; + songs.push(song); + updatePlaylist(); +} + +// Event listeners +playButton.addEventListener('click', togglePlay); +nextButton.addEventListener('click', nextSong); +prevButton.addEventListener('click', prevSong); +volumeControl.addEventListener('input', changeVolume); + +addSongButton.addEventListener('click', () => { + const file = fileInput.files[0]; + if (file) { + addSong(file); + fileInput.value = ''; // Reset file input + } +}); + +// Initialize player with no songs +songTitle.textContent = 'No song playing'; diff --git a/Source-Code/MusicPlayer/style.css b/Source-Code/MusicPlayer/style.css new file mode 100644 index 0000000..9cc2090 --- /dev/null +++ b/Source-Code/MusicPlayer/style.css @@ -0,0 +1,86 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #1e1e2f; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.music-player { + text-align: center; + background: #29293d; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + width: 300px; +} + +.player h2 { + font-size: 18px; + margin-bottom: 20px; +} + +.controls { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 15px; +} + +.controls button { + background: #3b3b57; + color: white; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +.add-song button { + background: #3b3b57; + color: white; + border: none; + padding: 10px; + margin-top: 10px; + border-radius: 5px; + cursor: pointer; +} + +.controls button:hover { + background: #50506b; +} + +#volume { + width: 100%; +} + +.song-list ul { + list-style: none; + padding: 0; + margin: 0; +} + +.song-list li { + background: #3b3b57; + padding: 10px; + margin: 5px 0; + border-radius: 5px; + cursor: pointer; +} + +.song-list li:hover { + background: #50506b; +} + +.add-song input { + margin-top: 10px; +} + +.add-song button:hover { + background: #50506b; +} diff --git a/Source-Code/NotesKeeper/index.html b/Source-Code/NotesKeeper/index.html new file mode 100644 index 0000000..3e6a629 --- /dev/null +++ b/Source-Code/NotesKeeper/index.html @@ -0,0 +1,35 @@ + + + + + + Notes Keeper + + + + + +
        +

        Welcome to Notes App

        +
        +
        +
        + +
        +
        +

        Your Notes

        +
        +
        No notes added yet.
        +
        + + + \ No newline at end of file diff --git a/Source-Code/NotesKeeper/script.js b/Source-Code/NotesKeeper/script.js new file mode 100644 index 0000000..77bc42a --- /dev/null +++ b/Source-Code/NotesKeeper/script.js @@ -0,0 +1,65 @@ +console.log('Welcome to Magic Notes App!'); + +// Function Declaration Before Use +function showNotes() { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + const notesElem = document.getElementById('notes'); + + if (notesObj.length === 0) { + notesElem.innerHTML = 'No notes added yet.'; + return; + } + + notesElem.innerHTML = notesObj + .map( + (note, index) => ` +
        +

        Note ${index + 1}

        +

        ${note}

        + +
        + `, + ) + .join(''); +} + +// Event Listener for Add Note Button +document.getElementById('myBtn').addEventListener('click', () => { + const textArea = document.getElementById('textarea'); + const noteContent = textArea.value.trim(); + if (!noteContent) { + alert('Please enter a note!'); + return; + } + + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.push(noteContent); + localStorage.setItem('notes', JSON.stringify(notesObj)); + textArea.value = ''; + showNotes(); +}); + +// Delete Note Function +// eslint-disable-next-line no-unused-vars +function deleteNote(index) { + const notesObj = JSON.parse(localStorage.getItem('notes')) || []; + notesObj.splice(index, 1); + localStorage.setItem('notes', JSON.stringify(notesObj)); + showNotes(); +} + +// Search Notes +document.getElementById('search').addEventListener('input', function () { + const inputVal = this.value.toLowerCase().trim(); + const noteBoxes = document.getElementsByClassName('noteBox'); + + Array.from(noteBoxes).forEach((element) => { + const boxTxt = element + .querySelector('.paraHeading') + .innerText.toLowerCase(); + element.style.display = boxTxt.includes(inputVal) ? 'block' : 'none'; + }); +}); + +// Initial Call +showNotes(); diff --git a/Source-Code/NotesKeeper/style.css b/Source-Code/NotesKeeper/style.css new file mode 100644 index 0000000..b6f5f85 --- /dev/null +++ b/Source-Code/NotesKeeper/style.css @@ -0,0 +1,109 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + padding: 20px; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; + color: white; +} + +.navbar #logo { + font-size: 24px; + font-weight: bold; +} + +.navbar ul { + list-style: none; + display: flex; +} + +.navbar ul li { + margin-left: 20px; +} + +.navbar ul li a { + color: white; + text-decoration: none; + font-size: 18px; +} + +.form-group input { + padding: 5px; + margin-right: 10px; +} + +.form-group button { + padding: 5px 10px; + background-color: #ff6700; + border: none; + color: white; + cursor: pointer; +} + +.container { + margin-top: 30px; +} + +.note-input { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.note-input label { + font-size: 18px; + font-weight: bold; +} + +.note-input textarea { + width: 100%; + padding: 10px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.note-input button { + margin-top: 10px; + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.hrStyle { + margin: 20px 0; +} + +.notesBox { + background: white; + display: flex; + gap: 30px; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + min-height: 100px; + text-align: center; + font-size: 18px; + color: #555; +} + +.buttonHeading { + padding: 5px 20px; +} diff --git a/Source-Code/PasswordGenerator/index.html b/Source-Code/PasswordGenerator/index.html new file mode 100644 index 0000000..67d0781 --- /dev/null +++ b/Source-Code/PasswordGenerator/index.html @@ -0,0 +1,55 @@ + + + + + + + + + Password Generator + + +
        +
        +

        Password Generator

        +
        + + +
        +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        +
        + +
        + + + + + diff --git a/Source-Code/PasswordGenerator/script.js b/Source-Code/PasswordGenerator/script.js new file mode 100644 index 0000000..3af8d1c --- /dev/null +++ b/Source-Code/PasswordGenerator/script.js @@ -0,0 +1,80 @@ +/* eslint-disable no-loop-func */ +const resultEl = document.getElementById('result'); +const lengthEl = document.getElementById('length'); +const uppercaseEl = document.getElementById('uppercase'); +const lowercaseEl = document.getElementById('lowercase'); +const numbersEl = document.getElementById('numbers'); +const symbolsEl = document.getElementById('symbols'); +const generateEl = document.getElementById('generate'); +const clipboardEl = document.getElementById('clipboard'); + +clipboardEl.addEventListener('click', () => { + const textarea = document.createElement('textarea'); + const password = resultEl.innerText; + + if (!password) { + return; + } + + textarea.value = password; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + textarea.remove(); + alert('Password copied to clipboard!'); +}); + +const getRandomLower = () => String.fromCharCode(Math.floor(Math.random() * 26) + 97); + +const getRandomUpper = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65); + +const getRandomNumber = () => String.fromCharCode(Math.floor(Math.random() * 10) + 48); + +const getRandomSymbol = () => { + const symbols = '!@#$%^&*(){}[]=<>/,.'; + return symbols[Math.floor(Math.random() * symbols.length)]; +}; + +const randomFunc = { + lower: getRandomLower, + upper: getRandomUpper, + number: getRandomNumber, + symbol: getRandomSymbol, +}; +const generatePassword = (lower, upper, number, symbol, length) => { + let generatedPassword = ''; + const typesCount = lower + upper + number + symbol; + const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter( + (item) => Object.values(item)[0], + ); + + if (typesCount === 0) { + return ''; + } + + for (let i = 0; i < length; i += typesCount) { + typesArr.forEach((type) => { + const funcName = Object.keys(type)[0]; + generatedPassword += randomFunc[funcName](); + }); + } + + const finalPassword = generatedPassword.slice(0, length); + + return finalPassword; +}; +generateEl.addEventListener('click', () => { + const length = +lengthEl.value; + const hasLower = lowercaseEl.checked; + const hasUpper = uppercaseEl.checked; + const hasNumber = numbersEl.checked; + const hasSymbol = symbolsEl.checked; + + resultEl.innerText = generatePassword( + hasLower, + hasUpper, + hasNumber, + hasSymbol, + length, + ); +}); diff --git a/Source-Code/PasswordGenerator/style.css b/Source-Code/PasswordGenerator/style.css new file mode 100644 index 0000000..304d22d --- /dev/null +++ b/Source-Code/PasswordGenerator/style.css @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(to right, #e762ea, #b3f4f0); + color: rgb(255, 255, 255); + font-family: 'Courier New', Courier, monospace; + font-weight: 500; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + padding: 10px; + margin: 0; +} + +h2 { + margin: 10px 0 20px; + text-align: center; + font-weight: 1000; +} + +.container { + background-color: #2bd3df; + box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2); + padding: 20px; + width: 350px; + max-width: 100%; +} + +.result-container { + background-color: rgba(0, 0, 0, 0.247); + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + font-size: 18px; + font-weight: bold; + letter-spacing: 1px; + padding: 12px 10px; + height: 50px; + width: 100%; +} + +.result-container #result { + word-wrap: break-word; + max-width: calc(100% - 40px); +} + +.btn { + border: none; + background-color: #2c085c; + color: #fff; + font-size: 16px; + padding: 8px 12px; + cursor: pointer; +} + +.result-container .btn { + position: absolute; + top: 5px; + right: 5px; + width: 40px; + height: 40px; + font-size: 20px; +} + +.btn-large { + display: block; + width: 100%; +} + +.setting { + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0; +} diff --git a/Source-Code/PomodoroTimer/index.html b/Source-Code/PomodoroTimer/index.html new file mode 100644 index 0000000..e228a97 --- /dev/null +++ b/Source-Code/PomodoroTimer/index.html @@ -0,0 +1,23 @@ + + + + + + Productivity Timer + + + +
        +

        Productivity Timer

        +
        + 25:00 +
        +
        + + +
        +

        Focus Session

        +
        + + + diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js new file mode 100644 index 0000000..c7295e1 --- /dev/null +++ b/Source-Code/PomodoroTimer/script.js @@ -0,0 +1,54 @@ +const startBtn = document.getElementById('start-btn'); +const resetBtn = document.getElementById('reset-btn'); +const minutesDisplay = document.getElementById('minutes'); +const secondsDisplay = document.getElementById('seconds'); +const statusDisplay = document.getElementById('status'); + +let timerInterval; +let isFocusSession = true; // Start with a focus session +const focusTime = 5 * 60; // 5 minutes in seconds +const breakTime = 5 * 60; // 5 minutes in seconds +let timeRemaining = focusTime; + +const updateDisplay = () => { + const minutes = Math.floor(timeRemaining / 60); + const seconds = timeRemaining % 60; + minutesDisplay.textContent = String(minutes).padStart(2, '0'); + secondsDisplay.textContent = String(seconds).padStart(2, '0'); +}; + +const toggleSession = () => { + isFocusSession = !isFocusSession; + timeRemaining = isFocusSession ? focusTime : breakTime; + statusDisplay.textContent = isFocusSession + ? 'Focus Session' + : 'Break Session'; + updateDisplay(); +}; + +const startTimer = () => { + if (timerInterval) return; // Prevent multiple intervals + timerInterval = setInterval(() => { + if (timeRemaining > 0) { + timeRemaining -= 1; + updateDisplay(); + } else { + clearInterval(timerInterval); + timerInterval = null; + toggleSession(); + } + }, 1000); +}; + +const resetTimer = () => { + clearInterval(timerInterval); + timerInterval = null; + timeRemaining = isFocusSession ? focusTime : breakTime; + updateDisplay(); +}; + +startBtn.addEventListener('click', startTimer); +resetBtn.addEventListener('click', resetTimer); + +// Initialize display +updateDisplay(); diff --git a/Source-Code/PomodoroTimer/style.css b/Source-Code/PomodoroTimer/style.css new file mode 100644 index 0000000..0d2d44d --- /dev/null +++ b/Source-Code/PomodoroTimer/style.css @@ -0,0 +1,51 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f4f8; + color: #333; + text-align: center; + margin: 0; + padding: 0; +} + +.container { + max-width: 400px; + margin: 100px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-bottom: 20px; +} + +.timer-display { + font-size: 3rem; + margin: 20px 0; +} + +.controls button { + font-size: 1rem; + padding: 10px 20px; + margin: 5px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#start-btn { + background-color: #28a745; + color: white; +} + +#reset-btn { + background-color: #dc3545; + color: white; +} + +#status { + font-size: 1.2rem; + margin-top: 20px; + color: #555; +} diff --git a/Source-Code/QuizApp/index.html b/Source-Code/QuizApp/index.html new file mode 100644 index 0000000..437eb41 --- /dev/null +++ b/Source-Code/QuizApp/index.html @@ -0,0 +1,35 @@ + + + + + + Quiz App + + + +
        +

        Quiz App

        +
        +
        +

        Loading question...

        +
        +
        + + + + +
        +
        + +
        +
        + +
        + + + + diff --git a/Source-Code/QuizApp/script.js b/Source-Code/QuizApp/script.js new file mode 100644 index 0000000..6a5b71a --- /dev/null +++ b/Source-Code/QuizApp/script.js @@ -0,0 +1,107 @@ +const questions = [ + { + question: 'What is the capital of France?', + answers: ['Berlin', 'Madrid', 'Paris', 'Rome'], + correct: 2, + }, + { + question: 'Which planet is known as the Red Planet?', + answers: ['Earth', 'Mars', 'Jupiter', 'Saturn'], + correct: 1, + }, + { + question: 'What is the largest ocean on Earth?', + answers: ['Atlantic', 'Indian', 'Arctic', 'Pacific'], + correct: 3, + }, + { + question: "Who wrote 'Romeo and Juliet'?", + answers: ['Shakespeare', 'Dickens', 'Hemingway', 'Austen'], + correct: 0, + }, +]; + +let currentQuestionIndex = 0; +let score = 0; + +const questionElement = document.getElementById('question'); +const answerButtons = document.querySelectorAll('.answer-btn'); +const nextButton = document.getElementById('next-btn'); +const resultContainer = document.getElementById('result-container'); +const restartButton = document.getElementById('restart-btn'); +const scoreElement = document.getElementById('score'); + +// Load question and answers +const loadQuestion = () => { + const currentQuestion = questions[currentQuestionIndex]; + questionElement.textContent = currentQuestion.question; + + answerButtons.forEach((button, index) => { + button.textContent = currentQuestion.answers[index]; + button.disabled = false; + button.style.backgroundColor = '#4CAF50'; // Reset button color + }); + + nextButton.disabled = true; // Disable next button until an answer is selected +}; + +// Handle answer selection +const handleAnswerClick = (index) => { + const currentQuestion = questions[currentQuestionIndex]; + + if (index === currentQuestion.correct) { + score += 1; + } + + // Disable all buttons after an answer is selected + answerButtons.forEach((button, i) => { + button.disabled = true; + if (i === currentQuestion.correct) { + button.style.backgroundColor = '#4CAF50'; // Correct answer + } else { + button.style.backgroundColor = '#f44336'; // Incorrect answers + } + }); + + nextButton.disabled = false; // Enable next button +}; + +// Show quiz result +const showResult = () => { + document.getElementById('quiz-box').classList.add('hidden'); + resultContainer.classList.remove('hidden'); + scoreElement.textContent = `You scored ${score} out of ${questions.length}`; +}; + +// Move to next question +const nextQuestion = () => { + currentQuestionIndex += 1; + if (currentQuestionIndex < questions.length) { + loadQuestion(); + } else { + showResult(); + } +}; + +// Restart the quiz +const restartQuiz = () => { + currentQuestionIndex = 0; + score = 0; + resultContainer.classList.add('hidden'); + document.getElementById('quiz-box').classList.remove('hidden'); + loadQuestion(); +}; + +// Add event listeners to answer buttons +answerButtons.forEach((button, index) => { + button.addEventListener('click', () => handleAnswerClick(index)); +}); + +// Add event listener to next button +nextButton.addEventListener('click', nextQuestion); + +// Add event listener to restart button +restartButton.addEventListener('click', restartQuiz); + +// Start the quiz +loadQuestion(); diff --git a/Source-Code/QuizApp/style.css b/Source-Code/QuizApp/style.css new file mode 100644 index 0000000..391b56c --- /dev/null +++ b/Source-Code/QuizApp/style.css @@ -0,0 +1,84 @@ +/* styles.css */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.quiz-container { + background: #fff; + border-radius: 8px; + padding: 20px; + width: 300px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + color: #333; +} + +#question-container { + margin-bottom: 20px; +} + +#answer-container { + margin-bottom: 20px; +} + +.answer-btn { + background-color: #4caf50; + color: white; + padding: 10px; + width: 100%; + margin: 5px 0; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.answer-btn:hover { + background-color: #45a049; +} + +#next-btn { + background-color: #008cba; + color: white; + padding: 10px; + width: 100%; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +#next-btn:disabled { + background-color: #ccc; +} + +.hidden { + display: none; +} + +#result-container { + text-align: center; +} + +#restart-btn { + background-color: #f44336; + color: white; + padding: 10px; + border: none; + border-radius: 5px; + cursor: pointer; + width: 100%; +} + +#restart-btn:hover { + background-color: #d32f2f; +} diff --git a/Source-Code/RandomColorGenerator/index.html b/Source-Code/RandomColorGenerator/index.html new file mode 100644 index 0000000..22f878c --- /dev/null +++ b/Source-Code/RandomColorGenerator/index.html @@ -0,0 +1,21 @@ + + + + + + Random Color Generator + + + +
        +

        Random Color Generator

        +
        +
        +
        +

        #fff

        + +
        +
        + + + diff --git a/Source-Code/RandomColorGenerator/script.js b/Source-Code/RandomColorGenerator/script.js new file mode 100644 index 0000000..a11f409 --- /dev/null +++ b/Source-Code/RandomColorGenerator/script.js @@ -0,0 +1,15 @@ +const getColor = () => { + const randomNumber = Math.floor(Math.random() * 1677215); + const randomCode = `#${randomNumber.toString(16)}`; + console.log(randomNumber, randomCode); + document.body.style.backgroundColor = randomCode; + document.getElementById('color-code').innerText = randomCode; + navigator.clipboard.writeText(randomCode);// Copy the color code to clipboard also +}; +// function call +document.getElementById('btn').addEventListener( + 'click', + getColor, +); +// init call +getColor(); diff --git a/Source-Code/RandomColorGenerator/style.css b/Source-Code/RandomColorGenerator/style.css new file mode 100644 index 0000000..a36ff4a --- /dev/null +++ b/Source-Code/RandomColorGenerator/style.css @@ -0,0 +1,44 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + +body { + transition: 1s; +} + +h1 { + font-size: 35px; + text-align: center; +} + +.main { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 30rem; + padding: 10px; + border-radius: 10px; + background-color: aliceblue; + font-size: 40px; + text-align: center; +} + +button { + display: block; + width: 100%; + background-color: black; + color: white; + border: none; + border-radius: 5px; + font-size: 40px; + margin-top: 5px; + cursor: pointer; +} diff --git a/Source-Code/RecipeApp/index.html b/Source-Code/RecipeApp/index.html new file mode 100644 index 0000000..51ba5bf --- /dev/null +++ b/Source-Code/RecipeApp/index.html @@ -0,0 +1,19 @@ + + + + + + Recipe App + + + +

        Recipe App

        +
        + + +
        +
        + + + + \ No newline at end of file diff --git a/Source-Code/RecipeApp/script.js b/Source-Code/RecipeApp/script.js new file mode 100644 index 0000000..de13836 --- /dev/null +++ b/Source-Code/RecipeApp/script.js @@ -0,0 +1,38 @@ +/* eslint-disable no-use-before-define */ + +const searchRecipes = async () => { + const query = document.getElementById('search-input').value; + if (!query) return; + + try { + const response = await fetch( + `https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`, + ); + const data = await response.json(); + displayRecipes(data.meals); + } catch (error) { + console.error('Error fetching recipes:', error); + } +}; + +const displayRecipes = (meals) => { + const recipesContainer = document.getElementById('recipes'); + recipesContainer.innerHTML = ''; + + if (!meals) { + recipesContainer.innerHTML = '

        No recipes found!

        '; + return; + } + + meals.forEach((meal) => { + const recipe = document.createElement('div'); + recipe.className = 'recipe'; + recipe.innerHTML = ` + ${meal.strMeal} +

        ${meal.strMeal}

        + View Recipe + `; + recipesContainer.appendChild(recipe); + }); +}; +document.getElementById('search').addEventListener('click', searchRecipes); diff --git a/Source-Code/RecipeApp/style.css b/Source-Code/RecipeApp/style.css new file mode 100644 index 0000000..3cea222 --- /dev/null +++ b/Source-Code/RecipeApp/style.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + background-color: #f8f8f8; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + text-align: center; + color: #333; +} + +.search-box { + display: flex; + gap: 20px; +} + +input[type="text"] { + min-width: 300px; + max-width: 400px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 10px 20px; + font-size: 16px; + background: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background: #218838; +} + +.recipes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; +} + +.recipe { + background: #f4f4f4; + padding: 15px; + border-radius: 8px; + text-align: center; +} + +.recipe img { + width: 100%; + border-radius: 8px; +} diff --git a/Source-Code/SplitLanding-Page/script.js b/Source-Code/SplitLanding-Page/script.js index ecc9070..8b61e1d 100644 --- a/Source-Code/SplitLanding-Page/script.js +++ b/Source-Code/SplitLanding-Page/script.js @@ -1,21 +1,25 @@ -const left = document.querySelector('.left'); -const right = document.querySelector('.right'); -const container = document.querySelector('.container'); +document.addEventListener('DOMContentLoaded', () => { + const left = document.querySelector('.left'); + const right = document.querySelector('.right'); + const container = document.querySelector('.container'); -left.addEventListener('mouseenter', () => { - container.classList.add('hover-left'); - container.classList.remove('hover-right'); -}); + if (left && right && container) { + left.addEventListener('mouseenter', () => { + container.classList.add('hover-left'); + container.classList.remove('hover-right'); + }); -right.addEventListener('mouseenter', () => { - container.classList.add('hover-right'); - container.classList.remove('hover-left'); -}); + right.addEventListener('mouseenter', () => { + container.classList.add('hover-right'); + container.classList.remove('hover-left'); + }); -left.addEventListener('mouseleave', () => { - container.classList.remove('hover-left'); -}); + left.addEventListener('mouseleave', () => { + container.classList.remove('hover-left'); + }); -right.addEventListener('mouseleave', () => { - container.classList.remove('hover-right'); + right.addEventListener('mouseleave', () => { + container.classList.remove('hover-right'); + }); + } }); diff --git a/Source-Code/SplitLanding-Page/style.css b/Source-Code/SplitLanding-Page/style.css index 7429fec..f651606 100644 --- a/Source-Code/SplitLanding-Page/style.css +++ b/Source-Code/SplitLanding-Page/style.css @@ -58,16 +58,13 @@ h1 { .split { position: absolute; width: 50%; - height: 50%; + height: 100%; overflow: hidden; } .split.left { left: 0; - background: url(./assets/ps5.webp); - background-repeat: no-repeat; - background-size: cover; - height: 100%; + background: url(./assets/ps5.webp) no-repeat center center/cover; } .split.left::before { @@ -87,10 +84,7 @@ h1 { .split.right { right: 0; - background: url(./assets/boxseries.jpeg); - background-repeat: no-repeat; - background-size: cover; - height: 100%; + background: url(./assets/boxseries.jpeg) no-repeat center center/cover; } .split.right::before { diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html new file mode 100644 index 0000000..a53e825 --- /dev/null +++ b/Source-Code/StopWatch/index.html @@ -0,0 +1,26 @@ + + + + + + Stop watch + + + +
        +

        Stopwatch

        +
        + 00:00:00 +
        +
        + + + +
        +
        + + + diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js new file mode 100644 index 0000000..c37cbe9 --- /dev/null +++ b/Source-Code/StopWatch/script.js @@ -0,0 +1,46 @@ +let milliseconds = 0; +let seconds = 0; +let minutes = 0; +let timer; + +const startButton = document.getElementById('start'); +const stopButton = document.getElementById('stop'); +const resetButton = document.getElementById('reset'); + +const updateTime = () => { + milliseconds += 1; + if (milliseconds === 100) { + milliseconds = 0; + seconds += 1; + } + if (seconds === 60) { + seconds = 0; + minutes += 1; + } + document.getElementById('milliseconds').innerText = milliseconds < 10 ? `0${milliseconds}` : milliseconds; + document.getElementById('seconds').innerText = seconds < 10 ? `0${seconds}` : seconds; + document.getElementById('minutes').innerText = minutes < 10 ? `0${minutes}` : minutes; +}; + +const startTimer = () => { + clearInterval(timer); + timer = setInterval(updateTime, 10); +}; + +const stopTimer = () => { + clearInterval(timer); +}; + +const resetTimer = () => { + clearInterval(timer); + milliseconds = 0; + seconds = 0; + minutes = 0; + document.getElementById('milliseconds').innerText = '00'; + document.getElementById('seconds').innerText = '00'; + document.getElementById('minutes').innerText = '00'; +}; + +startButton.addEventListener('click', startTimer); +stopButton.addEventListener('click', stopTimer); +resetButton.addEventListener('click', resetTimer); diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css new file mode 100644 index 0000000..1f6d343 --- /dev/null +++ b/Source-Code/StopWatch/style.css @@ -0,0 +1,47 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #2e2a2a; + margin: 0; + font-family: Arial, sans-serif; +} + +.container { + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; +} + +.stopwatch, +h1, +span { + color: aliceblue; +} + +.stopwatch { + font-size: 48px; + margin-bottom: 20px; +} + +.buttons { + display: flex; + justify-content: center; + gap: 10px; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + border-radius: 5px; + background-color: #007bff; + color: #fff; +} + +button:active { + background-color: #0056b3; +} diff --git a/Source-Code/TicTacToe/index.html b/Source-Code/TicTacToe/index.html new file mode 100644 index 0000000..37fccff --- /dev/null +++ b/Source-Code/TicTacToe/index.html @@ -0,0 +1,20 @@ + + + + + + Tic Tac Toe + + + +
        +

        Tic Tac Toe

        +
        + +
        + +
        +
        + + + diff --git a/Source-Code/TicTacToe/script.js b/Source-Code/TicTacToe/script.js new file mode 100644 index 0000000..6f297ce --- /dev/null +++ b/Source-Code/TicTacToe/script.js @@ -0,0 +1,72 @@ +/* eslint-disable no-use-before-define */ +// Get elements +const board = document.getElementById('board'); +const restartBtn = document.getElementById('restartBtn'); +const message = document.getElementById('message'); + +let currentPlayer = 'X'; +let gameBoard = Array(9).fill(null); // 3x3 grid, initialized to null (empty) + +const winPatterns = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], // Rows + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], // Columns + [0, 4, 8], + [2, 4, 6], // Diagonals +]; + +// Check for a winner or draw +const checkWinner = () => { + const winner = winPatterns.some(([a, b, c]) => { + if ( + gameBoard[a] + && gameBoard[a] === gameBoard[b] + && gameBoard[a] === gameBoard[c] + ) { + message.textContent = `${gameBoard[a]} wins!`; + board.style.pointerEvents = 'none'; // Disable clicks after game ends + return true; + } + return false; + }); + + if (!winner && !gameBoard.includes(null)) { + message.textContent = "It's a draw!"; + } +}; + +// Create the board cells +const createBoard = () => { + board.innerHTML = ''; // Clear any existing cells + gameBoard.forEach((cell, index) => { + const cellElement = document.createElement('div'); + cellElement.classList.add('cell'); + cellElement.textContent = cell; + cellElement.addEventListener('click', () => handleCellClick(index)); + board.appendChild(cellElement); + }); +}; + +// Handle cell click +const handleCellClick = (index) => { + if (gameBoard[index] !== null) return; // If cell is already filled, return + gameBoard[index] = currentPlayer; + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; // Switch player + createBoard(); + checkWinner(); +}; + +// Restart the game +restartBtn.addEventListener('click', () => { + gameBoard = Array(9).fill(null); // Reset the game board + currentPlayer = 'X'; // Reset to Player X + createBoard(); + message.textContent = ''; // Clear the message + board.style.pointerEvents = 'auto'; // Enable clicks again +}); + +// Initialize the game +createBoard(); diff --git a/Source-Code/TicTacToe/style.css b/Source-Code/TicTacToe/style.css new file mode 100644 index 0000000..ec93f6a --- /dev/null +++ b/Source-Code/TicTacToe/style.css @@ -0,0 +1,61 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f4f4f9; +} + +.container { + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + justify-content: center; + margin-bottom: 20px; +} + +.cell { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + background-color: #fff; + border: 2px solid #333; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.cell:hover { + background-color: #f0f0f0; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + margin-top: 10px; +} + +#message { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +} diff --git a/Source-Code/ToDoList/index.html b/Source-Code/ToDoList/index.html new file mode 100644 index 0000000..0f73d2a --- /dev/null +++ b/Source-Code/ToDoList/index.html @@ -0,0 +1,37 @@ + + + + + + To-Do List with Categories + + + +
        +

        To-Do List

        +
        + + + +
        +
        + + +
        + +
        + + + diff --git a/Source-Code/ToDoList/index.js b/Source-Code/ToDoList/index.js new file mode 100644 index 0000000..7010274 --- /dev/null +++ b/Source-Code/ToDoList/index.js @@ -0,0 +1,23 @@ +import { addTask, deleteTask } from './module/main.js'; +import filterTasks from './module/filters.js'; + +document.addEventListener('DOMContentLoaded', () => { + const taskInput = document.getElementById('task-input'); + const categorySelect = document.getElementById('category-select'); + const taskList = document.getElementById('task-list'); + const filterSelect = document.getElementById('filter-select'); + + document.querySelector('.add-btn').addEventListener('click', () => { + addTask(taskInput, categorySelect, taskList); + }); + + filterSelect.addEventListener('change', () => { + filterTasks(filterSelect, taskList); + }); + + taskList.addEventListener('click', (event) => { + if (event.target.classList.contains('delete-btn')) { + deleteTask(event.target); + } + }); +}); diff --git a/Source-Code/ToDoList/module/filters.js b/Source-Code/ToDoList/module/filters.js new file mode 100644 index 0000000..ec9d708 --- /dev/null +++ b/Source-Code/ToDoList/module/filters.js @@ -0,0 +1,13 @@ +export default function filterTasks(filterSelect, taskList) { + const filterValue = filterSelect.value; + const tasks = taskList.getElementsByClassName('task-item'); + + for (let i = 0; i < tasks.length; i += 1) { + const taskCategory = tasks[i].innerText.split(' (')[1].split(')')[0]; + if (filterValue === '' || filterValue === taskCategory) { + tasks[i].style.display = ''; + } else { + tasks[i].style.display = 'none'; + } + } +} diff --git a/Source-Code/ToDoList/module/main.js b/Source-Code/ToDoList/module/main.js new file mode 100644 index 0000000..606a8a9 --- /dev/null +++ b/Source-Code/ToDoList/module/main.js @@ -0,0 +1,27 @@ +export function addTask(taskInput, categorySelect, taskList) { + const taskText = taskInput.value.trim(); + const category = categorySelect.value; + + if (taskText === '' || category === '') { + alert('Please enter a task and select a category.'); + return; + } + + const li = document.createElement('li'); + li.classList.add('task-item'); + li.innerHTML = ` + ${taskText} (${category}) + + `; + + taskList.appendChild(li); + + // Clear input fields + taskInput.value = ''; + categorySelect.value = ''; +} + +export function deleteTask(button) { + const taskList = document.getElementById('task-list'); + taskList.removeChild(button.parentElement); +} diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css new file mode 100644 index 0000000..083349e --- /dev/null +++ b/Source-Code/ToDoList/style.css @@ -0,0 +1,83 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f4f4f4; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; +} + +.form-container { + margin-bottom: 20px; +} + +#task-input, +#category-select, +button { + margin: 5px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +.filter-container { + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + background-color: #f9f9f9; + margin: 5px 0; + padding: 10px; + border-radius: 4px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.task-text { + flex: 1; +} + +.delete-btn { + background-color: #dc3545; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; +} + +.delete-btn:hover { + background-color: #c82333; +} diff --git a/Source-Code/TypingSpeedTest/index.html b/Source-Code/TypingSpeedTest/index.html new file mode 100644 index 0000000..ba0081c --- /dev/null +++ b/Source-Code/TypingSpeedTest/index.html @@ -0,0 +1,25 @@ + + + + + + Typing Speed Test + + + +
        +

        Typing Speed Test

        +
        +

        Click "Start" to begin!

        +
        + +
        +
        WPM: 0
        +
        Accuracy: 100%
        +
        + +
        + + + + diff --git a/Source-Code/TypingSpeedTest/script.js b/Source-Code/TypingSpeedTest/script.js new file mode 100644 index 0000000..4ff26f2 --- /dev/null +++ b/Source-Code/TypingSpeedTest/script.js @@ -0,0 +1,63 @@ +// Get the necessary elements +const startButton = document.getElementById('start-btn'); +const typedText = document.getElementById('typed-text'); +const randomText = document.getElementById('random-text'); +const wpmDisplay = document.getElementById('wpm'); +const accuracyDisplay = document.getElementById('accuracy'); + +const sampleTexts = [ + 'The quick brown fox jumps over the lazy dog.', + 'JavaScript is a versatile programming language.', + 'A journey of a thousand miles begins with a single step.', + 'To be or not to be, that is the question.', + 'Typing tests help improve typing speed and accuracy.', +]; + +let startTime; + +// Start the typing test +function startTest() { + const randomIndex = Math.floor(Math.random() * sampleTexts.length); + randomText.textContent = sampleTexts[randomIndex]; + typedText.disabled = false; + typedText.value = ''; + typedText.focus(); + startButton.disabled = true; + startTime = new Date().getTime(); + wpmDisplay.textContent = 'WPM: 0'; + accuracyDisplay.textContent = 'Accuracy: 100%'; +} + +// Calculate typing speed (WPM) and accuracy +function calculateResults() { + const typedValue = typedText.value; + const randomTextValue = randomText.textContent; + + // Calculate WPM + const timeTaken = (new Date().getTime() - startTime) / 1000; // in seconds + const wordsTyped = typedValue.split(' ').length; + const wpm = Math.round((wordsTyped / timeTaken) * 60); + + // Calculate accuracy + let correctChars = 0; + for (let i = 0; i < typedValue.length; i += 1) { + if (typedValue[i] === randomTextValue[i]) { + correctChars += 1; + } + } + const accuracy = Math.round((correctChars / typedValue.length) * 100); + + wpmDisplay.textContent = `WPM: ${wpm}`; + accuracyDisplay.textContent = `Accuracy: ${accuracy}%`; + + if (typedValue === randomTextValue) { + setTimeout(() => { + alert('Test Complete! Well done!'); + startButton.disabled = false; + }, 100); + } +} + +// Event listeners +startButton.addEventListener('click', startTest); +typedText.addEventListener('input', calculateResults); diff --git a/Source-Code/TypingSpeedTest/style.css b/Source-Code/TypingSpeedTest/style.css new file mode 100644 index 0000000..cff373b --- /dev/null +++ b/Source-Code/TypingSpeedTest/style.css @@ -0,0 +1,75 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + width: 60%; + max-width: 600px; +} + +h1 { + color: #333; +} + +.text-display { + margin: 20px 0; + font-size: 1.2em; + line-height: 1.5em; +} + +textarea { + width: 80%; + height: 100px; + padding: 10px; + font-size: 1.2em; + margin-bottom: 20px; + border-radius: 8px; + border: 1px solid #ccc; + resize: none; + outline: none; +} + +textarea:disabled { + background-color: #f0f0f0; +} + +.results { + margin-top: 20px; +} + +#start-btn { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1.1em; + transition: background-color 0.3s; +} + +#start-btn:hover { + background-color: #45a049; +} + +#start-btn:disabled { + background-color: #ccc; + cursor: not-allowed; +} + +#wpm, +#accuracy { + font-size: 1.2em; + margin: 5px 0; +} diff --git a/Source-Code/WeightConverter/index.html b/Source-Code/WeightConverter/index.html new file mode 100644 index 0000000..fb34312 --- /dev/null +++ b/Source-Code/WeightConverter/index.html @@ -0,0 +1,43 @@ + + + + + + Weight Converter + + + +
        +

        Weight Converter

        +
        +
        +
          +
        • + + +
          • +
        • + + +
          • +
        +
          +
        • + + +
          • +
        • + + +
          • +
        • + + +
          • +
        +
        +
        +
        + + + diff --git a/Source-Code/WeightConverter/script.js b/Source-Code/WeightConverter/script.js new file mode 100644 index 0000000..6bf11b4 --- /dev/null +++ b/Source-Code/WeightConverter/script.js @@ -0,0 +1,35 @@ +document.addEventListener('DOMContentLoaded', () => { + const convertButton = document.getElementById('convertButton'); + const resetButton = document.getElementById('resetButton'); + + function convert() { + const kilograms = parseFloat(document.getElementById('kgs').value); + + if (Number.isNaN(kilograms) || kilograms <= 0) { + window.alert('Weight must be greater than zero!!'); + } else { + const gramsResult = kilograms * 1000; + const poundsResult = kilograms * 2.20462; + const ouncesResult = kilograms * 35.274; + + document.getElementById('grams').value = gramsResult.toFixed(2); + document.getElementById('pounds').value = poundsResult.toFixed(3); + document.getElementById('ounces').value = ouncesResult.toFixed(2); + } + } + + function clearResults() { + document.getElementById('grams').value = ''; + document.getElementById('pounds').value = ''; + document.getElementById('ounces').value = ''; + } + + convertButton.addEventListener('click', () => { + convert(); + }); + + resetButton.addEventListener('click', () => { + document.getElementById('converter').reset(); + clearResults(); + }); +}); diff --git a/Source-Code/WeightConverter/style.css b/Source-Code/WeightConverter/style.css new file mode 100644 index 0000000..39b0eee --- /dev/null +++ b/Source-Code/WeightConverter/style.css @@ -0,0 +1,75 @@ +/* stylelint-disable */ +body { + background: linear-gradient(to left, aqua, rgb(0, 128, 255)); + line-height: 0.5; + text-align: center; +} + +.main { + width: 500px; + position: absolute; + top: 40%; + left: 50%; + transition: 0.25px; + transform: translate(-50%, -50%); + justify-items: center; + text-align: center; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +.card { + box-shadow: 0 4px 8px 0; + transition: 0.4s; + width: 300px; + text-align: center; + font-size: 16px; + float: left; + margin: 10px; +} + +h1 { + font-size: 30px; + color: antiquewhite; + text-align: center; +} + +.values { + width: 240px; + text-align: center; + border: 2px solid transparent; + border-radius: 5px; + padding: 10px 0; +} + +li { + list-style-type: none; +} + +ul { + display: flex; + flex-direction: column; + gap: 15px; + justify-content: flex-start; +} + +.buttons { + border: 3px solid; + background-color: rgb(40, 211, 40); + color: white; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + text-align: center; + width: 80px; + height: 40px; + margin-left: 40px; +} + +label { + font-size: 20px; +} diff --git a/Source-Code/WordCounter/index.html b/Source-Code/WordCounter/index.html new file mode 100644 index 0000000..7f4f4e0 --- /dev/null +++ b/Source-Code/WordCounter/index.html @@ -0,0 +1,34 @@ + + + + + + Word Counter + + + +
        +

        Word Counter

        + +
        +
        Characters: 0
        +
        Words: 0
        +
        +
        +
        Sentences: 0
        +
        Paragraphs: 0
        +
        +
        +
        Reading Time: 0
        +
        Show readability score.
        +
        +
        + Top keywords: +
          +
        +
        +
        + + + + \ No newline at end of file diff --git a/Source-Code/WordCounter/script.js b/Source-Code/WordCounter/script.js new file mode 100644 index 0000000..5791ea4 --- /dev/null +++ b/Source-Code/WordCounter/script.js @@ -0,0 +1,785 @@ +/* eslint-disable */ +var input = document.querySelectorAll("textarea")[0], + characterCount = document.querySelector("#characterCount"), + wordCount = document.querySelector("#wordCount"), + sentenceCount = document.querySelector("#sentenceCount"), + paragraphCount = document.querySelector("#paragraphCount"), + readingTime = document.querySelector("#readingTime"), + readability = document.querySelector("#readability"), + keywordsDiv = document.querySelectorAll(".keywords")[0], + topKeywords = document.querySelector("#topKeywords"); + +// updating the displayed stats after every keypress +input.addEventListener("keyup", function () { + //keeping the console clean to make only the latest data visible + console.clear(); + + // character count + characterCount.innerHTML = input.value.length; + + // word count using a regex pattern to match words + var words = input.value.match(/\b[-?(\w+)?]+\b/gi); + wordCount.innerHTML = words ? words.length : 0; + + // sentence count using ./!/? as sentence separators + var sentences = input.value.split(/[.|!|?]+/g); + sentenceCount.innerHTML = sentences.length - 1; + + // paragraph count by splitting on newlines and filtering out empty lines + var paragraphs = input.value.replace(/\n$/gm, "").split(/\n/); + paragraphCount.innerHTML = paragraphs.filter( + (paragraph) => paragraph.trim().length > 0 + ).length; + + // reading time based on 275 words/minute + var seconds = Math.floor(((words ? words.length : 0) * 60) / 275); + if (seconds > 59) { + var minutes = Math.floor(seconds / 60); + seconds = seconds - minutes * 60; + readingTime.innerHTML = minutes + "m " + seconds + "s"; + } else { + readingTime.innerHTML = seconds + "s"; + } + + // calculating top keywords + if (words) { + // step-1: removing all the stop words + var nonStopWords = []; + var stopWords = [ + "a", + "able", + "about", + "above", + "abst", + "accordance", + "according", + "accordingly", + "across", + "act", + "actually", + "added", + "adj", + "affected", + "affecting", + "affects", + "after", + "afterwards", + "again", + "against", + "ah", + "all", + "almost", + "alone", + "along", + "already", + "also", + "although", + "always", + "am", + "among", + "amongst", + "an", + "and", + "announce", + "another", + "any", + "anybody", + "anyhow", + "anymore", + "anyone", + "anything", + "anyway", + "anyways", + "anywhere", + "apparently", + "approximately", + "are", + "aren", + "arent", + "arise", + "around", + "as", + "aside", + "ask", + "asking", + "at", + "auth", + "available", + "away", + "awfully", + "b", + "back", + "be", + "became", + "because", + "become", + "becomes", + "becoming", + "been", + "before", + "beforehand", + "begin", + "beginning", + "beginnings", + "begins", + "behind", + "being", + "believe", + "below", + "beside", + "besides", + "between", + "beyond", + "biol", + "both", + "brief", + "briefly", + "but", + "by", + "c", + "ca", + "came", + "can", + "cannot", + "can't", + "cause", + "causes", + "certain", + "certainly", + "co", + "com", + "come", + "comes", + "contain", + "containing", + "contains", + "could", + "couldnt", + "d", + "date", + "did", + "didn't", + "different", + "do", + "does", + "doesn't", + "doing", + "done", + "don't", + "down", + "downwards", + "due", + "during", + "e", + "each", + "ed", + "edu", + "effect", + "eg", + "eight", + "eighty", + "either", + "else", + "elsewhere", + "end", + "ending", + "enough", + "especially", + "et", + "et-al", + "etc", + "even", + "ever", + "every", + "everybody", + "everyone", + "everything", + "everywhere", + "ex", + "except", + "f", + "far", + "few", + "ff", + "fifth", + "first", + "five", + "fix", + "followed", + "following", + "follows", + "for", + "former", + "formerly", + "forth", + "found", + "four", + "from", + "further", + "furthermore", + "g", + "gave", + "get", + "gets", + "getting", + "give", + "given", + "gives", + "giving", + "go", + "goes", + "gone", + "got", + "gotten", + "h", + "had", + "happens", + "hardly", + "has", + "hasn't", + "have", + "haven't", + "having", + "he", + "hed", + "hence", + "her", + "here", + "hereafter", + "hereby", + "herein", + "heres", + "hereupon", + "hers", + "herself", + "hes", + "hi", + "hid", + "him", + "himself", + "his", + "hither", + "home", + "how", + "howbeit", + "however", + "hundred", + "i", + "id", + "ie", + "if", + "i'll", + "im", + "immediate", + "immediately", + "importance", + "important", + "in", + "inc", + "indeed", + "index", + "information", + "instead", + "into", + "invention", + "inward", + "is", + "isn't", + "it", + "itd", + "it'll", + "its", + "itself", + "i've", + "j", + "just", + "k", + "keep", + "keeps", + "kept", + "kg", + "km", + "know", + "known", + "knows", + "l", + "largely", + "last", + "lately", + "later", + "latter", + "latterly", + "least", + "less", + "lest", + "let", + "lets", + "like", + "liked", + "likely", + "line", + "little", + "'ll", + "look", + "looking", + "looks", + "ltd", + "m", + "made", + "mainly", + "make", + "makes", + "many", + "may", + "maybe", + "me", + "mean", + "means", + "meantime", + "meanwhile", + "merely", + "mg", + "might", + "million", + "miss", + "ml", + "more", + "moreover", + "most", + "mostly", + "mr", + "mrs", + "much", + "mug", + "must", + "my", + "myself", + "n", + "na", + "name", + "namely", + "nay", + "nd", + "near", + "nearly", + "necessarily", + "necessary", + "need", + "needs", + "neither", + "never", + "nevertheless", + "new", + "next", + "nine", + "ninety", + "no", + "nobody", + "non", + "none", + "nonetheless", + "noone", + "nor", + "normally", + "nos", + "not", + "noted", + "nothing", + "now", + "nowhere", + "o", + "obtain", + "obtained", + "obviously", + "of", + "off", + "often", + "oh", + "ok", + "okay", + "old", + "omitted", + "on", + "once", + "one", + "ones", + "only", + "onto", + "or", + "ord", + "other", + "others", + "otherwise", + "ought", + "our", + "ours", + "ourselves", + "out", + "outside", + "over", + "overall", + "owing", + "own", + "p", + "page", + "pages", + "part", + "particular", + "particularly", + "past", + "per", + "perhaps", + "placed", + "please", + "plus", + "poorly", + "possible", + "possibly", + "potentially", + "pp", + "predominantly", + "present", + "previously", + "primarily", + "probably", + "promptly", + "proud", + "provides", + "put", + "q", + "que", + "quickly", + "quite", + "qv", + "r", + "ran", + "rather", + "rd", + "re", + "readily", + "really", + "recent", + "recently", + "ref", + "refs", + "regarding", + "regardless", + "regards", + "related", + "relatively", + "research", + "respectively", + "resulted", + "resulting", + "results", + "right", + "run", + "s", + "said", + "same", + "saw", + "say", + "saying", + "says", + "sec", + "section", + "see", + "seeing", + "seem", + "seemed", + "seeming", + "seems", + "seen", + "self", + "selves", + "sent", + "seven", + "several", + "shall", + "she", + "shed", + "she'll", + "shes", + "should", + "shouldn't", + "show", + "showed", + "shown", + "showns", + "shows", + "significant", + "significantly", + "similar", + "similarly", + "since", + "six", + "slightly", + "so", + "some", + "somebody", + "somehow", + "someone", + "somethan", + "something", + "sometime", + "sometimes", + "somewhat", + "somewhere", + "soon", + "sorry", + "specifically", + "specified", + "specify", + "specifying", + "still", + "stop", + "strongly", + "sub", + "substantially", + "successfully", + "such", + "sufficiently", + "suggest", + "sup", + "sure", + "t", + "take", + "taken", + "taking", + "tell", + "tends", + "th", + "than", + "thank", + "thanks", + "thanx", + "that", + "that'll", + "thats", + "that've", + "the", + "their", + "theirs", + "them", + "themselves", + "then", + "thence", + "there", + "thereafter", + "thereby", + "thered", + "therefore", + "therein", + "there'll", + "thereof", + "therere", + "theres", + "thereto", + "thereupon", + "there've", + "these", + "they", + "theyd", + "they'll", + "theyre", + "they've", + "think", + "this", + "those", + "thou", + "though", + "thoughh", + "thousand", + "throug", + "through", + "throughout", + "thru", + "thus", + "til", + "tip", + "to", + "together", + "too", + "took", + "toward", + "towards", + "tried", + "tries", + "truly", + "try", + "trying", + "ts", + "twice", + "two", + "u", + "un", + "under", + "unfortunately", + "unless", + "unlike", + "unlikely", + "until", + "unto", + "up", + "upon", + "ups", + "us", + "use", + "used", + "useful", + "usefully", + "usefulness", + "uses", + "using", + "usually", + "v", + "value", + "various", + "'ve", + "very", + "via", + "viz", + "vol", + "vols", + "vs", + "w", + "want", + "wants", + "was", + "wasn't", + "way", + "we", + "wed", + "welcome", + "we'll", + "went", + "were", + "weren't", + "we've", + "what", + "whatever", + "what'll", + "whats", + "when", + "whence", + "whenever", + "where", + "whereafter", + "whereas", + "whereby", + "wherein", + "wheres", + "whereupon", + "wherever", + "whether", + "which", + "while", + "whim", + "whither", + "who", + "whod", + "whoever", + "whole", + "who'll", + "whom", + "whomever", + "whos", + "whose", + "why", + "widely", + "willing", + "wish", + "with", + "within", + "without", + "won't", + "words", + "world", + "would", + "wouldn't", + "www", + "x", + "y", + "yes", + "yet", + "you", + "youd", + "you'll", + "your", + "youre", + "yours", + "yourself", + "yourselves", + "you've", + "z", + "zero", + ]; + for (var i = 0; i < words.length; i++) { + if (stopWords.indexOf(words[i].toLowerCase()) === -1 && isNaN(words[i])) { + nonStopWords.push(words[i].toLowerCase()); + } + } + + // step-2: forming an object with keywords and their count + var keywords = {}; + for (var i = 0; i < nonStopWords.length; i++) { + keywords[nonStopWords[i]] = (keywords[nonStopWords[i]] || 0) + 1; + } + + // step-3: sorting the object by count + var sortedKeywords = Object.entries(keywords).sort((a, b) => b[1] - a[1]); + + // step-4: displaying top 4 keywords and their count + topKeywords.innerHTML = ""; + for (var i = 0; i < sortedKeywords.length && i < 4; i++) { + var li = document.createElement("li"); + li.innerHTML = + "" + sortedKeywords[i][0] + ": " + sortedKeywords[i][1]; + topKeywords.appendChild(li); + } + } + + // displaying top keywords only if there are words in the text area + keywordsDiv.style.display = words ? "block" : "none"; + + // calculating readability score + var syllables = countSyllables(input.value); + var readabilityScore = calculateFleschKincaid( + words ? words.length : 0, + sentences.length - 1, + syllables + ); + readability.innerHTML = convertReadabilityScore(readabilityScore); +}); + +// function to count syllables in a text +function countSyllables(text) { + var words = text.toLowerCase().split(/\s+/); + var syllableCount = 0; + words.forEach(function (word) { + word = word.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, ""); + word = word.replace(/^y/, ""); + var syllables = word.match(/[aeiouy]{1,2}/g); + syllableCount += syllables ? syllables.length : 0; + }); + return syllableCount; +} + +// function to calculate Flesch-Kincaid readability score +function calculateFleschKincaid(words, sentences, syllables) { + var score = + 206.835 - 1.015 * (words / sentences) - 84.6 * (syllables / words); + return score; +} + +// function to convert readability score to human-readable format +function convertReadabilityScore(score) { + if (score <= 30) return "Readability: College graduate."; + if (score <= 50) return "Readability: College level."; + if (score <= 60) return "Readability: 10th - 12th grade."; + if (score <= 70) return "Readability: 8th - 9th grade."; + if (score <= 80) return "Readability: 7th grade."; + if (score <= 90) return "Readability: 6th grade."; + if (score <= 100) return "Readability: 5th grade."; + return "Not available."; +} diff --git a/Source-Code/WordCounter/style.css b/Source-Code/WordCounter/style.css new file mode 100644 index 0000000..b875a1c --- /dev/null +++ b/Source-Code/WordCounter/style.css @@ -0,0 +1,231 @@ +/* General Styles */ +body { + background-image: linear-gradient(#fec8d8, #ffdfd3); + line-height: 1; + width: 700px; + margin: 0 auto; + background-color: #fafafa; + font-family: 'Source Sans Pro', sans-serif; + color: #111; +} + +html { + box-sizing: border-box; + user-select: none; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +/* Reset Styles */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Typography */ +b { + font-weight: bold; +} + +/* Container */ +.container { + margin: 2% auto; + padding: 15px; + background-color: #fff; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2); +} + +/* Headings */ +h1 { + font-size: 3rem; + font-weight: 900; + text-align: center; + margin: 1% 0 3%; +} + +/* Textarea */ +textarea { + width: 100%; + height: 250px; + padding: 10px; + border: 1px solid #d9d9d9; + outline: none; + font-size: 1rem; + resize: none; + line-height: 1.5rem; + transition: border-color 0.3s; +} + +textarea:hover { + border-color: #c0c0c0; +} + +textarea:focus { + border-color: #4d90fe; +} + +/* Output Row */ +.output.row { + width: 100%; + border: 1px solid #ddd; + font-size: 1.4rem; + margin: 1% 0; + background-color: #f9f9f9; + display: flex; + flex-wrap: wrap; +} + +.output.row div { + flex: 1 1 42%; + padding: 10px 15px; + margin: 1%; +} + +.output.row span { + font-weight: bold; + font-size: 1.5rem; +} + +/* Readability */ +#readability { + width: 52%; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s, color 0.3s; +} + +#readability:hover { + background-color: #4d90fe; + color: #fff; + border-radius: 2px; +} + +#readability:active { + background-color: #307af3; +} + +/* Keywords */ +.keywords { + display: none; + margin: 4% 0 0; + font-size: 2rem; + font-weight: 900; +} + +.keywords ul { + font-weight: 400; + border: 1px solid #ddd; + font-size: 1.4rem; + background-color: #f9f9f9; + margin: 2% 0; +} + +.keywords li { + display: inline-block; + width: 44%; + padding: 10px; + margin: 1%; +} + +/* Responsive Design */ +@media (max-width: 750px) { + body { + width: 600px; + } + + .output.row { + font-size: 1.2rem; + } + + .output.row span { + font-size: 1.3rem; + } + + .keywords ul { + font-size: 1.2rem; + } +} + +@media (max-width: 600px) { + body { + width: 95%; + } + + .output.row { + border: none; + background-color: #fff; + } + + .output.row div { + flex: 1 1 100%; + padding: 10px 15px; + margin: 2% auto; + border: 1px solid #ddd; + font-size: 1.8rem; + background-color: #f9f9f9; + } + + .output.row span { + font-size: 2rem; + } + + #readability { + width: 100%; + font-size: 1.6rem; + font-weight: 400; + } + + .keywords { + margin: 10% auto; + } + + .keywords ul { + font-weight: 400; + border: none; + font-size: 1.8rem; + background-color: #f9f9f9; + margin: 5% 0; + } + + .keywords li { + flex: 1 1 100%; + padding: 10px; + margin: 2% auto; + border: 1px solid #ddd; + } +}