Battery Percentage
+
+
+
+
+
+ 50%
+ 
+ Tajul Afreen
+
+ Ad Blocker
+ +
+
+
+
+
+
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 @@
+
+
+
+
+
+ Whitelist
+ + +
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+ Enter the DOB in format: (MM/DD/YYYY)
+ + +
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+ Body Mass Index Calculator
+Height in cm
+ +Weight in kg
+ + + +
+
+
+
+
+ | BMI | +Category | +
|---|---|
| less than 18.5 | +Underweight | +
| between 18.5 and 24.9 | +Ideal | +
| between 25 and 29.9 | +Overweight | +
| over 30 | +Obesity | +
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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/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 @@
+
+
+
+
+
+ Simple Chat App
+ + +EID CELEBRATIONS
+ +
+
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+ 0
+ days +
+
+ 0
+ hours +
+
+ 0
+ mins +
+
+ 0
+ seconds +
+
+
+
+
\ 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 @@
+
+
+
+
+
+
+
+ Currency Converter
+
+
+
+ to
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+ Today is:
+-
+
- + Display day of the week. + +
- + Display a quote + +
DINOSAUR GAME 🦕
+
+
+
+
+
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 @@
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+ Task List 1
+-
+
- Task 1 +
- Task 2 +
- Task 3 +
+
+ Task List 2
+-
+
- Task 4 +
- Task 5 +
- Task 6 +
+
+
+
+ Products
+ +
+
+
+
+
+
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.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 @@ + + + + + +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/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 @@
+
+
+
+
+
+ Food Order App
+
+
+
+
+ 
+
+
+
+
+ Burger
+$5.99
+ +
+ 
+
+
+
+
+ Pizza
+$8.99
+ +
+ 
+
+
+
+
+ Pasta
+$7.49
+ +
+
+ Your Cart
+-
+
+
Total: $0.00
+ +
+
+
+
+
+
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 = `
+
+
+
+
+
+
+
+
+
+
+ A full stack developer
+58 Repositories
+
+
+
+ 49
+ Followers
+
+
+ 19
+ Following
+
+ 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 @@
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Filters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Effects
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
+
+
+
+
+
+ Vote for Your Favorite Programming Language
+ +
+
+ Results
+-
+
+
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 !!
+
+
+
+
+
+
+
+
+
+
+
+