Type script

Running your first TypeScript program using Visual Studio Code (VS Code) involves several steps. Here’s a step-by-step guide:

### 1. Install Node.js and npm

Ensure you have Node.js and npm (Node Package Manager) installed. You can download and install them from [nodejs.org](https://nodejs.org/). To verify the installation, open a terminal and run:

```bash

node -v

npm -v

```

### 2. Install TypeScript

Install TypeScript globally using npm:

```bash

npm install -g typescript

```

Verify the installation:

```bash

tsc -v

```

### 3. Set Up Your Project

Create a new folder for your TypeScript project. Open this folder in VS Code.

### 4. Initialize npm

Initialize a new Node.js project by running:

```bash

npm init -y

```

This will create a `package.json` file.

### 5. Create a tsconfig.json File

Generate a `tsconfig.json` file to configure the TypeScript compiler:

```bash

tsc --init

```

This command creates a `tsconfig.json` file with default settings.

### 6. Write Your TypeScript Code

Create a new file with a `.ts` extension, for example `app.ts`, and write your TypeScript code. Here's a simple example:

```typescript

function greet(name: string): string {

    return `Hello, ${name}!`;

}

const user = 'World';

console.log(greet(user));

```

### 7. Compile TypeScript Code

Compile your TypeScript code to JavaScript. Run the following command in the terminal:

```bash

tsc

```

This command compiles all `.ts` files in the project based on the configuration in `tsconfig.json`. It generates corresponding `.js` files.

### 8. Run the JavaScript File

Run the compiled JavaScript file using Node.js:

```bash

node app.js

```

### Summary of Commands

1. Install TypeScript globally:

    ```bash

    npm install -g typescript

    ```

2. Create a new folder and open it in VS Code:

    ```bash

    mkdir my-typescript-project

    cd my-typescript-project

    code .

    ```

3. Initialize npm and TypeScript configuration:

    ```bash

    npm init -y

    tsc --init

    ```

4. Create and write TypeScript code in `app.ts`.

5. Compile the TypeScript code:

    ```bash

    tsc

    ```

6. Run the compiled JavaScript code:

    ```bash

    node app.js

    ```

By following these steps, you should be able to run your first TypeScript program using Visual Studio Code.

React Class 2

Run First Page in React

In this guide, we'll walk through running your first page in a React application.

Step 1: Create a React Component

Start by creating a new React component. You can create a file called FirstPage.js in the src folder of your React project.

// FirstPage.js

import React from 'react';

function FirstPage() {
    return (
        <div>
            <h1>Welcome to Your First Page</h1>
            <p>This is the first page of your React application.</p>
        </div>
    );
}

export default FirstPage;

Step 2: Import and Render the Component

Next, import and render the FirstPage component in your App.js file or any other main component of your React application.

// App.js

import React from 'react';
import FirstPage from './FirstPage';

function App() {
    return (
        <div className="App">
            <FirstPage />
        </div>
    );
}

export default App;

Step 3: Run Your React Application

Now, run your React application by executing the following command in your terminal:

npm start

This command will start the development server, and you should be able to view your first page in your browser at http://localhost:3000.

That's it! You've successfully run your first page in a React application.

React Class 1

Get Started with React and Vite using npm

In this guide, we'll walk through setting up a React project with Vite using npm.

Step 1: Create a new React project

Open your terminal or command prompt and run the following command to create a new React project:

npm create vite@latest

Step 2: Navigate into your project directory

Navigate into your project directory by running:

cd my-react-app

Step 3: Install Vite as a development dependency

Install Vite in your project as a development dependency:

npm run dev

That's it! You've successfully set up a React project with Vite using npm.

Css Class 1

HTML & CSS Editor

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>First CSS Class</title> <style> /* CSS for First Class */ .first-class { color: blue; font-size: 20px; } </style> </head> <body> <div class="content"> <h1>Welcome to My First CSS Class</h1> <p class="first-class">This paragraph is styled using the .first-class CSS class.</p> </div> </body> </html>

Output

Welcome to My First CSS Class

This paragraph is styled using the .first-class CSS class.

Mobile

November 2023

Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Source Code of the Calculator

Scientific Calculator Source Code

        

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Scientific Calculator</title>
    <style>
        .calculator {
            background: #444; /* Darker background color */
            border: 2px solid #555; /* Dark border */
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            max-width: 300px;
            margin: auto;
            padding: 20px;
        }
        input, button {
            width: 50px;
            height: 50px;
            font-size: 20px;
            margin: 5px;
            border-radius: 5px;
            border: 1px solid #666; /* Darker border */
        }
        input {
            width: calc(100% - 20px);
            padding: 10px;
            font-size: 24px;
            border: none;
            border-radius: 5px;
            text-align: right;
            margin-bottom: 10px;
            background-color: #555; /* Darker input background color */
            color: #fff; /* Light text color */
        }
        button.C {
            background-color: #FF5733;
            color: white;
        }
        button.C:hover {
            background-color: #E74C3C;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #666; /* Darker hover color */
            color: #a52a2a; /* Brown text color */
            cursor: pointer;
        }
       
    </style>
</head>
<body id="a">
    <div class="calculator">
        <input id="display" readonly="" type="text" />
        <br />
        <button onclick="appendFunction('Math.sqrt')">&#8730;</button>
        <button onclick="appendFunction('Math.pow')">x<sup>y</sup></button>
        <button onclick="appendFunction('Math.sin')">sin</button>
        <button onclick="appendFunction('Math.cos')">cos</button>
        <br />
        <button onclick="appendFunction('Math.tan')">tan</button>
        <button onclick="appendFunction('Math.log')">log</button>
        <button onclick="appendFunction('Math.exp')">exp</button>
        <button onclick="appendFunction('Math.PI')">π</button>
        <br />
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="appendOperator('+')">+</button>
        <br />
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="appendOperator('-')">-</button>
        <br />
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="appendOperator('*')">*</button>
        <br />
        <button onclick="appendNumber('0')">0</button>
        <button onclick="appendDecimal()">.</button>
        <button onclick="calculateResult()">=</button>
        <button onclick="appendOperator('/')">/</button>
        <br />
        <button onclick="backspace()">&#9003;</button>
        <button onclick="calculatePercentage()">%</button>
        <button onclick="appendBraces('(')"> ( </button>
        <button onclick="appendBraces(')')"> ) </button>
        <button class="C" onclick="clearDisplay()">C</button>
    </div>
    <script>
        function appendNumber(number) {
            document.getElementById('display').value += number;
        }
        function appendOperator(operator) {
            document.getElementById('display').value += operator;
        }
        function appendDecimal() {
            var displayValue = document.getElementById('display').value;
            if (displayValue.indexOf('.') === -1) {
                document.getElementById('display').value += '.';
            }
        }
        function appendFunction(func) {
            document.getElementById('display').value += func + '(';
        }
        function clearDisplay() {
            document.getElementById('display').value = '';
        }
        function backspace() {
            var displayValue = document.getElementById('display').value;
            document.getElementById('display').value = displayValue.slice(0, -1);
        }
        function calculateResult() {
            try {
                var displayValue = document.getElementById('display').value;
                var result = eval(displayValue);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
        function calculatePercentage() {
            var displayValue = document.getElementById('display').value;
            document.getElementById('display').value = eval(displayValue + '/100');
        }
        function appendBraces(braces) {
            document.getElementById('display').value += braces;
        }
    </script>
</body>
</html>

        
    

Sample Calculater Preview