From 53a40e5764c3ee9e08d86a581f0a28819131efb3 Mon Sep 17 00:00:00 2001 From: VijayaAdamane <95336658+VijayaAdamane@users.noreply.github.com> Date: Wed, 14 Feb 2024 21:28:47 +0530 Subject: [PATCH] Add files via upload --- App.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++ App.js | 47 ++++++++++++++++++++++++++++ App.test.js | 8 +++++ index.css | 13 ++++++++ index.js | 17 +++++++++++ logo.svg | 1 + reportWebVitals.js | 13 ++++++++ setupTests.js | 5 +++ 8 files changed, 180 insertions(+) create mode 100644 App.css create mode 100644 App.js create mode 100644 App.test.js create mode 100644 index.css create mode 100644 index.js create mode 100644 logo.svg create mode 100644 reportWebVitals.js create mode 100644 setupTests.js diff --git a/App.css b/App.css new file mode 100644 index 0000000..351792f --- /dev/null +++ b/App.css @@ -0,0 +1,76 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.head{ + + background-color:purple; + display: flex; + flex-direction: column; + align-items: start; + +} +h1 { + margin-left: 9px; +} +p{ + margin-left: 9px; + font-size: auto; + +} +button{ + width: 90px; + padding: 8px; + margin: 10px; + border-radius: 9px; + height: 60px; + background-color: #04AA6D; + font-size: 15px; +} + +.four-columns{ + margin-top: 35px; + display: flex; + flex-direction: row; + gap:1em; + +} +/* .four-columns{ +display: grid; +grid-template-columns: repeat(50, 1fr); +} */ \ No newline at end of file diff --git a/App.js b/App.js new file mode 100644 index 0000000..cb89a53 --- /dev/null +++ b/App.js @@ -0,0 +1,47 @@ +import logo from './logo.svg'; +import './App.css'; + +function App() { + return ( +
+
+

Say hello to
ReactJS

+

You will learn a Frontend framework from scratch to become an Ninka Developer

+ + +
+
+
+ + +

Declarative

+

React makes it painless to create interactive UIs.

+ +
+
+ + +

Components

+

Build encapsulates components that manage their state

+ +
+
+ + +

Single-Way

+

A set of immutable values are passed to the components

+ +
+
+ + +

JSX

+

Statically-typed designed to run on modern browsers

+ +
+
+
+ ); +} + +export default App; diff --git a/App.test.js b/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/index.css b/index.css new file mode 100644 index 0000000..ec2585e --- /dev/null +++ b/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..d563c0f --- /dev/null +++ b/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/reportWebVitals.js b/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/setupTests.js b/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';