diff --git a/content/javascript/concepts/dom-manipulation/terms/getelementbyid/getelementbyid.md b/content/javascript/concepts/dom-manipulation/terms/getelementbyid/getelementbyid.md new file mode 100644 index 00000000000..22e4d005eb7 --- /dev/null +++ b/content/javascript/concepts/dom-manipulation/terms/getelementbyid/getelementbyid.md @@ -0,0 +1,54 @@ +--- +Title: '.getElementById' +Description: 'Returns the element objects representing element whose id property matches the string provided.' +Subjects: + - 'Computer Science' + - 'Game Development' + - 'Web Development' + - 'Web Design' +Tags: + - 'Arguments' + - 'Functions' + - 'Parameters' +CatalogContent: + - 'introduction-to-javascript' + - 'paths/front-end-engineer-career-path' +--- + +In javascript, the **_getElementById()_** method of the `Document` interface returns an `Element` object representing the element whose `id` property matches the specified string. + +## Syntax + +```pseudo +document.getElementById(id) +``` + +-`id`:is the ID of the element to locate. Within the document, the ID is case_sensititve and should be unique to just one element. + +## Example + +```HTML + + + + +

Codecademy

+

The getElementById() Method

+ + + + + + +``` + +- `Result`: + + - The example will display the element with a matching string `id` _atd_ as blue. + +- `Output`: + +![Display of color of an element after getElementById() method](../../../../../../media/getelementbyid.png) diff --git a/content/javascript/concepts/window/terms/resizeTo/resizeTo.md b/content/javascript/concepts/window/terms/resizeTo/resizeTo.md deleted file mode 100644 index 32eead70662..00000000000 --- a/content/javascript/concepts/window/terms/resizeTo/resizeTo.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -Title: '.resizeTo()' -Description: 'Resizes the browser window to the specified width and height in pixels.' -Subjects: - - 'Web Development' - - 'Computer Science' -Tags: - - 'Arguments' - - 'Functions' - - 'Parameters' -CatalogContent: - - 'introduction-to-javascript' - - 'paths/front-end-engineer-career-path' ---- - -In JavaScript, the **`.resizeTo()`** function resizes the browser window to the given width and height in pixels. - -## Syntax - -```pseudo -window.resizeTo(width, height); -``` - -- `width`: Indicates the width of the window in pixels after resizing. -- `height`: Indicates the height of the window in pixels after resizing. - -## Example - -Here is an example to demonstrate the use of the `.resizeTo()` function: - -```js -window.resizeTo(298, 57); -``` - -The above example will resize the window to a width of _298_ pixels and height of _57_ pixels. diff --git a/content/javascript/concepts/window/terms/scrollTo/scrollTo.md b/content/javascript/concepts/window/terms/scrollTo/scrollTo.md new file mode 100644 index 00000000000..499a88a68a2 --- /dev/null +++ b/content/javascript/concepts/window/terms/scrollTo/scrollTo.md @@ -0,0 +1,59 @@ +--- +Title: '.scrollTo()' +Description: 'Scrolls document to specified coordinate in pixels' +Subjects: + - 'Computer Science' + - 'Web Development' +Tags: + - 'Arguments' + - 'Functions' + - 'Parameters' +CatalogContent: + - 'introduction-to-javascript' + - 'paths/front-end-engineer-career-path' +--- + +In JavaScript, **`.scrollTo()`** scrolls the window or document to a specified position in pixels. + +## Syntax + +```pseudo +window.scrollTo(x, y) +``` + +- `x`: The horizontal coordinate (in pixels) to scroll to. +- `y`: The vertical coordinate (in pixels) to scroll to. + +Or, alternatively: + +```pseudo +window.scrollTo(options) +``` + +- `options`: An object with the following optional properties: + - `left`: The horizontal scroll position in pixels. + - `top`: The vertical scroll position in pixels. + - `behavior`: Defines the scrolling behavior. Accepted values: + - `smooth`: Scrolls with an animation. + - `instant`: Scrolls immediately. + - `auto`: Uses the browser's default scrolling behavior. + +## Example 1 + +The code below scrolls the window to _298_ pixels from the left (x-axis) and _57_ pixels from the top (y-axis) using absolute coordinates: + +```js +window.scrollTo(298, 57); +``` + +## Example 2 + +The code below scrolls the window smoothly to _57_ pixels from the top (y-axis) and _298_ pixels from the left (x-axis) using the options object: + +```js +window.scrollTo({ + top: 57, + left: 298, + behavior: 'smooth', +}); +``` diff --git a/content/plotly/concepts/graph-objects/terms/carpet/carpet.md b/content/plotly/concepts/graph-objects/terms/carpet/carpet.md new file mode 100644 index 00000000000..80ebf31ee3f --- /dev/null +++ b/content/plotly/concepts/graph-objects/terms/carpet/carpet.md @@ -0,0 +1,50 @@ +--- +Title: '.Carpet()' +Description: 'Creates visualization technique that displays interaction between variables' +Subjects: + - 'Data Science' + - 'Data Visualization' +Tags: + - 'Data' + - 'Finance' + - 'Plotly' + - 'Graphs' + - 'Data Visualization' +CatalogContent: + - 'learn-python-3' + - 'paths/data-visualization' +--- + +The **`.Carpet()`** , which is referred specifically as "carpet plot", is a Plotly function used to display interaction between one or more independent variables and one or more dependent variable in a two-dimensional plot. + +## Syntax + +```pseudo +plotly.graph_objects.Carpet(a=None,b=None,x=None, y=None, ...) + +``` + +- `a`: First parameter values as an array +- `b`: Second parameter values as an array. +- `x`: (optional) It is a two dimensional x-coordinates at each carpet point and when omitted, the plot is a cheater plot and x-axis is hidden by default +- `y` : It is a two dimensional y-coordinates at each carpet point. + +- The ellipses is an indication of optional paratemeters that can be added. + +## Example + +```py +from plotly import graph_objects as go + + +fig = go.Figure(go.Carpet( + a = [4, 4, 4, 6.5, 6.5, 6.5, 5, 5, 5, 8, 8, 8], + b = [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3], + y = [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10], +)) + +fig.show() +``` + +**Output** +![.Carpet() showing the output of thge above plot.](../../../../../../media/carpet_plot.png) diff --git a/media/carpet_plot.png b/media/carpet_plot.png new file mode 100644 index 00000000000..b78ac9cd7a2 Binary files /dev/null and b/media/carpet_plot.png differ diff --git a/media/getelementbyid.png b/media/getelementbyid.png new file mode 100644 index 00000000000..1ecd4629dad Binary files /dev/null and b/media/getelementbyid.png differ diff --git a/package.json b/package.json index 25ccb7da153..8925e9b1087 100644 --- a/package.json +++ b/package.json @@ -40,5 +40,6 @@ "validate-content-tree": "node .github/scripts/validate-content-tree.js" }, "license": "UNLICENSED", - "version": "1.0.0" + "version": "1.0.0", + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" }