├── G23 ├── Lec-1 │ ├── CHO-FEE_II.pdf │ └── Overview.pdf ├── Lec-10 │ ├── 1.css_intro.html │ └── 1.style.css ├── Lec-11 │ ├── 1.simple_selectors.html │ └── 1.style.css ├── Lec-12 │ ├── 1.combinator_selector.html │ ├── 1.style.css │ ├── 2.pseudo_class.html │ ├── 2.style.css │ └── img │ │ ├── img1.avif │ │ └── img2.avif ├── Lec-13 │ ├── 1.box_modal.html │ ├── 1.style.css │ ├── 2.style.css │ └── 2.text&font.html ├── Lec-14 │ ├── flex_box.html │ └── style.css ├── Lec-15 │ └── flex topic doubt, Revision and Class project-Responsive webpage.txt ├── Lec-16 │ ├── 1.media_queries.html │ ├── 1.style.css │ ├── 2.responsive_navbar.html │ ├── 2.style.css │ ├── Navbar_desktopScreen.PNG │ └── navbar_mobilescreen.PNG ├── Lec-17 │ ├── style.css │ └── transition.html ├── Lec-18 │ ├── grid.html │ └── style.css ├── Lec-19 │ └── Photography Project │ │ ├── index.html │ │ └── style.css ├── Lec-2 │ ├── 1.html_structure.html │ ├── 2.heading_tags.html │ ├── 3.paragraph.html │ ├── 4.link.html │ ├── 5.image.html │ ├── 6.other_tag.html │ ├── 7.list.html │ └── img │ │ └── nature.jfif ├── Lec-20 │ └── Photography Project │ │ ├── index.html │ │ └── style.css ├── Lec-21 │ └── Eval 1 Project selection.txt ├── Lec-22 │ └── Eval 1 Project selection.txt ├── Lec-23 │ ├── Bulma │ │ └── index.html │ └── bootstrap.html ├── Lec-24 │ ├── badges.html │ └── navbar.html ├── Lec-25 │ ├── card.html │ └── forms.html ├── Lec-26 │ └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-27 │ └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-28 │ └── JAVASCRIPT.pdf ├── Lec-29 │ └── Eval 1 doubt session.txt ├── Lec-3 │ ├── 1.inlineVsBlock.html │ ├── 2.resume_Project.html │ └── img │ │ └── Profile_img.jpeg ├── Lec-30 │ ├── app.js │ └── index.html ├── Lec-31 │ ├── 1.variables.js │ ├── 2.data_type.js │ ├── 3.operator.js │ ├── 4.conditional_statement.js │ └── 5.loops.js ├── Lec-32 │ └── strings.js ├── Lec-33 │ └── array_method.js ├── Lec-34 │ └── Revision and Project Discussion.txt ├── Lec-35-39 │ └── Evaluation 1.txt ├── Lec-4 │ ├── Zerodha_html_V1 │ │ ├── img │ │ │ ├── logo.svg │ │ │ └── wikepedia.png │ │ └── index.html │ └── sementic_tags.html ├── Lec-40 │ └── JS Before Eval 1 Topic Revision.txt ├── Lec-41 │ └── Class Test.txt ├── Lec-42 │ └── object.js ├── Lec-43 │ ├── 1.equal_coercion.js │ └── 2.type_conversion.js ├── Lec-44 │ ├── 1.function.js │ ├── 2.return_keyword.js │ └── 3.scope.js ├── Lec-45 │ ├── Hoisting │ │ ├── hoisting.js │ │ └── index.html │ └── function_expression.js ├── Lec-46 │ ├── 1.HOF.js │ ├── 2.Methods.js │ └── 3.Iterators.js ├── Lec-47 │ └── Array_methods.js ├── Lec-48 │ └── array_method_practice.js ├── Lec-49 │ ├── 1.prototype.js │ ├── 2.this_keyword.js │ └── 3.arrow_function.js ├── Lec-5 │ ├── 1.tables.html │ └── 2.forms.html ├── Lec-50 │ ├── DOM │ │ ├── Propeties │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Selector │ │ │ ├── app.js │ │ │ └── index.html │ └── ImgToggler │ │ ├── app.js │ │ └── index.html ├── Lec-51 │ ├── 1.classList.html │ ├── 1.script.js │ ├── 1.style.css │ ├── 2.dom_elements.html │ └── 2.script.js ├── Lec-52 │ ├── 1.dom_events.html │ ├── 1.script.js │ ├── 2.form_event.html │ ├── 2.script.js │ ├── 3.control_event.html │ ├── 3.script.js │ └── Profile Update Mini Project │ │ ├── app.js │ │ ├── image │ │ ├── img1.PNG │ │ └── img2.PNG │ │ └── index.html ├── Lec-53 │ ├── 1.callback.js │ ├── 2.asynchronous_Programming.js │ └── 3.callback_hell.js ├── Lec-54 │ └── callback.js ├── Lec-55 │ └── promises.js ├── Lec-56 │ ├── 1.fetch.html │ ├── 1.script.js │ ├── 2.async_await.html │ ├── 2.script.js │ ├── 3.question.html │ ├── 3.script.js │ ├── 4.axios.html │ └── 4.script.js ├── Lec-57 │ ├── Git_command.txt │ ├── React.pdf │ ├── Source Code Management.pdf │ ├── local_repo │ │ ├── README.md │ │ ├── index.html │ │ └── script.css │ ├── myFirstApp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── myapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Lec-58 │ └── myfirstapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Babel.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Lec-59 │ └── myfirstapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components │ │ │ ├── LearnJSX.jsx │ │ │ ├── Person.css │ │ │ ├── Person.jsx │ │ │ ├── TernaryOperators.jsx │ │ │ └── TodoList.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── Lec-6 │ └── Job Application form.txt ├── Lec-60 │ └── myapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components │ │ │ ├── Products │ │ │ │ ├── Product.css │ │ │ │ └── Products.jsx │ │ │ ├── ShoppingList │ │ │ │ └── ShoppingList.jsx │ │ │ └── State.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── Lec-7 │ └── Zerodha_using_Html_only │ │ ├── img │ │ ├── X-image.png │ │ ├── ecosystem.png │ │ ├── fb.png │ │ ├── index-education.svg │ │ ├── inst.png │ │ ├── landing.png │ │ ├── largest-broker.svg │ │ ├── linkedin.jpg │ │ ├── logo.svg │ │ ├── telegram.png │ │ ├── whatsapp.png │ │ ├── x-twitter.svg │ │ └── youtube.png │ │ └── index.html ├── Lec-8 │ └── Assignment 1 doubt.txt └── Lec-9 │ └── Assignment 2 check and doubt session.txt ├── G24 ├── Lec-1 │ ├── CHO-FEE_II.pdf │ └── Overview.pdf ├── Lec-10 │ ├── 1.css_intro.html │ └── 1.style.css ├── Lec-11 │ ├── 1.simple_selectors.html │ └── 1.style.css ├── Lec-12 │ ├── 1.combinator_selectors.html │ ├── 1.style.css │ ├── 2.pseudo_class.html │ ├── 2.style.css │ └── img │ │ ├── img1.avif │ │ └── img2.avif ├── Lec-13 │ ├── 1.box_modal.html │ ├── 1.style.css │ ├── 2.style.css │ └── 2.text&font.html ├── Lec-14 │ ├── flex_box.html │ └── style.css ├── Lec-15 │ └── flex topic doubt, Revision and Class project-Responsive webpage.txt ├── Lec-16 │ ├── 1.media_queries.html │ ├── 1.style.css │ ├── 2.responsive_navbar.html │ ├── 2.style.css │ ├── Navbar_desktopScreen.PNG │ └── navbar_mobilescreen.PNG ├── Lec-17 │ ├── style.css │ └── transition.html ├── Lec-18 │ ├── Grid.html │ └── style.css ├── Lec-19 │ └── Photography Project │ │ ├── index.html │ │ └── style.css ├── Lec-2 │ ├── 1.html_structure.html │ ├── 2.heading_tags.html │ ├── 3.paragraph.html │ ├── 4.link.html │ ├── 5.image.html │ ├── 6.other_tag.html │ ├── 7.list.html │ └── img │ │ └── nature.jfif ├── Lec-20 │ └── Photography Project │ │ ├── index.html │ │ └── style.css ├── Lec-21 │ └── Eval 1 Project selection.txt ├── Lec-22 │ └── Eval 1 Project selection.txt ├── Lec-23 │ ├── Bulma │ │ └── index.html │ └── botstrap.html ├── Lec-24 │ ├── badge.html │ └── navbar.html ├── Lec-25 │ ├── cards.html │ └── forms.html ├── Lec-26 │ └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-27 │ └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-28 │ └── JAVASCRIPT.pdf ├── Lec-29 │ └── Eval 1 doubt session.txt ├── Lec-3 │ ├── 1.inlineVsBlock.html │ ├── 2.resume_Project.html │ └── img │ │ └── Profile_img.jpeg ├── Lec-30 │ ├── app.js │ └── index.html ├── Lec-31 │ ├── 1.variable.js │ ├── 2.data_types.js │ ├── 3.operators.js │ ├── 4.conditional_statement.js │ └── 5.loops.js ├── Lec-32 │ └── strings.js ├── Lec-33 │ └── array_method.js ├── Lec-34 │ └── Revision and Project Discussion.txt ├── Lec-35-39 │ └── Evaluation 1.txt ├── Lec-4 │ ├── Zerodha_html_V1 │ │ ├── img │ │ │ ├── logo.svg │ │ │ └── wikepedia.png │ │ └── index.html │ └── sementic_tags.html ├── Lec-40 │ └── JS Before Eval 1 Topic Revision.txt ├── Lec-41 │ └── Class Test.txt ├── Lec-42 │ └── objects.js ├── Lec-43 │ ├── 1.equal_coercion.js │ └── 2.type_convertion.js ├── Lec-44 │ ├── 1.function.js │ ├── 2.return_keyword.js │ └── 3.scope.js ├── Lec-45 │ ├── Hoisting │ │ ├── hoisting.js │ │ └── index.html │ └── function_expression.js ├── Lec-46 │ ├── 1.HOF.js │ ├── 2.Methods.js │ └── 3.Iterators.js ├── Lec-47 │ └── Array_methods.js ├── Lec-48 │ └── array_method_practice.js ├── Lec-49 │ ├── 1.prototype.js │ ├── 2.this_keyword.js │ └── 3.arrow_function.js ├── Lec-5 │ ├── .vscode │ │ └── settings.json │ ├── 1.table.html │ └── 2.forms.html ├── Lec-50 │ ├── DOM │ │ ├── Properties │ │ │ ├── app.js │ │ │ └── index.html │ │ └── Selector │ │ │ ├── app.js │ │ │ └── index.html │ └── ImgToggler │ │ ├── app.js │ │ └── index.html ├── Lec-51 │ ├── 1.classList.html │ ├── 1.style.css │ ├── 1.style.js │ ├── 2.dom_elements.html │ └── 2.script.js ├── Lec-52 │ ├── 1.event.html │ ├── 1.script.js │ ├── 2.forms.html │ ├── 2.script.js │ ├── 3.control_event.html │ ├── 3.script.js │ └── Profile Update Mini Project │ │ ├── app.js │ │ ├── image │ │ ├── img1.PNG │ │ └── img2.PNG │ │ └── index.html ├── Lec-53 │ ├── 1.callback.js │ ├── 2.asynchronous_Programming.js │ └── 3.callback_hell.js ├── Lec-54 │ └── callback.js ├── Lec-55 │ └── promises.js ├── Lec-56 │ ├── 1.fetch.html │ ├── 1.script.js │ ├── 2.async_await.html │ ├── 2.script.js │ ├── 3.question.html │ ├── 3.script.js │ ├── 4.axios.html │ └── 4.script.js ├── Lec-57 │ ├── Git_command.txt │ ├── React.pdf │ ├── Source Code Management.pdf │ ├── local_repo │ │ ├── README.md │ │ ├── index.html │ │ └── script.css │ ├── myFirstApp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ └── main.jsx │ │ └── vite.config.js │ └── myapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Lec-58 │ └── myfirstapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Babel.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Lec-59 │ └── myfirstapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components │ │ │ ├── LearnJSX.jsx │ │ │ ├── Person.css │ │ │ ├── Person.jsx │ │ │ ├── TernaryOperators.jsx │ │ │ └── TodoList.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── Lec-6 │ └── Job Application form.txt ├── Lec-60 │ └── myapp │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components │ │ │ ├── Products │ │ │ │ ├── Product.css │ │ │ │ └── Products.jsx │ │ │ ├── ShoppingList │ │ │ │ └── ShoppingList.jsx │ │ │ └── State.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── Lec-7 │ └── Zerodha_using_Html_only │ │ ├── img │ │ ├── X-image.png │ │ ├── ecosystem.png │ │ ├── fb.png │ │ ├── index-education.svg │ │ ├── inst.png │ │ ├── landing.png │ │ ├── largest-broker.svg │ │ ├── linkedin.jpg │ │ ├── logo.svg │ │ ├── telegram.png │ │ ├── whatsapp.png │ │ ├── x-twitter.svg │ │ └── youtube.png │ │ └── index.html ├── Lec-8 │ └── Assignment 1 doubt.txt └── Lec-9 │ └── Assignment 2 check and doubt session.txt └── G25 ├── Lec-1 ├── CHO-FEE_II.pdf └── Overview.pdf ├── Lec-10 ├── 1.css_intro.html └── 1.style.css ├── Lec-11 ├── 1.simple_selector.html └── 1.style.css ├── Lec-12 ├── 1.combinator_selector.html ├── 1.style.css ├── 2.pseudo_class.html ├── 2.style.css └── img │ ├── img1.avif │ └── img2.avif ├── Lec-13 ├── 1.box_modal.html ├── 1.style.css ├── 2.style.css └── 2.text&font.html ├── Lec-14 ├── flex_box.html └── style.css ├── Lec-15 └── flex topic doubt, Revision and Class project-Responsive webpage.txt ├── Lec-16 ├── 1.media_queries.html ├── 1.style.css ├── 2.responsive_navbar.html ├── 2.style.css ├── Navbar_desktopScreen.PNG └── navbar_mobilescreen.PNG ├── Lec-17 ├── style.css └── transition.html ├── Lec-18 ├── grid.html └── style.css ├── Lec-19 └── Photography Project │ ├── index.html │ └── style.css ├── Lec-2 ├── 1.html_structure.html ├── 2.heading_tags.html ├── 3.paragraph.html ├── 4.link.html ├── 5.image.html ├── 6.other_tag.html ├── 7.list.html └── img │ └── nature.jfif ├── Lec-20 └── Photography Project │ ├── index.html │ └── style.css ├── Lec-21 └── Eval 1 Project selection.txt ├── Lec-22 └── Eval 1 Project selection.txt ├── Lec-23 ├── Bulma │ └── index.html └── boostrap.html ├── Lec-24 ├── badges.html └── navbar.html ├── Lec-25 ├── cards.html └── forms.html ├── Lec-26 └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-27 └── Assignment 3 Ecommerce website using Bootstrap.txt ├── Lec-28 └── JAVASCRIPT.pdf ├── Lec-29 └── Eval 1 doubt session.txt ├── Lec-3 ├── 1.inlineVsBlock.html ├── 2.resume_Project.html └── img │ └── Profile_img.jpeg ├── Lec-30 ├── app.js └── index.html ├── Lec-31 ├── 1.variable.js ├── 2.data_types.js ├── 3.operators.js ├── 4.conditional_statement.js ├── 5.loops.js └── Whole Class Bunk.txt ├── Lec-32 └── strings.js ├── Lec-33 └── array_method.js ├── Lec-34 └── Revision and Project Discussion.txt ├── Lec-35-39 └── Evaluation 1.txt ├── Lec-4 ├── Zerodha_html_V1 │ ├── img │ │ ├── logo.svg │ │ └── wikepedia.png │ └── index.html └── sementic_tags.html ├── Lec-40 └── JS Before Eval 1 Topic Revision.txt ├── Lec-41 └── Class Test.txt ├── Lec-42 └── objects.js ├── Lec-43 ├── 1.equal_coercion.js └── 2.type_conversion.js ├── Lec-44 ├── 1.function.js ├── 2.return_keyword.js └── 3.scope.js ├── Lec-45 ├── Hoisting │ ├── hoisting.js │ └── index.html └── function_expression.js ├── Lec-46 ├── 1.HOF.js ├── 2.Methods.js └── 3.Iterators.js ├── Lec-47 └── Array_methods.js ├── Lec-48 └── array_method_practice.js ├── Lec-49 ├── 1.prototype.js ├── 2.this_keyword.js └── 3.arrow_function.js ├── Lec-5 ├── .vscode │ └── settings.json ├── 1.tables.html └── 2.forms.html ├── Lec-50 ├── DOM │ ├── Propeties │ │ ├── app.js │ │ └── index.html │ └── Selector │ │ ├── app.js │ │ └── index.html └── ImgToggler │ ├── app.js │ └── index.html ├── Lec-51 ├── 1.classList.html ├── 1.script.js ├── 1.style.css ├── 2.dom_elements.html ├── 2.script.js ├── 3.control_event.html ├── 3.script.js └── Profile Update Mini Project │ ├── app.js │ ├── image │ ├── img1.PNG │ └── img2.PNG │ └── index.html ├── Lec-53 ├── 1.callback.js ├── 2.asynchronous_Programming.js └── 3.callback_hell.js ├── Lec-54 └── callback.js ├── Lec-55 └── Promises.js ├── Lec-56 ├── 1.fetch.html ├── 1.script.js ├── 2.async_await.html ├── 2.script.js ├── 3.question.html ├── 3.script.js ├── 4.axios.html └── 4.script.js ├── Lec-57 ├── Git_command.txt ├── React.pdf ├── Source Code Management.pdf ├── local_repo │ ├── README.md │ ├── index.html │ └── script.css ├── myFirstApp │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js └── myapp │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── Lec-58 └── myfirstapp │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── Babel.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── Lec-59 └── myFirstApp │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.css │ ├── App.jsx │ ├── components │ │ ├── LearnJSX.jsx │ │ ├── Person.css │ │ ├── Person.jsx │ │ └── TernaryOperators.jsx │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── Lec-6 └── Job Application form.txt ├── Lec-60 └── myapp │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── components │ │ ├── Products │ │ │ ├── Product.css │ │ │ └── Products.jsx │ │ ├── ShoppingList │ │ │ └── ShoppingList.jsx │ │ └── State.jsx │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── Lec-7 └── Zerodha_using_Html_only │ ├── img │ ├── X-image.png │ ├── ecosystem.png │ ├── fb.png │ ├── index-education.svg │ ├── inst.png │ ├── landing.png │ ├── largest-broker.svg │ ├── linkedin.jpg │ ├── logo.svg │ ├── telegram.png │ ├── whatsapp.png │ ├── x-twitter.svg │ └── youtube.png │ └── index.html ├── Lec-8 └── Assignment 1 doubt.txt └── Lec-9 └── Assignment 2 check and doubt session.txt /G23/Lec-1/CHO-FEE_II.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-1/CHO-FEE_II.pdf -------------------------------------------------------------------------------- /G23/Lec-1/Overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-1/Overview.pdf -------------------------------------------------------------------------------- /G23/Lec-10/1.style.css: -------------------------------------------------------------------------------- 1 | h3{ 2 | background-color: green; 3 | border: 2px solid grey; 4 | font-size: 30px; 5 | margin: 20px; 6 | padding: 30px; 7 | } -------------------------------------------------------------------------------- /G23/Lec-11/1.style.css: -------------------------------------------------------------------------------- 1 | /* 1. Universal Selector: */ 2 | 3 | *{ 4 | font-size: 20px; 5 | font-family: 'Courier New', Courier, monospace; 6 | } 7 | 8 | /* 2. Id selector: */ 9 | 10 | #fruits{ 11 | color: red; 12 | border: 2px dotted green; 13 | } 14 | 15 | /* 3. Class Selector: */ 16 | 17 | .a1{ 18 | color: green; 19 | text-decoration: line-through; 20 | font-weight: 800; 21 | } 22 | 23 | /* 4. element selector: */ 24 | 25 | p{ 26 | background-color: pink; 27 | } 28 | 29 | /* attribute selector: */ 30 | 31 | input[type="text"]{ 32 | background-color: orange; 33 | } 34 | 35 | [type="password"]{ 36 | background-color: green; 37 | } 38 | 39 | [placeholder="email"]{ 40 | background-color: pink; 41 | } -------------------------------------------------------------------------------- /G23/Lec-12/1.style.css: -------------------------------------------------------------------------------- 1 | /* Decendent combinator selector */ 2 | 3 | ul li a{ 4 | color: brown; 5 | font-size: 20px; 6 | text-decoration: none; 7 | } 8 | 9 | /* Child combinator selector: */ 10 | 11 | ol > li{ 12 | background-color: yellow; 13 | } 14 | 15 | /* Adjancent Combinator selector: */ 16 | 17 | h3+p{ 18 | border-top: 2px solid blue; 19 | } 20 | 21 | /* general sibling combinator selector: */ 22 | 23 | div~p{ 24 | color: green; 25 | font-size: 30px; 26 | } -------------------------------------------------------------------------------- /G23/Lec-12/2.pseudo_class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pseudo Selector: 8 | 9 | 10 | 11 | 12 |

Psuedo Classes

13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 | 21 |
22 | Visit google 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G23/Lec-12/2.style.css: -------------------------------------------------------------------------------- 1 | div{ 2 | height: 200px; 3 | width: 200px; 4 | background-color: orange; 5 | border: 4px solid brown; 6 | } 7 | 8 | div:hover{ 9 | background-color: skyblue; 10 | border-radius: 50%; 11 | } 12 | 13 | input:focus{ 14 | background-color: aqua; 15 | } 16 | 17 | a:visited{ 18 | color: red; 19 | 20 | } 21 | 22 | h1:active{ 23 | color: Yellow; 24 | background-color: brown; 25 | } 26 | 27 | input:disabled{ 28 | background-color: pink; 29 | } -------------------------------------------------------------------------------- /G23/Lec-12/img/img1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-12/img/img1.avif -------------------------------------------------------------------------------- /G23/Lec-12/img/img2.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-12/img/img2.avif -------------------------------------------------------------------------------- /G23/Lec-13/1.box_modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOX MODAL 8 | 9 | 10 | 11 | 12 | 13 |
14 | This is a div 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /G23/Lec-13/1.style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | 7 | body{ 8 | border: 2px solid black; 9 | } 10 | 11 | div{ 12 | margin: 25px; 13 | padding: 30px 20px 10px; 14 | border: 2px solid red; 15 | } -------------------------------------------------------------------------------- /G23/Lec-15/flex topic doubt, Revision and Class project-Responsive webpage.txt: -------------------------------------------------------------------------------- 1 | Template for Class Project: 2 | 3 | 4 | G23-https://toystore-template.webflow.io/ 5 | G24- https://www.wix.com/website-template/view/html/1732?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F2&tpClick=view_button&esi=9075483d-8358-4a22-a570-3302c816ce0b 6 | G25- https://www.wix.com/website-template/view/html/2936?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F4&tpClick=view_button&esi=663bb791-5cf8-4172-aec0-0ed2c58da3d7 7 | -------------------------------------------------------------------------------- /G23/Lec-16/1.style.css: -------------------------------------------------------------------------------- 1 | section{ 2 | border: 5px solid #ccc; 3 | margin: 20px 10px; 4 | padding: 1.6rem; 5 | } 6 | 7 | section h1{ 8 | font-size: 3rem; 9 | text-align: center; 10 | } 11 | 12 | @media(max-width: 520px){ 13 | 14 | section{ 15 | background-color: lightskyblue; 16 | } 17 | 18 | h1{ 19 | color: white; 20 | } 21 | 22 | p{ 23 | color: orange; 24 | font-weight: 800; 25 | } 26 | } 27 | 28 | @media(orientation: landscape){ 29 | section{ 30 | background-color: green; 31 | } 32 | } 33 | 34 | @media(orientation: portrait){ 35 | section{ 36 | background-color: yellow; 37 | } 38 | } -------------------------------------------------------------------------------- /G23/Lec-16/2.responsive_navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive navbar 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /G23/Lec-16/2.style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | nav{ 7 | background-color: #1A1A63; 8 | font-size: 1.6rem; 9 | padding: 10px 5px; 10 | display: flex; 11 | justify-content: space-around; 12 | } 13 | 14 | nav a{ 15 | text-decoration: none; 16 | text-transform: capitalize; 17 | color: whitesmoke; 18 | 19 | } 20 | 21 | nav ul{ 22 | list-style: none; 23 | display: flex; 24 | width: 520px; 25 | justify-content: space-between; 26 | } 27 | 28 | 29 | @media(max-width: 520px){ 30 | nav, nav ul{ 31 | flex-direction: column; 32 | align-items: center; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /G23/Lec-16/Navbar_desktopScreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-16/Navbar_desktopScreen.PNG -------------------------------------------------------------------------------- /G23/Lec-16/navbar_mobilescreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-16/navbar_mobilescreen.PNG -------------------------------------------------------------------------------- /G23/Lec-17/transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transition 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /G23/Lec-18/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /G23/Lec-2/1.html_structure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | HTML STRUCTURE 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /G23/Lec-2/2.heading_tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Heading Tags 8 | 9 | 10 | 11 | 12 |

Robert Downey Jr.

13 |

Robert Downey Jr.

14 |

Robert Downey Jr.

15 |

Robert Downey Jr.

16 |
Robert Downey Jr.
17 |
Robert Downey Jr.
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G23/Lec-2/3.paragraph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Paragraph 8 | 9 | 10 | 11 | 12 |

This is a Paragraph

13 | 14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque fugiat veritatis quas veniam facilis consectetur 15 | libero aspernatur tempore molestias soluta?

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /G23/Lec-2/4.link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Learning About links

13 |

Take me to:Google

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G23/Lec-2/5.image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Tag 8 | 9 | 10 | 11 | 12 | image not found 13 |

This is a nature image

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G23/Lec-2/img/nature.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-2/img/nature.jfif -------------------------------------------------------------------------------- /G23/Lec-21/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-21/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G23/Lec-22/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-22/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G23/Lec-26/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G23/Lec-27/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G23/Lec-28/JAVASCRIPT.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-28/JAVASCRIPT.pdf -------------------------------------------------------------------------------- /G23/Lec-29/Eval 1 doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-29/Eval 1 doubt session.txt -------------------------------------------------------------------------------- /G23/Lec-3/img/Profile_img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-3/img/Profile_img.jpeg -------------------------------------------------------------------------------- /G23/Lec-30/app.js: -------------------------------------------------------------------------------- 1 | console.log("Executing JS using external file") -------------------------------------------------------------------------------- /G23/Lec-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Introduction 8 | 9 | 10 | 11 | 12 | 13 | 14 |

JS Introduction

15 | 16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G23/Lec-31/1.variables.js: -------------------------------------------------------------------------------- 1 | // var: redeclaration and assignment possible 2 | // var a = 10; 3 | // console.log(a) 4 | // var a = 20; 5 | // console.log(a) 6 | // a = 30; 7 | // console.log(a) 8 | 9 | // let: redeclaration not possible and assignment possible 10 | // let a = 10; 11 | // console.log(a) 12 | // // let a = 20; 13 | // // console.log(a) 14 | // a = 30; 15 | // console.log(a) 16 | 17 | 18 | // const: redeclaration not possible and assignment is also not possible 19 | const a = 10; 20 | console.log(a) 21 | // const a = 20; 22 | // console.log(a) 23 | a = 30; 24 | console.log(a) -------------------------------------------------------------------------------- /G23/Lec-31/2.data_type.js: -------------------------------------------------------------------------------- 1 | // 1. number: 2 | let a = 10; 3 | let b = -5; 4 | let c = 2.5; 5 | console.log(typeof(a)) 6 | console.log(typeof(b)) 7 | console.log(typeof(c)) 8 | 9 | // 2. string: 10 | let name = 'shiv'; 11 | console.log(typeof(name)) 12 | 13 | // 3. boolean: 14 | let x = false; 15 | console.log(typeof(x)); 16 | 17 | // undefined: 18 | let y; 19 | console.log(typeof(y)) 20 | y = 20; 21 | console.log(y) 22 | console.log(typeof(y)); 23 | 24 | // null: type->object 25 | let j = null; 26 | console.log(typeof(j)) 27 | 28 | -------------------------------------------------------------------------------- /G23/Lec-31/4.conditional_statement.js: -------------------------------------------------------------------------------- 1 | // If-else-if: 2 | 3 | let x = 1; 4 | 5 | if(x>5){ 6 | console.log("X is greater than 5"); 7 | }else if(x > 3){ 8 | console.log("X is greater than 3") 9 | }else{ 10 | console.log("X is smaller ") 11 | } -------------------------------------------------------------------------------- /G23/Lec-31/5.loops.js: -------------------------------------------------------------------------------- 1 | // 1. for loops: Print odd number between 50 to 80: 2 | // for(let i= 51; i<=80; i= i+2){ 3 | // console.log(i) 4 | // } 5 | 6 | // 2. Nested for loops: 7 | for(let i=1; i<=3; i++){ 8 | console.log("Outer loop" + i); 9 | for(let j=1; j<=3; j++){ 10 | console.log("Inner loop" + j) 11 | } 12 | } 13 | 14 | // 3.while: 15 | // let i = 0; 16 | // while(i < 5) { 17 | // console.log(i); 18 | // i++; 19 | // } 20 | 21 | // 4.do while: 22 | // let i = 0; 23 | // do{ 24 | // console.log(i); 25 | // i++; 26 | // }while(i < 5); -------------------------------------------------------------------------------- /G23/Lec-34/Revision and Project Discussion.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-34/Revision and Project Discussion.txt -------------------------------------------------------------------------------- /G23/Lec-35-39/Evaluation 1.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-35-39/Evaluation 1.txt -------------------------------------------------------------------------------- /G23/Lec-4/Zerodha_html_V1/img/wikepedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-4/Zerodha_html_V1/img/wikepedia.png -------------------------------------------------------------------------------- /G23/Lec-40/JS Before Eval 1 Topic Revision.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-40/JS Before Eval 1 Topic Revision.txt -------------------------------------------------------------------------------- /G23/Lec-41/Class Test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-41/Class Test.txt -------------------------------------------------------------------------------- /G23/Lec-43/1.equal_coercion.js: -------------------------------------------------------------------------------- 1 | console.log(); 2 | 3 | console.log(1 == 1); //Output: true value comparision. Both values are number type 4 | console.log(1 == "1"); //Output: true 5 | console.log(1 == "A"); //Output: false; 6 | console.log(0 == []); //Output: true 7 | console.log(1 == ""); //Output: false 8 | console.log([] == ""); //output: true; 9 | -------------------------------------------------------------------------------- /G23/Lec-43/2.type_conversion.js: -------------------------------------------------------------------------------- 1 | console.log(1 + 2); //Output: 3 2 | console.log(1 + "2"); //Output: 12; Explanation: Before concat with number 1 this value will be converted to string. 3 | console.log(typeof (1 + "2")); 4 | 5 | console.log(10 - "2"); //Output:8; Explanation String value 2 will be chnage to number before subtraction is done with 10 number. 6 | console.log(typeof (10 - "2")); 7 | 8 | console.log(10 + "A"); //Output:10A 9 | console.log(10 - "A"); //Output:NaN 10 | 11 | console.log(10 + "2" + "A"); //Output: 102A 12 | console.log(10 + "2" - "A"); //Output: NaN 13 | 14 | // string to number: 15 | 16 | let a = "20"; 17 | console.log(typeof a); 18 | // console.log(parseInt(a)); 19 | 20 | // 2. 21 | let d = parseInt(a); 22 | console.log(typeof d); 23 | // 1.constructor: 24 | let b = Number(a); 25 | // console.log(typeof b); 26 | -------------------------------------------------------------------------------- /G23/Lec-44/2.return_keyword.js: -------------------------------------------------------------------------------- 1 | // function termination: 1. return 2. executable part of function 2 | 3 | function multiple(a, b) { 4 | let c = a * b; 5 | console.log(c); 6 | return c; 7 | console.log("hi"); 8 | console.log("hi"); 9 | console.log("hi"); 10 | } 11 | multiple(2, 3); 12 | -------------------------------------------------------------------------------- /G23/Lec-45/Hoisting/hoisting.js: -------------------------------------------------------------------------------- 1 | // let and const: refernce error: temperal dead zone 2 | console.log(a); 3 | let a = 10; 4 | 5 | function myfunc() { 6 | var b = 20; 7 | console.log(b); 8 | } 9 | myfunc(); 10 | 11 | // var: undefined: 12 | // console.log(a); 13 | // var a = 10; 14 | 15 | // function myfunc() { 16 | // var b = 20; 17 | // console.log(b); 18 | // } 19 | // myfunc(); -------------------------------------------------------------------------------- /G23/Lec-45/Hoisting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G23/Lec-45/function_expression.js: -------------------------------------------------------------------------------- 1 | // 2. hoisting in anonymous function expression 2 | var a = 200; 3 | 4 | // console.log(myfunc(3)); // Error 5 | 6 | var myfunc = function (num) { 7 | return num ** 3; 8 | }; 9 | // console.log(cube(3)); 10 | // console.log(myfunc(3)); // here it will work 11 | 12 | // // 1. function expression as a anonymous function 13 | 14 | // const add = function (a, b) { 15 | // return a + b; 16 | // }; 17 | // console.log(add); 18 | // // console.log(sum(5, 3)); 19 | // console.log(add(5, 3)); 20 | -------------------------------------------------------------------------------- /G23/Lec-46/1.HOF.js: -------------------------------------------------------------------------------- 1 | // // HOF: when we pass one function into another function as a argument 2 | 3 | // 2.. 4 | let arr = [2, 4, 6, 8, 9]; 5 | 6 | function evenOrNot(func, arr) { 7 | for (let i = 0; i < 5; i++) { 8 | func(arr[i]); 9 | } 10 | } 11 | const even = function (num) { 12 | if (num % 2 == 0) { 13 | console.log(num); 14 | } else { 15 | console.log("Not even"); 16 | } 17 | }; 18 | 19 | evenOrNot(even, arr); 20 | 21 | // //1.printName is a HOF bcz it takes myname function as a argument. 22 | // function printName(func, num) { 23 | // for (let i = 1; i <= num; i++) { 24 | // func(); 25 | // } 26 | // } 27 | 28 | // let myName = function () { 29 | // console.log("Yash"); 30 | // }; 31 | // printName(myName, 20); 32 | -------------------------------------------------------------------------------- /G23/Lec-46/2.Methods.js: -------------------------------------------------------------------------------- 1 | // Any function that is being defined inside a object is called methods. 2 | 3 | const calulate = { 4 | add: function (a, b) { 5 | return a + b; 6 | }, 7 | sub: function (a, b) { 8 | return a - b; 9 | }, 10 | mul: function (a, b) { 11 | return a * b; 12 | }, 13 | div: function (a, b) { 14 | return a / b; 15 | }, 16 | }; 17 | calulate(); 18 | -------------------------------------------------------------------------------- /G23/Lec-46/3.Iterators.js: -------------------------------------------------------------------------------- 1 | // Iterator: 2 | let str = "yash"; 3 | let obj = { name: "yash" }; 4 | 5 | // for in: gives key 6 | for (let num in obj) { 7 | console.log(num); 8 | console.log(obj[num]); 9 | console.log(obj); 10 | } 11 | console.log(obj); 12 | 13 | // for (let i of obj) { 14 | // console.log(i); 15 | // } 16 | 17 | // for of: gives value 18 | // for (let i of str) { 19 | // let iterator = str[Symbol.iterator](); 20 | // // console.log(iterator); 21 | // } 22 | // let iterator = str[Symbol.iterator](); 23 | // console.log(iterator.next()); 24 | // console.log(iterator.next()); 25 | // console.log(iterator.next()); 26 | 27 | // console.log(str[Symbol.iterator]); 28 | // console.log(obj[Symbol.iterator]); 29 | -------------------------------------------------------------------------------- /G23/Lec-49/3.arrow_function.js: -------------------------------------------------------------------------------- 1 | // 3. arrow function: 2 | let b = () => { 3 | let a = 20; 4 | console.log(a); 5 | }; 6 | console.log(b); 7 | 8 | //2. anonymous function: 9 | // let b = function (){ 10 | // let a = 20; 11 | // console.log(a) 12 | // } 13 | // console.log(b) 14 | 15 | // 1.Normal function: 16 | // function myfun(){ 17 | // let a = 20; 18 | // console.log(a) 19 | // } 20 | -------------------------------------------------------------------------------- /G23/Lec-50/ImgToggler/app.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector("img"); 2 | 3 | function imageToggler() { 4 | let isTrue = false; 5 | 6 | setInterval(() => { 7 | if (isTrue) { 8 | image.setAttribute( 9 | "src", 10 | "https://images.unsplash.com/photo-1608889336076-13c5c2dc1ee7?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D" 11 | ); 12 | } else { 13 | image.setAttribute( 14 | "src", 15 | "https://images.unsplash.com/photo-1608889476561-6242cfdbf622?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D" 16 | ); 17 | } 18 | isTrue = !isTrue; 19 | }, 1000); 20 | } 21 | imageToggler(); 22 | -------------------------------------------------------------------------------- /G23/Lec-50/ImgToggler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Toggler 8 | 9 | 10 | 11 |

Image Toggler

12 | 13 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /G23/Lec-51/1.script.js: -------------------------------------------------------------------------------- 1 | var newh1 = document.querySelector("h1"); 2 | console.dir(newh1.classList); 3 | 4 | // 1. adding class: 5 | newh1.classList.add("red"); 6 | 7 | // 2. remove classs: 8 | // newh1.classList.remove("red"); 9 | 10 | // 3.contains: classList.contains 11 | // var b = newh1.classList.contains("red"); 12 | // console.dir(b); 13 | 14 | // toggle: add and remove class. 15 | newh1.classList.toggle("red"); 16 | newh1.classList.toggle("iron"); 17 | -------------------------------------------------------------------------------- /G23/Lec-51/1.style.css: -------------------------------------------------------------------------------- 1 | .red{ 2 | color: red; 3 | } -------------------------------------------------------------------------------- /G23/Lec-51/2.script.js: -------------------------------------------------------------------------------- 1 | // 1.create element: 2 | var h1new = document.createElement("h1"); 3 | 4 | // 2.add content 5 | h1new.innerText = "DOM Elements:"; 6 | console.log(h1new); 7 | 8 | // 3.appendChild: 9 | var body = document.querySelector("body"); 10 | body.appendChild(h1new); 11 | 12 | // 4.append: 13 | h1new.append("Learning in JS"); 14 | 15 | // 5.remove: 16 | h1new.remove(); 17 | body.remove(); 18 | 19 | // 6.insertAdjacent(where,element): 20 | var btn = document.createElement("button"); 21 | btn.innerText = "Click Me"; 22 | 23 | // var btn = document.createElement("button"); 24 | // btn.innerText = "Click Me!"; 25 | 26 | // body.appendChild(btn); 27 | // btn.style.backgroundColor = "green"; 28 | -------------------------------------------------------------------------------- /G23/Lec-52/1.dom_events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM: Events 8 | 9 | 10 | 11 | 12 |

This is a paragraph

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /G23/Lec-52/2.form_event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Events 8 | 9 | 10 | 11 |
12 |

13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G23/Lec-52/3.control_event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Control Events 8 | 9 | 10 | 11 |

Control Events

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G23/Lec-52/3.script.js: -------------------------------------------------------------------------------- 1 | let inp = document.querySelector("input"); 2 | inp.addEventListener("keydown", function (e) { 3 | console.log("key:" + e.code); 4 | console.log("value" + e.key); 5 | }); 6 | 7 | // //2. keydown with event value of code and key value 8 | // inp.addEventListener("keydown", function (e) { 9 | // console.log(e); 10 | // console.log("Key was Pressed"); 11 | // }); 12 | 13 | // // 1. keyup: 14 | // inp.addEventListener("keyup", function () { 15 | // console.log("Key was Released"); 16 | // }); 17 | -------------------------------------------------------------------------------- /G23/Lec-52/Profile Update Mini Project/image/img1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-52/Profile Update Mini Project/image/img1.PNG -------------------------------------------------------------------------------- /G23/Lec-52/Profile Update Mini Project/image/img2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-52/Profile Update Mini Project/image/img2.PNG -------------------------------------------------------------------------------- /G23/Lec-53/1.callback.js: -------------------------------------------------------------------------------- 1 | // 2.function second with callback as first 2 | function first() { 3 | console.log("First function"); 4 | } 5 | 6 | function second(call) { 7 | console.log("Second Function"); 8 | call(); 9 | } 10 | // function call: 11 | second(first()); 12 | 13 | // // 1.simple function: 14 | // function first() { 15 | // console.log("First function"); 16 | // } 17 | 18 | // function second() { 19 | // console.log("Second Function"); 20 | // } 21 | // // function call: 22 | // first(); 23 | // second(); 24 | 25 | // 1.synchronous way: 26 | // console.log("Execution started..."); 27 | 28 | // for (let i = 0; i < 1000; i++) { 29 | // console.log("Loop Ends here.."); 30 | // } 31 | // console.log("Execution Ends here.."); 32 | -------------------------------------------------------------------------------- /G23/Lec-56/1.fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API 8 | 9 | 10 | 11 |

API

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /G23/Lec-56/2.async_await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Asyn Await 8 | 9 | 10 | 11 | 12 |

Async Await

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G23/Lec-56/2.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | 3 | async function getData() { 4 | try { 5 | let res = await fetch(url); 6 | let data = await res.json(); 7 | console.log(res); 8 | console.log(data); 9 | console.log(data.fact); 10 | } catch (e) { 11 | console.log("Error!!", e); 12 | } 13 | } 14 | getData(); 15 | -------------------------------------------------------------------------------- /G23/Lec-56/3.question.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API Homework 8 | 9 | 10 | 11 |

Learning About API

12 |
13 |
Name
14 |
Gender
15 |
Height
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G23/Lec-56/3.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://swapi.dev/api/people/1"; 2 | 3 | let container = document.querySelector(".container"); 4 | fetch(url) 5 | .then((data) => data.json()) 6 | .then((data) => { 7 | // console.log(data); 8 | }); 9 | async function getStarwardata() { 10 | let data = await fetch(url); 11 | let resultData = await data.json(); 12 | // console.log(resultData); 13 | showData(resultData); 14 | } 15 | getStarwardata(); 16 | function showData(data) { 17 | container.innerHTML = ""; 18 | let div = document.createElement("div"); 19 | div.innerHTML = `
${data.name}
20 |
${data.gender}
21 |
${data.height}
`; 22 | container.append(div); 23 | } 24 | -------------------------------------------------------------------------------- /G23/Lec-56/4.axios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Axios 8 | 9 | 10 | 11 |

Axio's

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G23/Lec-56/4.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | async function getFacts() { 3 | try { 4 | let res = await axios.get(url); 5 | console.log(res.data.fact); 6 | } catch (e) { 7 | console.log("Error", e); 8 | } 9 | } 10 | getFacts(); 11 | -------------------------------------------------------------------------------- /G23/Lec-57/Git_command.txt: -------------------------------------------------------------------------------- 1 | #Basic Linux commands: 2 | 3 | 1)mkdir myproject(makes a new directory) 4 | 2)cd myproject(to change directory) 5 | 3)cd ..(previous directory) 6 | 4)type nul > myfile.txt(creates empty txt file) 7 | 5)echo (to write inside a file) 8 | 6)dir or ls (To see files in directory) 9 | 7)dir /a(To see all files incluing hidden files) 10 | 11 | 12 | *git --version 13 | 14 | * git Installation: https://www.git-scm.com/ 15 | * git configuration: 16 | -> git config --global user.name "webcraftShiva" 17 | -> git config --global user.email "shivam.webcraft@gmail.com" 18 | 19 | 20 | * git init 21 | * git status 22 | * git add -A /or/ git add . 23 | * git commit -m "first commit" /or/ git commit -m file_name 24 | * git log -------------------------------------------------------------------------------- /G23/Lec-57/React.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-57/React.pdf -------------------------------------------------------------------------------- /G23/Lec-57/Source Code Management.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-57/Source Code Management.pdf -------------------------------------------------------------------------------- /G23/Lec-57/local_repo/README.md: -------------------------------------------------------------------------------- 1 | This is a local_repo 2 | 3 | 4 | # This is a feature2 branch -------------------------------------------------------------------------------- /G23/Lec-57/local_repo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

13 | Shivam Singh 14 |

15 |

This is a pargraph

16 | 17 | 18 | -------------------------------------------------------------------------------- /G23/Lec-57/local_repo/script.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: brown 3 | } -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G23/Lec-57/myFirstApp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-57/myapp/public/favicon.ico -------------------------------------------------------------------------------- /G23/Lec-57/myapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-57/myapp/public/logo192.png -------------------------------------------------------------------------------- /G23/Lec-57/myapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-57/myapp/public/logo512.png -------------------------------------------------------------------------------- /G23/Lec-57/myapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G23/Lec-57/myapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-58/myfirstapp/public/favicon.ico -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-58/myfirstapp/public/logo192.png -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-58/myfirstapp/public/logo512.png -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Babel from './components/Babel' 3 | 4 | 5 | const App = () => { 6 | return ( 7 | 8 | ) 9 | } 10 | 11 | export default App -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G23/Lec-58/myfirstapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/src/components/LearnJSX.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LearnJSX = () => { 4 | 5 | const randomNum = Math.floor(Math.random()* 10 + 1) 6 | 7 | return ( 8 | <> 9 | 10 | 11 | {/* 1. */} 12 |

Learning About JSX :

13 | 14 |

Random Number: 15 | {Math.floor(Math.random()* 5 + 1)} 16 |

17 |

Random Number: 18 | {randomNum} 19 |

20 | 21 | ) 22 | } 23 | 24 | export default LearnJSX -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/src/components/Person.css: -------------------------------------------------------------------------------- 1 | .person{ 2 | width: 200px; 3 | border: 2px solid #ccc; 4 | box-shadow: 0px 4px 8px 0.6px; 5 | padding: 20px; 6 | margin: 16px; 7 | } -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/src/components/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Person.css' 3 | 4 | 5 | const Person = ({name,age,crush}) => { 6 | return ( 7 |
8 |

Name: {name}

9 |

Age: {age}

10 |

Crush: {crush}

11 |
12 | ) 13 | } 14 | 15 | // const Person = (props) => { 16 | // return ( 17 | //
18 | //

Name: {props.name}

19 | //

Age: {props.age}

20 | //

Crush: {props.crush}

21 | //
22 | // ) 23 | // } 24 | 25 | export default Person -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import App from './App.jsx' 3 | import './index.css' 4 | 5 | createRoot(document.getElementById('root')).render( 6 | 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /G23/Lec-59/myfirstapp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G23/Lec-6/Job Application form.txt: -------------------------------------------------------------------------------- 1 | JOb Application form given to student in the class and evaluated it while taking there doubts 2 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import State from './components/State' 3 | import Products from './components/Products/Products' 4 | import ShoppingList from './components/ShoppingList/ShoppingList' 5 | 6 | const App = () => { 7 | return ( 8 | <> 9 | {/* */} 10 | {/* */} 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/components/Products/Product.css: -------------------------------------------------------------------------------- 1 | .product{ 2 | width: 360px; 3 | border: 4px solid #ccc; 4 | } 5 | 6 | .product img{ 7 | width: 360px; 8 | height: 180px; 9 | } 10 | 11 | .product h2{ 12 | padding-left:5px 13 | } -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/components/Products/Products.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import './Product.css' 3 | 4 | const Products = (props) => { 5 | 6 | let [price,setPrice]= useState(props.price) 7 | 8 | let handlePrice= () =>{ 9 | setPrice(10) 10 | } 11 | 12 | 13 | return ( 14 |
15 | {props.name} 16 |

{props.name}

17 |

Price: Rs. {price}

18 |
19 | ) 20 | } 21 | 22 | export default Products -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/components/State.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useState } from 'react'; 3 | 4 | const State = () => { 5 | // let count = 0; 6 | 7 | let [count,addCount]=useState(0) 8 | 9 | // let handleCount = () =>{ 10 | // addCount(count - 1) 11 | // } 12 | 13 | return ( 14 |
15 |

Count is: {count}

16 | 17 |
18 | ) 19 | } 20 | 21 | export default State -------------------------------------------------------------------------------- /G23/Lec-60/myapp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G23/Lec-60/myapp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/X-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/X-image.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/ecosystem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/ecosystem.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/fb.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/inst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/inst.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/landing.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/telegram.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/whatsapp.png -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/x-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /G23/Lec-7/Zerodha_using_Html_only/img/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-7/Zerodha_using_Html_only/img/youtube.png -------------------------------------------------------------------------------- /G23/Lec-8/Assignment 1 doubt.txt: -------------------------------------------------------------------------------- 1 | Took assignment 1 student doubt and reviewed there assignment and all project work done in html topic -------------------------------------------------------------------------------- /G23/Lec-9/Assignment 2 check and doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G23/Lec-9/Assignment 2 check and doubt session.txt -------------------------------------------------------------------------------- /G24/Lec-1/CHO-FEE_II.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-1/CHO-FEE_II.pdf -------------------------------------------------------------------------------- /G24/Lec-1/Overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-1/Overview.pdf -------------------------------------------------------------------------------- /G24/Lec-10/1.style.css: -------------------------------------------------------------------------------- 1 | /* External css */ 2 | h3{ 3 | text-decoration: dotted; 4 | border: 3px dotted blue; 5 | padding: 20px; 6 | color: brown; 7 | } -------------------------------------------------------------------------------- /G24/Lec-11/1.style.css: -------------------------------------------------------------------------------- 1 | /* 1. Universal selector: */ 2 | 3 | *{ 4 | font-size: 20px; 5 | /* padding: 0; 6 | margin: 0; */ 7 | font-family: 'Courier New', Courier, monospace; 8 | } 9 | 10 | /* 2. Id selector: */ 11 | 12 | #superheros{ 13 | text-decoration: line-through; 14 | color: blue; 15 | } 16 | 17 | /* 3. Class Selector */ 18 | 19 | .super{ 20 | background-color: brown; 21 | color: white; 22 | } 23 | 24 | /* 4. Element selector */ 25 | 26 | p{ 27 | background-color: orange; 28 | } 29 | 30 | /* 5. Attribute selector: */ 31 | input[type="password"]{ 32 | background-color: green; 33 | } 34 | 35 | input[type="text"]{ 36 | background-color: pink; 37 | } -------------------------------------------------------------------------------- /G24/Lec-12/1.style.css: -------------------------------------------------------------------------------- 1 | /* 1. decendent css: */ 2 | ul li a{ 3 | color: red; 4 | font-size: 20px; 5 | } 6 | 7 | 8 | /* child combinators: */ 9 | 10 | section > h3{ 11 | border-top: 2px solid green; 12 | } 13 | 14 | /* Adjacent combinators: */ 15 | h3+p{ 16 | background-color: yellow; 17 | } 18 | 19 | /* Sibling combinator: */ 20 | 21 | ul~li{ 22 | color: blue; 23 | } -------------------------------------------------------------------------------- /G24/Lec-12/2.pseudo_class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pseudo Selector: 8 | 9 | 10 | 11 | 12 |

Psuedo Classes

13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 | 21 |
22 | Visit google 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G24/Lec-12/2.style.css: -------------------------------------------------------------------------------- 1 | div{ 2 | height: 200px; 3 | width: 200px; 4 | background-color: orange; 5 | border: 4px solid brown; 6 | } 7 | 8 | div:hover{ 9 | background-color: skyblue; 10 | border-radius: 50%; 11 | } 12 | 13 | input:focus{ 14 | background-color: aqua; 15 | } 16 | 17 | a:visited{ 18 | color: red; 19 | 20 | } 21 | 22 | h1:active{ 23 | color: Yellow; 24 | background-color: brown; 25 | } 26 | 27 | input:disabled{ 28 | background-color: pink; 29 | } -------------------------------------------------------------------------------- /G24/Lec-12/img/img1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-12/img/img1.avif -------------------------------------------------------------------------------- /G24/Lec-12/img/img2.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-12/img/img2.avif -------------------------------------------------------------------------------- /G24/Lec-13/1.box_modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Box Modal 8 | 9 | 10 | 11 | 12 | 13 |
This is a div
14 | 15 | 16 | -------------------------------------------------------------------------------- /G24/Lec-13/1.style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0px; 3 | margin: 0px; 4 | box-sizing: border-box; 5 | border: 2px solid red; 6 | } 7 | 8 | div{ 9 | padding: 20px 10px 5px; 10 | margin: 25px 15px 5px; 11 | } -------------------------------------------------------------------------------- /G24/Lec-14/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | background-color: darkslategrey 6 | } 7 | 8 | #container{ 9 | 10 | background-color: lightskyblue; 11 | height: 400px; 12 | width: 500px; 13 | border: 2px solid black; 14 | display: flex; 15 | flex-direction: row; 16 | /* flex-wrap: wrap-reverse; */ 17 | gap: 20px; 18 | /* justify-content: flex-end; */ 19 | /* justify-content: flex-start; */ 20 | /* justify-content: center; */ 21 | } 22 | 23 | .items{ 24 | border: 2px solid black; 25 | height: 120px; 26 | width: 120px; 27 | } 28 | 29 | h1{ 30 | color: white; 31 | font-size: 40px; 32 | text-align: center; 33 | } -------------------------------------------------------------------------------- /G24/Lec-15/flex topic doubt, Revision and Class project-Responsive webpage.txt: -------------------------------------------------------------------------------- 1 | Template for Class Project: 2 | 3 | 4 | G23-https://toystore-template.webflow.io/ 5 | G24- https://www.wix.com/website-template/view/html/1732?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F2&tpClick=view_button&esi=9075483d-8358-4a22-a570-3302c816ce0b 6 | G25- https://www.wix.com/website-template/view/html/2936?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F4&tpClick=view_button&esi=663bb791-5cf8-4172-aec0-0ed2c58da3d7 7 | -------------------------------------------------------------------------------- /G24/Lec-16/2.responsive_navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive navbar 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /G24/Lec-16/2.style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | nav{ 7 | background-color: #1A1A63; 8 | font-size: 1.6rem; 9 | padding: 10px 5px; 10 | display: flex; 11 | justify-content: space-around; 12 | } 13 | 14 | nav a{ 15 | text-decoration: none; 16 | text-transform: capitalize; 17 | color: whitesmoke; 18 | 19 | } 20 | 21 | nav ul{ 22 | list-style: none; 23 | display: flex; 24 | width: 520px; 25 | justify-content: space-between; 26 | } 27 | 28 | 29 | @media(max-width: 520px){ 30 | nav, nav ul{ 31 | flex-direction: column; 32 | align-items: center; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /G24/Lec-16/Navbar_desktopScreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-16/Navbar_desktopScreen.PNG -------------------------------------------------------------------------------- /G24/Lec-16/navbar_mobilescreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-16/navbar_mobilescreen.PNG -------------------------------------------------------------------------------- /G24/Lec-17/style.css: -------------------------------------------------------------------------------- 1 | section{ 2 | background-color: pink; 3 | border: 2px solid black; 4 | height:200px ; 5 | width:200px ; 6 | transition: 1s; 7 | transition-duration: 2s; 8 | transition-delay: 1s; 9 | } 10 | 11 | section:hover{ 12 | background-color: aqua; 13 | height: 500px; 14 | width: 500px; 15 | border-radius: 50%; 16 | } 17 | 18 | article{ 19 | background-color: grey; 20 | margin: 2px 2px; 21 | padding: 2px auto; 22 | } 23 | div{ 24 | background-color: green; 25 | } -------------------------------------------------------------------------------- /G24/Lec-17/transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transition 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /G24/Lec-18/Grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid CSS 8 | 9 | 10 | 11 | 12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
5
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /G24/Lec-18/style.css: -------------------------------------------------------------------------------- 1 | section{ 2 | width: 80vw; 3 | margin: 20px auto; 4 | display: grid; 5 | 6 | /* 1. defining col and rows */ 7 | 8 | /* grid-template-columns: 250px 250px 250px; */ 9 | /* grid-template-rows: 250px 250px 250px 250px; */ 10 | /* grid-auto-columns: repeat(5,250px); */ 11 | 12 | /* 2. To devide grid in fraction */ 13 | /* grid-template-columns: repeat(1fr,1fr,1fr); 14 | grid-template-columns: repeat(5,1fr); */ 15 | 16 | /* 3. to create gap betweeen rows and columns we use gap */ 17 | /* /* row-gap: 20px; */ 18 | column-gap: 20px; 19 | /* gap: 20px 10px; 20 | grid-gap: 10x 20px; */ 21 | 22 | /* 4. responsive grid*/ 23 | grid-template-columns: repeat(auto-fill,minmax(250px,3fr)); 24 | 25 | } 26 | 27 | /* div{ 28 | height: 50px; 29 | } */ -------------------------------------------------------------------------------- /G24/Lec-2/1.html_structure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | HTML STRUCTURE 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /G24/Lec-2/2.heading_tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Heading Tags 8 | 9 | 10 | 11 | 12 |

Robert Downey Jr.

13 |

Robert Downey Jr.

14 |

Robert Downey Jr.

15 |

Robert Downey Jr.

16 |
Robert Downey Jr.
17 |
Robert Downey Jr.
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G24/Lec-2/3.paragraph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Paragraph 8 | 9 | 10 | 11 | 12 |

This is a Paragraph

13 | 14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque fugiat veritatis quas veniam facilis consectetur 15 | libero aspernatur tempore molestias soluta?

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /G24/Lec-2/4.link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Learning About links

13 |

Take me to:Google

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G24/Lec-2/5.image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Tag 8 | 9 | 10 | 11 | 12 | image not found 13 |

This is a nature image

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G24/Lec-2/img/nature.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-2/img/nature.jfif -------------------------------------------------------------------------------- /G24/Lec-21/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-21/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G24/Lec-22/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-22/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G24/Lec-26/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G24/Lec-27/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G24/Lec-28/JAVASCRIPT.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-28/JAVASCRIPT.pdf -------------------------------------------------------------------------------- /G24/Lec-29/Eval 1 doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-29/Eval 1 doubt session.txt -------------------------------------------------------------------------------- /G24/Lec-3/img/Profile_img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-3/img/Profile_img.jpeg -------------------------------------------------------------------------------- /G24/Lec-30/app.js: -------------------------------------------------------------------------------- 1 | console.log("Executing JS using external file") -------------------------------------------------------------------------------- /G24/Lec-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Introduction 8 | 9 | 10 | 11 | 12 | 13 | 14 |

JS Introduction

15 | 16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G24/Lec-31/1.variable.js: -------------------------------------------------------------------------------- 1 | // var: redecalartion possible and initialisation/updation 2 | // var a = 10; 3 | // var a = 15; 4 | // a = 20; 5 | // console.log(a) 6 | 7 | // let: redecalartion notpossible and initialisation/updation 8 | // let a = 10; 9 | // // let a = 15; 10 | // a = 20; 11 | // console.log(a) 12 | 13 | // const: redecalartion notpossible and initialisation/updation not possible 14 | const a = 10; 15 | // const a = 15; 16 | a = 20; 17 | console.log(a) -------------------------------------------------------------------------------- /G24/Lec-31/2.data_types.js: -------------------------------------------------------------------------------- 1 | // 1. Number: +,-,decimal,integer 2 | 3 | let a = 10; 4 | let b = -5 5 | let c = 1.2 6 | console.log(a) 7 | console.log(typeof(a)) 8 | console.log(b) 9 | console.log(typeof(b)) 10 | console.log(c) 11 | console.log(typeof(c)) 12 | 13 | 14 | // 2.string: 15 | let name = "tarun" 16 | console.log(name) 17 | console.log(typeof(name)) 18 | 19 | // 3.boolean: 20 | let i = true; 21 | console.log(typeof(i)) 22 | 23 | // 4. undefined: 24 | let y; 25 | console.log(typeof(y)) 26 | y = 5; 27 | console.log(y) 28 | 29 | // null 30 | let j = null; 31 | console.log(typeof(j)) -------------------------------------------------------------------------------- /G24/Lec-31/4.conditional_statement.js: -------------------------------------------------------------------------------- 1 | let age = prompt("Please enter your age:"); 2 | 3 | age = Number(age); 4 | 5 | if (age >= 18) { 6 | console.log("You are eligible to vote."); 7 | } else if (age > 0 && age < 18) { 8 | console.log("You are not eligible to vote."); 9 | } else { 10 | console.log("Invalid age entered."); 11 | } -------------------------------------------------------------------------------- /G24/Lec-31/5.loops.js: -------------------------------------------------------------------------------- 1 | // 1. for loops: Print odd number between 10 to 20: 2 | // for(let i= 11; i<=20; i= i+2){ 3 | // console.log(i) 4 | // } 5 | 6 | // 2. Nested for loops: 7 | for(let i=1; i<=3; i++){ 8 | console.log("Outer loop" + i); 9 | for(let j=1; j<=3; j++){ 10 | console.log("Inner loop" + j) 11 | } 12 | } 13 | 14 | // 3.while: 15 | // let i = 0; 16 | // while(i < 5) { 17 | // console.log(i); 18 | // i++; 19 | // } 20 | 21 | // 4.do while: 22 | // let i = 0; 23 | // do{ 24 | // console.log(i); 25 | // i++; 26 | // }while(i < 5); -------------------------------------------------------------------------------- /G24/Lec-34/Revision and Project Discussion.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-34/Revision and Project Discussion.txt -------------------------------------------------------------------------------- /G24/Lec-35-39/Evaluation 1.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-35-39/Evaluation 1.txt -------------------------------------------------------------------------------- /G24/Lec-4/Zerodha_html_V1/img/wikepedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-4/Zerodha_html_V1/img/wikepedia.png -------------------------------------------------------------------------------- /G24/Lec-40/JS Before Eval 1 Topic Revision.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-40/JS Before Eval 1 Topic Revision.txt -------------------------------------------------------------------------------- /G24/Lec-41/Class Test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-41/Class Test.txt -------------------------------------------------------------------------------- /G24/Lec-43/1.equal_coercion.js: -------------------------------------------------------------------------------- 1 | console.log(); // undefined 2 | 3 | console.log(1 == 1); // true 4 | console.log(1 == "1"); //true 5 | 6 | console.log("" == 1); //false: 7 | 8 | console.log([] == ""); //true 9 | 10 | console.log([] == 0); // true 11 | -------------------------------------------------------------------------------- /G24/Lec-44/2.return_keyword.js: -------------------------------------------------------------------------------- 1 | function sum(a, b) { 2 | let c = a + b; 3 | console.log("hi"); 4 | return c; 5 | console.log("hi"); 6 | console.log("h1"); 7 | } 8 | // let d = sum(5, 4); 9 | console.log(sum(5, 4)); 10 | -------------------------------------------------------------------------------- /G24/Lec-45/Hoisting/hoisting.js: -------------------------------------------------------------------------------- 1 | // 2.let and const: refernce error: temperal dead zone 2 | console.log(a); 3 | let a = 10; 4 | 5 | function myfunc() { 6 | var b = 20; 7 | console.log(b); 8 | } 9 | myfunc(); 10 | 11 | // // 1. var: undefined: top of the scope 12 | // console.log(a); //undefined 13 | 14 | // var a = 10; 15 | // b(); 16 | 17 | // function b() { 18 | // console.log(c); 19 | // var c = 20; 20 | // console.log(c); 21 | // } 22 | -------------------------------------------------------------------------------- /G24/Lec-45/Hoisting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G24/Lec-45/function_expression.js: -------------------------------------------------------------------------------- 1 | // 2. hoisting in anonymous function expression 2 | var a = 17; 3 | 4 | // console.log(myfunc(3)); // Error 5 | 6 | var myfunc = function (num) { 7 | return num ** 3; 8 | }; 9 | // console.log(cube(3)); 10 | // console.log(myfunc(3)); // here it will work 11 | 12 | // // 1. function expression as a anonymous function 13 | 14 | // const val = function(a, b) { 15 | // let c = a + b; 16 | // return c; 17 | // }; 18 | // // console.log(sum(5, 3)); // function name before function annonymous 19 | // // sum(5, 3); 20 | // // console.log(val) 21 | // console.log(val(5, 3)); 22 | -------------------------------------------------------------------------------- /G24/Lec-46/1.HOF.js: -------------------------------------------------------------------------------- 1 | // // HOF: when we pass one function into another function as a argument 2 | 3 | // 2.. 4 | let arr = [2, 4, 6, 8, 9]; 5 | 6 | function evenOrNot(func, arr) { 7 | for (let i = 0; i < 5; i++) { 8 | func(arr[i]); 9 | } 10 | } 11 | const even = function (num) { 12 | if (num % 2 == 0) { 13 | console.log(num); 14 | } else { 15 | console.log("Not even"); 16 | } 17 | }; 18 | 19 | evenOrNot(even, arr); 20 | 21 | // //1.printName is a HOF bcz it takes myname function as a argument. 22 | // function printName(func, num) { 23 | // for (let i = 1; i <= num; i++) { 24 | // func(); 25 | // } 26 | // } 27 | 28 | // let myName = function () { 29 | // console.log("Yash"); 30 | // }; 31 | // printName(myName, 20); 32 | -------------------------------------------------------------------------------- /G24/Lec-46/2.Methods.js: -------------------------------------------------------------------------------- 1 | // Any function that is being defined inside a object is called methods. 2 | 3 | const calulate = { 4 | add: function (a, b) { 5 | return a + b; 6 | }, 7 | sub: function (a, b) { 8 | return a - b; 9 | }, 10 | mul: function (a, b) { 11 | return a * b; 12 | }, 13 | div: function (a, b) { 14 | return a / b; 15 | }, 16 | }; 17 | calulate(); 18 | -------------------------------------------------------------------------------- /G24/Lec-46/3.Iterators.js: -------------------------------------------------------------------------------- 1 | // Iterator: 2 | let str = "knav"; 3 | let obj = { name: "kanav" }; 4 | 5 | // for in: gives key 6 | for (let num in obj) { 7 | console.log(num); 8 | console.log(obj[num]); 9 | console.log(obj); 10 | } 11 | console.log(obj); 12 | 13 | // for (let i of obj) { 14 | // console.log(i); 15 | // } 16 | 17 | // for of: gives value 18 | // for (let i of str) { 19 | // let iterator = str[Symbol.iterator](); 20 | // // console.log(iterator); 21 | // } 22 | // let iterator = str[Symbol.iterator](); 23 | // console.log(iterator.next()); 24 | // console.log(iterator.next()); 25 | // console.log(iterator.next()); 26 | 27 | // console.log(str[Symbol.iterator]); 28 | // console.log(obj[Symbol.iterator]); 29 | -------------------------------------------------------------------------------- /G24/Lec-49/3.arrow_function.js: -------------------------------------------------------------------------------- 1 | // 3. arrow function: 2 | let b = () => { 3 | let a = 20; 4 | console.log(a); 5 | }; 6 | console.log(b); 7 | 8 | //2. anonymous function: 9 | // let b = function (){ 10 | // let a = 20; 11 | // console.log(a) 12 | // } 13 | // console.log(b) 14 | 15 | // 1.Normal function: 16 | // function myfun(){ 17 | // let a = 20; 18 | // console.log(a) 19 | // } 20 | -------------------------------------------------------------------------------- /G24/Lec-5/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /G24/Lec-50/ImgToggler/app.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector("img"); 2 | 3 | function imageToggler() { 4 | let isTrue = false; 5 | 6 | setInterval(() => { 7 | if (isTrue) { 8 | image.setAttribute( 9 | "src", 10 | "https://images.unsplash.com/photo-1608889336076-13c5c2dc1ee7?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D" 11 | ); 12 | } else { 13 | image.setAttribute( 14 | "src", 15 | "https://images.unsplash.com/photo-1608889476561-6242cfdbf622?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D" 16 | ); 17 | } 18 | isTrue = !isTrue; 19 | }, 1000); 20 | } 21 | imageToggler(); 22 | -------------------------------------------------------------------------------- /G24/Lec-50/ImgToggler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Toggler 8 | 9 | 10 | 11 |

Image Toggler

12 | 13 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /G24/Lec-51/1.style.css: -------------------------------------------------------------------------------- 1 | .pink{ 2 | color: pink; 3 | } -------------------------------------------------------------------------------- /G24/Lec-51/1.style.js: -------------------------------------------------------------------------------- 1 | // var img = document.querySelector("img"); 2 | // console.log(img.classList); 3 | 4 | var heading = document.querySelector("h1"); 5 | console.log(heading.classList); 6 | 7 | // 1. Addding class: classList.add() 8 | heading.classList.add("abc"); 9 | heading.classList.add("pink"); 10 | 11 | // 2. to remove class: classList.remove() 12 | // heading.classList.remove("pink"); 13 | // console.log(heading.classList); 14 | 15 | // 3. check class: classList.contains() 16 | // var b = heading.classList.contains("pink"); 17 | // console.log(b); 18 | 19 | // 4.toggler: used to remove and add class 20 | heading.classList.toggle("pink"); 21 | heading.classList.toggle("black"); 22 | -------------------------------------------------------------------------------- /G24/Lec-51/2.script.js: -------------------------------------------------------------------------------- 1 | // 1.Adding Elements: 2 | var newh1 = document.createElement("h1"); 3 | console.dir(newh1); 4 | newh1.innerText = "DOM Elements:"; 5 | 6 | // 2. appendChild: to add inner value to object: adds to end 7 | var body = document.querySelector("body"); 8 | body.appendChild(newh1); 9 | 10 | // 3.append: 11 | // newh1.append("Learning in JS"); 12 | 13 | // 4.prepand: adds to start 14 | body.prepend(newh1); 15 | 16 | // 5.remove: 17 | newh1.remove(); 18 | body.remove(); 19 | 20 | // 6.insertAdjacent(where,element): 21 | var btn = document.createElement("button"); 22 | btn.innerText = "Click Me"; 23 | -------------------------------------------------------------------------------- /G24/Lec-52/2.forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Events 8 | 9 | 10 | 11 |
12 |

13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /G24/Lec-52/3.control_event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Control Events 8 | 9 | 10 | 11 |

Control Events

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G24/Lec-52/3.script.js: -------------------------------------------------------------------------------- 1 | let inp = document.querySelector("input"); 2 | inp.addEventListener("keydown", function (e) { 3 | console.log("key:" + e.code); 4 | console.log("value" + e.key); 5 | }); 6 | 7 | // //2. keydown with event value of code and key value 8 | // inp.addEventListener("keydown", function (e) { 9 | // console.log(e); 10 | // console.log("Key was Pressed"); 11 | // }); 12 | 13 | // // 1. keyup: 14 | // inp.addEventListener("keyup", function () { 15 | // console.log("Key was Released"); 16 | // }); 17 | -------------------------------------------------------------------------------- /G24/Lec-52/Profile Update Mini Project/image/img1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-52/Profile Update Mini Project/image/img1.PNG -------------------------------------------------------------------------------- /G24/Lec-52/Profile Update Mini Project/image/img2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-52/Profile Update Mini Project/image/img2.PNG -------------------------------------------------------------------------------- /G24/Lec-53/1.callback.js: -------------------------------------------------------------------------------- 1 | // 2.function second with callback as first 2 | function first() { 3 | console.log("First function"); 4 | } 5 | 6 | function second(call) { 7 | console.log("Second Function"); 8 | call(); 9 | } 10 | // function call: 11 | second(first()); 12 | 13 | // // 1.simple function: 14 | // function first() { 15 | // console.log("First function"); 16 | // } 17 | 18 | // function second() { 19 | // console.log("Second Function"); 20 | // } 21 | // // function call: 22 | // first(); 23 | // second(); 24 | 25 | // 1.synchronous way: 26 | // console.log("Execution started..."); 27 | 28 | // for (let i = 0; i < 1000; i++) { 29 | // console.log("Loop Ends here.."); 30 | // } 31 | // console.log("Execution Ends here.."); 32 | -------------------------------------------------------------------------------- /G24/Lec-56/1.fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fetch 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G24/Lec-56/1.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | 3 | // 1.2.2: 4 | fetch(url) 5 | .then((res) => { 6 | return res.json() 7 | }).then((data)=>{ 8 | console.log(data) 9 | }) 10 | .catch((err) => { 11 | console.log(err); 12 | }); 13 | c 14 | // 1.1 fetch returns a promise 15 | // console.log(fetch(url)); 16 | 17 | // // 1.2.1: 18 | // fetch(url) 19 | // .then((res) => { 20 | // // console.log(res); 21 | // // console.log(res.json()); 22 | // res.json().then((data) => { 23 | // console.log(data); 24 | // }); 25 | // }) 26 | // .catch((err) => { 27 | // console.log(err); 28 | // }); 29 | -------------------------------------------------------------------------------- /G24/Lec-56/2.async_await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Asyn Await 8 | 9 | 10 | 11 | 12 |

Async Await

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G24/Lec-56/2.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | 3 | async function getData() { 4 | try { 5 | let res = await fetch(url); 6 | let data = await res.json(); 7 | console.log(res); 8 | console.log(data); 9 | console.log(data.fact); 10 | } catch (e) { 11 | console.log("Error!!", e); 12 | } 13 | } 14 | getData(); 15 | -------------------------------------------------------------------------------- /G24/Lec-56/3.question.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API Homework 8 | 9 | 10 | 11 |

Learning About API

12 |
13 |
Name
14 |
Gender
15 |
Height
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G24/Lec-56/3.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://swapi.dev/api/people/1"; 2 | 3 | let container = document.querySelector(".container"); 4 | fetch(url).then((data) => data.json()); 5 | // .then((data) => { 6 | // // console.log(data); 7 | // }); 8 | async function getStarwardata() { 9 | let data = await fetch(url); 10 | let resultData = await data.json(); 11 | // console.log(resultData); 12 | showData(resultData); 13 | } 14 | getStarwardata(); 15 | function showData(data) { 16 | container.innerHTML = ""; 17 | let div = document.createElement("div"); 18 | div.innerHTML = `
${data.name}
19 |
${data.gender}
20 |
${data.height}
`; 21 | container.append(div); 22 | } 23 | -------------------------------------------------------------------------------- /G24/Lec-56/4.axios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Axios 8 | 9 | 10 | 11 |

Axio's

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G24/Lec-56/4.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | async function getFacts() { 3 | try { 4 | let res = await axios.get(url); 5 | console.log(res.data.fact); 6 | } catch (e) { 7 | console.log("Error", e); 8 | } 9 | } 10 | getFacts(); 11 | -------------------------------------------------------------------------------- /G24/Lec-57/Git_command.txt: -------------------------------------------------------------------------------- 1 | #Basic Linux commands: 2 | 3 | 1)mkdir myproject(makes a new directory) 4 | 2)cd myproject(to change directory) 5 | 3)cd ..(previous directory) 6 | 4)type nul > myfile.txt(creates empty txt file) 7 | 5)echo (to write inside a file) 8 | 6)dir or ls (To see files in directory) 9 | 7)dir /a(To see all files incluing hidden files) 10 | 11 | 12 | *git --version 13 | 14 | * git Installation: https://www.git-scm.com/ 15 | * git configuration: 16 | -> git config --global user.name "webcraftShiva" 17 | -> git config --global user.email "shivam.webcraft@gmail.com" 18 | 19 | 20 | * git init 21 | * git status 22 | * git add -A /or/ git add . 23 | * git commit -m "first commit" /or/ git commit -m file_name 24 | * git log -------------------------------------------------------------------------------- /G24/Lec-57/React.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-57/React.pdf -------------------------------------------------------------------------------- /G24/Lec-57/Source Code Management.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-57/Source Code Management.pdf -------------------------------------------------------------------------------- /G24/Lec-57/local_repo/README.md: -------------------------------------------------------------------------------- 1 | This is a local_repo 2 | 3 | 4 | # This is a feature2 branch -------------------------------------------------------------------------------- /G24/Lec-57/local_repo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

13 | Shivam Singh 14 |

15 |

This is a pargraph

16 | 17 | 18 | -------------------------------------------------------------------------------- /G24/Lec-57/local_repo/script.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: brown 3 | } -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G24/Lec-57/myFirstApp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-57/myapp/public/favicon.ico -------------------------------------------------------------------------------- /G24/Lec-57/myapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-57/myapp/public/logo192.png -------------------------------------------------------------------------------- /G24/Lec-57/myapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-57/myapp/public/logo512.png -------------------------------------------------------------------------------- /G24/Lec-57/myapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G24/Lec-57/myapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-58/myfirstapp/public/favicon.ico -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-58/myfirstapp/public/logo192.png -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-58/myfirstapp/public/logo512.png -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Babel from './components/Babel' 3 | 4 | 5 | const App = () => { 6 | return ( 7 | 8 | ) 9 | } 10 | 11 | export default App -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G24/Lec-58/myfirstapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/src/components/LearnJSX.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LearnJSX = () => { 4 | 5 | const randomNum = Math.floor(Math.random()* 10 + 1) 6 | 7 | return ( 8 | <> 9 | 10 | 11 | {/* 1. */} 12 |

Learning About JSX :

13 | 14 |

Random Number: 15 | {Math.floor(Math.random()* 5 + 1)} 16 |

17 |

Random Number: 18 | {randomNum} 19 |

20 | 21 | ) 22 | } 23 | 24 | export default LearnJSX -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/src/components/Person.css: -------------------------------------------------------------------------------- 1 | .person{ 2 | width: 200px; 3 | border: 2px solid #ccc; 4 | box-shadow: 0px 4px 8px 0.6px; 5 | padding: 20px; 6 | margin: 16px; 7 | } -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/src/components/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Person.css' 3 | 4 | 5 | const Person = ({name,age,crush}) => { 6 | return ( 7 |
8 |

Name: {name}

9 |

Age: {age}

10 |

Crush: {crush}

11 |
12 | ) 13 | } 14 | 15 | // const Person = (props) => { 16 | // return ( 17 | //
18 | //

Name: {props.name}

19 | //

Age: {props.age}

20 | //

Crush: {props.crush}

21 | //
22 | // ) 23 | // } 24 | 25 | export default Person -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import App from './App.jsx' 3 | import './index.css' 4 | 5 | createRoot(document.getElementById('root')).render( 6 | 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /G24/Lec-59/myfirstapp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G24/Lec-6/Job Application form.txt: -------------------------------------------------------------------------------- 1 | JOb Application form given to student in the class and evaluated it while taking there doubts 2 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import State from './components/State' 3 | import Products from './components/Products/Products' 4 | import ShoppingList from './components/ShoppingList/ShoppingList' 5 | 6 | const App = () => { 7 | return ( 8 | <> 9 | {/* */} 10 | {/* */} 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/components/Products/Product.css: -------------------------------------------------------------------------------- 1 | .product{ 2 | width: 360px; 3 | border: 4px solid #ccc; 4 | } 5 | 6 | .product img{ 7 | width: 360px; 8 | height: 180px; 9 | } 10 | 11 | .product h2{ 12 | padding-left:5px 13 | } -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/components/Products/Products.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import './Product.css' 3 | 4 | const Products = (props) => { 5 | 6 | let [price,setPrice]= useState(props.price) 7 | 8 | let handlePrice= () =>{ 9 | setPrice(10) 10 | } 11 | 12 | 13 | return ( 14 |
15 | {props.name} 16 |

{props.name}

17 |

Price: Rs. {price}

18 |
19 | ) 20 | } 21 | 22 | export default Products -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/components/State.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useState } from 'react'; 3 | 4 | const State = () => { 5 | // let count = 0; 6 | 7 | let [count,addCount]=useState(0) 8 | 9 | // let handleCount = () =>{ 10 | // addCount(count - 1) 11 | // } 12 | 13 | return ( 14 |
15 |

Count is: {count}

16 | 17 |
18 | ) 19 | } 20 | 21 | export default State -------------------------------------------------------------------------------- /G24/Lec-60/myapp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G24/Lec-60/myapp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/X-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/X-image.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/ecosystem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/ecosystem.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/fb.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/inst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/inst.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/landing.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/telegram.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/whatsapp.png -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/x-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /G24/Lec-7/Zerodha_using_Html_only/img/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-7/Zerodha_using_Html_only/img/youtube.png -------------------------------------------------------------------------------- /G24/Lec-8/Assignment 1 doubt.txt: -------------------------------------------------------------------------------- 1 | Took assignment 1 student doubt and reviewed there assignment and all project work done in html topic -------------------------------------------------------------------------------- /G24/Lec-9/Assignment 2 check and doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G24/Lec-9/Assignment 2 check and doubt session.txt -------------------------------------------------------------------------------- /G25/Lec-1/CHO-FEE_II.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-1/CHO-FEE_II.pdf -------------------------------------------------------------------------------- /G25/Lec-1/Overview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-1/Overview.pdf -------------------------------------------------------------------------------- /G25/Lec-10/1.style.css: -------------------------------------------------------------------------------- 1 | h3, p{ 2 | background-color: pink; 3 | border: 2px solid grey; 4 | padding: 20px; 5 | } -------------------------------------------------------------------------------- /G25/Lec-11/1.style.css: -------------------------------------------------------------------------------- 1 | /* 1. Universal selector: */ 2 | 3 | *{ 4 | font-family: 'Courier New', Courier, monospace; 5 | font-size: 20px; 6 | } 7 | 8 | /* 2. Id selector: */ 9 | #superheros{ 10 | background-color: pink; 11 | text-align: center; 12 | } 13 | 14 | /* 3. class selector: */ 15 | .super{ 16 | color: green; 17 | font-weight: 800; 18 | } 19 | 20 | /* 4. element selector: */ 21 | h1{ 22 | color: blue; 23 | text-decoration: line-through; 24 | } 25 | 26 | /* 5. Attribute selector: */ 27 | 28 | input[type="text"]{ 29 | background-color: orange; 30 | } 31 | 32 | [type="password"]{ 33 | background-color: green; 34 | } -------------------------------------------------------------------------------- /G25/Lec-12/1.style.css: -------------------------------------------------------------------------------- 1 | /* decendent combinator selector: */ 2 | 3 | ul li a{ 4 | color: red; 5 | font-size: 20px; 6 | } 7 | 8 | /* Child combinator selector: */ 9 | ol > li{ 10 | background-color: yellow; 11 | } 12 | 13 | /* Adjacent combinator selector: */ 14 | 15 | h3+p{ 16 | border-top: 2px solid brown; 17 | } 18 | 19 | /* general siblings */ 20 | div~p{ 21 | background-color: blue; 22 | } 23 | -------------------------------------------------------------------------------- /G25/Lec-12/2.pseudo_class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pseudo Selector: 8 | 9 | 10 | 11 | 12 |

Psuedo Classes

13 |
14 |
15 |
16 |
17 |
18 | 19 |
20 | 21 |
22 | Visit google 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G25/Lec-12/2.style.css: -------------------------------------------------------------------------------- 1 | div{ 2 | height: 200px; 3 | width: 200px; 4 | background-color: orange; 5 | border: 4px solid brown; 6 | } 7 | 8 | div:hover{ 9 | background-color: skyblue; 10 | border-radius: 50%; 11 | } 12 | 13 | input:focus{ 14 | background-color: aqua; 15 | } 16 | 17 | a:visited{ 18 | color: red; 19 | 20 | } 21 | 22 | h1:active{ 23 | color: Yellow; 24 | background-color: brown; 25 | } 26 | 27 | input:disabled{ 28 | background-color: pink; 29 | } -------------------------------------------------------------------------------- /G25/Lec-12/img/img1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-12/img/img1.avif -------------------------------------------------------------------------------- /G25/Lec-12/img/img2.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-12/img/img2.avif -------------------------------------------------------------------------------- /G25/Lec-13/1.box_modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOX MODAL 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | This is a div 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /G25/Lec-13/1.style.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | border: 2px solid black; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | div{ 9 | padding: 20px 10px 5px; 10 | margin: 25px 15px 5px; 11 | border: 2px solid red; 12 | } 13 | -------------------------------------------------------------------------------- /G25/Lec-13/2.text&font.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TEXT AND FONT 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sunt deserunt voluptate perspiciatis 15 | architecto excepturi officia similique sed saepe illum!

16 |
17 | 18 |

Below is the the link

19 | Google search 20 | 21 |

This is a heading 3rd

22 | 23 |

This is our last heading

24 | 25 | 26 | -------------------------------------------------------------------------------- /G25/Lec-14/flex_box.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex BOX 8 | 9 | 10 | 11 | 12 | 13 |

Flex Box

14 | 15 |
16 |
Item 1
17 |
Item 2
18 |
Item 3
19 |
Item 4
20 |
Item 5
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /G25/Lec-15/flex topic doubt, Revision and Class project-Responsive webpage.txt: -------------------------------------------------------------------------------- 1 | Template for Class Project: 2 | 3 | 4 | G23-https://toystore-template.webflow.io/ 5 | G24- https://www.wix.com/website-template/view/html/1732?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F2&tpClick=view_button&esi=9075483d-8358-4a22-a570-3302c816ce0b 6 | G25- https://www.wix.com/website-template/view/html/2936?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F4&tpClick=view_button&esi=663bb791-5cf8-4172-aec0-0ed2c58da3d7 7 | -------------------------------------------------------------------------------- /G25/Lec-16/1.style.css: -------------------------------------------------------------------------------- 1 | section{ 2 | border: 2px solid #ccc; 3 | padding: 1rem; 4 | } 5 | 6 | h1{ 7 | font-size: 3rem; 8 | } 9 | 10 | /* Media Queries: */ 11 | @media(max-width: 520px){ 12 | section{ 13 | background-color: orange; 14 | } 15 | 16 | h1{ 17 | color: green; 18 | } 19 | } 20 | 21 | @media(orientation:landscape){ 22 | 23 | section{ 24 | background-color: green; 25 | } 26 | section p{ 27 | color: blue 28 | } 29 | } 30 | 31 | @media(orientation:portrait){ 32 | 33 | section p{ 34 | color: brown; 35 | font-weight: 800; 36 | } 37 | } -------------------------------------------------------------------------------- /G25/Lec-16/2.responsive_navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive navbar 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /G25/Lec-16/2.style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | nav{ 7 | background-color: #1A1A63; 8 | font-size: 1.6rem; 9 | padding: 10px 5px; 10 | display: flex; 11 | justify-content: space-around; 12 | } 13 | 14 | nav a{ 15 | text-decoration: none; 16 | text-transform: capitalize; 17 | color: whitesmoke; 18 | 19 | } 20 | 21 | nav ul{ 22 | list-style: none; 23 | display: flex; 24 | width: 520px; 25 | justify-content: space-between; 26 | } 27 | 28 | 29 | @media(max-width: 520px){ 30 | nav, nav ul{ 31 | flex-direction: column; 32 | align-items: center; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /G25/Lec-16/Navbar_desktopScreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-16/Navbar_desktopScreen.PNG -------------------------------------------------------------------------------- /G25/Lec-16/navbar_mobilescreen.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-16/navbar_mobilescreen.PNG -------------------------------------------------------------------------------- /G25/Lec-17/transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Transiton 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /G25/Lec-18/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS GRID 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /G25/Lec-2/1.html_structure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | HTML STRUCTURE 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /G25/Lec-2/2.heading_tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Heading Tags 8 | 9 | 10 | 11 | 12 |

Robert Downey Jr.

13 |

Robert Downey Jr.

14 |

Robert Downey Jr.

15 |

Robert Downey Jr.

16 |
Robert Downey Jr.
17 |
Robert Downey Jr.
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G25/Lec-2/3.paragraph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Paragraph 8 | 9 | 10 | 11 | 12 |

This is a Paragraph

13 | 14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque fugiat veritatis quas veniam facilis consectetur 15 | libero aspernatur tempore molestias soluta?

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /G25/Lec-2/4.link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

Learning About links

13 |

Take me to:Google

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G25/Lec-2/5.image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Tag 8 | 9 | 10 | 11 | 12 | image not found 13 |

This is a nature image

14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G25/Lec-2/img/nature.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-2/img/nature.jfif -------------------------------------------------------------------------------- /G25/Lec-21/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-21/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G25/Lec-22/Eval 1 Project selection.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-22/Eval 1 Project selection.txt -------------------------------------------------------------------------------- /G25/Lec-26/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G25/Lec-27/Assignment 3 Ecommerce website using Bootstrap.txt: -------------------------------------------------------------------------------- 1 | Assignment 3 Ecommerce website using Bootstrap -------------------------------------------------------------------------------- /G25/Lec-28/JAVASCRIPT.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-28/JAVASCRIPT.pdf -------------------------------------------------------------------------------- /G25/Lec-29/Eval 1 doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-29/Eval 1 doubt session.txt -------------------------------------------------------------------------------- /G25/Lec-3/img/Profile_img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-3/img/Profile_img.jpeg -------------------------------------------------------------------------------- /G25/Lec-30/app.js: -------------------------------------------------------------------------------- 1 | console.log("Executing JS using external file") -------------------------------------------------------------------------------- /G25/Lec-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Introduction 8 | 9 | 10 | 11 | 12 | 13 | 14 |

JS Introduction

15 | 16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /G25/Lec-31/1.variable.js: -------------------------------------------------------------------------------- 1 | // var: redecalartion possible and initialisation/updation 2 | // var a = 10; 3 | // var a = 15; 4 | // a = 20; 5 | // console.log(a) 6 | 7 | // let: redecalartion notpossible and initialisation/updation 8 | // let a = 10; 9 | // // let a = 15; 10 | // a = 20; 11 | // console.log(a) 12 | 13 | // const: redecalartion notpossible and initialisation/updation not possible 14 | const a = 10; 15 | // const a = 15; 16 | a = 20; 17 | console.log(a) -------------------------------------------------------------------------------- /G25/Lec-31/2.data_types.js: -------------------------------------------------------------------------------- 1 | // 1. Number: +,-,decimal,integer 2 | 3 | let a = 10; 4 | let b = -5 5 | let c = 1.2 6 | console.log(a) 7 | console.log(typeof(a)) 8 | console.log(b) 9 | console.log(typeof(b)) 10 | console.log(c) 11 | console.log(typeof(c)) 12 | 13 | 14 | // 2.string: 15 | let name = "tarun" 16 | console.log(name) 17 | console.log(typeof(name)) 18 | 19 | // 3.boolean: 20 | let i = true; 21 | console.log(typeof(i)) 22 | 23 | // 4. undefined: 24 | let y; 25 | console.log(typeof(y)) 26 | y = 5; 27 | console.log(y) 28 | 29 | // null 30 | let j = null; 31 | console.log(typeof(j)) -------------------------------------------------------------------------------- /G25/Lec-31/4.conditional_statement.js: -------------------------------------------------------------------------------- 1 | let age = prompt("Please enter your age:"); 2 | 3 | age = Number(age); 4 | 5 | if (age >= 18) { 6 | console.log("You are eligible to vote."); 7 | } else if (age > 0 && age < 18) { 8 | console.log("You are not eligible to vote."); 9 | } else { 10 | console.log("Invalid age entered."); 11 | } -------------------------------------------------------------------------------- /G25/Lec-31/5.loops.js: -------------------------------------------------------------------------------- 1 | // 1. for loops: Print odd number between 10 to 20: 2 | // for(let i= 11; i<=20; i= i+2){ 3 | // console.log(i) 4 | // } 5 | 6 | // 2. Nested for loops: 7 | for(let i=1; i<=3; i++){ 8 | console.log("Outer loop" + i); 9 | for(let j=1; j<=3; j++){ 10 | console.log("Inner loop" + j) 11 | } 12 | } 13 | 14 | // 3.while: 15 | // let i = 0; 16 | // while(i < 5) { 17 | // console.log(i); 18 | // i++; 19 | // } 20 | 21 | // 4.do while: 22 | // let i = 0; 23 | // do{ 24 | // console.log(i); 25 | // i++; 26 | // }while(i < 5); -------------------------------------------------------------------------------- /G25/Lec-31/Whole Class Bunk.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-31/Whole Class Bunk.txt -------------------------------------------------------------------------------- /G25/Lec-34/Revision and Project Discussion.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-34/Revision and Project Discussion.txt -------------------------------------------------------------------------------- /G25/Lec-35-39/Evaluation 1.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-35-39/Evaluation 1.txt -------------------------------------------------------------------------------- /G25/Lec-4/Zerodha_html_V1/img/wikepedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-4/Zerodha_html_V1/img/wikepedia.png -------------------------------------------------------------------------------- /G25/Lec-40/JS Before Eval 1 Topic Revision.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-40/JS Before Eval 1 Topic Revision.txt -------------------------------------------------------------------------------- /G25/Lec-41/Class Test.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-41/Class Test.txt -------------------------------------------------------------------------------- /G25/Lec-43/1.equal_coercion.js: -------------------------------------------------------------------------------- 1 | console.log(); // 2 | 3 | console.log(1 == 1); //Output:true 4 | console.log(1 == "1"); //output: true 5 | console.log([] == 0); //output: true 6 | console.log("" == 1); //output:false 7 | console.log("" == []); // output: true 8 | console.log(1 == "1"); //output: true 9 | -------------------------------------------------------------------------------- /G25/Lec-43/2.type_conversion.js: -------------------------------------------------------------------------------- 1 | console.log(1 + 2); //output:3 2 | console.log(1 + "2"); //output: 12 Explanation: number 1 is coverted into string type before concat with string 2 3 | console.log(typeof (1 + "2")); 4 | console.log(5 - "2"); //output:3; Explanation: string 2 get converted into number type to perform substraction with number 5 5 | 6 | console.log(10 + "A"); //output:10A 7 | console.log(10 - "A"); //output:NaN 8 | console.log(10 + "2" - "A"); //output:NaN 9 | 10 | console.log(10 + "0" + "1"); //output:1001 11 | 12 | // string to number: 13 | let a = "20"; 14 | console.log(typeof a); 15 | let c = Number(a); 16 | console.log(typeof c); 17 | let d = parseInt(a); 18 | console.log(typeof d); 19 | -------------------------------------------------------------------------------- /G25/Lec-44/2.return_keyword.js: -------------------------------------------------------------------------------- 1 | // function termination: 1. function defination 2.return keyword 2 | 3 | function multiply(a, b) { 4 | let c = a * b; 5 | console.log(c); 6 | return c; 7 | console.log(c); 8 | } 9 | multiply(2, 5); 10 | 11 | // function info(name, age) { 12 | // let c = 25; 13 | // // console.log(`My name is ${name}. I am ${age} Years old `); 14 | // } 15 | // info("yash", "25"); 16 | -------------------------------------------------------------------------------- /G25/Lec-45/Hoisting/hoisting.js: -------------------------------------------------------------------------------- 1 | //2. let and const: temparel dead zone: reference error 2 | console.log(a); 3 | myfunc(); 4 | const a = 10; 5 | // console.log(a); 6 | 7 | function myfunc() { 8 | var b = 20; 9 | console.log(b); 10 | } 11 | 12 | // 1.var: undefined: before initialisation 13 | // console.log(a); 14 | // myfunc(); 15 | // var a = 10; 16 | // // console.log(a); 17 | 18 | // function myfunc() { 19 | // var b = 20; 20 | // console.log(b); 21 | // } 22 | -------------------------------------------------------------------------------- /G25/Lec-45/Hoisting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G25/Lec-45/function_expression.js: -------------------------------------------------------------------------------- 1 | // 2. hoisting in anonymous function expression 2 | var a = 17; 3 | 4 | // console.log(myfunc(3)); // Error 5 | 6 | var myfunc = function (num) { 7 | return num ** 3; 8 | }; 9 | // console.log(cube(3)); 10 | // console.log(myfunc(3)); // here it will work 11 | 12 | // // 1. function expression as a anonymous function 13 | 14 | // const val = function(a, b) { 15 | // let c = a + b; 16 | // return c; 17 | // }; 18 | // // console.log(sum(5, 3)); // function name before function annonymous 19 | // // sum(5, 3); 20 | // // console.log(val) 21 | // console.log(val(5, 3)); 22 | -------------------------------------------------------------------------------- /G25/Lec-46/1.HOF.js: -------------------------------------------------------------------------------- 1 | // // HOF: when we pass one function into another function as a argument 2 | 3 | // 2.. 4 | let arr = [2, 4, 6, 8, 9]; 5 | 6 | function evenOrNot(func, arr) { 7 | for (let i = 0; i < 5; i++) { 8 | func(arr[i]); 9 | } 10 | } 11 | const even = function (num) { 12 | if (num % 2 == 0) { 13 | console.log(num); 14 | } else { 15 | console.log("Not even"); 16 | } 17 | }; 18 | 19 | evenOrNot(even, arr); 20 | 21 | // //1.printName is a HOF bcz it takes myname function as a argument. 22 | // function printName(func, num) { 23 | // for (let i = 1; i <= num; i++) { 24 | // func(); 25 | // } 26 | // } 27 | 28 | // let myName = function () { 29 | // console.log("Yash"); 30 | // }; 31 | // printName(myName, 20); 32 | -------------------------------------------------------------------------------- /G25/Lec-46/2.Methods.js: -------------------------------------------------------------------------------- 1 | // Any function that is being defined inside a object is called methods. 2 | 3 | const calulate = { 4 | add: function (a, b) { 5 | return a + b; 6 | }, 7 | sub: function (a, b) { 8 | return a - b; 9 | }, 10 | mul: function (a, b) { 11 | return a * b; 12 | }, 13 | div: function (a, b) { 14 | return a / b; 15 | }, 16 | }; 17 | calulate(); 18 | -------------------------------------------------------------------------------- /G25/Lec-46/3.Iterators.js: -------------------------------------------------------------------------------- 1 | // Iterator: 2 | let str = "yash"; 3 | let obj = { name: "yash" }; 4 | 5 | // for in: gives key 6 | for (let num in obj) { 7 | console.log(num); 8 | console.log(obj[num]); 9 | console.log(obj); 10 | } 11 | console.log(obj); 12 | 13 | // for (let i of obj) { 14 | // console.log(i); 15 | // } 16 | 17 | // for of: gives value 18 | // for (let i of str) { 19 | // let iterator = str[Symbol.iterator](); 20 | // // console.log(iterator); 21 | // } 22 | // let iterator = str[Symbol.iterator](); 23 | // console.log(iterator.next()); 24 | // console.log(iterator.next()); 25 | // console.log(iterator.next()); 26 | 27 | // console.log(str[Symbol.iterator]); 28 | // console.log(obj[Symbol.iterator]); 29 | -------------------------------------------------------------------------------- /G25/Lec-49/3.arrow_function.js: -------------------------------------------------------------------------------- 1 | // 3. arrow function: 2 | let b = () => { 3 | let a = 20; 4 | console.log(a); 5 | }; 6 | console.log(b); 7 | 8 | //2. anonymous function: 9 | // let b = function (){ 10 | // let a = 20; 11 | // console.log(a) 12 | // } 13 | // console.log(b) 14 | 15 | // 1.Normal function: 16 | // function myfun(){ 17 | // let a = 20; 18 | // console.log(a) 19 | // } 20 | -------------------------------------------------------------------------------- /G25/Lec-5/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /G25/Lec-50/ImgToggler/app.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector("img"); 2 | 3 | function imageToggler() { 4 | let isTrue = false; 5 | 6 | setInterval(() => { 7 | if (isTrue) { 8 | image.setAttribute( 9 | "src", 10 | "https://images.unsplash.com/photo-1608889336076-13c5c2dc1ee7?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fHw%3D" 11 | ); 12 | } else { 13 | image.setAttribute( 14 | "src", 15 | "https://images.unsplash.com/photo-1608889476561-6242cfdbf622?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDd8fHxlbnwwfHx8fHw%3D" 16 | ); 17 | } 18 | isTrue = !isTrue; 19 | }, 1000); 20 | } 21 | imageToggler(); 22 | -------------------------------------------------------------------------------- /G25/Lec-50/ImgToggler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Toggler 8 | 9 | 10 | 11 |

Image Toggler

12 | 13 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /G25/Lec-51/1.script.js: -------------------------------------------------------------------------------- 1 | var newh1 = document.querySelector("h1"); 2 | 3 | console.dir(newh1.classList); 4 | 5 | // 1.add class: classList.add() 6 | newh1.classList.add("green"); 7 | console.dir(newh1.classList[1]); 8 | 9 | // 2. remove: classList.remove() 10 | // newh1.classList.remove("green"); 11 | 12 | // 3.contains: check if class is present or not. 13 | var b = newh1.classList.contains("green"); 14 | console.dir(b); 15 | 16 | // 4.toggle: used to remove and add class 17 | newh1.classList.toggle("green"); 18 | newh1.classList.toggle("black"); 19 | -------------------------------------------------------------------------------- /G25/Lec-51/1.style.css: -------------------------------------------------------------------------------- 1 | .green{ 2 | color: green 3 | } -------------------------------------------------------------------------------- /G25/Lec-51/3.control_event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Control Events 8 | 9 | 10 | 11 |

Control Events

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /G25/Lec-51/3.script.js: -------------------------------------------------------------------------------- 1 | let inp = document.querySelector("input"); 2 | inp.addEventListener("keydown", function (e) { 3 | console.log("key:" + e.code); 4 | console.log("value" + e.key); 5 | }); 6 | 7 | // //2. keydown with event value of code and key value 8 | // inp.addEventListener("keydown", function (e) { 9 | // console.log(e); 10 | // console.log("Key was Pressed"); 11 | // }); 12 | 13 | // // 1. keyup: 14 | // inp.addEventListener("keyup", function () { 15 | // console.log("Key was Released"); 16 | // }); 17 | -------------------------------------------------------------------------------- /G25/Lec-51/Profile Update Mini Project/image/img1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-51/Profile Update Mini Project/image/img1.PNG -------------------------------------------------------------------------------- /G25/Lec-51/Profile Update Mini Project/image/img2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-51/Profile Update Mini Project/image/img2.PNG -------------------------------------------------------------------------------- /G25/Lec-53/1.callback.js: -------------------------------------------------------------------------------- 1 | // 2.function second with callback as first 2 | function first() { 3 | console.log("First function"); 4 | } 5 | 6 | function second(call) { 7 | console.log("Second Function"); 8 | call(); 9 | } 10 | // function call: 11 | second(first()); 12 | 13 | // // 1.simple function: 14 | // function first() { 15 | // console.log("First function"); 16 | // } 17 | 18 | // function second() { 19 | // console.log("Second Function"); 20 | // } 21 | // // function call: 22 | // first(); 23 | // second(); 24 | 25 | // 1.synchronous way: 26 | // console.log("Execution started..."); 27 | 28 | // for (let i = 0; i < 1000; i++) { 29 | // console.log("Loop Ends here.."); 30 | // } 31 | // console.log("Execution Ends here.."); 32 | -------------------------------------------------------------------------------- /G25/Lec-56/1.fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API 8 | 9 | 10 | 11 |

API

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /G25/Lec-56/2.async_await.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Asyn Await 8 | 9 | 10 | 11 | 12 |

Async Await

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G25/Lec-56/2.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | 3 | async function getData() { 4 | try { 5 | let res = await fetch(url); 6 | let data = await res.json(); 7 | console.log(res); 8 | console.log(data); 9 | console.log(data.fact); 10 | } catch (e) { 11 | console.log("Error!!", e); 12 | } 13 | } 14 | getData(); 15 | -------------------------------------------------------------------------------- /G25/Lec-56/3.question.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API Homework 8 | 9 | 10 | 11 |

Learning About API

12 |
13 |
Name
14 |
Gender
15 |
Height
16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /G25/Lec-56/3.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://swapi.dev/api/people/1"; 2 | 3 | let container = document.querySelector(".container"); 4 | fetch(url) 5 | .then((data) => data.json()) 6 | .then((data) => { 7 | // console.log(data); 8 | }); 9 | async function getStarwardata() { 10 | let data = await fetch(url); 11 | let resultData = await data.json(); 12 | // console.log(resultData); 13 | showData(resultData); 14 | } 15 | getStarwardata(); 16 | function showData(data) { 17 | container.innerHTML = ""; 18 | let div = document.createElement("div"); 19 | div.innerHTML = `
${data.name}
20 |
${data.gender}
21 |
${data.height}
`; 22 | container.append(div); 23 | } 24 | -------------------------------------------------------------------------------- /G25/Lec-56/4.axios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Axios 8 | 9 | 10 | 11 |

Axio's

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /G25/Lec-56/4.script.js: -------------------------------------------------------------------------------- 1 | let url = "https://catfact.ninja/fact"; 2 | async function getFacts() { 3 | try { 4 | let res = await axios.get(url); 5 | console.log(res.data.fact); 6 | } catch (e) { 7 | console.log("Error", e); 8 | } 9 | } 10 | getFacts(); 11 | -------------------------------------------------------------------------------- /G25/Lec-57/Git_command.txt: -------------------------------------------------------------------------------- 1 | #Basic Linux commands: 2 | 3 | 1)mkdir myproject(makes a new directory) 4 | 2)cd myproject(to change directory) 5 | 3)cd ..(previous directory) 6 | 4)type nul > myfile.txt(creates empty txt file) 7 | 5)echo (to write inside a file) 8 | 6)dir or ls (To see files in directory) 9 | 7)dir /a(To see all files incluing hidden files) 10 | 11 | 12 | *git --version 13 | 14 | * git Installation: https://www.git-scm.com/ 15 | * git configuration: 16 | -> git config --global user.name "webcraftShiva" 17 | -> git config --global user.email "shivam.webcraft@gmail.com" 18 | 19 | 20 | * git init 21 | * git status 22 | * git add -A /or/ git add . 23 | * git commit -m "first commit" /or/ git commit -m file_name 24 | * git log -------------------------------------------------------------------------------- /G25/Lec-57/React.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-57/React.pdf -------------------------------------------------------------------------------- /G25/Lec-57/Source Code Management.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-57/Source Code Management.pdf -------------------------------------------------------------------------------- /G25/Lec-57/local_repo/README.md: -------------------------------------------------------------------------------- 1 | This is a local_repo 2 | 3 | 4 | # This is a feature2 branch -------------------------------------------------------------------------------- /G25/Lec-57/local_repo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

13 | Shivam Singh 14 |

15 |

This is a pargraph

16 | 17 | 18 | -------------------------------------------------------------------------------- /G25/Lec-57/local_repo/script.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color: brown 3 | } -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G25/Lec-57/myFirstApp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-57/myapp/public/favicon.ico -------------------------------------------------------------------------------- /G25/Lec-57/myapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-57/myapp/public/logo192.png -------------------------------------------------------------------------------- /G25/Lec-57/myapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-57/myapp/public/logo512.png -------------------------------------------------------------------------------- /G25/Lec-57/myapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | logo 9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |
21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G25/Lec-57/myapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-58/myfirstapp/public/favicon.ico -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-58/myfirstapp/public/logo192.png -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-58/myfirstapp/public/logo512.png -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Babel from './components/Babel' 3 | 4 | 5 | const App = () => { 6 | return ( 7 | 8 | ) 9 | } 10 | 11 | export default App -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /G25/Lec-58/myfirstapp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myfirstapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/src/components/LearnJSX.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LearnJSX = () => { 4 | 5 | const randomNum = Math.floor(Math.random()*10 +1) 6 | 7 | return ( 8 |
9 |

Learn JSX:

10 |

Random: {Math.floor(Math.random()*5 +1)}

11 |

Random number 1 to 10 : {randomNum}

12 | 13 | 14 |
15 | ) 16 | } 17 | 18 | export default LearnJSX -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/src/components/Person.css: -------------------------------------------------------------------------------- 1 | .person{ 2 | width: 260px; 3 | border: 4px solid #ccc; 4 | margin: 20px; 5 | padding: 16px; 6 | } -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/src/components/Person.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Person.css' 3 | 4 | const Person = ({name,age,crush}) => { 5 | return ( 6 |
7 |

Name: {name}

8 |

Age: {age}

9 |

Crush: {crush}

10 |
11 | ) 12 | } 13 | 14 | 15 | // const Person = (props) => { 16 | // return ( 17 | //
18 | //

Name: {props.name}

19 | //

Age: {props.age}

20 | //

Crush: {props.crush}

21 | //
22 | // ) 23 | // } 24 | 25 | export default Person -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/src/components/TernaryOperators.jsx: -------------------------------------------------------------------------------- 1 | // Ternary operators: (condition) ? (statement1) : (statement2) 2 | 3 | import React from 'react' 4 | 5 | const TernaryOperators = () => { 6 | 7 | let randomNum = Math.floor(Math.random()*5 +1) 8 | 9 | let luckyNum = 3; 10 | 11 | return ( 12 |
13 |

Are you a lucky on? {random}

14 | {(randomNum === luckyNum) ? 15 |

You are a lucky one

:

ooh! no you have a bad luck boyy

16 | } 17 |
18 | ) 19 | } 20 | 21 | export default TernaryOperators -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import App from './App.jsx' 3 | import './index.css' 4 | 5 | createRoot(document.getElementById('root')).render( 6 | // component: 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /G25/Lec-59/myFirstApp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G25/Lec-6/Job Application form.txt: -------------------------------------------------------------------------------- 1 | JOb Application form given to student in the class and evaluated it while taking there doubts 2 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "myapp", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.11.1", 18 | "@types/react": "^18.3.10", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.2", 21 | "eslint": "^9.11.1", 22 | "eslint-plugin-react": "^7.37.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.12", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import State from './components/State' 3 | import Products from './components/Products/Products' 4 | import ShoppingList from './components/ShoppingList/ShoppingList' 5 | 6 | const App = () => { 7 | return ( 8 | <> 9 | {/* */} 10 | {/* */} 11 | 12 | 13 | ) 14 | } 15 | 16 | export default App -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/components/Products/Product.css: -------------------------------------------------------------------------------- 1 | .product{ 2 | width: 360px; 3 | border: 4px solid #ccc; 4 | } 5 | 6 | .product img{ 7 | width: 360px; 8 | height: 180px; 9 | } 10 | 11 | .product h2{ 12 | padding-left:5px 13 | } -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/components/Products/Products.jsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react' 2 | import './Product.css' 3 | 4 | const Products = (props) => { 5 | 6 | let [price,setPrice]= useState(props.price) 7 | 8 | let handlePrice= () =>{ 9 | setPrice(10) 10 | } 11 | 12 | 13 | return ( 14 |
15 | {props.name} 16 |

{props.name}

17 |

Price: Rs. {price}

18 |
19 | ) 20 | } 21 | 22 | export default Products -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/components/State.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useState } from 'react'; 3 | 4 | const State = () => { 5 | // let count = 0; 6 | 7 | let [count,addCount]=useState(0) 8 | 9 | // let handleCount = () =>{ 10 | // addCount(count - 1) 11 | // } 12 | 13 | return ( 14 |
15 |

Count is: {count}

16 | 17 |
18 | ) 19 | } 20 | 21 | export default State -------------------------------------------------------------------------------- /G25/Lec-60/myapp/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /G25/Lec-60/myapp/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/X-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/X-image.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/ecosystem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/ecosystem.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/fb.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/inst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/inst.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/landing.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/linkedin.jpg -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/telegram.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/whatsapp.png -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/x-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /G25/Lec-7/Zerodha_using_Html_only/img/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-7/Zerodha_using_Html_only/img/youtube.png -------------------------------------------------------------------------------- /G25/Lec-8/Assignment 1 doubt.txt: -------------------------------------------------------------------------------- 1 | Took assignment 1 student doubt and reviewed there assignment and all project work done in html topic -------------------------------------------------------------------------------- /G25/Lec-9/Assignment 2 check and doubt session.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebcraftShiva/FEE-II_2024/ca0d0102acaeff99470c3046ecf99745c14305a9/G25/Lec-9/Assignment 2 check and doubt session.txt --------------------------------------------------------------------------------