Instructions
28 |-
29 |
- Click "Generate" to create a new maze 30 |
- Click "Solve" to see the solution using DFS 31 |
- Enjoy watching the pathfinding! 32 |
To-Do List
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Calculator/Calculator/app.js:
--------------------------------------------------------------------------------
1 |
2 | function press(e) {
3 |
4 | var getInp = document.querySelector('.calculator_input')
5 | getInp.value += e
6 | }
7 |
8 | function eq() {
9 |
10 | var getInp = document.querySelector('.calculator_input')
11 | getInp.value = eval(getInp.value)
12 | }
13 |
14 | function ac() {
15 |
16 | var getInp = document.querySelector('.calculator_input')
17 | getInp.value = ""
18 | }
19 |
20 | function del() {
21 |
22 | var getInp = document.querySelector('.calculator_input')
23 | getInp.value = getInp.value.slice(0, -1)
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/firebase/firebase.js:
--------------------------------------------------------------------------------
1 | import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
2 | import { getAuth } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
3 |
4 | const firebaseConfig = {
5 | apiKey: "Your FirebaseApi ",
6 | authDomain: "Yout AuthDomain",
7 | projectId: "Your Project-ID",
8 | storageBucket: "Your Stoarage Bucket",
9 | messagingSenderId: "Your messagingsendderID",
10 | appId: "Your APP ID",
11 | measurementId: "Your MeasurementId"
12 | };
13 |
14 |
15 | const app = initializeApp(firebaseConfig);
16 |
17 | const auth = getAuth(app);
18 |
19 | console.log(" Firebase Initialized");
20 |
21 | export { auth };
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/firebase/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | background-color: #f4f4f4;
4 | text-align: center;
5 | }
6 |
7 | .container {
8 | width: 300px;
9 | margin: 100px auto;
10 | padding: 20px;
11 | background: white;
12 | border-radius: 8px;
13 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
14 | }
15 |
16 | input {
17 | width: 90%;
18 | padding: 10px;
19 | margin: 10px 0;
20 | border: 1px solid #ccc;
21 | border-radius: 5px;
22 | }
23 |
24 | button {
25 | width: 100%;
26 | padding: 10px;
27 | background: #28a745;
28 | color: white;
29 | border: none;
30 | border-radius: 5px;
31 | cursor: pointer;
32 | }
33 |
34 | button:hover {
35 | background: #218838;
36 | }
37 |
--------------------------------------------------------------------------------
/chapter2/chapter.js:
--------------------------------------------------------------------------------
1 | //question1
2 | var username;
3 |
4 |
5 | //question2;
6 | var myname="AbdulRehmanBaig";
7 | console.log(myname);
8 |
9 |
10 | //question3;
11 | let message="Hello World";
12 | alert(message);
13 |
14 |
15 | //question4
16 | let student_age="18 years old";
17 | let student_occupation="Certified Mobile Application Development";
18 | alert(student_age);
19 | alert(student_occupation);
20 |
21 |
22 | //question5
23 | var varia="pizza";
24 | console.log(varia);
25 | varia="pizz";
26 | console.log(varia);
27 | varia="piz";
28 | console.log(varia);
29 | varia="pi";
30 | console.log(varia);
31 | varia="p";
32 | console.log(varia);
33 |
34 |
35 | //question5;
36 | let email="rehmanbaig121@gmail.com";
37 | alert("My email Address is " +email) ;
38 |
39 |
40 | //question6)
41 | let book="A smater way to Learn Javascript";
42 | alert("I am Trying to learn from Book:" +book );
43 |
--------------------------------------------------------------------------------
/firebase/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Firebase Authentication
11 |
12 |
17 | Sign Up
13 | 14 | 15 | 16 |
18 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/group_assignment/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Login
19 | 20 | 21 | 22 |
26 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/todolist/todo.js:
--------------------------------------------------------------------------------
1 | let input_element=document.getElementById("todoinput");
2 |
3 | let input_addbutton=document.getElementById("btn");
4 |
5 | let input_tasklist=document.getElementById("tasklist");
6 |
7 | input_addbutton.addEventListener('click',()=>{
8 | const task_text=input_element.value.trim();
9 |
10 | if(task_text===''){
11 |
12 | alert("task cant be empty");
13 | return;
14 | }
15 | const listitem=document.createElement("li");
16 |
17 | const taskspan=document.createElement('span');
18 |
19 | taskspan.textContent=task_text;
20 |
21 | taskspan.addEventListener('click',()=>{
22 |
23 | taskspan.classList.toggle("completed");
24 |
25 | });
26 | const delete_button=document.createElement("button");
27 |
28 | delete_button.textContent="delete";
29 |
30 | delete_button.style.marginLeft="10px";
31 |
32 | delete_button.addEventListener('click',()=>{
33 |
34 | listitem.remove();
35 | });
36 | listitem.appendChild(taskspan);
37 |
38 | listitem.appendChild(delete_button);
39 |
40 | input_tasklist.appendChild(listitem);
41 |
42 | input_element.value='';
43 |
44 | })
45 |
46 |
--------------------------------------------------------------------------------
/group_assignment/hs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Maze Solver using DFS and BFS
27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 | 🧩 Maze Generator & Solver
12 |Build and solve a perfect maze using DFS!
13 |
11 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Currency Converter
12 | 43 |
44 |
45 |
46 | ✨ JavaScript Project ✨
2 | 3 |
4 | 💻 A dynamic, interactive, and beginner-friendly JavaScript-based project made with 💙 by Abdul Rehman
5 | 📚 University of Karachi
6 |
53 |
54 | ---
55 |
56 | ## 🛠️ Getting Started
57 |
58 | To run this project locally, follow these simple steps:
59 |
60 | ```bash
61 | # Clone the repository
62 | https://github.com/AbdulRehmanBaig384/javascriptproject
63 |
64 | # Open the folder
65 | cd javascript-project
66 |
67 | # Open index.html in your browser
68 |
69 |
--------------------------------------------------------------------------------
/todolist/todo.css:
--------------------------------------------------------------------------------
1 | /* Updated awesome CSS for a modern To-Do List */
2 | body {
3 | font-family: 'Poppins', sans-serif;
4 | background: linear-gradient(to right, #74ebd5, #acb6e5);
5 | text-align: center;
6 | margin: 50px;
7 | }
8 |
9 | h1 {
10 | color: #fff;
11 | font-size: 2.5rem;
12 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
13 | }
14 |
15 | .container {
16 | background: #fff;
17 | padding: 20px;
18 | border-radius: 10px;
19 | box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
20 | width: 350px;
21 | margin: auto;
22 | }
23 |
24 | input {
25 | padding: 10px;
26 | width: 80%;
27 | border: 2px solid #3498db;
28 | border-radius: 5px;
29 | outline: none;
30 | font-size: 16px;
31 | }
32 |
33 | button {
34 | padding: 10px 15px;
35 | background: linear-gradient(to right, #3498db, #6dd5fa);
36 | color: white;
37 | border: none;
38 | border-radius: 5px;
39 | cursor: pointer;
40 | font-size: 16px;
41 | transition: 0.3s;
42 | }
43 |
44 | button:hover {
45 | background: linear-gradient(to right, #2980b9, #57c1eb);
46 | }
47 |
48 | ul {
49 | list-style: none;
50 | padding: 0;
51 | margin-top: 20px;
52 | }
53 |
54 | li {
55 | background: #f9f9f9;
56 | padding: 12px;
57 | margin: 5px auto;
58 | width: 90%;
59 | display: flex;
60 | justify-content: space-between;
61 | align-items: center;
62 | border-radius: 5px;
63 | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
64 | transition: 0.3s;
65 | }
66 |
67 | li:hover {
68 | transform: scale(1.02);
69 | }
70 |
71 | .completed {
72 | text-decoration: line-through;
73 | color: gray;
74 | }
75 |
76 | button.delete {
77 | background-color: #e74c3c;
78 | padding: 6px 10px;
79 | border-radius: 5px;
80 | font-size: 14px;
81 | transition: 0.3s;
82 | }
83 |
84 | button.delete:hover {
85 | background-color: #c0392b;
86 | }
87 |
--------------------------------------------------------------------------------
/Calculator/Calculator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
14 |
15 | Maze Game
7 |
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/chapter_1.js:
--------------------------------------------------------------------------------
1 | // //Write a script to greet your visitors using js alert box
2 | function javascript_question1 (){
3 |
4 | alert("hello visitors");
5 | }
6 |
7 | javascript_question1();
8 |
9 |
10 | // question 2)write a script to display the following message in your broswer
11 | function javascript_question2(){
12 |
13 | alert("Error! Please enter a valid password");}
14 |
15 | javascript_question2();
16 |
17 |
18 | // question 3) write a script to display the following message in your broswer;
19 | function javasript_question3(){
20 | alert("Welcome to JS land...\n Happy Coding!");
21 | }
22 | javasript_question3();
23 |
24 |
25 | // QUESTION 4) write a scipt to display the following message in sequence in your broswer
26 | function javascript_question4(){
27 | alert("Welcome to Js land...")
28 | }
29 | function javascript_question4b(){
30 | alert("Happy coding! \n Prevent this page from Creating Additional Dialogs.")
31 | }
32 | javascript_question4();
33 | javascript_question4b();
34 |
35 |
36 | // here i made a todolist
37 |
38 | let input_element=document.getElementById("todoinput");
39 |
40 | let input_addbutton=document.getElementById("btn");
41 |
42 | let input_tasklist=document.getElementById("tasklist");
43 |
44 | input_addbutton.addEventListener('click',()=>{
45 | const task_text=input_element.value.trim();
46 |
47 | if(task_text===''){
48 |
49 | alert("task cant be empty");
50 | return;
51 | }
52 | const listitem=document.createElement("li");
53 |
54 | const taskspan=document.createElement('span');
55 |
56 | taskspan.textContent=task_text;
57 |
58 | taskspan.addEventListener('click',()=>{
59 |
60 | taskspan.classList.toggle("completed");
61 |
62 | });
63 | const delete_button=document.createElement("button");
64 |
65 | delete_button.textContent="delete";
66 |
67 | delete_button.style.marginLeft="10px";
68 |
69 | delete_button.addEventListener('click',()=>{
70 |
71 | listitem.remove();
72 | });
73 | listitem.appendChild(taskspan);
74 |
75 | listitem.appendChild(delete_button);
76 |
77 | input_tasklist.appendChild(listitem);
78 |
79 | input_element.value='';
80 |
81 | })
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/currency/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Arial', sans-serif;
3 | background: linear-gradient(120deg, #000000, #32CD32);
4 | color: #333333;
5 | margin: 0;
6 | padding: 0;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | height: 100vh;
11 | }
12 |
13 | .container {
14 | display: flex;
15 | flex-direction: column;
16 | background: linear-gradient(120deg, #000000, #32CD32);
17 | padding: 30px;
18 | border-radius: 16px;
19 | box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
20 | width: 350px;
21 | text-align: center;
22 | transition: background 1s ease;
23 | }
24 | .container:hover{
25 | background: linear-gradient(120deg,#000000, #32CD32);
26 | }
27 |
28 | h2 {
29 | color: #FFD700;
30 | text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
31 | }
32 |
33 | h3 {
34 | color: #32CD32;
35 | text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
36 | }
37 |
38 | form {
39 | display: flex;
40 | flex-direction: column;
41 | gap: 1.5rem;
42 | }
43 |
44 | .input {
45 | display: flex;
46 | flex-direction: column;
47 | }
48 |
49 | label {
50 | margin-bottom: 6px;
51 | color: #C1C1C1;
52 | font-weight: bold;
53 | }
54 |
55 | input,
56 | select {
57 | background-color: #0d1013;
58 | color: #FFFFFF;
59 | border: 1px solid #7F8C8D;
60 | border-radius: 10px;
61 | padding: 14px;
62 | transition: border-color 0.3s ease, transform 0.3s ease;
63 | }
64 |
65 | select {
66 | width: 100%;
67 | }
68 |
69 | input:focus,
70 | select:focus {
71 | border-color:#32CD32;
72 | outline: none;
73 | box-shadow: 0 0 10px rgb(38, 255, 0);
74 | transform: scale(1.05);
75 | }
76 |
77 | button {
78 | background: #0d1013;
79 | color: #FFFFFF;
80 | font-weight: bold;
81 | border: none;
82 | padding: 14px;
83 | border-radius: 12px;
84 | cursor: pointer;
85 | transition: background 0.4s ease, transform 0.3s ease;
86 | }
87 |
88 | button:hover {
89 | background: linear-gradient(145deg, #010605, #32CD32);
90 | transform: scale(1.1);
91 | }
92 |
93 | .result {
94 | margin-top: 20px;
95 | font-size: 1.2rem;
96 | color: #E8E8E8;
97 | }
98 |
99 | .error {
100 | color: #E74C3C;
101 | font-weight: bold;
102 | }
103 |
104 | .currency-selector {
105 | display: flex;
106 | align-items: center;
107 | gap: 15px;
108 | }
109 |
110 | .currency-flag {
111 | width: 28px;
112 | height: 28px;
113 | border-radius: 6px;
114 | box-shadow: 0 3px 6px rgba(0,0,0,0.3);
115 | }
--------------------------------------------------------------------------------
/currency/script2.js:
--------------------------------------------------------------------------------
1 | let form = document.querySelector("form");
2 |
3 | let resultValue = document.querySelector("#result-value");
4 |
5 | let countryOptions = document.querySelectorAll("select");
6 |
7 | countryOptions.forEach(selectOption => {
8 |
9 | for (currCode in countryList) {
10 | let option = document.createElement("option");
11 | option.innerHTML = currCode;
12 | option.value = currCode;
13 | selectOption.append(option);
14 |
15 | if (selectOption.id === "from-currency" && currCode === "CNY") {
16 | option.selected = "selected";
17 | } else if (selectOption.id === "to-currency" && currCode === "PKR") {
18 | option.selected = "selected";
19 | }
20 | };
21 | selectOption.addEventListener("change", (e) => {
22 | countryFlag(e.target);
23 | });
24 |
25 | });
26 |
27 |
28 | async function countryFlag(countryOption) {
29 | let countryCode = countryList[countryOption.value];
30 | let URL = `https://flagsapi.com/${countryCode}/flat/64.png`
31 | let img = countryOption.parentElement.querySelector("IMG");
32 | img.src = URL;
33 | }
34 |
35 | form.addEventListener("submit", async (e) => {
36 | e.preventDefault();
37 | let input = document.querySelector("input");
38 | let inputVal = Number(input.value);
39 | if (inputVal <= 0 || isNaN(inputVal)) {
40 | resultValue.innerText = "INVALID INPUT, TRY AGAIN."
41 | resultValue.classList.add("error")
42 | input.value = "";
43 | return;
44 | }
45 | else {
46 | fetchData(inputVal);
47 | }
48 | });
49 |
50 |
51 | async function fetchData(inputVal) {
52 | let fromCurrency = document.querySelector("#from-currency").value.toLowerCase();
53 | let toCurrency = document.querySelector("#to-currency").value.toLowerCase();
54 |
55 | try {
56 | let URL = `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${fromCurrency}.json`
57 | let response = await fetch(URL);
58 | let data = await response.json();
59 |
60 | let exchangeRate = data[fromCurrency][toCurrency];
61 | if (!exchangeRate) {
62 | resultValue.innerText = "Exchange rate not available.";
63 | resultValue.classList.add("error");
64 | return;
65 | }
66 |
67 | let convertedAmount = (inputVal * exchangeRate).toFixed(2);
68 | resultValue.innerText = `${inputVal} ${fromCurrency.toUpperCase()} = ${convertedAmount} ${toCurrency.toUpperCase()}`;
69 | resultValue.classList.remove("error");
70 |
71 | }
72 |
73 | catch (error) {
74 | resultValue.innerText = "Failed to fetch exchange rates. Please try again later."
75 | resultValue.classList.add("error");
76 | console.log("error", error);
77 |
78 | }
79 |
80 | }
81 |
--------------------------------------------------------------------------------
/currency/script.js:
--------------------------------------------------------------------------------
1 | const countryList = {
2 | AED: "AE",
3 | AFN: "AF",
4 | XCD: "AG",
5 | ALL: "AL",
6 | AMD: "AM",
7 | ANG: "AN",
8 | AOA: "AO",
9 | AQD: "AQ",
10 | ARS: "AR",
11 | AUD: "AU",
12 | AZN: "AZ",
13 | BAM: "BA",
14 | BBD: "BB",
15 | BDT: "BD",
16 | XOF: "BE",
17 | BGN: "BG",
18 | BHD: "BH",
19 | BIF: "BI",
20 | BMD: "BM",
21 | BND: "BN",
22 | BOB: "BO",
23 | BRL: "BR",
24 | BSD: "BS",
25 | NOK: "BV",
26 | BWP: "BW",
27 | BYR: "BY",
28 | BZD: "BZ",
29 | CAD: "CA",
30 | CDF: "CD",
31 | XAF: "CF",
32 | CHF: "CH",
33 | CLP: "CL",
34 | CNY: "CN",
35 | COP: "CO",
36 | CRC: "CR",
37 | CUP: "CU",
38 | CVE: "CV",
39 | CYP: "CY",
40 | CZK: "CZ",
41 | DJF: "DJ",
42 | DKK: "DK",
43 | DOP: "DO",
44 | DZD: "DZ",
45 | ECS: "EC",
46 | EEK: "EE",
47 | EGP: "EG",
48 | ETB: "ET",
49 | EUR: "FR",
50 | FJD: "FJ",
51 | FKP: "FK",
52 | GBP: "GB",
53 | GEL: "GE",
54 | GGP: "GG",
55 | GHS: "GH",
56 | GIP: "GI",
57 | GMD: "GM",
58 | GNF: "GN",
59 | GTQ: "GT",
60 | GYD: "GY",
61 | HKD: "HK",
62 | HNL: "HN",
63 | HRK: "HR",
64 | HTG: "HT",
65 | HUF: "HU",
66 | IDR: "ID",
67 | ILS: "IL",
68 | INR: "IN",
69 | IQD: "IQ",
70 | IRR: "IR",
71 | ISK: "IS",
72 | JMD: "JM",
73 | JOD: "JO",
74 | JPY: "JP",
75 | KES: "KE",
76 | KGS: "KG",
77 | KHR: "KH",
78 | KMF: "KM",
79 | KPW: "KP",
80 | KRW: "KR",
81 | KWD: "KW",
82 | KYD: "KY",
83 | KZT: "KZ",
84 | LAK: "LA",
85 | LBP: "LB",
86 | LKR: "LK",
87 | LRD: "LR",
88 | LSL: "LS",
89 | LTL: "LT",
90 | LVL: "LV",
91 | LYD: "LY",
92 | MAD: "MA",
93 | MDL: "MD",
94 | MGA: "MG",
95 | MKD: "MK",
96 | MMK: "MM",
97 | MNT: "MN",
98 | MOP: "MO",
99 | MRO: "MR",
100 | MTL: "MT",
101 | MUR: "MU",
102 | MVR: "MV",
103 | MWK: "MW",
104 | MXN: "MX",
105 | MYR: "MY",
106 | MZN: "MZ",
107 | NAD: "NA",
108 | XPF: "NC",
109 | NGN: "NG",
110 | NIO: "NI",
111 | NPR: "NP",
112 | NZD: "NZ",
113 | OMR: "OM",
114 | PAB: "PA",
115 | PEN: "PE",
116 | PGK: "PG",
117 | PHP: "PH",
118 | PKR: "PK",
119 | PLN: "PL",
120 | PYG: "PY",
121 | QAR: "QA",
122 | RON: "RO",
123 | RSD: "RS",
124 | RUB: "RU",
125 | RWF: "RW",
126 | SAR: "SA",
127 | SBD: "SB",
128 | SCR: "SC",
129 | SDG: "SD",
130 | SEK: "SE",
131 | SGD: "SG",
132 | SKK: "SK",
133 | SLL: "SL",
134 | SOS: "SO",
135 | SRD: "SR",
136 | STD: "ST",
137 | SVC: "SV",
138 | SYP: "SY",
139 | SZL: "SZ",
140 | THB: "TH",
141 | TJS: "TJ",
142 | TMT: "TM",
143 | TND: "TN",
144 | TOP: "TO",
145 | TRY: "TR",
146 | TTD: "TT",
147 | TWD: "TW",
148 | TZS: "TZ",
149 | UAH: "UA",
150 | UGX: "UG",
151 | USD: "US",
152 | UYU: "UY",
153 | UZS: "UZ",
154 | VEF: "VE",
155 | VND: "VN",
156 | VUV: "VU",
157 | YER: "YE",
158 | ZAR: "ZA",
159 | ZMK: "ZM",
160 | ZWD: "ZW",
161 | };
--------------------------------------------------------------------------------
/Calculator/Calculator/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | @keyframes Gradient {
8 | 0% {
9 | background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
10 | /* background-size: 400% 400%; */
11 | /* animation: Gradient 15s ease infinite; */
12 | }
13 |
14 | 50% {
15 | background: linear-gradient(120deg, #fbc2eb, #a6c1ee);
16 | /* background-size: 400% 400%; */
17 | /* animation: Gradient 15s ease infinite; */
18 | }
19 |
20 | 100% {
21 | background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
22 | /* background-size: 400% 400%; */
23 | /* animation: Gradient 15s ease infinite; */
24 | }
25 | }
26 |
27 | /* body {
28 | font-family: 'Arial', sans-serif;
29 | background-color: #f4f8fb;
30 | color: #333;
31 | } */
32 |
33 | .container {
34 | display: flex;
35 | justify-content: center;
36 | align-items: center;
37 | height: 100vh;
38 | width: 100%;
39 | background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
40 | animation: Gradient 8s ease infinite;
41 | overflow: hidden;
42 | }
43 |
44 | .calculator {
45 | display: flex;
46 | flex-direction: column;
47 | justify-content: center;
48 | align-items: center;
49 | padding: 20px;
50 | border: 1px solid #000;
51 | border-radius: 15px;
52 | background-color: #3a4452;
53 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2), inset 0px 0px 10px rgba(255, 255, 255, 0.1);
54 | }
55 |
56 | /* .calculator_keys {
57 | display: grid;
58 | grid-template-columns: repeat(4, 1fr);
59 | gap: 15px;
60 | } */
61 |
62 | .calculator_keys button {
63 | border: 0;
64 | outline: 0;
65 | width: 60px;
66 | height: 60px;
67 | border-radius: 10px;
68 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3);
69 | font-size: 1rem;
70 | margin: 10px;
71 | background-color: transparent;
72 | color: white;
73 | cursor: pointer;
74 | }
75 |
76 | .calculator_keys button:hover {
77 | font-size: 1.1rem;
78 | background-color: #6b7076;
79 | transform: scale(1.05);
80 | }
81 |
82 | .calculator_display {
83 | display: flex;
84 | justify-items: flex-end;
85 | width: 100%;
86 | margin: 20px 0;
87 | }
88 |
89 | .calculator_input {
90 | border: 0;
91 | outline: 0;
92 | padding: 15px;
93 | margin: 10px;
94 | text-align: right;
95 | font-size: 1.5rem;
96 | width: 100%;
97 | height: 60px;
98 | border-radius: 10px;
99 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.3);
100 | background-color: transparent;
101 | color: white;
102 | cursor: pointer;
103 | }
104 |
105 | .calculator_keys .equals {
106 | background-color: #ff7b66;
107 | color: #3a4452;
108 | font-size: 1.5rem;
109 | width: 145px;
110 | cursor: pointer;
111 | }
112 |
113 | .calculator_keys .equals:hover {
114 | background-color: #ff9a8b;
115 | font-size: 1.6rem;
116 | transform: scale(1.05);
117 | }
118 |
119 | @media (max-width: 600px) {
120 |
121 | .calculator {
122 | width: 60%;
123 | }
124 |
125 | .calculator_input {
126 | font-size: 1rem;
127 | }
128 |
129 | .calculator_keys button {
130 | font-size: 1rem;
131 | padding: 12px;
132 | width: 50px;
133 | height: 50px;
134 | }
135 |
136 | .calculator_keys .equals {
137 | width: 120px;
138 | }
139 | }
--------------------------------------------------------------------------------
/group_assignment/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9 | height: 100vh;
10 | background: radial-gradient(circle at top left, #0f2027, #203a43, #2c5364, #1e3c72);
11 | background-size: 600% 600%;
12 | animation: bgAnimation 25s ease infinite;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | overflow: hidden;
17 | color: #ffffff;
18 | position: relative;
19 | }
20 |
21 | @keyframes bgAnimation {
22 | 0% { background-position: 0% 50%; }
23 | 50% { background-position: 100% 50%; }
24 | 100% { background-position: 0% 50%; }
25 | }
26 |
27 | .wall {
28 | position: absolute;
29 | width: 100%;
30 | height: 100vh;
31 | background-image:
32 | linear-gradient(90deg, rgba(0, 255, 255, 0.07) 1px, transparent 1px),
33 | linear-gradient(rgba(0, 255, 255, 0.07) 1px, transparent 1px);
34 | background-size: 60px 60px;
35 | z-index: 0;
36 | animation: moveWall 40s linear infinite;
37 | }
38 |
39 | @keyframes moveWall {
40 | 0% { background-position: 0 0; }
41 | 100% { background-position: 300px 300px; }
42 | }
43 |
44 | #app {
45 | position: relative;
46 | z-index: 2;
47 | padding: 60px 50px;
48 | background: rgba(0, 0, 0, 0.55);
49 | border-radius: 30px;
50 | backdrop-filter: blur(20px);
51 | box-shadow: 0 0 50px #00fff7, 0 0 100px #00fff7;
52 | text-align: center;
53 | animation: fadeZoom 1.5s ease-in-out;
54 | }
55 |
56 | @keyframes fadeZoom {
57 | 0% { opacity: 0; transform: scale(0.8); }
58 | 100% { opacity: 1; transform: scale(1); }
59 | }
60 |
61 | h1 {
62 | font-size: 48px;
63 | font-weight: bold;
64 | color: #00fff7;
65 | margin-bottom: 30px;
66 | text-shadow: 0 0 15px #00fff7, 0 0 35px #00fff7;
67 | animation: pulseGlow 3s ease-in-out infinite;
68 | }
69 |
70 | @keyframes pulseGlow {
71 | 0% { text-shadow: 0 0 15px #00fff7; }
72 | 50% { text-shadow: 0 0 35px #00fff7, 0 0 15px #00fff7; }
73 | 100% { text-shadow: 0 0 15px #00fff7; }
74 | }
75 |
76 | canvas {
77 | border: 6px solid;
78 | border-image: linear-gradient(45deg, #00f2fe, #4facfe) 1;
79 | border-radius: 25px;
80 | background-color: #000;
81 | margin-bottom: 30px;
82 | box-shadow: 0 0 30px #00ffff;
83 | transition: transform 0.5s ease, box-shadow 0.5s ease;
84 | }
85 |
86 | canvas:hover {
87 | transform: scale(1.08) rotate(1deg);
88 | box-shadow: 0 0 50px #00ffff, 0 0 20px #00ffff inset;
89 | }
90 |
91 | .controls {
92 | display: flex;
93 | flex-wrap: wrap;
94 | justify-content: center;
95 | gap: 25px;
96 | margin-top: 30px;
97 | }
98 |
99 | button {
100 | padding: 14px 40px;
101 | font-size: 20px;
102 | font-weight: bold;
103 | border: none;
104 | border-radius: 50px;
105 | background: transparent;
106 | color: #00fff7;
107 | border: 2px solid #00fff7;
108 | box-shadow: 0 0 20px #00fff7;
109 | cursor: pointer;
110 | position: relative;
111 | overflow: hidden;
112 | z-index: 1;
113 | transition: all 0.4s ease;
114 | }
115 |
116 | button::before {
117 | content: '';
118 | position: absolute;
119 | top: -100%;
120 | left: -100%;
121 | width: 300%;
122 | height: 300%;
123 | background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
124 | animation: shinyEffect 6s linear infinite;
125 | z-index: 0;
126 | opacity: 0.5;
127 | }
128 |
129 | @keyframes shinyEffect {
130 | 0% { transform: translate(0%, 0%); }
131 | 100% { transform: translate(100%, 100%); }
132 | }
133 |
134 | button:hover {
135 | transform: scale(1.15);
136 | background-color: rgba(0, 255, 255, 0.2);
137 | color: #ffffff;
138 | box-shadow: 0 0 30px #00ffff, 0 0 10px #00ffff inset;
139 | border-color: #00ffff;
140 | }
141 |
142 |
143 |
--------------------------------------------------------------------------------
/group_assignment/hs.css:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | /* Global Styles */
19 | body {
20 | font-family: 'Segoe UI', sans-serif;
21 | background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
22 | color: #fff;
23 | margin: 0;
24 | padding: 0;
25 | text-align: center;
26 | animation: fadeIn 2s ease-in-out; /* Fade-in effect */
27 | }
28 |
29 | /* Header Styles */
30 | header {
31 | padding: 30px 10px;
32 | background-color: #111;
33 | border-bottom: 2px solid #555;
34 | animation: slideInFromTop 1s ease-out; /* Slide-in animation */
35 | }
36 |
37 | h1 {
38 | font-size: 2.5rem;
39 | margin-bottom: 10px;
40 | color: #00ffd5;
41 | text-shadow: 0 0 10px #00ffd5;
42 | animation: glow 1.5s infinite alternate; /* Glowing effect */
43 | }
44 |
45 | header p {
46 | font-size: 1.2rem;
47 | color: #ddd;
48 | }
49 |
50 | /* Main Section Styles */
51 | main {
52 | padding: 30px 15px;
53 | }
54 |
55 | .controls {
56 | margin-bottom: 20px;
57 | }
58 |
59 | button {
60 | padding: 12px 25px;
61 | margin: 10px;
62 | font-size: 16px;
63 | font-weight: bold;
64 | border: none;
65 | border-radius: 8px;
66 | cursor: pointer;
67 | background: #00ffd5;
68 | color: #000;
69 | box-shadow: 0 0 15px #00ffd5, 0 0 30px #00ffd5 inset;
70 | transition: all 0.3s ease;
71 | animation: pulseButton 1s infinite alternate; /* Pulse effect */
72 | }
73 |
74 | button:hover {
75 | background: #00bfa6;
76 | box-shadow: 0 0 25px #00ffd5, 0 0 35px #00ffd5 inset;
77 | transform: scale(1.05);
78 | }
79 |
80 | /* Canvas Container */
81 | .canvas-container {
82 | display: flex;
83 | justify-content: center;
84 | align-items: center;
85 | margin-bottom: 30px;
86 | animation: fadeIn 2s ease-in-out;
87 | }
88 |
89 | canvas {
90 | border: 3px solid #00ffd5;
91 | background-color: #fff;
92 | border-radius: 10px;
93 | box-shadow: 0 0 20px #00ffd5;
94 | transition: transform 0.3s ease;
95 | }
96 |
97 | canvas:hover {
98 | transform: scale(1.05);
99 | }
100 |
101 | /* Instructions Section */
102 | .instructions {
103 | max-width: 600px;
104 | margin: 0 auto;
105 | text-align: left;
106 | background: #222;
107 | padding: 20px;
108 | border-radius: 10px;
109 | box-shadow: 0 0 20px #00ffd5;
110 | animation: slideInFromBottom 1s ease-out; /* Slide-in from bottom */
111 | }
112 |
113 | .instructions h2 {
114 | color: #00ffd5;
115 | margin-bottom: 10px;
116 | }
117 |
118 | .instructions ul {
119 | padding-left: 20px;
120 | }
121 |
122 | /* Footer Styles */
123 | footer {
124 | background: #111;
125 | padding: 15px;
126 | border-top: 2px solid #555;
127 | font-size: 14px;
128 | color: #aaa;
129 | animation: fadeIn 3s ease-in-out; /* Fade-in effect */
130 | }
131 |
132 | /* Keyframes for Animations */
133 | @keyframes fadeIn {
134 | 0% {
135 | opacity: 0;
136 | }
137 | 100% {
138 | opacity: 1;
139 | }
140 | }
141 |
142 | @keyframes slideInFromTop {
143 | 0% {
144 | transform: translateY(-100%);
145 | opacity: 0;
146 | }
147 | 100% {
148 | transform: translateY(0);
149 | opacity: 1;
150 | }
151 | }
152 |
153 | @keyframes slideInFromBottom {
154 | 0% {
155 | transform: translateY(100%);
156 | opacity: 0;
157 | }
158 | 100% {
159 | transform: translateY(0);
160 | opacity: 1;
161 | }
162 | }
163 |
164 | @keyframes glow {
165 | 0% {
166 | text-shadow: 0 0 10px #00ffd5;
167 | }
168 | 100% {
169 | text-shadow: 0 0 20px #00ffd5, 0 0 30px #00ffd5;
170 | }
171 | }
172 |
173 | @keyframes pulseButton {
174 | 0% {
175 | transform: scale(1);
176 | }
177 | 100% {
178 | transform: scale(1.1);
179 | }
180 | }
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
--------------------------------------------------------------------------------
/group_assignment/maze.css:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | /* Global Styles */
34 | body {
35 | font-family: 'Segoe UI', sans-serif;
36 | background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
37 | color: #fff;
38 | margin: 0;
39 | padding: 0;
40 | text-align: center;
41 | animation: fadeIn 2s ease-in-out; /* Fade-in effect */
42 | }
43 |
44 | /* Header Styles */
45 | header {
46 | padding: 30px 10px;
47 | background-color: #111;
48 | border-bottom: 2px solid #555;
49 | animation: slideInFromTop 1s ease-out; /* Slide-in animation */
50 | }
51 |
52 | h1 {
53 | font-size: 2.5rem;
54 | margin-bottom: 10px;
55 | color: #00ffd5;
56 | text-shadow: 0 0 10px #00ffd5;
57 | animation: glow 1.5s infinite alternate; /* Glowing effect */
58 | }
59 |
60 | header p {
61 | font-size: 1.2rem;
62 | color: #ddd;
63 | }
64 |
65 | /* Main Section Styles */
66 | main {
67 | padding: 30px 15px;
68 | }
69 |
70 | .controls {
71 | margin-bottom: 20px;
72 | }
73 |
74 | button {
75 | padding: 12px 25px;
76 | margin: 10px;
77 | font-size: 16px;
78 | font-weight: bold;
79 | border: none;
80 | border-radius: 8px;
81 | cursor: pointer;
82 | background: #00ffd5;
83 | color: #000;
84 | box-shadow: 0 0 15px #00ffd5, 0 0 30px #00ffd5 inset;
85 | transition: all 0.3s ease;
86 | animation: pulseButton 1s infinite alternate; /* Pulse effect */
87 | }
88 |
89 | button:hover {
90 | background: #00bfa6;
91 | box-shadow: 0 0 25px #00ffd5, 0 0 35px #00ffd5 inset;
92 | transform: scale(1.05);
93 | }
94 |
95 | /* Canvas Container */
96 | .canvas-container {
97 | display: flex;
98 | justify-content: center;
99 | align-items: center;
100 | margin-bottom: 30px;
101 | animation: fadeIn 2s ease-in-out;
102 | }
103 |
104 | canvas {
105 | border: 3px solid #00ffd5;
106 | background-color: #fff;
107 | border-radius: 10px;
108 | box-shadow: 0 0 20px #00ffd5;
109 | transition: transform 0.3s ease;
110 | }
111 |
112 | canvas:hover {
113 | transform: scale(1.05);
114 | }
115 |
116 | /* Instructions Section */
117 | .instructions {
118 | max-width: 600px;
119 | margin: 0 auto;
120 | text-align: left;
121 | background: #222;
122 | padding: 20px;
123 | border-radius: 10px;
124 | box-shadow: 0 0 20px #00ffd5;
125 | animation: slideInFromBottom 1s ease-out; /* Slide-in from bottom */
126 | }
127 |
128 | .instructions h2 {
129 | color: #00ffd5;
130 | margin-bottom: 10px;
131 | }
132 |
133 | .instructions ul {
134 | padding-left: 20px;
135 | }
136 |
137 | /* Footer Styles */
138 | footer {
139 | background: #111;
140 | padding: 15px;
141 | border-top: 2px solid #555;
142 | font-size: 14px;
143 | color: #aaa;
144 | animation: fadeIn 3s ease-in-out; /* Fade-in effect */
145 | }
146 |
147 | /* Keyframes for Animations */
148 | @keyframes fadeIn {
149 | 0% {
150 | opacity: 0;
151 | }
152 | 100% {
153 | opacity: 1;
154 | }
155 | }
156 |
157 | @keyframes slideInFromTop {
158 | 0% {
159 | transform: translateY(-100%);
160 | opacity: 0;
161 | }
162 | 100% {
163 | transform: translateY(0);
164 | opacity: 1;
165 | }
166 | }
167 |
168 | @keyframes slideInFromBottom {
169 | 0% {
170 | transform: translateY(100%);
171 | opacity: 0;
172 | }
173 | 100% {
174 | transform: translateY(0);
175 | opacity: 1;
176 | }
177 | }
178 |
179 | @keyframes glow {
180 | 0% {
181 | text-shadow: 0 0 10px #00ffd5;
182 | }
183 | 100% {
184 | text-shadow: 0 0 20px #00ffd5, 0 0 30px #00ffd5;
185 | }
186 | }
187 |
188 | @keyframes pulseButton {
189 | 0% {
190 | transform: scale(1);
191 | }
192 | 100% {
193 | transform: scale(1.1);
194 | }
195 | }
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
--------------------------------------------------------------------------------
/group_assignment/new.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
12 |
13 | Generating Maze...
14 |
15 |
16 |