Friday, May 24, 2024
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.
Wednesday, May 8, 2024
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 startThis 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@latestStep 2: Navigate into your project directory
Navigate into your project directory by running:
cd my-react-appStep 3: Install Vite as a development dependency
Install Vite in your project as a development dependency:
npm run devThat's it! You've successfully set up a React project with Vite using npm.
Thursday, April 18, 2024
Friday, November 10, 2023
Mobile
| 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')">√</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()">⌫</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>
Subscribe to:
Posts (Atom)
-
How to solve EEPROM ERROR in china tv kit Hi friends if you "EEPROM ERROR PLEASE CHECK" fault in your china ... -
Youtube Videos Download Any Online Videos - wasimteach.blogspot.com ...
-
How to Reset Easypaisa Account Pin Code. How To Recover Easypaisa Pin Code . How to forget Easypaisa PinCode. Hello Friends Assla...