diff --git a/week-10/authSystem/solution/AuthSystem.jsx b/week-10/authSystem/solution/AuthSystem.jsx index 3cc5cb883..d5970afe5 100644 --- a/week-10/authSystem/solution/AuthSystem.jsx +++ b/week-10/authSystem/solution/AuthSystem.jsx @@ -1,13 +1,13 @@ -import React, { createContext, useState, useContext } from 'react'; -import Home from "./Home" -import AppBar from './AppBar'; -import Login from './Login'; +import React, { createContext, useState, useContext } from "react"; +import Home from "./Home"; +import AppBar from "./AppBar"; +import Login from "./Login"; export const AuthContext = createContext(undefined); export default function AuthSystem() { const [useContextApi, setUseContextApi] = useState(false); - const [username, setUsername] = useState(''); + const [username, setUsername] = useState(""); const [isLoggedIn, setIsLoggedIn] = useState(false); const login = (newUsername) => { @@ -16,28 +16,30 @@ export default function AuthSystem() { }; const logout = () => { - setUsername(''); + setUsername(""); setIsLoggedIn(false); }; - const contextValue = useContextApi ? { username, isLoggedIn, login, logout } : undefined; + const contextValue = useContextApi + ? { username, isLoggedIn, login, logout } + : undefined; return ( -
- -
-
+
+ +
+
setUseContextApi(e.target.checked)} />
-
- {isLoggedIn ? ( - - ) : ( - - )} +
+ {isLoggedIn ? : }
); -} +} diff --git a/week-10/authSystem/solution/Home.jsx b/week-10/authSystem/solution/Home.jsx index 5bf7023e5..c51650b60 100644 --- a/week-10/authSystem/solution/Home.jsx +++ b/week-10/authSystem/solution/Home.jsx @@ -1,13 +1,28 @@ const Home = () => ( -
-

Welcome to the Auth System Demo

-

This demo showcases two approaches to managing authentication state in React:

-
    +
    +

    + Welcome to the Auth System Demo +

    +

    + This demo showcases two approaches to managing authentication state in + React: +

    +
    • State Lifting
    • Context API
    -

    Use the toggle above to switch between the two approaches.

    +

    + Use the toggle above to switch between the two approaches. +

    ); -export default Home; \ No newline at end of file +export default Home; diff --git a/week-10/authSystem/src/components/AppBar.jsx b/week-10/authSystem/src/components/AppBar.jsx index 51cea9c0d..f255d5966 100644 --- a/week-10/authSystem/src/components/AppBar.jsx +++ b/week-10/authSystem/src/components/AppBar.jsx @@ -1,9 +1,45 @@ -import React from 'react' +import { AuthContext } from "./AuthSystem"; +import { useContext } from "react"; + +const AppBar = ({ username: propUsername, isLoggedIn: propIsLoggedIn, logout: propLogout }) => { + const contextValue = useContext(AuthContext); + + const displayUsername = contextValue?.username ?? propUsername; + const displayIsLoggedIn = contextValue?.isLoggedIn ?? propIsLoggedIn; + const handleLogout = contextValue?.logout ?? propLogout; -const AppBar = () => { return ( -
    AppBar
    - ) -} +
    +

    Auth System Demo

    + {displayIsLoggedIn ? ( +
    + Welcome, {displayUsername}! + +
    + ) : ( + Not logged in + )} +
    + ); +}; -export default AppBar \ No newline at end of file +export default AppBar; \ No newline at end of file diff --git a/week-10/authSystem/src/components/AuthSystem.jsx b/week-10/authSystem/src/components/AuthSystem.jsx index 4a64d106b..d5970afe5 100644 --- a/week-10/authSystem/src/components/AuthSystem.jsx +++ b/week-10/authSystem/src/components/AuthSystem.jsx @@ -1,9 +1,60 @@ -import React from 'react' +import React, { createContext, useState, useContext } from "react"; +import Home from "./Home"; +import AppBar from "./AppBar"; +import Login from "./Login"; + +export const AuthContext = createContext(undefined); + +export default function AuthSystem() { + const [useContextApi, setUseContextApi] = useState(false); + const [username, setUsername] = useState(""); + const [isLoggedIn, setIsLoggedIn] = useState(false); + + const login = (newUsername) => { + setUsername(newUsername); + setIsLoggedIn(true); + }; + + const logout = () => { + setUsername(""); + setIsLoggedIn(false); + }; + + const contextValue = useContextApi + ? { username, isLoggedIn, login, logout } + : undefined; -const AuthSystem = () => { return ( -
    AuthSystem
    - ) + +
    + +
    +
    + setUseContextApi(e.target.checked)} + /> + +
    +
    +
    + {isLoggedIn ? : } +
    +
    +     + ); } - -export default AuthSystem \ No newline at end of file diff --git a/week-10/authSystem/src/components/Home.jsx b/week-10/authSystem/src/components/Home.jsx index 96c553574..c51650b60 100644 --- a/week-10/authSystem/src/components/Home.jsx +++ b/week-10/authSystem/src/components/Home.jsx @@ -1,9 +1,28 @@ -import React from 'react' +const Home = () => ( +
    +

    + Welcome to the Auth System Demo +

    +

    + This demo showcases two approaches to managing authentication state in + React: +

    +
      +
    • State Lifting
      • +
    • Context API
      • +
    +

    + Use the toggle above to switch between the two approaches. +

    +
    +); -const Home = () => { - return ( -
    Home
    - ) -} - -export default Home \ No newline at end of file +export default Home; diff --git a/week-10/authSystem/src/components/Login.jsx b/week-10/authSystem/src/components/Login.jsx index 45e3e9d29..68e8195da 100644 --- a/week-10/authSystem/src/components/Login.jsx +++ b/week-10/authSystem/src/components/Login.jsx @@ -1,9 +1,50 @@ -import React from 'react' +import React, { useState, useContext } from 'react'; +import { AuthContext } from './AuthSystem'; + +const Login = ({ onLogin: propOnLogin }) => { + const [username, setUsername] = useState(''); + const contextValue = useContext(AuthContext); + + const handleLogin = () => { + if (contextValue?.login) { + contextValue.login(username); + } else if (propOnLogin) { + propOnLogin(username); + } + setUsername(''); + }; -const Login = () => { return ( -
    Login
    - ) -} +
    +
    + + setUsername(e.target.value)} + placeholder="Enter your username" + style={{ + padding: '0.5rem', + borderRadius: '4px', + border: '1px solid #ccc' + }} + /> +
    + +
    + ); +}; -export default Login \ No newline at end of file +export default Login; \ No newline at end of file diff --git a/week-10/userApi/package-lock.json b/week-10/userApi/package-lock.json index 492c0d8e7..eee54fea9 100644 --- a/week-10/userApi/package-lock.json +++ b/week-10/userApi/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.7.7", + "node": "^20.19.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -3174,6 +3175,28 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/node": { + "version": "20.19.0", + "resolved": "https://registry.npmjs.org/node/-/node-20.19.0.tgz", + "integrity": "sha512-upEH46DT6+wF3J8Q7tnmB8Kh0m+xYcBdaIluOxjR9ZnM5lpabfZIBfXNYWUxOhxTQLu23J4MiNXkUOeFHPrqdA==", + "hasInstallScript": true, + "license": "ISC", + "dependencies": { + "node-bin-setup": "^1.0.0" + }, + "bin": { + "node": "bin/node" + }, + "engines": { + "npm": ">=5.0.0" + } + }, + "node_modules/node-bin-setup": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz", + "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==", + "license": "ISC" + }, "node_modules/node-releases": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", diff --git a/week-10/userApi/package.json b/week-10/userApi/package.json index c39b48382..96feef322 100644 --- a/week-10/userApi/package.json +++ b/week-10/userApi/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "axios": "^1.7.7", + "node": "^20.19.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/week-10/userApi/src/components/RandomUser.jsx b/week-10/userApi/src/components/RandomUser.jsx index 00e0deaa5..18ce25cd9 100644 --- a/week-10/userApi/src/components/RandomUser.jsx +++ b/week-10/userApi/src/components/RandomUser.jsx @@ -1,9 +1,44 @@ -import React from 'react' - +import React, { useEffect, useState } from "react"; +import './styles.css' const RandomUser = () => { + const [users, setUsers] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + const fetchUsers = async () => { + setIsLoading(true); + try { + const response = await fetch("https://randomuser.me/api/?results=9"); // Fetch 9 users + const data = await response.json(); + setUsers(data.results); + } catch (error) { + console.log("Error fetching users:", error); + } finally { + setIsLoading(false); + } + }; + + useEffect(() => { + fetchUsers(); // Initial fetch on mount + }, []); + return ( -
    RandomUser
    - ) -} +
    +

    Random Users

    + {isLoading ? ( +

    Loading...

    + ) : ( +
    + {users.map((user, index) => ( +
    + User +

    {user.name.first} {user.name.last}

    +
    + ))} +
    + )} + +
    + ); +}; -export default RandomUser \ No newline at end of file +export default RandomUser; diff --git a/week-10/userApi/src/components/styles.css b/week-10/userApi/src/components/styles.css new file mode 100644 index 000000000..c731c1916 --- /dev/null +++ b/week-10/userApi/src/components/styles.css @@ -0,0 +1,42 @@ +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 20px; + max-width: 800px; + margin: auto; + padding: 20px; + } + + .user-card { + border: 1px solid #ddd; + border-radius: 10px; + padding: 15px; + text-align: center; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease-in-out; + } + + .user-card img { + border-radius: 50%; + width: 80px; + height: 80px; + } + + .user-card:hover { + transform: scale(1.05); + } + + .load-btn { + background-color: #444; + color: white; + padding: 10px 20px; + border: none; + cursor: pointer; + margin-top: 20px; + border-radius: 5px; + } + + .load-btn:hover { + background-color: #222; + } + \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/1-counter.js b/week-2/week-2-async-js/easy/1-counter.js new file mode 100644 index 000000000..d486d5463 --- /dev/null +++ b/week-2/week-2-async-js/easy/1-counter.js @@ -0,0 +1,5 @@ +let i=0; +setInterval(() => { + i++; + console.log(i); +},1000); \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/2-counter.js b/week-2/week-2-async-js/easy/2-counter.js new file mode 100644 index 000000000..95b2b38c6 --- /dev/null +++ b/week-2/week-2-async-js/easy/2-counter.js @@ -0,0 +1,12 @@ +let i =0; +function counter(){ + + i++; + console.log(i); + setTimeout(()=>{ + + counter(); + + },1000) +} +counter(); \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/3-read-from-file.js b/week-2/week-2-async-js/easy/3-read-from-file.js new file mode 100644 index 000000000..62b6dffc4 --- /dev/null +++ b/week-2/week-2-async-js/easy/3-read-from-file.js @@ -0,0 +1,9 @@ +const fs = require('fs'); +fs.readFile('test.txt','utf-8',(err,data)=>{ + if(err){ + console.log(err); + } + else{ + console.log(data); + } +}) \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/4-write-to-file.js b/week-2/week-2-async-js/easy/4-write-to-file.js new file mode 100644 index 000000000..2147482f6 --- /dev/null +++ b/week-2/week-2-async-js/easy/4-write-to-file.js @@ -0,0 +1,18 @@ +const fs = require('fs'); + +let data = "I am Rohit Rana"; +fs.writeFile('test.txt', data, (err) => { + if (err) { + console.log("Error writing file:", err); + } else { + console.log("File written successfully!"); + } +}); +fs.readFile('test.txt','utf-8',(data,err)=>{ + if(err){ + console.log(err); + } + else{ + console.log(data); + } +}) \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/test.txt b/week-2/week-2-async-js/easy/test.txt new file mode 100644 index 000000000..36ccbd80d --- /dev/null +++ b/week-2/week-2-async-js/easy/test.txt @@ -0,0 +1 @@ +I am Rohit Rana \ No newline at end of file diff --git a/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js b/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js index 32a99c83f..722ca9bca 100644 --- a/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js +++ b/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js @@ -1,8 +1,11 @@ /* Write a function that returns a promise that resolves after n seconds have passed, where n is passed as an argument to the function. */ - function wait(n) { + return new Promise((resolve) => { + setTimeout(resolve, n * 1000); + }); } -module.exports = wait; +module.exports = wait; + diff --git a/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js b/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js index a171170b0..df8d4d0f6 100644 --- a/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js +++ b/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js @@ -5,6 +5,13 @@ */ function sleep(milliseconds) { + return new Promise((resolve) => { + const start = Date.now(); + while (Date.now() - start < milliseconds) { + // Busy-wait loop (blocks the event loop) + } + resolve(); + }); } module.exports = sleep; diff --git a/week-2/week-2-async-js/hard (promises)/3-promise-all.js b/week-2/week-2-async-js/hard (promises)/3-promise-all.js index a57838ade..847b13f36 100644 --- a/week-2/week-2-async-js/hard (promises)/3-promise-all.js +++ b/week-2/week-2-async-js/hard (promises)/3-promise-all.js @@ -3,21 +3,23 @@ * Write a function that uses the 3 functions to wait for all 3 promises to resolve using Promise.all, * Return a promise.all which return the time in milliseconds it takes to complete the entire operation. */ - function wait1(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait2(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait3(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function calculateTime(t1, t2, t3) { - + const startTime = Date.now(); + return Promise.all([wait1(t1), wait2(t2), wait3(t3)]).then(() => { + return Date.now() - startTime; + }); } module.exports = calculateTime; diff --git a/week-2/week-2-async-js/hard (promises)/4-promise-chain.js b/week-2/week-2-async-js/hard (promises)/4-promise-chain.js index 6044e241f..a641c6078 100644 --- a/week-2/week-2-async-js/hard (promises)/4-promise-chain.js +++ b/week-2/week-2-async-js/hard (promises)/4-promise-chain.js @@ -6,19 +6,24 @@ */ function wait1(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait2(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait3(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function calculateTime(t1, t2, t3) { + const startTime = Date.now(); + return wait1(t1) + .then(() => wait2(t2)) + .then(() => wait3(t3)) + .then(() => Date.now() - startTime); } module.exports = calculateTime; diff --git a/week-2/week-2-async-js/medium/1-file-cleaner.js b/week-2/week-2-async-js/medium/1-file-cleaner.js new file mode 100644 index 000000000..fc3bb90d4 --- /dev/null +++ b/week-2/week-2-async-js/medium/1-file-cleaner.js @@ -0,0 +1,19 @@ +const fs = require("fs"); + +fs.readFile("1-file-cleaner.md", "utf-8", (err, data) => { + if (err) { + console.log("Error reading file:", err); + return; + } + + + var cleanedData = data.replace(/\s+/g, " ").trim(); + + fs.writeFile("1-file-cleaner.md", cleanedData, (err) => { + if (err) { + console.log("Error writing to file:", err); + } else { + console.log("File cleaned successfully!"); + } + }); +}); diff --git a/week-2/week-2-async-js/medium/1-file-cleaner.md b/week-2/week-2-async-js/medium/1-file-cleaner.md index 2be6e450b..dd286f819 100644 --- a/week-2/week-2-async-js/medium/1-file-cleaner.md +++ b/week-2/week-2-async-js/medium/1-file-cleaner.md @@ -1,13 +1 @@ -## File cleaner -Read a file, remove all the extra spaces and write it back to the same file. - -For example, if the file input was -``` -hello world my name is raman -``` - -After the program runs, the output should be - -``` -hello world my name is raman -``` \ No newline at end of file +## File cleaner Read a file, remove all the extra spaces and write it back to the same file. For example, if the file input was ``` hello world my name is raman ``` After the program runs, the output should be ``` hello world my name is raman ``` \ No newline at end of file diff --git a/week-2/week-2-async-js/medium/1-file.md b/week-2/week-2-async-js/medium/1-file.md new file mode 100644 index 000000000..ab6082efa --- /dev/null +++ b/week-2/week-2-async-js/medium/1-file.md @@ -0,0 +1 @@ +hello world my name is raman \ No newline at end of file diff --git a/week-2/week-2-async-js/medium/2-clock.js b/week-2/week-2-async-js/medium/2-clock.js new file mode 100644 index 000000000..6324f982b --- /dev/null +++ b/week-2/week-2-async-js/medium/2-clock.js @@ -0,0 +1,5 @@ +d = new Date(); +utc = d.getTime() + (d.getTimezoneOffset() * 60000); +nd = new Date(utc + (3600000*+5.5)); +var ist = nd.toLocaleString(); +console.log("IST now is : " +ist); \ No newline at end of file diff --git a/week-2/week-2-js/easy/anagram.js b/week-2/week-2-js/easy/anagram.js index 8184c8308..22b6cb660 100644 --- a/week-2/week-2-js/easy/anagram.js +++ b/week-2/week-2-js/easy/anagram.js @@ -4,8 +4,17 @@ - A word, phrase, or name formed by rearranging the letters of another, such as spar, formed from rasp. */ + function isAnagram(str1, str2) { + + if (str1.length !== str2.length) { + return false; + } + return ( + str1.toLowerCase().split("").sort().join("") === + str2.toLowerCase().split("").sort().join("") + ); } module.exports = isAnagram; diff --git "a/week-3/easy/The-Pok\303\251mon/index.html" "b/week-3/easy/The-Pok\303\251mon/index.html" new file mode 100644 index 000000000..d11bccae6 --- /dev/null +++ "b/week-3/easy/The-Pok\303\251mon/index.html" @@ -0,0 +1,52 @@ + + + + + + Pokemon Card + + + +
    +

    Loading...

    +
    + + + + diff --git "a/week-3/easy/The-Pok\303\251mon/indextwo.html" "b/week-3/easy/The-Pok\303\251mon/indextwo.html" new file mode 100644 index 000000000..65247a988 --- /dev/null +++ "b/week-3/easy/The-Pok\303\251mon/indextwo.html" @@ -0,0 +1,52 @@ + + + + + + Pokemon Card + + + +
    +

    Loading...

    +
    + + + + diff --git a/week-3/easy/bg-color-changer/index.html b/week-3/easy/bg-color-changer/index.html new file mode 100644 index 000000000..baa05ab44 --- /dev/null +++ b/week-3/easy/bg-color-changer/index.html @@ -0,0 +1,58 @@ + + + + + + Change Background Color + + + + +
    + + + + +
    +
    + +
    + + + diff --git a/week-3/easy/quiz-app/data.js b/week-3/easy/quiz-app/data.js index 430579680..75222a0fb 100644 --- a/week-3/easy/quiz-app/data.js +++ b/week-3/easy/quiz-app/data.js @@ -1,35 +1,115 @@ -// use this quizData in your app. -export const quizData = [{ - "question": "Which language runs in a web browser?", - "a": "Java", - "b": "C", - "c": "Python", - "d": "JavaScript", - "correct": "d", -}, -{ - "question": "What does CSS stand for?", - "a": "Central Style Sheets", - "b": "Cascading Style Sheets", - "c": "Cascading Simple Sheets", - "d": "Cars SUVs Sailboats", - "correct": "b", -}, -{ - "question": "What does HTML stand for?", - "a": "Hypertext Markup Language", - "b": "Hypertext Markdown Language", - "c": "Hyperloop Machine Language", - "d": "Helicopters Terminals Motorboats Lamborginis", - "correct": "a", -}, -{ - "question": "What year was JavaScript launched?", - "a": "1996", - "b": "1995", - "c": "1994", - "d": "none of the above", - "correct": "b", -}, -// you can add more quiz here -] \ No newline at end of file +const quizData = [ + { + "question": "Which language runs in a web browser?", + "a": "Java", + "b": "C", + "c": "Python", + "d": "JavaScript", + "correct": "d", + }, + { + "question": "What does CSS stand for?", + "a": "Central Style Sheets", + "b": "Cascading Style Sheets", + "c": "Cascading Simple Sheets", + "d": "Cars SUVs Sailboats", + "correct": "b", + }, + { + "question": "What does HTML stand for?", + "a": "Hypertext Markup Language", + "b": "Hypertext Markdown Language", + "c": "Hyperloop Machine Language", + "d": "Helicopters Terminals Motorboats Lamborghinis", + "correct": "a", + }, + { + "question": "What year was JavaScript launched?", + "a": "1996", + "b": "1995", + "c": "1994", + "d": "none of the above", + "correct": "b", + }, + { + "question": "Which of these is a JavaScript framework?", + "a": "Python", + "b": "Django", + "c": "React", + "d": "Eclipse", + "correct": "c", + }, + { + "question": "What is the correct file extension for JavaScript files?", + "a": ".java", + "b": ".js", + "c": ".javascript", + "d": ".xml", + "correct": "b", + }, + { + "question": "What does API stand for?", + "a": "Application Programming Interface", + "b": "Advanced Programming Interface", + "c": "Automated Program Integration", + "d": "Application Program Installation", + "correct": "a", + }, + { + "question": "Which symbol is used for comments in JavaScript?", + "a": "//", + "b": "#", + "c": "/* */", + "d": "Both A and C", + "correct": "d", + }, + { + "question": "What is the primary purpose of DOCTYPE in HTML?", + "a": "To link JavaScript", + "b": "To define document type", + "c": "To define data types", + "d": "To define document title", + "correct": "b", + }, + { + "question": "Which property is used to change the background color in CSS?", + "a": "color", + "b": "bgcolor", + "c": "background-color", + "d": "background", + "correct": "c", + } +]; + +const quizContainer = document.getElementById("quizContainer"); +const quizForm = document.getElementById("quizForm"); +const resultDiv = document.getElementById("result"); + +function loadQuiz() { + quizData.forEach((q, index) => { + const div = document.createElement("div"); + div.innerHTML = ` +

    ${index + 1}. ${q.question}

    +
    +
    +
    +
    + `; + quizContainer.appendChild(div); + }); +} + +quizForm.addEventListener("submit", function(event) { + event.preventDefault(); + let score = 0; + quizData.forEach((q, index) => { + const selected = document.querySelector(`input[name="q${index}"]:checked`); + if (selected && selected.value === q.correct) { + score++; + } + }); + resultDiv.innerHTML = `

    Your score: ${score}/${quizData.length}

    `; + // alert(`your score is ${score} /${quizData.length}`) +}); + +loadQuiz(); \ No newline at end of file diff --git a/week-3/easy/quiz-app/index.html b/week-3/easy/quiz-app/index.html new file mode 100644 index 000000000..24b6de5f8 --- /dev/null +++ b/week-3/easy/quiz-app/index.html @@ -0,0 +1,68 @@ + + + + + + Simple Quiz + + + +

    Quiz

    +
    +
    + +
    +
    + + + + diff --git a/week-3/hard/taskify/index.html b/week-3/hard/taskify/index.html new file mode 100644 index 000000000..37d42f9d5 --- /dev/null +++ b/week-3/hard/taskify/index.html @@ -0,0 +1,136 @@ + + + + + + To-Do List + + + +
    +

    To-Do List

    +
    + + +
    +
    +

    To-Do

    +
    +
    +
    +

    In Progress

    +
    +
    +
    +

    Under Review

    +
    +
    +
    +

    Completed

    +
    +
    +
    + + + + diff --git a/week-3/medium/index.html b/week-3/medium/index.html new file mode 100644 index 000000000..b417e13af --- /dev/null +++ b/week-3/medium/index.html @@ -0,0 +1,72 @@ + + + + + + Form Builder + + + + +
    +

    Form Builder

    +
    + + + + + +
    +
    +
    + + + + diff --git a/week-4/middlewares/01-ratelimitter.js b/week-4/middlewares/01-ratelimitter.js index 867228a66..3fbb68974 100644 --- a/week-4/middlewares/01-ratelimitter.js +++ b/week-4/middlewares/01-ratelimitter.js @@ -15,7 +15,28 @@ let numberOfRequestsForUser = {}; setInterval(() => { numberOfRequestsForUser = {}; }, 1000) +app.use(function(req, res, next){ + const userId = req.headers['user-id']; + if(!userId){ + res.status(400).send('id is required') + } + + + if(numberOfRequestsForUser[userId]){ + numberOfRequestsForUser[userId]++; + + } else{ + numberOfRequestsForUser[userId] = 1; + } + + + if(numberOfRequestsForUser[userId] > 5){ + res.status(404).send('you have reached 5 requests per second') + } + + next() +}) app.get('/user', function(req, res) { res.status(200).json({ name: 'john' }); }); diff --git a/week-4/middlewares/01-requestcount.js b/week-4/middlewares/01-requestcount.js index 0a3264869..8ec4d56cc 100644 --- a/week-4/middlewares/01-requestcount.js +++ b/week-4/middlewares/01-requestcount.js @@ -9,7 +9,10 @@ let requestCount = 0; // Your task is to create a global middleware (app.use) which will // maintain a count of the number of requests made to the server in the global // requestCount variable - +app.use(function(req, res, next){ + requestCount++; + next() +}) app.get('/user', function(req, res) { res.status(200).json({ name: 'john' }); }); diff --git a/week-4/middlewares/02-authmiddleware.js b/week-4/middlewares/02-authmiddleware.js index 448a19a8b..36943da82 100644 --- a/week-4/middlewares/02-authmiddleware.js +++ b/week-4/middlewares/02-authmiddleware.js @@ -9,6 +9,14 @@ const VALID_API_KEY = '100xdevs_cohort3_super_secret_valid_api_key'; // key is 1 // Middleware to check for a valid API key function authenticateAPIKey(req, res, next) { // authenticate APIKey here + + const apiKey = req.headers['100xdevs-api-key'] + console.log(apiKey) + if(apiKey === VALID_API_KEY){ + next() + } else{ + res.status(401).json({message: 'Invalid or missing API key'}) + } } app.use(authenticateAPIKey); diff --git a/week-4/middlewares/02-logIncomingRequests.js b/week-4/middlewares/02-logIncomingRequests.js index 647018b89..eefed8c75 100644 --- a/week-4/middlewares/02-logIncomingRequests.js +++ b/week-4/middlewares/02-logIncomingRequests.js @@ -4,7 +4,8 @@ const express = require('express'); const app = express(); function logRequests(req, res, next) { - // write the logic for request log here + console.log(`${req.method} ${req.url} - ${new Date().toISOString()}`) + next() } app.use(logRequests); diff --git a/week-4/package-lock.json b/week-4/package-lock.json new file mode 100644 index 000000000..bdd102434 --- /dev/null +++ b/week-4/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "week-4", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/week-9/package-lock.json b/week-9/package-lock.json new file mode 100644 index 000000000..959c996d0 --- /dev/null +++ b/week-9/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "week-9", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/week-9/petAdoption/package-lock.json b/week-9/petAdoption/package-lock.json index 4fcf73b04..e46b75098 100644 --- a/week-9/petAdoption/package-lock.json +++ b/week-9/petAdoption/package-lock.json @@ -1,13 +1,14 @@ { - "name": "petadotion", + "name": "petadoption", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "petadotion", + "name": "petadoption", "version": "0.0.0", "dependencies": { + "node": "^23.9.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -3085,6 +3086,28 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/node": { + "version": "23.9.0", + "resolved": "https://registry.npmjs.org/node/-/node-23.9.0.tgz", + "integrity": "sha512-G1UAqOInNxL2HkLV0i3ZEgnNsSsWsf4tlpMpR44s7jYPEH8sCXObnxgyphibOiHdyheRkUzE9lRJXJ/4n0/KdA==", + "hasInstallScript": true, + "license": "ISC", + "dependencies": { + "node-bin-setup": "^1.0.0" + }, + "bin": { + "node": "bin/node" + }, + "engines": { + "npm": ">=5.0.0" + } + }, + "node_modules/node-bin-setup": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz", + "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg==", + "license": "ISC" + }, "node_modules/node-releases": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", diff --git a/week-9/petAdoption/package.json b/week-9/petAdoption/package.json index 555bb3341..0c323a1ac 100644 --- a/week-9/petAdoption/package.json +++ b/week-9/petAdoption/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "node": "^23.9.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/week-9/petAdoption/solution/AdopterData.jsx b/week-9/petAdoption/solution/AdopterData.jsx index 1bafa49a5..891137444 100644 --- a/week-9/petAdoption/solution/AdopterData.jsx +++ b/week-9/petAdoption/solution/AdopterData.jsx @@ -1,63 +1,65 @@ -import React, { Component } from 'react' +import React, { Component } from "react"; class AdopterData extends Component { - render() { - const { formData, handleGoBack } = this.props; - return ( -
    - - - - - - - - - - - - - {formData.map((data, index) => ( - - - - - - - - - ))} - -
    Pet NamePet TypeBreedAdopter NameEmailPhone
    {data.petName}{data.petType}{data.breed}{data.adopterName}{data.email}{data.phone}
    -
    - -
    -
    - ) - } + render() { + const { formData, handleGoBack } = this.props; + return ( +
    + + + + + + + + + + + + + {formData.map((data, index) => ( + + + + + + + + + ))} + +
    Pet NamePet TypeBreedAdopter NameEmailPhone
    {data.petName}{data.petType}{data.breed}{data.adopterName}{data.email}{data.phone}
    +
    + +
    +
    + ); + } } -export default AdopterData \ No newline at end of file +export default AdopterData; diff --git a/week-9/petAdoption/solution/Header.jsx b/week-9/petAdoption/solution/Header.jsx index 2c56275c8..5f75a9757 100644 --- a/week-9/petAdoption/solution/Header.jsx +++ b/week-9/petAdoption/solution/Header.jsx @@ -1,11 +1,11 @@ -import React from 'react' +import React from "react"; const Header = ({ message }) => { return ( - ) -} + ); +}; -export default Header \ No newline at end of file +export default Header; diff --git a/week-9/petAdoption/solution/PetAdoptionForm.jsx b/week-9/petAdoption/solution/PetAdoptionForm.jsx index bb5963825..adafd5722 100644 --- a/week-9/petAdoption/solution/PetAdoptionForm.jsx +++ b/week-9/petAdoption/solution/PetAdoptionForm.jsx @@ -1,171 +1,174 @@ -import React, { useState } from 'react' -import AdopterData from './AdopterData'; -import { validation } from "../utils/validation" - +import React, { useState } from "react"; +import AdopterData from "./AdopterData"; +import { validation } from "../utils/validation"; const PetAdoptionForm = () => { - const [formData, setFormData] = useState([]); - const [values, setValues] = useState({ - petName: "", - petType: "Dog", - breed: "", - adopterName: "", - email: "", - phone: "" - }); + const [formData, setFormData] = useState([]); + const [values, setValues] = useState({ + petName: "", + petType: "Dog", + breed: "", + adopterName: "", + email: "", + phone: "", + }); - const [showTable, setShowTable] = useState(false); - const { petName, petType, breed, adopterName, email, phone } = values; - console.log(petName, petType, breed, adopterName, email, phone); + const [showTable, setShowTable] = useState(false); + const { petName, petType, breed, adopterName, email, phone } = values; + console.log(petName, petType, breed, adopterName, email, phone); - const [errors, setErrors] = useState({ - petName: "", - petType: "", - breed: "", - adopterName: "", - email: "", - phone: "" - }); - const handleChange = (event) => { - /* The code snippet `const { name, value } = event.target;` is extracting the `name` and `value` + const [errors, setErrors] = useState({ + petName: "", + petType: "", + breed: "", + adopterName: "", + email: "", + phone: "", + }); + const handleChange = (event) => { + /* The code snippet `const { name, value } = event.target;` is extracting the `name` and `value` properties from the event target object. In this case, it is typically used in an input change event handler to get the name and value of the input field that triggered the change. */ - const { name, value } = event.target; - setValues((prevValues) => ({ - ...prevValues, - [name]: value, - })); - /* The line `let errorsCopy = { ...errors };` is creating a shallow copy of the `errors` object using + const { name, value } = event.target; + setValues((prevValues) => ({ + ...prevValues, + [name]: value, + })); + /* The line `let errorsCopy = { ...errors };` is creating a shallow copy of the `errors` object using the spread operator (`...`). This is done to ensure that any modifications made to `errorsCopy` do not directly affect the original `errors` object. */ - let errorsCopy = { ...errors }; - const errorR = validation(name, value, errorsCopy); - setErrors(errorR); - - } - const handleSubmit = () => { - console.log( - `Pet Name: ${petName} + let errorsCopy = { ...errors }; + const errorR = validation(name, value, errorsCopy); + setErrors(errorR); + }; + const handleSubmit = () => { + console.log( + `Pet Name: ${petName} Pet Type: ${petType} Breed: ${breed} Adopter Name: ${adopterName} Email: ${email} Phone: ${phone}` - ); - if (!petName - || !breed || !adopterName - || !email || !phone) { - alert("Please fill out all fields"); - return; - } - /* The line `const hasErrors = Object.values(errors).some((val) => val);` is checking if there are any + ); + if (!petName || !breed || !adopterName || !email || !phone) { + alert("Please fill out all fields"); + return; + } + /* The line `const hasErrors = Object.values(errors).some((val) => val);` is checking if there are any errors present in the `errors` object. */ - const hasErrors = Object.values(errors).some((val) => val); - if (hasErrors) { - alert("Please fill out all fields"); - return; - } - - const data = { petName, petType, breed, adopterName, email, phone }; - setFormData((prevData) => [...prevData, data]); - setShowTable(true); - setValues({ - petName: "", - petType: "Dog", - breed: "", - adopterName: "", - email: "", - phone: "" - }) - setErrors({ - petName: "", - petType: "", - breed: "", - adopterName: "", - email: "", - phone: "" - }) + const hasErrors = Object.values(errors).some((val) => val); + if (hasErrors) { + alert("Please fill out all fields"); + return; } - /** - * The handleGoBack function toggles the value of showTable. - */ - const handleGoBack = () => setShowTable(!showTable); + const data = { petName, petType, breed, adopterName, email, phone }; + setFormData((prevData) => [...prevData, data]); + setShowTable(true); + setValues({ + petName: "", + petType: "Dog", + breed: "", + adopterName: "", + email: "", + phone: "", + }); + setErrors({ + petName: "", + petType: "", + breed: "", + adopterName: "", + email: "", + phone: "", + }); + }; - if (!showTable) { - return ( -
    -
    - - - {errors.petName} -
    -
    - - -
    -
    - - - {errors.breed} -
    -
    - - - {errors.adopterName} -
    -
    - - - {errors.email} -
    -
    - - - {errors.phone} + /** + * The handleGoBack function toggles the value of showTable. + */ + const handleGoBack = () => setShowTable(!showTable); -
    -
    - -
    -
    - ) - } - /* The line `return ` is + if (!showTable) { + return ( +
    +
    + + + {errors.petName} +
    +
    + + +
    +
    + + + {errors.breed} +
    +
    + + + {errors.adopterName} +
    +
    + + + {errors.email} +
    +
    + + + {errors.phone} +
    +
    + +
    +
    + ); + } + /* The line `return ` is rendering the `AdopterData` component with the `formData` and `handleGoBack` props passed to it. */ - return -} + return ( + + ); +}; -export default PetAdoptionForm \ No newline at end of file +export default PetAdoptionForm; diff --git a/week-9/petAdoption/src/App.jsx b/week-9/petAdoption/src/App.jsx index 43b8aedeb..89ee76dbb 100644 --- a/week-9/petAdoption/src/App.jsx +++ b/week-9/petAdoption/src/App.jsx @@ -1,20 +1,32 @@ -import Header from './components/Header'; -import PetAdoptionForm from './components/PetAdoptionForm'; +import { useState } from "react"; +import Header from "./components/Header"; +import PetAdoptionForm from "./components/PetAdoptionForm"; +import AdopterData from "./components/AdopterData"; import "./myApp.css"; - const App = () => { + const [adoptionList, setAdoptionList] = useState([]); + + const handleAdoptionSubmit = (formData) => { + setAdoptionList([...adoptionList, formData]); + }; + return (
    - + +
    ); }; + export default App; diff --git a/week-9/petAdoption/src/components/AdopterData.jsx b/week-9/petAdoption/src/components/AdopterData.jsx index d7e0accbf..7700eb2f7 100644 --- a/week-9/petAdoption/src/components/AdopterData.jsx +++ b/week-9/petAdoption/src/components/AdopterData.jsx @@ -1,11 +1,39 @@ -import React, { Component } from 'react' +import React from "react"; -export class AdopterData extends Component { - render() { - return ( -
    AdopterData
    - ) - } +function AdopterData({ adoptionList }) { + return ( +
    +

    Adopted Pets

    + {adoptionList.length === 0 ? ( +

    No adoption requests yet.

    + ) : ( + + + + + + + + + + + + + {adoptionList.map((data, index) => ( + + + + + + + + + ))} + +
    Pet NamePet TypeBreedOwner NameEmailPhone
    {data.petName}{data.petType}{data.breed}{data.ownerName}{data.email}{data.phone}
    + )} +
    + ); } -export default AdopterData \ No newline at end of file +export default AdopterData; diff --git a/week-9/petAdoption/src/components/Header.jsx b/week-9/petAdoption/src/components/Header.jsx index 041aba3e4..7f93b13da 100644 --- a/week-9/petAdoption/src/components/Header.jsx +++ b/week-9/petAdoption/src/components/Header.jsx @@ -1,9 +1,36 @@ -import React from 'react' +import React from "react"; const Header = () => { return ( -
    Header
    - ) -} +
    + +
    + +
    +

    + Pet Adoption Form +

    +
    +
    + ); +}; -export default Header \ No newline at end of file +export default Header; \ No newline at end of file diff --git a/week-9/petAdoption/src/components/PetAdoptionForm.jsx b/week-9/petAdoption/src/components/PetAdoptionForm.jsx index 105375b43..0b2017884 100644 --- a/week-9/petAdoption/src/components/PetAdoptionForm.jsx +++ b/week-9/petAdoption/src/components/PetAdoptionForm.jsx @@ -1,9 +1,193 @@ -import React from 'react' +import { useState } from "react"; + +function PetAdoptionForm({ onAdoptionSubmit }) { + const [formData, setFormData] = useState({ + petName: "", + petType: "", + breed: "", + ownerName: "", + email: "", + phone: "", + }); + + const handleChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + onAdoptionSubmit(formData); + setFormData({ + petName: "", + petType: "", + breed: "", + ownerName: "", + email: "", + phone: "", + }); + }; -const PetAdoptionForm = () => { return ( -
    PetAdoptionForm
    - ) + <> +
    +
    + + + + + + + + + + + + + + + + + + + +
    +
    + + ); } -export default PetAdoptionForm \ No newline at end of file +export default PetAdoptionForm;