Intermediate Coders: Use JavaScript to Make Web Apps and Art

Understand what SVG is, how vector graphics differ from raster images, and why scalable SVGs are ideal for logos and icons. Learn inline SVG, styling shapes, and JavaScript interactivity.

Explore three common ways to use svgs: inline svg, image tag, and css background, and learn to create a rectangle with width, height, and fill, plus simple javascript-based manipulation.

Learn to render rectangles and circles with code, control their position using x and y coordinates, define size with width, height, and radius, and apply fill and stroke colors.

Create lines in web apps using simple coordinates, start and end points, and stroke width. Set stroke color to black or gold to shape simple designs.

Explore how to set SVG width and height and use viewBox to zoom and crop regions. Practice shaping rectangles and circles with varied fills to see the viewBox effect.

Use the polygon element to draw shapes by listing points as x,y coordinates, connect them with lines, fill the interior, and apply stroke for triangles and other polygons.

Add and close multiple polygons by specifying coordinates, then create an inner triangle with white fill and a black stroke using example points such as 50 200 and 200 100.

Explore drawing complex polygons with svga by defining points to form a star, enabling stroke and fill to reveal lines and shapes, and experiment with abstract art.

Explore how the view box attribute controls zoom and display by adjusting x, y, width, and height, and how it relates to the viewport for scaling.

Explore how viewBox attributes enable SVGs to scale with the viewing window by removing explicit width and height, allowing auto-resizing and zooming within the viewport.

Explore the path element and its d attribute, using M, L, H, and V commands with absolute or relative coordinates to define the starting point and craft complex shapes.

Continue exploring path elements by grouping shapes with the G keyword and adding multiple paths inside 300 by 300, using the Z command and a CSS class like upper to set teal fill.

Explore Bezier curves in paths using the c command to form cubic curves with start, end, and two control points; visualize the curve with guide points.

Master Bezier curves by composing shapes and charts through curve logic and adjustable control points, creating smooth squiggly lines, and applying stroke and fill settings for visuals.

Learn how to build more complex Bezier curves in SVG using path d, cubic 'C' commands, and successive 's' reflections, then optionally add lines to shape intricate graphics.

Explore SVG arcs in JavaScript by using the path 'a' command with rx and ry radii, x-axis rotation, and the large-arc and sweep flags to draw circular or elliptical curves.

Explore SVG edit, an online SVG editor, to create simple SVGs, adjust fills and text, and export as SVG or PNG; note that complex shapes are hard to code.

Style inline svg to target parts with css transitions and animations. Group foliage with a g element, hover to change color, and apply wind-like transforms with fixed height and width.

Explore loading scalable vector graphics in an img tag or as a background, export SVG assets, and control sizing with inline styles to build dynamic, text-heavy logos and web UI.

Learn to use SVG as a responsive background image with CSS and media queries, scale with percentage widths, and set explicit heights for crisp, centered backgrounds.

Render a circle on top of existing SVG elements and generate multiple red circles with JavaScript by grouping them and constraining placement within the outer rectangle for tree-like structures.

Create pine trees by exporting a triangle path, grouping it as pine, and using SVGA's use with xlink to place 20 trees at random coordinates.

Learn to procedurally generate trees in SVG by cloning a base pine element, randomizing x and y coordinates, and adjusting transforms to create varied sizes within bounds.

Refactor your JavaScript project by removing unused code and consolidating repeated logic, extract a getRandom function, and implement a remove all pine trees button that cleans up the dom.

Leverage data-y-axis attributes to store y coordinates and access them with element.dataset.yAxis for sorting by y axis, enabling reusable tree rendering.

Refactor repetitive DOM attribute assignments by introducing a reusable setAttributes function that uses a for-in loop to iterate over object keys and applies attributes like class and data-y-axis to elements.

Implement client-side saving of SVGA as an SPG file by wiring a save button and file name input, creating a blob, and triggering a browser download.

Create and download an SVG file from blob data using object URLs, a dynamic download link, and a delayed revoke of the URL to release resources.

Learn to save your app art as a png file by drawing on a canvas, creating a downloadable image, and adding a name validation check for unnamed files.

This lecture demonstrates refactoring image download logic into a reusable function, wiring up buttons with data-format attributes to download svg or png images via blob creation, conversion, and cleanup.

Refactor a function to do one thing, convert to a draft format, return the draft, and trigger a download after arrival, using callback and promise patterns with an SVGA URL.

Refactor three image-related functions into a single object with methods like save image, convert to png, and download image, ensuring correct this binding and streamlined event handling.

Refactor the main functionality into a tree generator object initialized on dom content loaded, encapsulating variables to create oak and pine trees sorted by y axis on the terrain.

Continue refactoring by turning the attributes function into a method, using this and indentation. Encapsulate randomization and order by y axis in the object, test with pine and oak trees.

Test cross-browser compatibility for Chrome, Safari, and Firefox, fix syntax and data attribute issues, ensure proper layering, and verify exports to SVG and PNG across browsers.

Intermediate coders learn to ensure the dom is loaded before accessing elements by placing event listeners in a domcontentloaded handler, ensuring scripts run after the dom parses.

Apply resets and box-sizing border-box, center the main container using margin auto at 80vw, and style buttons with hover and active feedback for a clean, responsive ui.

Adjust button widths and input alignment for full-width use, then implement media queries to improve mobile responsiveness. Center controls and use flex wrap to reflow with breakpoints.

Apply responsive CSS tweaks: adjust margins, set button widths to 80vw, and add a 575px breakpoint with inherit widths to resize inputs properly across browsers.

Refactor JavaScript for intermediate coders by conditionally setting dimensions based on format, preventing unwanted width and height when downloading as PMG, and streamline DOM handling with forEach and event listeners.

Add a size reset button to reset width and height inputs for maintaining aspect ratio, refine modal button interactions, and ensure consistent behavior across browsers.

Conclude the web app project by enabling a cursor pointer on hover for visual feedback. Tinker with different backgrounds, objects, animations, and aspect ratio preservation to extend the project.