{"id":24018688,"url":"https://github.com/ryancoll/comp-3330-week1","last_synced_at":"2026-07-16T02:31:58.355Z","repository":{"id":139649164,"uuid":"405200675","full_name":"RyanColl/COMP-3330-Week1","owner":"RyanColl","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-11T19:47:03.000Z","size":211,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-18T10:12:02.583Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/RyanColl.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":"2021-09-10T20:07:39.000Z","updated_at":"2021-09-11T19:47:07.000Z","dependencies_parsed_at":"2023-07-23T08:15:16.592Z","dependency_job_id":null,"html_url":"https://github.com/RyanColl/COMP-3330-Week1","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RyanColl/COMP-3330-Week1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-Week1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-Week1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-Week1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-Week1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanColl","download_url":"https://codeload.github.com/RyanColl/COMP-3330-Week1/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FCOMP-3330-Week1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35528482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-16T02:00:06.687Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-08T10:17:38.290Z","updated_at":"2026-07-16T02:31:58.350Z","avatar_url":"https://github.com/RyanColl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started With My Project!\n\n## Week 1\n\nIn week 1, we discussed the basics of React. I want to introduce to you a project that I am doing for COMP-3330 in week 1. I am going to build a simple app that uses typescript, ternary oporators, state, and a button to change dark theme to light theme!\n\n### ES6 Usage Examples\n\nthe latest Ecma Script update, EC6, brought with it a range of really cool new features to use in our javascript, or in some cases, typescript programming. In this project, I used the following EC6 features:\n\nArrow Function: \u003cpre\u003e\u003ccode\u003econst changeTheme = () =\u003e {\n    lightThemed ? isLightThemed(false) : isLightThemed(true)\n  }\u003c/code\u003e\u003c/pre\u003e\n\nDestructuring: \u003cpre\u003e\u003ccode\u003econst { buttonClick, lightThemed, width, height } = props;\u003c/code\u003e\u003c/pre\u003e\n\nConst: \u003cpre\u003e\u003ccode\u003econst height = window.innerHeight\n  const width = window.innerWidth\u003c/code\u003e\u003c/pre\u003e\n\nThis is the extent of my EC6 feature usage in this project.\n\n### Typescript\n\nTypescript is involved in the project, but do not worry, simply using ```npm install``` when you enter the project solves any sort of dependency problems. To install typescript in a react-app of your own, visit this [link.](https://create-react-app.dev/docs/adding-typescript/)\n\n### Ternary\n\n[Ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is used to check a condition that returns a boolean, and then executes code based on whether it is true or false. Ternary can look at a boolean directly, or it can look at a comparison, as it always resorts to a boolean. In my code, I did not use a comparison, just a straight boolean. \n\nIn the code ``` const theme = lightThemed ? 'dark' : 'light' ``` I am asking javascript to evaluate the first statement, \u003ccode\u003elightThemed\u003c/code\u003e, and if its true, return 'dark'. If \u003ccode\u003elightThemed\u003c/code\u003e is false, return 'light'. I am using it in this instance to assign a string to a variable depending on the falsity of \u003ccode\u003elightThemed\u003c/code\u003e. I use this code to change which word is use in a sentence, which I explain in my ternary-state section.\n\n### State\n\nState is used to update a component. Updating a component re-renders it, but with the re-rendered value. \u003c/br\u003e\nFor example, in the following code, we will destructure our state variable and our component-updating function (as described in the [docs](https://reactjs.org/docs/hooks-state.html)) and give it an initial value of a boolean.\n\u003c/br\u003e\n\n\u003ccode\u003econst [lightThemed, isLightThemed] = React.useState(true)\u003c/code\u003e\n\n\u003ccode\u003elightThemed\u003c/code\u003e is a boolean, and \u003ccode\u003eisLightThemed\u003c/code\u003e takes in a boolean, and sets \u003ccode\u003elightThemed\u003c/code\u003e as such. \n\nLike this: \u003ccode\u003eisLightThemed(false)\u003c/code\u003e\n\n### Ternary + State\n\nTernary and state work very well together for various reasons, but I want to go over what I am using in this app. I use ternary and state because when you use state to re-render a component, the entire component is reloaded, thus re-running whatever code is inside it. When we change the \u003ccode\u003elightThemed\u003c/code\u003e to false and back to true using \u003ccode\u003eisLightThemed(false)\u003c/code\u003e and \u003ccode\u003eisLightThemed(true)\u003c/code\u003e , we reload the function, but with \u003ccode\u003elightThemed\u003c/code\u003e changed to the variable we set. This means the when ``` const theme = lightThemed ? 'dark' : 'light' ``` is read, depending on what the state variable is at the time, true or false, a different word will be put into the variable ``` theme ```.\n\nMy app has a button that you press that changes the theme from light to dark. Not only do the colours change, but so do the words! This is the power of ternary and state, mixed with css transitions.\n\n\nPlease feel free to check out my website too, which is currently just a work in progress. [RyanColl](https://rcoll-fullstack-dev.web.app/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fcomp-3330-week1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryancoll%2Fcomp-3330-week1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fcomp-3330-week1/lists"}