please work

rohitd3 · May 23, 2023 · 097813c · 097813c
1 parent 6d88f54
commit 097813c
Showing 1 changed file with 192 additions and 0 deletions.
diff --git a/_notebooks/2023-05-19-adiJS.ipynb b/_notebooks/2023-05-19-adiJS.ipynb
@@ -0,0 +1,192 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Adi Javasript\n",
+    "> Javascrpit\n",
+    "\n",
+    "- title: javascript stuff\n",
+    "- badges: true\n",
+    "- toc: true\n",
+    "- comments: true\n",
+    "- categories: [collegeboard]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<canvas id=\"interactiveCanvas\" width=\"400\" height=\"400\"></canvas>\n",
+       "<button id=\"clearButton\">Clear</button>\n",
+       "<div>\n",
+       "    <input type=\"range\" id=\"sizeSlider\" min=\"5\" max=\"50\" value=\"10\">\n",
+       "    <label for=\"sizeSlider\">Circle Size</label>\n",
+       "</div>\n",
+       "<div>\n",
+       "    <input type=\"color\" id=\"colorSelector\" value=\"#000000\">\n",
+       "    <label for=\"colorSelector\">Circle Color</label>\n",
+       "</div>\n",
+       "\n",
+       "<script>\n",
+       "var canvas = document.getElementById(\"interactiveCanvas\");\n",
+       "var context = canvas.getContext(\"2d\");\n",
+       "var isDrawing = false;\n",
+       "var circleSize = 10;\n",
+       "var circleColor = \"#000000\";\n",
+       "\n",
+       "canvas.addEventListener(\"mousedown\", startDrawing);\n",
+       "canvas.addEventListener(\"mousemove\", draw);\n",
+       "canvas.addEventListener(\"mouseup\", stopDrawing);\n",
+       "canvas.addEventListener(\"mouseout\", stopDrawing);\n",
+       "\n",
+       "document.getElementById(\"clearButton\").addEventListener(\"click\", clearCanvas);\n",
+       "document.getElementById(\"sizeSlider\").addEventListener(\"input\", updateCircleSize);\n",
+       "document.getElementById(\"colorSelector\").addEventListener(\"input\", updateCircleColor);\n",
+       "\n",
+       "function startDrawing(event) {\n",
+       "    isDrawing = true;\n",
+       "    draw(event);\n",
+       "}\n",
+       "\n",
+       "function draw(event) {\n",
+       "    if (!isDrawing) {\n",
+       "        return;\n",
+       "    }\n",
+       "\n",
+       "    var x = event.clientX - canvas.getBoundingClientRect().left;\n",
+       "    var y = event.clientY - canvas.getBoundingClientRect().top;\n",
+       "\n",
+       "    context.fillStyle = circleColor;\n",
+       "    context.beginPath();\n",
+       "    context.arc(x, y, circleSize, 0, Math.PI * 2);\n",
+       "    context.closePath();\n",
+       "    context.fill();\n",
+       "}\n",
+       "\n",
+       "function stopDrawing() {\n",
+       "    isDrawing = false;\n",
+       "}\n",
+       "\n",
+       "function clearCanvas() {\n",
+       "    context.clearRect(0, 0, canvas.width, canvas.height);\n",
+       "}\n",
+       "\n",
+       "function updateCircleSize(event) {\n",
+       "    circleSize = parseInt(event.target.value);\n",
+       "}\n",
+       "\n",
+       "function updateCircleColor(event) {\n",
+       "    circleColor = event.target.value;\n",
+       "}\n",
+       "</script>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "%%html\n",
+    "<canvas id=\"interactiveCanvas\" width=\"400\" height=\"400\"></canvas>\n",
+    "<button id=\"clearButton\">Clear</button>\n",
+    "<div>\n",
+    "    <input type=\"range\" id=\"sizeSlider\" min=\"5\" max=\"50\" value=\"10\">\n",
+    "    <label for=\"sizeSlider\">Circle Size</label>\n",
+    "</div>\n",
+    "<div>\n",
+    "    <input type=\"color\" id=\"colorSelector\" value=\"#000000\">\n",
+    "    <label for=\"colorSelector\">Circle Color</label>\n",
+    "</div>\n",
+    "\n",
+    "<script>\n",
+    "var canvas = document.getElementById(\"interactiveCanvas\");\n",
+    "var context = canvas.getContext(\"2d\");\n",
+    "var isDrawing = false;\n",
+    "var circleSize = 10;\n",
+    "var circleColor = \"#000000\";\n",
+    "\n",
+    "canvas.addEventListener(\"mousedown\", startDrawing);\n",
+    "canvas.addEventListener(\"mousemove\", draw);\n",
+    "canvas.addEventListener(\"mouseup\", stopDrawing);\n",
+    "canvas.addEventListener(\"mouseout\", stopDrawing);\n",
+    "\n",
+    "document.getElementById(\"clearButton\").addEventListener(\"click\", clearCanvas);\n",
+    "document.getElementById(\"sizeSlider\").addEventListener(\"input\", updateCircleSize);\n",
+    "document.getElementById(\"colorSelector\").addEventListener(\"input\", updateCircleColor);\n",
+    "\n",
+    "function startDrawing(event) {\n",
+    "    isDrawing = true;\n",
+    "    draw(event);\n",
+    "}\n",
+    "\n",
+    "function draw(event) {\n",
+    "    if (!isDrawing) {\n",
+    "        return;\n",
+    "    }\n",
+    "\n",
+    "    var x = event.clientX - canvas.getBoundingClientRect().left;\n",
+    "    var y = event.clientY - canvas.getBoundingClientRect().top;\n",
+    "\n",
+    "    context.fillStyle = circleColor;\n",
+    "    context.beginPath();\n",
+    "    context.arc(x, y, circleSize, 0, Math.PI * 2);\n",
+    "    context.closePath();\n",
+    "    context.fill();\n",
+    "}\n",
+    "\n",
+    "function stopDrawing() {\n",
+    "    isDrawing = false;\n",
+    "}\n",
+    "\n",
+    "function clearCanvas() {\n",
+    "    context.clearRect(0, 0, canvas.width, canvas.height);\n",
+    "}\n",
+    "\n",
+    "function updateCircleSize(event) {\n",
+    "    circleSize = parseInt(event.target.value);\n",
+    "}\n",
+    "\n",
+    "function updateCircleColor(event) {\n",
+    "    circleColor = event.target.value;\n",
+    "}\n",
+    "</script>\n"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3.10.6 64-bit",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.6"
+  },
+  "orig_nbformat": 4,
+  "vscode": {
+   "interpreter": {
+    "hash": "b0fa6594d8f4cbf19f97940f81e996739fb7646882a419484c72d19e05852a7e"
+   }
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}