{"id":19795258,"url":"https://github.com/kpwithcode/shape-up-or-shape-out","last_synced_at":"2025-08-31T20:46:38.906Z","repository":{"id":101882371,"uuid":"162622678","full_name":"KPWithCode/Shape-Up-or-Shape-Out","owner":"KPWithCode","description":"Building a webpage that will enable users to draw shapes of varying sizes on the screen","archived":false,"fork":false,"pushed_at":"2019-01-05T09:51:48.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T04:49:09.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KPWithCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-20T19:25:01.000Z","updated_at":"2019-01-05T09:51:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"077bc584-d967-432f-8235-57546809e20e","html_url":"https://github.com/KPWithCode/Shape-Up-or-Shape-Out","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPWithCode%2FShape-Up-or-Shape-Out","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPWithCode%2FShape-Up-or-Shape-Out/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPWithCode%2FShape-Up-or-Shape-Out/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPWithCode%2FShape-Up-or-Shape-Out/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KPWithCode","download_url":"https://codeload.github.com/KPWithCode/Shape-Up-or-Shape-Out/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241137258,"owners_count":19916091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T07:15:52.387Z","updated_at":"2025-02-28T10:21:43.758Z","avatar_url":"https://github.com/KPWithCode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shape Up Or Shape Out\nCovalence\n\n## Info\nYou will be building a webpage that will enable users to draw shapes of varying sizes on the screen\nWhen a shape is clicked, you should update the sidepanel with the metrics for that shape\nEach type of shape will have its own input box(es) for getting size information, and an insert button for drawing the shape on the page\n## Getting Started\nCreate an index.html file, script.js file, and a css file for styling\n## Objectives - HTML\nYour shape painter should handle four shapes: Square, Rectangle, Circle, and Triangle\nIn your index.html, go ahead and add labeled input fields and insert buttons for each shape type:\nRectangle: Inputs for width and height, and an insert button\nSquare: Input for side length and an insert button\nCircle: Input for radius and an insert button\nIsoceles Right Triangle: Input for height and an insert button\nEach of the insert buttons above should create a new instance of that particular shape, which should draw itself on the screen with the specified size and placed in a random location (object details are below)\nCreate a 600px by 600px div with the background color of your choosing. All the shapes you insert will be drawn within this div\nShow a sidepanel beside this shape canvas. It should display the following information for a clicked shape:\nShape Name:\nWidth:\nHeight:\nRadius:\nArea:\nPerimeter:\n## Objectives - JS\nYou must use OOP. Specifically, you must use the classes defined below and properly use inheritance\nClass- Shape\nShape is very generic\nTry to put as much logic in this class as you can, but remember, sometimes you have to put logic in child classes for more custom behavior\nClass- Circle\nNeeds to take a single parameter, radius, in its constructor\nNeeds to call the constructor of its logical parent class\nCan have methods that define behavior/calculations specific to Circles\nClass- Triangle\nThis will be a Right Isoceles Triangle\nNeeds to take a single parameter, height, in its constructor\nSince it is a right isoceles triangle, height/width/base will all be the same\nNeeds to call the constructor of its logical parent class\nCan have methods that define behavior/calculations specific to Triangles\nClass- Rectangle\nNeeds to take two parameters, width and height, in its constructor\nNeeds to call the constructor of its logical parent class\nCan have methods that define behavior/calculations specific to Rectangles\nClass- Square\nNeeds to take a single parameter, sideLength, in its constructor\nNeeds to call the constructor of its logical parent class\nA square is a special type of rectangle\nCan have methods that define behavior/calculations specific to Squares\nAdditional details\nClicking on any shape should call a method named describe(), which should update the statistics in the sidepanel in index.html\nDouble clicking on any shape should remove the shape from the screen\nEvery shape draws itself when it is created. The shape will be drawn according to the size specified when the shape was created, and the shape will be placed in a random location within the shape canvas\nTo keep things simple, it helps to think of every shape having a width and height (even the circle and triangle have a \"bounding box\" we cannot see that can be derived from their single measurement)\nRemember that a circle's perimeter is the same as its circumference\nDrawing a triangle is going to be tricky!\nCircles should be purple, Squares should be red, Triangles should be yellow, and Rectangles should be green\nHints/Resources\nTry to use CSS class names and write as many styles onto those class names as you can\nOnly use inline-styles when necessary (and some things will require it in this lab)\nIt may help to review relative vs absolute positioning, and how top and left can be used to specify the location of an html element\nYou may find this guide helpful for drawing shapes with CSS (For triangle, use Top-Left, Top-Right, Bottom-Left, or Bottom-Right)\nTriangle area: 0.5 * base * height\nTriangle perimeter (right isoceles):\n2 * height + (square root of 2) * height","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpwithcode%2Fshape-up-or-shape-out","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkpwithcode%2Fshape-up-or-shape-out","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkpwithcode%2Fshape-up-or-shape-out/lists"}