Draw X Code

<button onclick="drawX()">Draw X</button> <!-- Button to call the 'drawX' function when clicked -->
<button onclick="eraseAll()">Erase all</button> <!-- Button to call the 'eraseAll' function when clicked -->
<canvas height="400" id="field1" width="500"></canvas> <!-- HTML5 canvas element with a specific width and height, given the id 'field1' -->
<script>
// Function to draw X
function drawX(){
const sketch1 = document.querySelector('#field1'); // Get the canvas element with the id 'field1'
if (!sketch1.getContext) { return; } // Check if the canvas is supported in the browser
const ctx = sketch1.getContext('2d'); // Get the 2D drawing context of the canvas
// Set line stroke and line width
ctx.strokeStyle = 'red'; // Set the line color to red
ctx.lineWidth = 5; // Set the line width to 5 pixels
// Draw a red X using lines
x1 = 0; y1 = 0;
x2 = 500; y2 = 400;
x3 = 500; y3 = 0;
x4 = 0; y4 = 400;
ctx.moveTo(x1, y1); // Move to the starting point
ctx.lineTo(x2, y2); // Draw a line to the ending point
ctx.moveTo(x3, y3); // Move to another point
ctx.lineTo(x4, y4); // Draw another line to the ending point
ctx.stroke(); // Display the lines on the canvas
}
// Function to erase all
function eraseAll(){
const sketch2 = document.querySelector('#field1'); // Get the same canvas element with the id 'field1'
if (!sketch2.getContext) { return; } // Check if the canvas is supported in the browser
const ctx2 = sketch2.getContext('2d'); // Get the 2D drawing context of the canvas
ctx2.clearRect(0, 0, sketch2.width, sketch2.height); // Clear the entire canvas
}
</script> 
// Contributor: GeneralAstronomy110@gmail.com

Draw X

Calculator

<h1>Calculator</h1>
<input type="number" id="num1" placeholder="First number">
<input type="number" id="num2" placeholder="Second number">
<input type="number" id="result" placeholder="Result">
<br />
<button type="button" onclick="plus()">+</button>
<button type="button" onclick="minus()">-</button>
<button type="button" onclick="product()">*</button>
<button type="button" onclick="divide()">/</button>
<script>
result=0.;
// Function to perform the calculation
function plus() {
z=0.;x=0.;y=0.;
x = document.getElementById('num1').value;
y = document.getElementById('num2').value;
z = Number(x) + Number(y);
// Display the result
document.getElementById('result').value = z;
}
function minus() {
result=0.;x=0.;y=0.;
x = document.getElementById('num1').value;
y = document.getElementById('num2').value;
result = x - y;
// Display the result
document.getElementById('result').value = result;
}
function product() {
result=0.;x=0.;y=0.;
x = document.getElementById('num1').value;
y = document.getElementById('num2').value;
result = x * y;
// Display the result
document.getElementById('result').value = result;
}
function divide() {
result=0.;x=0.;y=0.;
x = document.getElementById('num1').value;
y = document.getElementById('num2').value;
result = x / y;
// Display the result
document.getElementById('result').value = result;
}
</script>

Spiral

<button onclick="drawSpiral()">Draw Spiral</button>
<canvas height="400" id="canvas" width="400">
</canvas>
<script>
// Get the canvas element and its context
function drawSpiral() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// draw a red line
a=0;r=0;i=0, n=4*2*Math.PI,dr=0.05,x0=200,y0=200;
ctx.beginPath();
ctx.moveTo(x0, y0);
for(a=0;a<n;a+=0.01){
ctx.lineTo(200+r*Math.cos(a), 200+r*Math.sin(a));
r+=dr;
}
ctx.stroke();
}
</script>

HTML JavaScript Code

<button onclick="draw()">Draw Square</button>
<canvas height="400" id="canvas" width="500">
</canvas>
<script>
function draw() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// draw a red line
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.lineTo(100, 100);
ctx.stroke();
}
</script>

π²/6

#include <math.h>
#include <iostream>
#include <cmath>
using namespace std;
double p01 (int N)
{
double s = 0 ;
for (int i = 1; i <= N; i++) s = s + 1./(i*i);
return (s);
}
int main ()
{
int n;
cout << "N=";
cin >> n;
cout << " s=" << p01(n) << "\nπ²/6=" << M_PI*M_PI/6. << endl;
}

Mathematical Expressions

 Develop programs for the following mathematical expressions (equalities).

A program must show by numerical calculation that the formula on the left side of the equality is equal (or not equal) to the limit of the sum indicated on the right side of the equality.

Organize the calculations of the sums by separate functions.

Sum of Infinite Series

#include <iostream>

#include <cmath>
using namespace std;

double p10 (int N)
{
   double s = 1, pm = -1, k = 1;
   for (int i = 1; i <= N; i++)
   {
   k = k * i;
   s = s + pm / k;
   pm *= -1;
   }
return (s);
}

int main ()
{
int n;
cout << "N=";
cin >> n;
cout << " s=" << p10 (n) << "\n1./e=" << 1. / exp (1.) << endl;
}