diff --git a/New folder (2)/.vscode/settings.json b/New folder (2)/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/New folder (2)/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/New folder (2)/ballimg-removebg-preview.png b/New folder (2)/ballimg-removebg-preview.png new file mode 100644 index 0000000..a69b29c Binary files /dev/null and b/New folder (2)/ballimg-removebg-preview.png differ diff --git a/New folder (2)/basket-removebg-preview.png b/New folder (2)/basket-removebg-preview.png new file mode 100644 index 0000000..cc8339f Binary files /dev/null and b/New folder (2)/basket-removebg-preview.png differ diff --git a/New folder (2)/brick.jpeg b/New folder (2)/brick.jpeg new file mode 100644 index 0000000..8cf6ea5 Binary files /dev/null and b/New folder (2)/brick.jpeg differ diff --git a/New folder (2)/index2.html b/New folder (2)/index2.html new file mode 100644 index 0000000..4fb9088 --- /dev/null +++ b/New folder (2)/index2.html @@ -0,0 +1,23 @@ + + + + + + basketball game + + + +
+
hi play this game now
+

CATCH THE BASKET

+ +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/New folder (2)/script2.js b/New folder (2)/script2.js new file mode 100644 index 0000000..1ac7e28 --- /dev/null +++ b/New folder (2)/script2.js @@ -0,0 +1,114 @@ +const gameArea = document.getElementById('gameArea'); +const basket = document.getElementById('basket'); +let score = 0; +const gameareapos = gameArea.getBoundingClientRect(); +const scoreboard = document.getElementById('scoreboard'); +let arrayballs= []; + +function createBall() { + const ball = document.createElement('div'); + ball.classList.add('ball'); + + let x = Math.random() * (gameArea.clientWidth - 120); + let y = 0; + ball.style.left = x + 'px'; + ball.style.top = y + "px"; + + let vx = Math.random(); + let vy = 2; + + gameArea.appendChild(ball); + console.log("ball created"); + arrayballs.push(ball); + + + + function bounceback() { + x = x + vx ; + y = y + vy ; + ball.style.top = y + 'px'; + ball.style.left = x + 'px'; + + const ballpos = ball.getBoundingClientRect(); + + if(ballpos.bottom >= gameareapos.bottom){ + vy *= -1 ; + } + + if(ballpos.top <= gameareapos.top ){ + vy *= -1 ; + } + + if(ballpos.left <= gameareapos.left){ + vx *= -1 ; + } + + if(ballpos.right >= gameareapos.right){ + vx *= -1 ; + } + + + const basketpos = basket.getBoundingClientRect(); + + const Collide = + ballpos.bottom + 10 >= basketpos.bottom && + ballpos.left >= basketpos.left&& + ballpos.right <= basketpos.right; + + if (Collide) { + score++; + console.log("Score:", score); + ball.remove(); + scoreboard.innerText = "Score:" + score ; + } + + requestAnimationFrame(bounceback); + + } + + requestAnimationFrame(bounceback); + +} + +const play = document.getElementById('play'); + +play.addEventListener('click' , () => { + score = 0; + scoreboard.innerText = "Score:" + score ; + const setint = setInterval(createBall,1000); + play.disabled = true; + setTimeout( () => { + clearInterval(setint); + console.log("stopped"); + + play.disabled = false; + play.innerText = "restart" ; + alert(`Time's up! Your final score: ${score}`); + + arrayballs.forEach ( ball => ball.remove()); + + } , 10000) ; +}); + + + + +let basketLeft = (window.innerWidth) /2 ; +let basketres = (window.innerWidth - gameArea.clientWidth) / 2 ; +let basketrightres = basketres + gameArea.clientWidth; + + document.addEventListener('keydown', (e)=>{ + const basketpos = basket.getBoundingClientRect(); + if (basketpos.left >= basketres){ + if(e.key === 'ArrowLeft'){ + basketLeft -= 20 ; + basket.style.left = basketLeft + 'px'; + }} + + if (basketpos.right <= basketrightres){ + if(e.key === 'ArrowRight'){ + basketLeft += 20 ; + basket.style.left = basketLeft + 'px'; + }} + + }); \ No newline at end of file diff --git a/New folder (2)/style2.css b/New folder (2)/style2.css new file mode 100644 index 0000000..7444407 --- /dev/null +++ b/New folder (2)/style2.css @@ -0,0 +1,67 @@ +*{ + margin: 0; + padding: 0; +} + +#gameArea{ + background-color: aqua; + height:70vh; + margin:15vh 100px 15vh 100px; + margin-top: 30px; + margin-bottom: 10px; + position: relative; +} + +.ball { + width:70px; + height:70px; + background-image: url('ballimg-removebg-preview.png'); + background-size: cover; + position: absolute; + +} + +#basket img{ + width: 120px; +} + +#basket{ + position: absolute; + bottom: 5vh; + left: 50vw; + z-index: 2; +} + +.heading h1{ + padding-top: 30px; + place-self: center; + color: rgb(4, 23, 39); + background-color: azure; + padding: 20px; +} + +.game { + background-image: url('brick.jpeg'); + height: 100vh; + margin:0px; +} + +.first { + visibility: none; +} + +#play { + border-radius: 20px; + font-size:20px; + padding:10px; +} + +.playbutton { + display: flex; + justify-content: center; +} + +#scoreboard{ + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/New folder (3)/.vscode/settings.json b/New folder (3)/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/New folder (3)/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/New folder (3)/index3.html b/New folder (3)/index3.html new file mode 100644 index 0000000..91975fd --- /dev/null +++ b/New folder (3)/index3.html @@ -0,0 +1,21 @@ + + + + + + e-commerce site + + + +

E-COMMERCE

+
+
+ +
+
+
+

Choose A Category

+
+ + + \ No newline at end of file diff --git a/New folder (3)/script3.js b/New folder (3)/script3.js new file mode 100644 index 0000000..19dca89 --- /dev/null +++ b/New folder (3)/script3.js @@ -0,0 +1,65 @@ +const catecont = document.querySelector('.categories'); +const itemscont = document.querySelector('.items'); + +async function fetching() { + const [categoryres, itemres] = await Promise.all([ + fetch("http://43.205.110.71:8000/categories"), + fetch("http://43.205.110.71:8000/items") + ]); + const categories = await categoryres.json() ; + const items = await itemres.json(); + + function showitems(items) { + itemscont.innerHTML = ""; + items.forEach((item) =>{ + const itemcont = document.createElement("div"); + itemcont.innerHTML = + + ` +

${item.name}

+

price: ${item.price}

`; + + itemcont.className = "item"; + itemscont.append(itemcont); + console.log("hello"); + }); + + } + + showitems(items); + + + categories.forEach (category => { + const btn1 = document.createElement("button"); + btn1.innerText = category.category ; + btn1.className = "btnclass"; + catecont.append(btn1); + + const itemcate = items.filter(item => item.category === category.category); + + btn1.onclick = () => { + showitems(itemcate); + }; + }) + + const tab = document.getElementById("tab"); +const searchbut = document.getElementById("searchbut"); + +searchbut.onclick = () => { + const itemcate = items.filter(item => item.category === tab.value); + showitems(itemcate); + console.log(tab.value); +} + + const tab2 = document.getElementById("tab2"); +const searchbut2 = document.getElementById("searchbut2"); + +searchbut2.onclick = () => { + const itemtag = items.filter(item => item.tags.includes(tab2.value)); + showitems(itemtag); + console.log(tab2.value); +} + +} + +fetching(); \ No newline at end of file diff --git a/New folder (3)/style3.css b/New folder (3)/style3.css new file mode 100644 index 0000000..b5dd99f --- /dev/null +++ b/New folder (3)/style3.css @@ -0,0 +1,66 @@ +* { + margin:0; + padding:0; + font-family: 'Inter', sans-serif; + font-weight: 100; +} + +.categories{ + display:flex; + flex-direction: column; + width: 20vw; + border-right : 10px black; + height: 100vh; +} + +.item{ + background-color: rgb(182, 222, 222); + padding: 10px; + margin:10px; + border-radius: 10px; + width:200px; +} + +.items{ + display: flex; + flex-wrap: wrap; + width:80vw; +} + +.btnclass{ + width: 20vw; + font-size:20px; +} + +.flex{ + display: flex; + justify-content: space-between; + align-content: flex-end; +} + +.flex1{ + display: flex; + gap:10px; + height: 20px; + margin-top:30px; +} + +.flex2{ + display: flex; + gap:10px; + height: 20px; + margin-top:30px; +} + +#tab{ + width:300px; +} + +#tab2{ + width:300px; +} + +.mainbody { + display: flex; + +} \ No newline at end of file diff --git a/assign1/.vscode/settings.json b/assign1/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/assign1/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assign1/index1.html b/assign1/index1.html new file mode 100644 index 0000000..910399d --- /dev/null +++ b/assign1/index1.html @@ -0,0 +1,42 @@ + + + + + + LLM Chat App + + + +
+
+ + +
+
+
+

LLM Chat

+
+ + +
+
+ +
+
+ + +
+ + + + diff --git a/assign1/script1.js b/assign1/script1.js new file mode 100644 index 0000000..f8fe29d --- /dev/null +++ b/assign1/script1.js @@ -0,0 +1,168 @@ +const chatwindow = document.getElementById("chatWindow"); +const modelSelect = document.getElementById("modelSelect"); +const apiKeyInput = document.getElementById("apiKeyInput"); +const btn1 = document.getElementById("btn1"); +const userinput = document.getElementById("userInput"); + +let db; +let currentSessionId ; +currentSessionId = localStorage.getItem("current_session"); + +window.onload = function createdb() { + const request = indexedDB.open("chat_app", 1); + + request.onerror = function () { + console.log("Error opening IndexedDB"); + }; + + request.onsuccess = function (event) { + db = event.target.result; + messagesofasession(); + updateSidebarFromDB(); + }; + + request.onupgradeneeded = function (event) { + db = event.target.result; + db.createObjectStore("messages", { keyPath: "id", autoIncrement: true }); + }; +}; + + +function dataToDB(sessionId, sender, text) { + const tran = db.transaction("messages", "readwrite"); + const store = tran.objectStore("messages"); + + const message = { + sessionId: sessionId, + sender: sender, + text: text, + timestamp: Date.now() + }; + + store.add(message); +} + +function messagesofasession() { + const tran = db.transaction("messages", "readonly"); + const store = tran.objectStore("messages"); + + const messages = []; + store.openCursor().onsuccess = function (event) { + const cursor = event.target.result; + if (cursor) { + const msg = cursor.value; + if (msg.sessionId === currentSessionId) { + messages.push(msg); + } + cursor.continue(); + } else { + messages.sort((a, b) => a.timestamp - b.timestamp); + messages.forEach(m => showMessage(m.text, m.sender , false)); + } + }; +} + +function AnySession(sessionId) { + currentSessionId = sessionId; + chatwindow.innerHTML = ""; + messagesofasession(); + localStorage.setItem("current_session", currentSessionId); +} + + + + +function showMessage(message, sender , save = true) { + const mdiv = document.createElement("div"); + mdiv.className = "message " + sender; + mdiv.innerText = message; + chatwindow.appendChild(mdiv); + + if (save) { + dataToDB(currentSessionId , sender , message ); +} +updateSidebarFromDB(); +} + +btn1.onclick = function () { + const userMessage = userinput.value; + const apiKey = apiKeyInput.value; + const model = modelSelect.value; + + showMessage(userMessage, "user"); + userinput.value = ""; + botreply(apiKey, model, userMessage); +}; + +function botreply(apiKey, model, userMessage) { + const messageData = { + model: model, + messages: [{ role: "user", content: userMessage }] + }; + + fetch('https://openrouter.ai/api/v1/chat/completions', { + method: 'POST', + headers: { + "Authorization": "Bearer " + apiKey, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + model: model , + messages: [ { role: 'user', content: userMessage }], + }) +}) + + .then(function(response) { + return response.json(); + }) + + .then(function(data) { + const reply = data.choices[0].message.content; + showMessage(reply, "bot"); + }) +} + + + +function updateSidebarFromDB() { + const tx = db.transaction("messages", "readonly"); + const store = tx.objectStore("messages"); + const sessions = new Set(); + + store.openCursor().onsuccess = function (event) { + const cursor = event.target.result; + if (cursor) { + const msg = cursor.value; + sessions.add(msg.sessionId); + cursor.continue(); + } else { + const sidebar = document.getElementById("chatList"); + sidebar.innerHTML = ""; + + sessions.forEach(sessionId => { + const li = document.createElement("li"); + li.innerText = sessionId; + li.onclick = function () { + AnySession(sessionId); + }; + sidebar.appendChild(li); + }); + } + }; +} + +const newchatbtn = document.getElementById("newChat"); + +newchatbtn.onclick = function () { +currentSessionId = "session-" + Date.now(); +chatwindow.innerHTML = ""; +updateSidebarFromDB(); +localStorage.setItem("current_session", currentSessionId); +}; + + + + + + + diff --git a/assign1/style1.css b/assign1/style1.css new file mode 100644 index 0000000..c2d10f1 --- /dev/null +++ b/assign1/style1.css @@ -0,0 +1,134 @@ +* { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + + +.app-container { + background-color: #fff; + overflow: hidden; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100vh; + width: 80vw; +} + +header { + background-color: #202123; + color: white; + padding: 10px 15px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.controls { + display: flex; + gap: 10px; +} + +.controls select, +.controls input { + padding: 5px; + border-radius: 4px; + border: none; + font-size: 14px; +} + +main#chatWindow { + flex-grow: 1; + padding: 15px; + overflow-y: auto; + background-color: #fefefe; +} + +.message { + margin-bottom: 10px; + padding: 10px; + border-radius: 8px; + max-width: 80%; +} + +.user { + align-self: flex-end; + background-color: #daf1da; +} + +.bot { + align-self: flex-start; + background-color: #e8e8e8; +} + +footer { + padding: 10px; + border-top: 1px solid #ccc; + background-color: #fafafa; +} + +footer form { + display: flex; + gap: 10px; +} + +footer input { + flex-grow: 1; + padding: 10px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; +} + +footer button { + padding: 10px 20px; + background-color: #202123; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +footer button:hover { + background-color: #3a3b3c; +} + + +.fullapp { + display: flex; + height: 100vh; +} + +.history { + width: 20vw; + background-color: #f4f4f4; + padding: 10px; + border-right: 1px solid #ccc; + overflow-y: auto; +} + +.history button { + width: 100%; + padding: 10px; + margin-bottom: 10px; + background-color: #202123; + color: white; + border: none; + border-radius: 5px; +} + +.history ul { + list-style: none; + padding: 0; +} + +.history li { + padding: 8px; + margin-bottom: 5px; + background-color: #e8e8e8; + border-radius: 4px; + font-size: 14px; +} + +