Today is {getDay(today)}
25 | 26 |- {items}
{post.title}
20 |{post.description}
21 |tapaScript
12 |
13 | -
14 |
- Learn React like a Cake Walk 15 |
- Get Stronger in JavaScript 16 |
- Be Master of Problem Solving 17 |
11 |
18 | );
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/Button.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | const Button = () => {
4 | function handleClick() {
5 | console.log("You Clicked Me");
6 | }
7 | return (
8 |
9 | )
10 | }
11 |
12 | export default Button
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/CrazyButton.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | function Button({message, children}) {
4 | function handleClick(event, message) {
5 | console.log(event.target);
6 | console.log(message);
7 | }
8 |
9 | return (
10 |
13 | );
14 | }
15 |
16 |
17 | export default function CrazyButton() {
18 |
19 | return (
20 |
21 |
24 |
27 |
28 | );
29 | }
30 |
31 | Button.propTypes = {
32 | message: PropTypes.string.isRequired,
33 | children: PropTypes.node.isRequired,
34 | };
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | function Button({onClick, children}) {
4 | function handleClick(event) {
5 | event.stopPropagation();
6 | onClick()
7 | }
8 | return(
9 |
14 | )
15 | }
16 |
17 | Button.propTypes = {
18 | onClick: PropTypes.func.isRequired,
19 | children: PropTypes.node.isRequired,
20 | };
21 |
22 | export default function Navbar() {
23 | return (
24 | {
25 | console.log('You clicked on the toolbar!');
26 | }}>
27 |
30 |
33 |
34 | );
35 | }
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/Register.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const Register = () => {
4 | const [query, setQuery] = useState("");
5 |
6 | const handleSubmit = (event) => {
7 |
8 | event.preventDefault();
9 | console.log(query)
10 | setQuery("")
11 | };
12 | return (
13 |
22 | );
23 | };
24 |
25 | export default Register;
26 |
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/TextBox.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | const TextBox = () => {
4 | function handleChange(event) {
5 | console.log(event.target.valueAsNumber)
6 | }
7 | return (
8 |
9 | )
10 | }
11 |
12 | export default TextBox
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/ToolBar.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | function Button({onClick, children}) {
4 | return(
5 |
10 | )
11 | }
12 |
13 | Button.propTypes = {
14 | onClick: PropTypes.func.isRequired,
15 | children: PropTypes.node.isRequired,
16 | };
17 |
18 | function PlayButton({movieName}) {
19 |
20 | function handlePlayClick() {
21 | console.log(`Playing ${movieName}!`);
22 | }
23 |
24 | return (
25 |
26 | )
27 | }
28 |
29 | PlayButton.propTypes = {
30 | movieName: PropTypes.string.isRequired,
31 | };
32 |
33 | function UploadButton() {
34 | return(
35 |
36 | )
37 | }
38 |
39 | const ToolBar = () => {
40 | return (
41 |
42 |
45 | )
46 | }
47 |
48 | export default ToolBar
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/index.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | /*
4 | The default border color has changed to `currentColor` in Tailwind CSS v4,
5 | so we've added these compatibility styles to make sure everything still
6 | looks the same as it did with Tailwind CSS v3.
7 |
8 | If we ever want to remove these styles, we need to add an explicit border
9 | color utility to any element that depends on these defaults.
10 | */
11 | @layer base {
12 | *,
13 | ::after,
14 | ::before,
15 | ::backdrop,
16 | ::file-selector-button {
17 | border-color: var(--color-gray-200, currentColor);
18 | }
19 | }
--------------------------------------------------------------------------------
/08-event-handling/learn-event-handling/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
6 |
12 |
18 |
24 |
25 | );
26 | }
27 |
28 | Filter.propTypes = {
29 | setFilter: PropTypes.func.isRequired,
30 | };
31 |
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/Heading.jsx:
--------------------------------------------------------------------------------
1 | const Heading = () => {
2 | return (
3 | 4 | 🎬 Movie Watchlist 5 |
6 | ); 7 | }; 8 | 9 | export default Heading; 10 | -------------------------------------------------------------------------------- /09-array-object-immutability/movie-watch/src/MovieForm.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export default function MovieForm({ addMovie }) { 5 | const [movieData, setMovieData] = useState({ 6 | title: "", 7 | ott: "" 8 | }); 9 | 10 | const handleChange = (e) => { 11 | const key = e.target.name; 12 | const value = e.target.value; 13 | console.log(key, value) 14 | setMovieData({...movieData, [key]: value}) 15 | } 16 | 17 | const handleSubmit = (e) => { 18 | e.preventDefault(); 19 | console.log(movieData) 20 | if (!movieData?.title.trim() || !movieData?.ott.trim()) return; 21 | addMovie(movieData); 22 | setMovieData({...movieData, title: "", ott: ""}) 23 | }; 24 | 25 | return ( 26 | 56 | ); 57 | } 58 | 59 | MovieForm.propTypes = { 60 | addMovie: PropTypes.func.isRequired, 61 | }; 62 | -------------------------------------------------------------------------------- /09-array-object-immutability/movie-watch/src/MovieItem.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import ReactStars from "react-stars"; 3 | 4 | export default function MovieItem({ 5 | movie, 6 | rateMovie, 7 | toggleWatched, 8 | deleteMovie, 9 | }) { 10 | const ratingChanged = (newRating) => { 11 | rateMovie(movie.id, newRating); 12 | }; 13 | return ( 14 |
23 |
44 |
12 | {movies.length === 0 ? (
13 |
30 | );
31 | }
32 |
33 | MovieList.propTypes = {
34 | movies: PropTypes.arrayOf(
35 | PropTypes.shape({
36 | id: PropTypes.number.isRequired,
37 | title: PropTypes.string.isRequired,
38 | ott: PropTypes.string.isRequired,
39 | watched: PropTypes.bool.isRequired,
40 | rating: PropTypes.number,
41 | })
42 | ).isRequired,
43 | rateMovie: PropTypes.func.isRequired,
44 | toggleWatched: PropTypes.func.isRequired,
45 | deleteMovie: PropTypes.func.isRequired,
46 | };
47 |
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/MovieWatch.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import Heading from "./Heading";
3 | import MovieForm from "./MovieForm";
4 | import MovieList from "./MovieList";
5 | import Filter from "./Filter";
6 |
7 | export default function MovieWatchlist() {
8 | const [movies, setMovies] = useState([]);
9 | const [filter, setFilter] = useState("all");
10 |
11 | // Add new movie (Immutable update)
12 | const addMovie = ({title, ott}) => {
13 | const newMovie = {
14 | id: crypto.randomUUID(),
15 | title,
16 | ott,
17 | rating: null,
18 | watched: false,
19 | };
20 | setMovies([...movies, newMovie]); // Spread operator to maintain immutability
21 | };
22 |
23 | // Update rating (Immutable update)
24 | const rateMovie = (id, rating) => {
25 | setMovies(movies.map(movie =>
26 | movie.id === id ? { ...movie, rating } : movie
27 | ));
28 | };
29 |
30 | // Toggle watched status (Immutable update)
31 | const toggleWatched = (id) => {
32 | setMovies(movies.map(movie =>
33 | movie.id === id ? { ...movie, watched: !movie.watched } : movie
34 | ));
35 | };
36 |
37 | // Delete movie (Immutable update)
38 | const deleteMovie = (id) => {
39 | setMovies(movies.filter(movie => movie.id !== id));
40 | };
41 |
42 | // Filter movies
43 | const filteredMovies = movies.filter(movie => {
44 | if (filter === "watched") return movie.watched;
45 | if (filter === "unwatched") return !movie.watched;
46 | return true;
47 | });
48 |
49 | return (
50 | 14 | No movies in your watchlist. Add some! 15 |
16 | ) : ( 17 |-
18 | {movies.map((movie) => (
19 |
51 |
61 | );
62 | }
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/immutability/UserList.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | const UserList = () => {
4 | const [users, setUsers] = useState([
5 | {
6 | id: crypto.randomUUID(),
7 | name: "tapas",
8 | address: "bangalore",
9 | },
10 | ]);
11 |
12 | function changeUser(id, name) {
13 | /*const found = users.find((user) => user.id === id);
14 | found.name = name
15 | console.log(users)
16 | setUsers([...users]);*/
17 |
18 | const usersCopy = [...users];
19 | const found = usersCopy.find((user) => user.id === id);
20 | found.name = name;
21 | setUsers(usersCopy);
22 | }
23 |
24 | function addUser() {
25 | /*users[1] = {
26 | id: crypto.randomUUID(),
27 | name: "Jack",
28 | address: "Titanic",
29 | };
30 | setUsers([...users]);
31 | console.log(users);*/
32 |
33 | const newUser = {
34 | id: crypto.randomUUID(),
35 | name: "Jack",
36 | address: "Titanic",
37 | };
38 |
39 | setUsers([...users, newUser]);
40 | }
41 |
42 | return (
43 |
44 |
66 | );
67 | };
68 |
69 | export default UserList;
70 |
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/index.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | /*
4 | The default border color has changed to `currentColor` in Tailwind CSS v4,
5 | so we've added these compatibility styles to make sure everything still
6 | looks the same as it did with Tailwind CSS v3.
7 |
8 | If we ever want to remove these styles, we need to add an explicit border
9 | color utility to any element that depends on these defaults.
10 | */
11 | @layer base {
12 | *,
13 | ::after,
14 | ::before,
15 | ::backdrop,
16 | ::file-selector-button {
17 | border-color: var(--color-gray-200, currentColor);
18 | }
19 | }
20 |
21 | body{
22 | background-color: rgba(18, 18, 18, 0.845);
23 | color: #fff;
24 | }
--------------------------------------------------------------------------------
/09-array-object-immutability/movie-watch/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 | -
45 | {users.map((user) => (
46 |
-
47 |
48 | {user.name} lives in {user.address} 49 |
50 | 56 |
57 | ))}
58 |
7 |
12 | );
13 | }
14 |
15 | export default App;
16 |
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/Basics.jsx:
--------------------------------------------------------------------------------
1 | import {useState, useEffect} from "react";
2 |
3 | const Basics = () => {
4 | const [data, setData] = useState(null);
5 |
6 | useEffect(() => {
7 | // Side Effect Logic
8 | fetch("https://jsonplaceholder.typicode.com/posts/1")
9 | .then((response) => response.json())
10 | .then((json) => setData(json));
11 | }, []);
12 |
13 | return (
14 | UseEffect
8 |
15 |
18 | )
19 | }
20 |
21 | export default Basics
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/CleanupEffect.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const CleanupEffect = () => {
4 | const [width, setWidth] = useState(window.innerWidth);
5 |
6 | useEffect(() => {
7 | const handleResize = () => setWidth(window.innerWidth);
8 | window.addEventListener("resize", handleResize);
9 |
10 | return () => {
11 | window.removeEventListener("resize", handleResize);
12 | };
13 | }, []);
14 |
15 | return Fetched Data
16 | {data ?{data?.title}
:Loading...
} 17 |Window width: {width}px
; 16 | }; 17 | 18 | export default CleanupEffect; 19 | -------------------------------------------------------------------------------- /10-useEffect/useeffect-lesson/src/PropsChangeEffect.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import PropTypes from 'prop-types'; 3 | 4 | const PropsChangeEffect = ({userId}) => { 5 | const [user, setUser] = useState(null); 6 | 7 | useEffect(()=> { 8 | fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) 9 | .then((res) => res.json()) 10 | .then((data) => setUser(data)); 11 | }, [userId]) 12 | return ( 13 |
14 |
17 | )
18 | }
19 | PropsChangeEffect.propTypes = {
20 | userId: PropTypes.number.isRequired,
21 | };
22 |
23 | export default PropsChangeEffect;
24 |
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/StateChangeEffect.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 |
3 | const StateChangeEffect = () => {
4 | const [count, setCount] = useState(0);
5 | useEffect(() => {
6 | document.title = `Count: ${count}`;
7 | }, [count]);
8 | return (
9 | User Details
15 | {user ?{user?.name}
:Loading...
} 16 |
10 |
13 | )
14 | }
15 |
16 | export default StateChangeEffect
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/index.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss';
2 |
3 | /*
4 | The default border color has changed to `currentColor` in Tailwind CSS v4,
5 | so we've added these compatibility styles to make sure everything still
6 | looks the same as it did with Tailwind CSS v3.
7 |
8 | If we ever want to remove these styles, we need to add an explicit border
9 | color utility to any element that depends on these defaults.
10 | */
11 | @layer base {
12 | *,
13 | ::after,
14 | ::before,
15 | ::backdrop,
16 | ::file-selector-button {
17 | border-color: var(--color-gray-200, currentColor);
18 | }
19 | }
--------------------------------------------------------------------------------
/10-useEffect/useeffect-lesson/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.jsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |