![](\"https://avatars.githubusercontent.com/u/36893512?s=400&v=4\"/){kind=avatar}
\nAbout Me
\n\n My name is Jeff Heldridge, I am currently a Software Engineer and have been coding for over 7 years. I have pretty much been in the Financial Service Industry for most of that time and would be excited to branch out from it a bit. Although I do really enjoy coding outside of work to learn new things, it’s also a hobby for me.\n
\n\n I wanted to make a site for myself to keep me busy as well as learn some new stuff like Azure hosting and Mongo. For most of my seven years I have been a full stack developer primarily working in Angular/Angular.js and .Net. My current job though has me coding in Java in a Spring framework using Maven, and Eclipse with a Dojo/JavaScript frontend.\n
\n\n I got started in coding by originally getting tired of my data entry job and learned how to program Excel Macros in .VBA and was able to automate a lot of my job. I realized I needed to learn how to create web applications to automate even more things so I ended up going to school for an associate’s degree in web design from Metro Community College, and then eventually a bachelor’s degree from Bellevue University in Computer Science.\n
\n\n Beyond coding I have been able to develop some good soft skills as well. I have been able to work for some really great people who have taught me to be a good influence on others, as well as good communicator, leader, and someone who is able to work well with other groups.\n
\n\n
","\n
\n\n
\n Work Experiance
\n\n
\n \n
\n 06/2021-Present
\nManager - Software Developement & Engineering
\nCharles Schwab
\n- \n
- In a dev 4 role supporting the Securities Lending group with a native app written in Java on a spring framework to lend securities through DTCC/Loanet. \n
- Skills used/learned: STS, Java, MQ messaging, UNIX, Oracle DB, Linux, Jenkins, JavaScript, Dojo, Bitbucket \n
\n
\n \n
\n 02/2020-06/2021
\nSoftware Engineer
\nTD Ameritrade
\n- \n
- Supported the Securities Lending group with a native app written in Java on a spring framework to lend securities through DTCC/Loanet. \n
- Skills used/learned: STS, Java, MQ messaging, UNIX, Oracle DB, Linux, Jenkins, JavaScript, Dojo, Bitbucket \n
\n
\n \n
\n 09/2017 – 02/2020
\nSenior Developer
\nTD Ameritrade
\n- \n
- Supported and built applications for the Retail group to make client interaction easier as well as Risk and Supervision more transparent. \n
- Skills used/learned: ASP.Net, .Net, .Netcore, Internet Information Services(IIS), SQL Server Integration Services(SSIS), Angular, Javascript, SQL Server, SQL Server Managment Studio, Visual Studio, VS Code, Bitbucket \n
\n
\n \n
\n 04/2016 – 9/2017
\nDeveloper II
\nTD Ameritrade
\n- \n
- Supported and built applications for the Risk group to provide automation of risk assesments, classifications, and rankings. In addition to automation of end user tasks. \n
- Skills used/learned: .Net, Angular, Javascript, SQL Server, SQL Server Managment Studio, Visual Studio, VS Code \n
\n
\n \n
\n 03/2015 – 4/2016
\nDeveloper II
\nTD Ameritrade
\n- \n
- Supported and built applications to automate back office user's tasks using multiple data sets to increase productivity and reduce risk from FINRA and SEC rules. \n
- Skills used/learned: .Net, Angular.JS, Javascript, SQL Server, SQL Server Managment Studio, Visual Studio, VBA - Excel Macros \n
\n
\n \n
\n 08/2013 – 3/2015
\nSpecialist
\nTD Ameritrade
\n- \n
- Produced KRI's, KPI's to provide insite into stock record processes to determine risk to the firm. Also produced reports for FINRA and SEC to show compliance with industry standards. \n
- Skills used/learned: Javascript, SQL Server, SQL Server Managment Studio, Visual Studio, VBA - Excel Macros, Tableau \n
\n
\n Skills and Competences
\n \nEducation
\n\n
\n \n
\n 10/2016 – 8/2018
\nBellevue University
\nBachelor of Science in Computer Information Systems
\n\n
\n \n
\n 8/2014 – 8/2016
\nMetropolitan Community College
\nAssociates of IT in Web Design
\nAchievements and Certifications
\n\n
\n \n
\n Series 7
\n- \n
- Passed Series 7 exam to become a registered representative by FINRA \n
Series 63
\n- \n
- Passed NASAA exam for state registration \n
Dev Up 2018
\n- \n
- Participated in DevUp conference in St. Louis with focuses on C#, Angular, Blazor, and .Net \n
Azure Days 2018
\n- \n
- Participated in Azure Days Kansas City with topics covering at range of Azure functions \n
Interests
\n\n
\n \n Physics | Science | Astronomy | Gaming | Programming | Astrophotography | Music | College Football | Animals | Family | Friends\n
\n \n
","import { Component, OnInit} from '@angular/core';\nimport { BlogapiService } from '../../services/blogapi.service';\nimport { blog } from '../../models/blog_models';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n@Component({\n selector: 'blogread',\n templateUrl: './blogread.component.html',\n styleUrls: ['./blogread.component.css']\n})\nexport class BlogreadComponent implements OnInit {\n\n public blogList: blog[];\n public infoLoaded: boolean;\n\n constructor(private blogService:BlogapiService, public router: Router) {\n ga('set', 'page', 'BlogRead');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.infoLoaded = false;\n this.blogService.getBlogList().subscribe(response =>{\n this.blogList = response;\n this.blogList.reverse();\n this.infoLoaded = true;\n });\n }\n}\n","import { Component, OnInit } from '@angular/core';\n\ndeclare let ga: Function;\n@Component({\n selector: 'codeexamples',\n templateUrl: './codeexamples.component.html',\n styleUrls: ['./codeexamples.component.css']\n})\nexport class CodeexamplesComponent implements OnInit {\n\n constructor() {\n ga('set', 'page', 'CodeExamples');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n }\n\n}\n"," \n
Loading Please Wait...\n
\n \n Loading...\n
\n Loading Please Wait...\n
\n
\nDeveloper Blog
\n\n ![](\"{{blog.thumbImageURL}}\")
\n
\n {{blog.createDate}}
\n {{blog.blogEntry}}\n\n
\n
\n \n Code Examples\n
\n\n Below are a few things I have built to hightlight some of my dev knowledge. I added some icons at the bottom of each card so that you can see the\n skills used so you can quickly get to what that page pertains to as well as a info overlay (accessable on top right of the page) on each page that \n really talks about the concepts \n I am using on the page.\n
\n\n
\n\n ![\"Card](\"../../../assets/media/google_example.jpg\")
\n
\n \n \n
\n Google Maps
\nShows a lot of examples of using different options in Google Maps API
\n See Example\n\n ![](\"../../../assets/media/typescript_logo_new.png\" "\\"TypeScript\\"/")
\n ![](\"../../../assets/media/javascript-logo.png\" "\\"JavaScript\\"/")
\n ![](\"../../../assets/media/googlemap-logo.png\" "\\"Google")
\n
\n \n \n \n \n ![\"Card](\"../../../assets/media/twitter_example.jpg\")
\n
\n \n \n
\n Twitter API
\nA page to pull my Tweets as well as let you search for others
\n See Example\n\n ![](\"../../../assets/media/twitter-logo.png\" "\\"Twitter\\"/")
\n ![](\"../../../assets/media/aspnetcore-logo.png\" "\\".NetCore\\"/")
\n
\n \n \n \n ![\"Card](\"../../../assets/media/blog_example.jpg\")
\n
\n\n \n
\n My Dev Blog
\nPulls blog entries from MongoDB database from .NetCore backend
\n See Example\n\n ![](\"../../../assets/media/mongo-logo.png\" "\\"Mongo\\"/")
\n \n
\n \n \n \n
\n\n ![\"Card](\"../../../assets/media/poly_example.png\")
\n
\n \n \n
\n Polygon.IO API
\nProvides some real time market data from Polygon.IO on symbols entered.
\n See Example\n\n ![](\"../../../assets/media/poly-logo.png\" "\\"Polygon.IO\\"/")
\n \n
\n \n \n \n ![\"Card](\"../../../assets/media/forms_example.jpg\")
\n
\n \n \n
\n Angular Forms
\nJust a page with some simple charts, tables and form items.
\n See Example\n\n \n ![](\"../../../assets/media/angular-logo.png\" "\\"Angular\\"/")
\n ![](\"../../../assets/media/amcharts_logo.png\" "\\"amCharts\\"/")
\n
\n \n \n \n \n ![\"Card](\"../../../assets/media/games_example.png\")
\n
\n\n \n
\n Games
\nSome games I found written in Angular that I ported into my app for a little fun.
\n See Example\n\n \n \n \n
\n \n \n \n \n
\n\n Other Websites\n
\n\n Below are a few other websites I either own or had a part in building. I think these give the best examples of building a whole web app from writing the code to creating your own domian and hosting as well as getting SSL certs to work. \n
\n\n
","\n ![\"Card](\"https://lh3.googleusercontent.com/lGiAKz7ZqlOE53hkudiubI7vqPLb7Kx0k3eKDU8eDWH63D5tc7WKGMJNUjexkqOCS4iUl1ANVJlwHVWs62nklUN05GN93BQHj05nZub_dU8QN2KCy-gmbwleQBRc76k4Rz_Xw2uMxjU=w2400\")
\n
\n \n \n
\n SmallGuyPromo.com
\nThis is a wordpress site I made for a friend at work. He has taken ownership of it but I got it off the ground and built some of the core elements of the site as well as the themes.
\n See Site\n\n ![](\"../../../assets/media/php_logo.png\" "\\"PHP\\"/")
\n ![](\"../../../assets/media/wordpress_logo.png\" "\\"WordPress\\"/")
\n
\n \n \n \n ![\"Card](\"https://lh3.googleusercontent.com/JSc5I_3UGyKZVPjqrbWHk1-KYxq9UVqmro1HgsOKZ19WYDn3uqfUzgeyChSjKaawaoEdnA8-RQ7i3EBQuHHJYBWWJpLfRzZ8fkY6Kuq9xxBboolXckm_LmU2mVQb4Lw67pn0V7FKTIU=w2400\")
\n
\n \n \n
\n AmateurAstronomer.net
\nI built another website for my hobby in astronomy, but more blog focused. (will take you out of this site)
\n See Site\n\n \n \n \n ![](\"../../../assets/media/Azure-logo.png\" "\\"Azure\\"/")
\n
\n \n \n \n \n \n ![\"Card](\"https://lh3.googleusercontent.com/rTxKGHvt47UCxNaXkBr3zZXg6RYfhXNcykIUXGn0up19lGmwlRUqZI6VvmNUAfEft--avX3PykcaDwPI8bbAt8z2be2UjNiGGCALsN5hu8Ba-xWZT0bNBx-b16rHHA_jksdg2ZfUr-0=w2400\")
\n
\n\n \n
\n Next.net
\nLeft this as a place holder for my next app, to keep pushing myself to create.
\nNext
\n\n \n
\n\n
\n\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
","import { Component, OnInit } from '@angular/core';\nimport * as am4core from \"@amcharts/amcharts4/core\";\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\nimport { ChartapiService } from 'src/app/services/chartapi.service';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'angularforms',\n templateUrl: './angularforms.component.html',\n styleUrls: ['./angularforms.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\nexport class AngularformsComponent implements OnInit {\n\n public selectInput: string = \"\";\n public textInput: string;\n public passwordInput: string;\n public radioInput: string = \"1\";\n public ckboxOneInput: boolean;\n public ckboxTwoInput: boolean = true;\n public ckboxThreeInput: boolean;\n public textAreaInput: string;\n public allAPIData: object;\n public showForms: boolean;\n public angularFormsOverlay: boolean;\n public toolActive: boolean;\n\n constructor(private chartService: ChartapiService) { \n ga('set', 'page', 'Angular_Forms');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n am4core.useTheme(am4themes_animated);\n this.chartService.getRaceChart().subscribe(response =>{\n this.allAPIData = response;\n this.buildRaceChart();\n this.buildRadialChart();\n });\n this.hideAll();\n }\n buildRaceChart(){\n let chart = am4core.create(\"racechartdiv\", am4charts.XYChart);\n chart.padding(40, 40, 40, 40);\n\n chart.numberFormatter.bigNumberPrefixes = [\n { \"number\": 1e+3, \"suffix\": \"K\" },\n { \"number\": 1e+6, \"suffix\": \"M\" },\n { \"number\": 1e+9, \"suffix\": \"B\" }\n ];\n\n let label = chart.plotContainer.createChild(am4core.Label);\n label.x = am4core.percent(97);\n label.y = am4core.percent(95);\n label.horizontalCenter = \"right\";\n label.verticalCenter = \"middle\";\n label.dx = -15;\n label.fontSize = 50;\n\n let playButton = chart.plotContainer.createChild(am4core.PlayButton);\n playButton.x = am4core.percent(97);\n playButton.y = am4core.percent(95);\n playButton.dy = -2;\n playButton.verticalCenter = \"middle\";\n playButton.events.on(\"toggled\", function(event) {\n if (event.target.isActive) {\n play();\n }\n else {\n stop();\n }\n })\n\n let stepDuration = 4000;\n\n let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());\n categoryAxis.renderer.grid.template.location = 0;\n categoryAxis.dataFields.category = \"network\";\n categoryAxis.renderer.minGridDistance = 1;\n categoryAxis.renderer.inversed = true;\n categoryAxis.renderer.grid.template.disabled = true;\n\n let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());\n valueAxis.min = 0;\n valueAxis.rangeChangeEasing = am4core.ease.linear;\n valueAxis.rangeChangeDuration = stepDuration;\n valueAxis.extraMax = 0.1;\n\n let series = chart.series.push(new am4charts.ColumnSeries());\n series.dataFields.categoryY = \"network\";\n series.dataFields.valueX = \"MAU\";\n series.tooltipText = \"{valueX.value}\"\n series.columns.template.strokeOpacity = 0;\n series.columns.template.column.cornerRadiusBottomRight = 5;\n series.columns.template.column.cornerRadiusTopRight = 5;\n series.interpolationDuration = stepDuration;\n series.interpolationEasing = am4core.ease.linear;\n\n let labelBullet = series.bullets.push(new am4charts.LabelBullet())\n labelBullet.label.horizontalCenter = \"right\";\n labelBullet.label.text = \"{values.valueX.workingValue.formatNumber('#.0as')}\";\n labelBullet.label.textAlign = \"end\";\n labelBullet.label.dx = -10;\n\n chart.zoomOutButton.disabled = true;\n\n // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set\n series.columns.template.adapter.add(\"fill\", function(fill, target){\n return chart.colors.getIndex(target.dataItem.index);\n });\n\n let year = 2003;\n label.text = year.toString();\n\n let interval;\n\n function play() {\n interval = setInterval(function(){\n nextYear();\n }, stepDuration)\n nextYear();\n }\n\n function stop() {\n if (interval) {\n clearInterval(interval);\n }\n }\n\n function nextYear() {\n year++\n\n if (year > 2020) {\n year = 2003;\n }\n\n let newData = allData[year];\n let itemsWithNonZero = 0;\n for (var i = 0; i < chart.data.length; i++) {\n chart.data[i].MAU = newData[i].MAU;\n if (chart.data[i].MAU > 0) {\n itemsWithNonZero++;\n }\n }\n\n if (year == 2003) {\n series.interpolationDuration = stepDuration / 4;\n valueAxis.rangeChangeDuration = stepDuration / 4;\n }\n else {\n series.interpolationDuration = stepDuration;\n valueAxis.rangeChangeDuration = stepDuration;\n }\n\n chart.invalidateRawData();\n label.text = year.toString();\n\n categoryAxis.zoom({ start: 0, end: itemsWithNonZero / categoryAxis.dataItems.length });\n }\n\n\n categoryAxis.sortBySeries = series;\n\n let allData = this.allAPIData;\n chart.data = JSON.parse(JSON.stringify(allData[year]));\n categoryAxis.zoom({ start: 0, end: 1 / chart.data.length });\n series.events.on(\"inited\", function() {\n setTimeout(function() {\n playButton.isActive = true; // this starts interval\n }, 2000)\n })\n }\n\n\n buildRadialChart(){\n let chart = am4core.create(\"radialchartdiv\", am4charts.RadarChart);\n chart.hiddenState.properties.opacity = 0; // this creates initial fade-in\n chart.data = [\n {\n category: \"One\",\n value1: 8,\n value2: 2,\n value3: 4,\n value4: 3\n },\n {\n category: \"Two\",\n value1: 11,\n value2: 4,\n value3: 2,\n value4: 4\n },\n {\n category: \"Three\",\n value1: 7,\n value2: 6,\n value3: 6,\n value4: 2\n },\n {\n category: \"Four\",\n value1: 13,\n value2: 8,\n value3: 3,\n value4: 2\n },\n {\n category: \"Five\",\n value1: 12,\n value2: 10,\n value3: 5,\n value4: 1\n },\n {\n category: \"Six\",\n value1: 15,\n value2: 12,\n value3: 4,\n value4: 4\n }\n ];\n\n //chart.padding(20, 20, 20, 20);\n chart.colors.step = 4;\n\n let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxisAngular forms
\nThis page is just to show some basic angular forms on a page. You can pretty much build anything with the forms you will see here.
\nInputs
\n \n \n \n \n \n \n\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
Buttons
\n \nSpinners
\n\n
\n \n Loading...\n
\n \n Loading...\n
\n Cards
\n\n
\n \n
\n \n ![\"Card](\"https://www.w3schools.com/bootstrap4/img_avatar3.png\")
\n \n
\n \n \n \n \n ![\"Card](\"https://www.w3schools.com/bootstrap4/img_avatar5.png\")
\n
\n \n Charts
\n \n\n \n
Tables
\n\n \n \n \n
\n
\n | Text Input | \nPassword Input | \nDropdown Input | \nRadio Input | \nCheck Box One Input | \nCheck Box Two Input | \nCheck Box Three Input | \nText Area | \n \n \n{{this.textInput}} | \n{{this.passwordInput}} | \n{{this.selectInput}} | \n{{this.radioInput}} | \n\n | \n | \n | {{this.textAreaInput}} | \n \n
|---|
\n Tables just look terriable on mobile, you can only do so much. So I have hidden them, to see hold phone sideways or look on desktop site.\n
\nAngular Forms\n \n
\n\n Just some generic HTML forms tied to ngModel with Angular. They are styled with bootstrap and if you enter some values you will be able to see them populated in the table below via ngModel. \n
\n\n
Charts\n \n \n \n
\n\n The charts are built using amCharts4 for Angular or Typescript even though most the code is straight Javascript. amCharts 4 is fairly easy to use, in the social networks chart I flipped the data to an api call and added two years, so you can tell after you figure out the structure of the data for the chart its pretty easy to make your own. \n
\n\n AmCharts4 \n
\n
API Calls\n \n
\n\n The data for the Socail Networks chart was flipped to C# because its a lot to just store a object that big on the front end.\n
\n","\n \n
\n\n
\n\n
\n \n
Loading Please Wait...\n
\n\n Loading...\n
\n Loading Please Wait...\n
\n
","import { Component, OnInit} from '@angular/core';\nimport { BlogapiService } from '../../../../services/blogapi.service';\nimport { blog } from '../../../../models/blog_models';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'blog',\n templateUrl: './blog.component.html',\n styleUrls: ['./blog.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\n\nexport class BlogComponent implements OnInit {\n\n public blogList: blog[];\n public blogOverlay: boolean;\n public toolActive: boolean;\n public showBlog: boolean;\n public infoLoaded: boolean;\n\n constructor(private blogService:BlogapiService, public router: Router) {\n ga('set', 'page', 'Blog');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.infoLoaded = false;\n this.hideAll();\n this.blogService.getBlogList().subscribe(response =>{\n this.blogList = response;\n this.blogList.reverse();\n this.infoLoaded = true;\n });\n }\n //overlay functions\n hideAll(){\n this.toolActive = false;\n this.showBlog = false;\n }\n toolAction(selected: string): void {\n this.hideAll();\n this.blogOverlay = false;\n this.toolActive = true;\n switch(selected)\n {\n case \"blog\":\n this.showBlog = true;\n setTimeout(() => {\n this.blogOverlay = true;\n }, 725);\n break;\n }\n }\n toolClose(): void {\n this.blogOverlay = false;\n setTimeout(() => {\n this.toolActive = false;\n }, 725)\n }\n}\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'blog-overlay',\n templateUrl: './blog-overlay.component.html',\n styleUrls: ['./blog-overlay.component.css']\n})\nexport class BlogOverlayComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","Developer Blog
\n\n
\n
\n{{blog.createDate}}
\n {{blog.blogEntry}}\n\n
Mongo DB\n \n
\n\n I am using a Mongo DB here to store the blog entries, I wanted to show that I have good experience using databases in an app. I am pretty new to mongo and most of my experiance has been in SQL server and Oracle but I do like Mongo and would love more exposure to it.\n
\n\n
API Calls\n \n
\n\n So my backend makes calls to my database and then sends them to the frontend. I think there are ways of hitting the DB with just the UI but wanted to show how to create a API with database calls. You can see all the calls on the swagger page and that is how I make entries with the post on swagger.\n
\n","\n\n \n
\n\n
\n\n
\n \n
\n
\n
\n
\n","import { Component, OnInit } from '@angular/core';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'games',\n templateUrl: './games.component.html',\n styleUrls: ['./games.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\nexport class GamesComponent implements OnInit {\n\n public gamesOverlay: boolean;\n public toolActive: boolean;\n public showGames: boolean;\n\n constructor(public router: Router){ \n ga('set', 'page', 'Games');\n ga('send', 'pageview');\n }\n\n ngOnInit(){\n this.hideAll();\n }\n\n //overlay functions\n hideAll(){\n this.toolActive = false;\n this.showGames = false;\n }\n toolAction(selected: string): void {\n this.hideAll();\n this.gamesOverlay = false;\n this.toolActive = true;\n switch(selected)\n {\n case \"games\":\n this.showGames = true;\n setTimeout(() => {\n this.gamesOverlay = true;\n }, 725);\n break;\n }\n }\n toolClose(): void {\n this.gamesOverlay = false;\n setTimeout(() => {\n this.toolActive = false;\n }, 725)\n }\n\n}\n","\n
\n \n ![](\"./../../../assets/media/snakeimage.png\"/)
\n
\n \n \n
\n \n ngxSnake\n
\n \n
\n
\n
\n
\n \n ![](\"./../../../assets/media/tetrisimage.png\"/)
\n
\n \n \n
\n\n Tetris\n
\n \r\n Please use the keyboard arrows to play game.\r\n
\r\n\r\n
","import { Component } from '@angular/core';\r\nimport { CONTROLS, COLORS, BOARD_SIZE, GAME_MODES } from './snake.constants';\r\nimport { SnakeScore } from '../../../../../../services/snake-score.service';\r\nimport { NavigationEnd, Router } from '@angular/router';\r\n\r\ndeclare let ga: Function;\r\n\r\n@Component({\r\n selector: 'snake',\r\n templateUrl: './snake.component.html',\r\n styleUrls: ['./snake.component.css'],\r\n host: {\r\n '(document:keydown)': 'handleKeyboardEvents($event)'\r\n }\r\n})\r\nexport class SnakeComponent {\r\n\r\n private interval: number;\r\n private tempDirection: number;\r\n private default_mode = 'classic';\r\n private isGameOver = false;\r\n public all_modes = GAME_MODES;\r\n public getKeys = Object.keys;\r\n public board = [];\r\n public obstacles = [];\r\n public score = 0;\r\n public showMenuChecker = false;\r\n public gameStarted = false;\r\n public newBestScore = false;\r\n public best_score = this.bestScoreService.retrieve();\r\n\r\n private snake = {\r\n direction: CONTROLS.LEFT,\r\n parts: [\r\n {\r\n x: -1,\r\n y: -1\r\n }\r\n ]\r\n };\r\n\r\n private fruit = {\r\n x: -1,\r\n y: -1\r\n };\r\n\r\n constructor(\r\n private bestScoreService: SnakeScore,\r\n public router: Router\r\n ) {\r\n this.setBoard();\r\n this.router.events.subscribe(event => {\r\n if (event instanceof NavigationEnd) {\r\n ga('set', 'page', event.urlAfterRedirects);\r\n ga('send', 'pageview');\r\n }\r\n });\r\n }\r\n\r\n handleKeyboardEvents(e: KeyboardEvent) {\r\n if (e.keyCode === CONTROLS.LEFT && this.snake.direction !== CONTROLS.RIGHT) {\r\n this.tempDirection = CONTROLS.LEFT;\r\n } else if (e.keyCode === CONTROLS.UP && this.snake.direction !== CONTROLS.DOWN) {\r\n this.tempDirection = CONTROLS.UP;\r\n } else if (e.keyCode === CONTROLS.RIGHT && this.snake.direction !== CONTROLS.LEFT) {\r\n this.tempDirection = CONTROLS.RIGHT;\r\n } else if (e.keyCode === CONTROLS.DOWN && this.snake.direction !== CONTROLS.UP) {\r\n this.tempDirection = CONTROLS.DOWN;\r\n }\r\n }\r\n handleButtonClicks(direction: string){\r\n switch(direction)\r\n {\r\n case \"left\":\r\n this.tempDirection = CONTROLS.LEFT;\r\n break;\r\n case \"right\":\r\n this.tempDirection = CONTROLS.RIGHT;\r\n break;\r\n case \"up\":\r\n this.tempDirection = CONTROLS.UP;\r\n break;\r\n case \"down\":\r\n this.tempDirection = CONTROLS.DOWN;\r\n break;\r\n }\r\n }\r\n\r\n setColors(col: number, row: number): string {\r\n if (this.isGameOver) {\r\n return COLORS.GAME_OVER;\r\n } else if (this.fruit.x === row && this.fruit.y === col) {\r\n return COLORS.FRUIT;\r\n } else if (this.snake.parts[0].x === row && this.snake.parts[0].y === col) {\r\n return COLORS.HEAD;\r\n } else if (this.board[col][row] === true) {\r\n return COLORS.BODY;\r\n } else if (this.default_mode === 'obstacles' && this.checkObstacles(row, col)) {\r\n return COLORS.OBSTACLE;\r\n }\r\n return COLORS.BOARD;\r\n };\r\n\r\n updatePositions(): void {\r\n let newHead = this.repositionHead();\r\n let me = this;\r\n if (this.default_mode === 'classic' && this.boardCollision(newHead)) {\r\n return this.gameOver();\r\n } else if (this.default_mode === 'no_walls') {\r\n this.noWallsTransition(newHead);\r\n } else if (this.default_mode === 'obstacles') {\r\n this.noWallsTransition(newHead);\r\n if (this.obstacleCollision(newHead)) {\r\n return this.gameOver();\r\n }\r\n }\r\n if (this.selfCollision(newHead)) {\r\n return this.gameOver();\r\n } else if (this.fruitCollision(newHead)) {\r\n this.eatFruit();\r\n }\r\n let oldTail = this.snake.parts.pop();\r\n this.board[oldTail.y][oldTail.x] = false;\r\n this.snake.parts.unshift(newHead);\r\n this.board[newHead.y][newHead.x] = true;\r\n this.snake.direction = this.tempDirection;\r\n setTimeout(() => {\r\n me.updatePositions();\r\n }, this.interval);\r\n }\r\n repositionHead(): any {\r\n let newHead = Object.assign({}, this.snake.parts[0]);\r\n if (this.tempDirection === CONTROLS.LEFT) {\r\n newHead.x -= 1;\r\n } else if (this.tempDirection === CONTROLS.RIGHT) {\r\n newHead.x += 1;\r\n } else if (this.tempDirection === CONTROLS.UP) {\r\n newHead.y -= 1;\r\n } else if (this.tempDirection === CONTROLS.DOWN) {\r\n newHead.y += 1;\r\n }\r\n return newHead;\r\n }\r\n noWallsTransition(part: any): void {\r\n if (part.x === BOARD_SIZE) {\r\n part.x = 0;\r\n } else if (part.x === -1) {\r\n part.x = BOARD_SIZE - 1;\r\n }\r\n if (part.y === BOARD_SIZE) {\r\n part.y = 0;\r\n } else if (part.y === -1) {\r\n part.y = BOARD_SIZE - 1;\r\n }\r\n }\r\n addObstacles(): void {\r\n let x = this.randomNumber();\r\n let y = this.randomNumber();\r\n if (this.board[y][x] === true || y === 8) {\r\n return this.addObstacles();\r\n }\r\n this.obstacles.push({\r\n x: x,\r\n y: y\r\n });\r\n }\r\n\r\n checkObstacles(x, y): boolean {\r\n let res = false;\r\n this.obstacles.forEach((val) => {\r\n if (val.x === x && val.y === y) {\r\n res = true;\r\n }\r\n });\r\n return res;\r\n }\r\n\r\n obstacleCollision(part: any): boolean {\r\n return this.checkObstacles(part.x, part.y);\r\n }\r\n boardCollision(part: any): boolean {\r\n return part.x === BOARD_SIZE || part.x === -1 || part.y === BOARD_SIZE || part.y === -1;\r\n }\r\n selfCollision(part: any): boolean {\r\n return this.board[part.y][part.x] === true;\r\n }\r\n fruitCollision(part: any): boolean {\r\n return part.x === this.fruit.x && part.y === this.fruit.y;\r\n }\r\n\r\n resetFruit(): void {\r\n let x = this.randomNumber();\r\n let y = this.randomNumber();\r\n if (this.board[y][x] === true || this.checkObstacles(x, y)) {\r\n return this.resetFruit();\r\n }\r\n this.fruit = {\r\n x: x,\r\n y: y\r\n };\r\n }\r\n\r\n eatFruit(): void {\r\n this.score++;\r\n let tail = Object.assign({}, this.snake.parts[this.snake.parts.length - 1]);\r\n this.snake.parts.push(tail);\r\n this.resetFruit();\r\n if (this.score % 5 === 0) {\r\n this.interval -= 15;\r\n }\r\n }\r\n\r\n gameOver(): void {\r\n this.isGameOver = true;\r\n this.gameStarted = false;\r\n let me = this;\r\n if (this.score > this.best_score) {\r\n this.bestScoreService.store(this.score);\r\n this.best_score = this.score;\r\n this.newBestScore = true;\r\n }\r\n setTimeout(() => {\r\n me.isGameOver = false;\r\n }, 500);\r\n this.setBoard();\r\n }\r\n\r\n randomNumber(): any {\r\n return Math.floor(Math.random() * BOARD_SIZE);\r\n }\r\n\r\n setBoard(): void {\r\n this.board = [];\r\n\r\n for (let i = 0; i < BOARD_SIZE; i++) {\r\n this.board[i] = [];\r\n for (let j = 0; j < BOARD_SIZE; j++) {\r\n this.board[i][j] = false;\r\n }\r\n }\r\n }\r\n\r\n showMenu(): void {\r\n this.showMenuChecker = !this.showMenuChecker;\r\n }\r\n\r\n newGame(mode: string): void {\r\n this.default_mode = mode || 'classic';\r\n this.showMenuChecker = false;\r\n this.newBestScore = false;\r\n this.gameStarted = true;\r\n this.score = 0;\r\n this.tempDirection = CONTROLS.LEFT;\r\n this.isGameOver = false;\r\n this.interval = 150;\r\n this.snake = {\r\n direction: CONTROLS.LEFT,\r\n parts: []\r\n };\r\n\r\n for (let i = 0; i < 3; i++) {\r\n this.snake.parts.push({ x: 8 + i, y: 8 });\r\n }\r\n\r\n if (mode === 'obstacles') {\r\n this.obstacles = [];\r\n let j = 1;\r\n do {\r\n this.addObstacles();\r\n } while (j++ < 9);\r\n }\r\n\r\n this.resetFruit();\r\n this.updatePositions();\r\n }\r\n}\r\n","export const BOARD_SIZE = 18;\r\n\r\nexport const CONTROLS = {\r\n LEFT: 37,\r\n UP: 38,\r\n RIGHT: 39,\r\n DOWN: 40\r\n};\r\n\r\nexport const COLORS = {\r\n GAME_OVER: '#D24D57',\r\n FRUIT: '#EC644B',\r\n HEAD: '#336E7B',\r\n BODY: '#C8F7C5',\r\n BOARD: '#86B5BD',\r\n OBSTACLE: '#383522'\r\n};\r\n\r\nexport const GAME_MODES = {\r\n classic: 'Classic',\r\n no_walls: 'No Walls',\r\n obstacles: 'Obstacles'\r\n};","import { Component, ViewChild, ElementRef, OnInit, HostListener } from '@angular/core';\nimport { COLS, BLOCK_SIZE, ROWS, COLORS, LINES_PER_LEVEL, LEVEL, POINTS, KEY } from './tetris.constants';\nimport { Piece, IPiece } from './tetrispiece.component';\nimport { GameService } from './tetris.service';\nimport { NavigationEnd, Router } from '@angular/router';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'tetris',\n templateUrl: './tetris.component.html',\n styleUrls: ['./tetris.component.css']\n})\nexport class TetrisComponent implements OnInit {\n\n @ViewChild('board', { static: true })\n canvas: ElementRef\r\n
\r\n ngx-Snake
\r\n\r\n
\r\n Score: {{score}}
\r\nBest Score: {{best_score}}
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \n
\n \n \n \n \n
","export const COLS = 10;\r\nexport const ROWS = 20;\r\nexport const BLOCK_SIZE = 30;\r\nexport const LINES_PER_LEVEL = 10;\r\nexport const COLORS = [\r\n 'none',\r\n 'cyan',\r\n 'blue',\r\n 'orange',\r\n 'yellow',\r\n 'green',\r\n 'purple',\r\n 'red'\r\n];\r\nexport const SHAPES = [\r\n [],\r\n [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]],\r\n [[2, 0, 0], [2, 2, 2], [0, 0, 0]],\r\n [[0, 0, 3], [3, 3, 3], [0, 0, 0]],\r\n [[4, 4], [4, 4]],\r\n [[0, 5, 5], [5, 5, 0], [0, 0, 0]],\r\n [[0, 6, 0], [6, 6, 6], [0, 0, 0]],\r\n [[7, 7, 0], [0, 7, 7], [0, 0, 0]]\r\n];\r\n\r\nexport class KEY {\r\n static readonly ESC = 27;\r\n static readonly SPACE = 32;\r\n static readonly LEFT = 37;\r\n static readonly UP = 38;\r\n static readonly RIGHT = 39;\r\n static readonly DOWN = 40;\r\n static readonly NONE = 0\r\n}\r\n\r\nexport class POINTS {\r\n static readonly SINGLE = 100;\r\n static readonly DOUBLE = 300;\r\n static readonly TRIPLE = 500;\r\n static readonly TETRIS = 800;\r\n static readonly SOFT_DROP = 1;\r\n static readonly HARD_DROP = 2;\r\n}\r\n\r\nexport class LEVEL {\r\n static readonly 0 = 800;\r\n static readonly 1 = 720;\r\n static readonly 2 = 630;\r\n static readonly 3 = 550;\r\n static readonly 4 = 470;\r\n static readonly 5 = 380;\r\n static readonly 6 = 300;\r\n static readonly 7 = 220;\r\n static readonly 8 = 130;\r\n static readonly 9 = 100;\r\n static readonly 10 = 80;\r\n static readonly 11 = 80;\r\n static readonly 12 = 80;\r\n static readonly 13 = 70;\r\n static readonly 14 = 70;\r\n static readonly 15 = 70;\r\n static readonly 16 = 50;\r\n static readonly 17 = 50;\r\n static readonly 18 = 50;\r\n static readonly 19 = 30;\r\n static readonly 20 = 30;\r\n // 29+ is 20ms\r\n}","import { Injectable } from '@angular/core';\r\nimport { IPiece } from './tetrispiece.component';\r\nimport { COLS, ROWS, POINTS } from './tetris.constants';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\n\r\nexport class GameService {\r\n valid(p: IPiece, board: number[][]): boolean {\r\n return p.shape.every((row, dy) => {\r\n return row.every((value, dx) => {\r\n let x = p.x + dx;\r\n let y = p.y + dy;\r\n return (\r\n this.isEmpty(value) ||\r\n (this.insideWalls(x) &&\r\n this.aboveFloor(y) &&\r\n this.notOccupied(board, x, y))\r\n );\r\n });\r\n });\r\n }\r\n\r\n isEmpty(value: number): boolean {\r\n return value === 0;\r\n }\r\n\r\n insideWalls(x: number): boolean {\r\n return x >= 0 && x < COLS;\r\n }\r\n\r\n aboveFloor(y: number): boolean {\r\n return y <= ROWS;\r\n }\r\n\r\n notOccupied(board: number[][], x: number, y: number): boolean {\r\n return board[y] && board[y][x] === 0;\r\n }\r\n\r\n rotate(piece: IPiece): IPiece {\r\n let p: IPiece = JSON.parse(JSON.stringify(piece));\r\n for (let y = 0; y < p.shape.length; ++y) {\r\n for (let x = 0; x < y; ++x) {\r\n [p.shape[x][y], p.shape[y][x]] = [p.shape[y][x], p.shape[x][y]];\r\n }\r\n }\r\n p.shape.forEach(row => row.reverse());\r\n return p;\r\n }\r\n\r\n getLinesClearedPoints(lines: number, level: number): number {\r\n const lineClearPoints =\r\n lines === 1\r\n ? POINTS.SINGLE\r\n : lines === 2\r\n ? POINTS.DOUBLE\r\n : lines === 3\r\n ? POINTS.TRIPLE\r\n : lines === 4\r\n ? POINTS.TETRIS\r\n : 0;\r\n\r\n return (level + 1) * lineClearPoints;\r\n }\r\n}","import { COLORS, SHAPES } from './tetris.constants';\r\n\r\nexport interface IPiece {\r\n x: number;\r\n y: number;\r\n color: string;\r\n shape: number[][];\r\n}\r\n\r\nexport class Piece implements IPiece {\r\n x: number;\r\n y: number;\r\n color: string;\r\n shape: number[][];\r\n\r\n constructor(private ctx: CanvasRenderingContext2D) {\r\n this.spawn();\r\n }\r\n\r\n spawn() {\r\n const typeId = this.randomizeTetrominoType(COLORS.length - 1);\r\n this.shape = SHAPES[typeId];\r\n this.color = COLORS[typeId];\r\n this.x = typeId === 4 ? 4 : 3;\r\n this.y = 0;\r\n }\r\n\r\n draw() {\r\n this.ctx.fillStyle = this.color;\r\n this.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value > 0) {\r\n this.ctx.fillRect(this.x + x, this.y + y, 1, 1);\r\n }\r\n });\r\n });\r\n }\r\n\r\n drawNext(ctxNext: CanvasRenderingContext2D) {\r\n ctxNext.clearRect(0, 0, ctxNext.canvas.width, ctxNext.canvas.height);\r\n ctxNext.fillStyle = this.color;\r\n this.shape.forEach((row, y) => {\r\n row.forEach((value, x) => {\r\n if (value > 0) {\r\n ctxNext.fillRect(x, y, 1, 1);\r\n }\r\n });\r\n });\r\n }\r\n\r\n move(p: IPiece) {\r\n this.x = p.x;\r\n this.y = p.y;\r\n this.shape = p.shape;\r\n }\r\n\r\n randomizeTetrominoType(noOfTypes: number): number {\r\n return Math.floor(Math.random() * noOfTypes + 1);\r\n }\r\n}","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'games-overlay',\n templateUrl: './games-overlay.component.html',\n styleUrls: ['./games-overlay.component.css']\n})\nexport class GamesOverlayComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","TETRIS
\n \nScore: {{ points }} Lines: {{ lines }} Level: {{ level }}
\n \n \n\n \n \n \n \n
Angular Games\n \n \n \n
\n\n I didnt build any of these but did want to provide a little fun on the app, so you can pick from a few different games that are built into this app and are all in Angular.\n
\n\n The only coding take-away here is that I can use other peoples code natively in app and plus got to see a few tricks in how they built these.\n
\n\n I ll make one caveat that I did add buttons to both of these games so they work on mobile.\n
\n\n
ngx-Snake
\n\n This is a cool game I found all in Angular (Desktop preferred). Please check out the info below if curious where I got it from.\n
\n| \n Developer:\n | \n\n Samir Hodzic \n | \n
| \n Repo:\n | \n\n GitHub \n | \n
\n
ng-tetris
\n\n Another neat game I found all in Angular (Desktop preferred). Please check out the info below if curious where I got it from.\n
\n| \n Developer:\n | \n\n Michael Karén \n | \n
| \n Repo:\n | \n\n GitHub \n | \n
\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
","import { Component, OnInit } from '@angular/core';\nimport { marker, mapmarker } from '../../../../models/googlemap_models';\nimport { truncateWithEllipsis } from '@amcharts/amcharts4/.internal/core/utils/Utils';\nimport { GooglemarkerapiService } from '../../../../services/googlemarkerapi.service';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare var markerCheck: boolean;\ndeclare var markers: marker[];\ndeclare var google: any;\ndeclare let ga: Function;\n\n@Component({\n selector: 'googlemap',\n templateUrl: './googlemap.component.html',\n styleUrls: ['./googlemap.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\nexport class GooglemapComponent implements OnInit {\n\n public mapMarkers: google.maps.Marker[];\n public userMarkers: google.maps.Marker[];\n public drawnPolys: google.maps.Polyline[];\n public drawnCircles: google.maps.Circle[];\n public apiMarkers: mapmarker[];\n public info_details: string;\n public marker: google.maps.Marker;\n public geo_coder: google.maps.Geocoder;\n public kmlURL: string;\n public googleMap: any;\n public is_marker: boolean;\n public is_user_marker: boolean;\n public is_traffic: boolean;\n public is_noaa: boolean;\n public is_airQ: boolean;\n public is_fire: boolean;\n public is_drawing: boolean;\n public trafficLayer: google.maps.TrafficLayer;\n public noaaKMLLayer: google.maps.KmlLayer;\n public airKMLLayer: google.maps.KmlLayer;\n public fireKMLLayer: google.maps.KmlLayer;\n public mapDrawing: google.maps.drawing.DrawingManager;\n public directionService: google.maps.DirectionsService;\n public directionsRenderer: google.maps.DirectionsRenderer;\n public addressTo: string;\n public addressFrom: string;\n public is_directions: boolean;\n public radioData: string;\n public searchValue: string;\n public R: number;\n public LatLng: google.maps.LatLng;\n public showGoogle: boolean;\n public googleMapOverlay: boolean;\n public toolActive: boolean;\n\n constructor(public markerService: GooglemarkerapiService, public router: Router) {\n ga('set', 'page', 'Google_Maps');\n ga('send', 'pageview');\n }\n\n ngOnInit() {\n this.is_marker = false;\n this.is_user_marker = false;\n this.is_traffic = false;\n this.is_noaa = false;\n this.is_airQ = false;\n this.is_drawing = false;\n this.is_fire = false;\n this.mapMarkers = [];\n this.userMarkers = [];\n this.drawnPolys = [];\n this.drawnCircles = [];\n this.searchValue = '';\n this.info_details = '';\n this.R = 6378137;\n this.hideAll();\n }\n //overlay functions\n hideAll(){\n this.toolActive = false;\n this.showGoogle = false;\n }\n toolAction(selected: string): void {\n this.hideAll();\n this.googleMapOverlay = false;\n this.toolActive = true;\n switch(selected)\n {\n case \"google\":\n this.showGoogle = true;\n setTimeout(() => {\n this.googleMapOverlay = true;\n }, 725);\n break;\n }\n }\n toolClose(): void {\n this.googleMapOverlay = false;\n setTimeout(() => {\n this.toolActive = false;\n }, 725)\n }\n //when map loads\n onMapReady(map) {\n this.googleMap = map;\n this.geo_coder = new google.maps.Geocoder();\n this.directionService = new google.maps.DirectionsService();\n this.directionsRenderer = new google.maps.DirectionsRenderer;\n this.radioData = \"1\";\n this.setStyle(this.radioData);\n }\n ////////////////////////////////////////////////////\n /// Get Directions ///\n ////////////////////////////////////////////////////\n enableDirections(): void {\n if(this.is_directions){\n this.is_directions = false;\n this.directionsRenderer.setMap(null);\n this.info_details = '';\n }\n else\n {\n this.is_directions = true;\n }\n }\n getDirections(): void {\n const thisComponent = this;\n thisComponent.directionService.route({\n origin: this.addressFrom,\n destination: this.addressTo,\n travelMode: google.maps.TravelMode['DRIVING']\n }, function(response, status){\n if(status.toString() === 'OK')\n {\n thisComponent.directionsRenderer.setDirections(response);\n thisComponent.directionsRenderer.setMap(thisComponent.googleMap);\n thisComponent.info_details = '\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n Submit\r\n
\r\n \r\nDirection Info:
';\n thisComponent.info_details += 'Duration: \"' + response.routes[0].legs[0].duration.text;\n thisComponent.info_details += '
Distance: \"' + response.routes[0].legs[0].distance.text;\n thisComponent.info_details += '
Steps:
\"';\n response.routes[0].legs[0].steps.forEach(item => {\n thisComponent.info_details += 'Go: ' + item.distance.text + ' For: ' + item.duration.text + ' - ' + item.instructions + '
'\n });\n }\n else\n {\n window.alert(\"Not enough info for Google to find route, please try adding state, city or zip\")\n }\n });\n }\n ////////////////////////////////////////////////////\n /// Marker Creation ///\n ////////////////////////////////////////////////////\n setMarkers() {\n if(this.is_marker == false)\n {\n this.markerService.getMapMarkers().subscribe(response =>{\n this.apiMarkers = response;\n this.apiMarkers.forEach(item => {\n const marker = new google.maps.Marker({\n ceo: item.ceo\n });\n marker.setPosition(new google.maps.LatLng(item.lat, item.lng));\n marker.setTitle(item.title);\n marker.setIcon(\"../../assets/media/\" + item.icon);\n marker.setMap(this.googleMap);\n this.mapMarkers.push(marker);\n });\n this.is_marker = true\n });\n }\n else\n {\n this.mapMarkers.forEach(marker =>{\n marker.setMap(null);\n });\n this.mapMarkers = [];\n this.is_marker = false;\n }\n }\n ////////////////////////////////////////////////////\n /// Find User Loc ///\n ////////////////////////////////////////////////////\n //function to find users location\n findMe()\n {\n console.log(this.is_user_marker);\n if(!this.is_user_marker)\n {\n this.is_user_marker = true;\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition((position) => {\n this.showPosition(position);\n });\n } else {\n alert(\"Geolocation is not supported by this browser.\");\n }\n }\n else\n {\n this.userMarkers.forEach(marker =>{\n marker.setMap(null);\n });\n this.userMarkers = [];\n this.is_user_marker = false;\n }\n }\n showPosition(position) {\n let location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);\n this.googleMap.panTo(location);\n if (!this.marker) {\n const marker = new google.maps.Marker();\n marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));\n marker.setTitle('You');\n marker.setMap(this.googleMap);\n marker.setIcon(\"../../assets/media/User.png\");\n this.userMarkers.push(marker);\n }\n else {\n this.marker.setPosition(location);\n }\n }\n ////////////////////////////////////////////////////\n /// Drawing Tools ///\n ////////////////////////////////////////////////////\n //function for the drawing objects controller, driven off flag is_drawing\n enableDrawing(): void{\n const thisComponent = this;\n if(this.is_drawing == false)\n {\n this.mapDrawing = new google.maps.drawing.DrawingManager({\n drawingMode: google.maps.drawing.OverlayType.MARKER,\n drawingControl: true,\n drawingControlOptions: {\n position: google.maps.ControlPosition.TOP_CENTER,\n drawingModes: ['marker', 'circle', 'polyline']\n },\n markerOptions: { icon: '../../assets/media/airplane.png'},\n });\n //javascript for polyline complete Event\n google.maps.event.addListener(this.mapDrawing, 'polylinecomplete', function (polyline) {\n //add poly to array for removal later\n thisComponent.drawnPolys.push(polyline);\n //figure out miles between points on the line\n if(polyline.getPath().getArray().length == 2){\n thisComponent.findMiles(polyline.getPath().getArray());\n }\n //or count markers in side polyline\n else {\n thisComponent.countPolyMarkers(polyline);\n }\n });\n //javascript for circle complete\n google.maps.event.addListener(this.mapDrawing, 'circlecomplete', function (circle) {\n thisComponent.drawnCircles.push(circle);\n let ne = circle.getBounds().getNorthEast();\n let sw = circle.getBounds().getSouthWest();\n let theta = 0;\n let drawnCords = [];\n let radi = Math.abs(ne.lng() - sw.lng()) / 2;\n for (theta = 0; theta < 360; theta += 1){\n let cos = Math.cos(theta) * radi + circle.getCenter().lat();\n let sin = Math.sin(theta) * radi + circle.getCenter().lng();\n drawnCords.push(new google.maps.LatLng(cos, sin));\n };\n let drawnPoly = new google.maps.Polygon({\n paths: drawnCords\n });\n thisComponent.countPolyMarkers(drawnPoly);\n });\n\n this.mapDrawing.setMap(this.googleMap);\n this.is_drawing = true;\n }\n else\n {\n this.drawnPolys.forEach(item => {\n item.setMap(null);\n });\n this.drawnCircles.forEach(item => {\n item.setMap(null);\n });\n this.drawnPolys = [];\n this.drawnCircles = [];\n this.mapDrawing.setMap(null);\n this.is_drawing = false;\n this.info_details = '';\n }\n }\n //find miles from polyline and display it\n findMiles(polylineVal): void{\n let polylineLatValA = polylineVal[0].lat();\n let polylineLngValA = polylineVal[0].lng();\n let polylineLatValB = polylineVal[1].lat();\n let polylineLngValB = polylineVal[1].lng();\n let X = this.findSinandCos(\n this.findRad(polylineLatValB - polylineLatValA),\n this.findRad(polylineLngValB - polylineLngValA),\n polylineLatValA,\n polylineLatValB\n );\n let Y = 2 * Math.atan2(Math.sqrt(X), Math.sqrt(1 - X));\n let Z = this.R * Y;\n this.info_details = '
Distance
The Last Line Drawn in Miles: ' + (Z / 1609.344).toFixed(2);\n }\n //count marker items in a polyline\n countPolyMarkers(drawnPoly): void{\n console.log(\"I am here\");\n let companyCount = 0;\n let companyList = \"| Company Location | CEO | \"+\n \"
|---|---|
| \" + item.get('title') + \" | \" + \n \"\" + item.get('ceo') + \" |
Google Map API\n \n
\n\n Chart Themes - at the top you can select Silver, Night, and Normal\n
Google GeoLocation API - at the top you can search for an address and see that marker show up using the Google API\n
\n
\n Markers - Displays a few company HQ markers on the the map with logos from the GoogleMaps API controller on the backend\n
\n
\n Find You - If you accept letting the site use your location, will display a user icon on your location and pan to it\n
\n
\n Traffic - Displays Traffic Layer from Google Map API\n
\n
\n Weather - Displays NOAA wearger KML Layer\n
\n
\n Air Quality - Displays Air Quality KML Layer\n
\n
\n Fire - Displays Fire KML Layer from USDA Forest Service\n
\n
\n Drawing - Allows Map drawing through Google API, I recommend adding the markers and then drawing a circle that encapsulates them for a discription under the map\n
\n
\n Also If you use the line and click and then double click you will get a distance calculation in miles below the map\n
\n
\n Directions - Allows To and From address. Direction will display on map as well as step by step under the map\n
\n
API Calls\n \n
\n\n Google Maps is basically all API calls, with special notes for the GeoLocation stuff. The Markers are also brought in with the API project in the Google Controller\n
\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'polygon-overlay',\n templateUrl: './polygon-overlay.component.html',\n styleUrls: ['./polygon-overlay.component.css']\n})\nexport class PolygonOverlayComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","Polygon.IO\n \n
\n\n I am using the Polygon.IO API to pull back some financial data on stocks by symbol. Its a really cool API and easy to use, \n they dont offer the current quote/price for free and I didnt want to pay $199.00 a month for it so sorry this is just for \n demo purposes. Below are a few example symbols to help if you dont have any handy:\n
\n- \n
- F : Ford \n
- TSLA : Tesla \n
- MSFT : Microsoft \n
- AAPL : Apple \n
- GOOG : Google \n
- FB : Facebook \n
\n
API Calls\n \n
\n\n So my backend makes the calls, I could do it from the front end but then my key would be exposed so just put it all in the backend \n so I could hide my credentials a little better.\n
\n\n Its a pretty neat API for financial data if you are interested:\n
Polygon.IO \n
\n \n
\n\n
\n\n
\n \n
","import { Component, OnInit } from '@angular/core';\nimport { PolygonIOService } from '../../../../services/polygon-io.service';\nimport { info, news, close, financials } from '../../../../models/polygon_models';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'polygonio',\n templateUrl: './polygonio.component.html',\n styleUrls: ['./polygonio.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\nexport class PolygonioComponent implements OnInit {\n\n tickerInfo: info[];\n tickerNews: news[];\n tickerClose: close[];\n tickerFinancials: financials[];\n tickerFinancialsCheck: financials[];\n public infoloaded: boolean;\n public searchValue: string\n public polyOverlay: boolean;\n public toolActive: boolean;\n public showPoly: boolean;\n\n constructor(private polyService:PolygonIOService) { \n ga('set', 'page', 'Poly');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.hideAll();\n this.infoloaded = false;\n this.getTickerInfo(\"msft\");\n }\n\n getTickerInfo(symbol: string) {\n this.polyService.getTickerInfo(symbol).subscribe(response =>{\n this.tickerInfo = response;\n if (this.tickerInfo != null)\n {\n this.polyService.getTickerFinancials(symbol).subscribe(response => {\n this.tickerFinancials = response;\n });\n this.polyService.getTickerNews(symbol).subscribe(response => {\n this.tickerNews = response;\n });\n this.polyService.getTickerClose(symbol).subscribe(response => {\n this.tickerClose = response;\n this.infoloaded = true;\n });\n }\n });\n }\n\n //overlay functions\n hideAll(){\n this.toolActive = false;\n this.showPoly = false;\n }\n toolAction(selected: string): void {\n this.hideAll();\n this.polyOverlay = false;\n this.toolActive = true;\n switch(selected)\n {\n case \"poly\":\n this.showPoly = true;\n setTimeout(() => {\n this.polyOverlay = true;\n }, 725);\n break;\n }\n }\n toolClose(): void {\n this.polyOverlay = false;\n setTimeout(() => {\n this.toolActive = false;\n }, 725)\n }\n}\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'twitter-overlay',\n templateUrl: './twitter-overlay.component.html',\n styleUrls: ['./twitter-overlay.component.css']\n})\nexport class TwitterOverlayComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","\n \n
\n \n \n
\n \n
Loading Please Wait...\n
\n \n Loading...\n
\n Loading Please Wait...\n
\n
\n \n
\n \n
Primary Exchange: {{tickerInfo[0].primary_exchange}}\n
Location: {{tickerInfo[0].locale}}\n \n
Close: tickerClose[0].c}\"> {{tickerClose[0].c}}\n
Low: {{tickerClose[0].l}}\n \n
Debit NonCurrent: {{tickerFinancials[0].debtNonCurrent | number}}\n
Book Value Per Share: {{tickerFinancials[0].bookValuePerShare}}\n
Ratio: {{tickerFinancials[0].currentRatio}}\n
Debit to Equity Ratio: {{tickerFinancials[0].debtToEquityRatio}}\n
Earnings Per Share: {{tickerFinancials[0].earningsPerBasicShareUSD}}\n
Gross Profit: {{tickerFinancials[0].grossProfit | number}}\n
Dividends Per Share: {{tickerFinancials[0].dividendsPerBasicCommonShare}}\n
Dividend Yield: {{tickerFinancials[0].dividendYield}}\n
\n {{tickerInfo[0].name}}
\nInfo:
\n Type: {{tickerInfo[0].market}}\nPrimary Exchange: {{tickerInfo[0].primary_exchange}}\n
Location: {{tickerInfo[0].locale}}\n \n
Previous Close:
\n Open: {{tickerClose[0].o}}\nClose: tickerClose[0].c}\"> {{tickerClose[0].c}}\n
Low: {{tickerClose[0].l}}\n \n
Financials (as of {{tickerFinancials[0].updated}}):
\n Assets NonCurrent: {{tickerFinancials[0].assetsNonCurrent | number}}\nDebit NonCurrent: {{tickerFinancials[0].debtNonCurrent | number}}\n
Book Value Per Share: {{tickerFinancials[0].bookValuePerShare}}\n
Ratio: {{tickerFinancials[0].currentRatio}}\n
Debit to Equity Ratio: {{tickerFinancials[0].debtToEquityRatio}}\n
Earnings Per Share: {{tickerFinancials[0].earningsPerBasicShareUSD}}\n
Gross Profit: {{tickerFinancials[0].grossProfit | number}}\n
Dividends Per Share: {{tickerFinancials[0].dividendsPerBasicCommonShare}}\n
Dividend Yield: {{tickerFinancials[0].dividendYield}}\n
\n ![\"Card](\"{{artical.image_url}}\")
\n \n
\n Twitter API\n \n \n
\nMain purpose here is to show I can use basic authorization to get data from outside vendors, in this case Twitter.
\nI am getting all this data from my backend API in the Twitter Controller. I actually built another for search by GeoLocations that I was going to use with the map but felt like it would be overkill.
\n","\n\n \n
\n\n
\n\n
\n \n
Loading Please Wait...\n
\n\n Loading...\n
\n Loading Please Wait...\n
\n \n
\n\n","import { Component, OnInit } from '@angular/core';\nimport { TwitterapiService } from '../../../../services/twitterapi.service';\nimport { tweets } from '../../../../models/twitter_models';\nimport { ActivatedRoute } from '@angular/router';\nimport { trigger, transition, animate, style} from '@angular/animations';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'twitter',\n templateUrl: './twitter.component.html',\n styleUrls: ['./twitter.component.css'],\n animations:[\n trigger('slideInOut', [\n transition(':enter', [\n style({transform: 'translateX(100%)'}),\n animate('750ms ease-in', style({transform: 'translateX(0%)'}))\n ]),\n transition(':leave', [\n animate('750ms ease-in', style({transform: 'translateX(500%)'}))\n ]),\n ])\n ]\n})\nexport class TwitterComponent implements OnInit {\n\n public tweets: tweets[];\n public searchSelection: string;\n public searchValue: string;\n public twitterOverlay: boolean;\n public toolActive: boolean;\n public showTwitter: boolean;\n public infoLoaded: boolean;\n public userID: string;\n\n constructor(public twitterService: TwitterapiService, private route: ActivatedRoute) { \n ga('set', 'page', 'Twitter');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.userID = this.route.snapshot.paramMap.get('userid');\n if(this.userID == null)\n {\n this.userID = \"jmheldridge\";\n }\n this.getTweetsbyUser(this.userID, 50);\n this.infoLoaded = false;\n this.searchSelection = \"user\";\n this.hideAll();\n }\n\n submitbtn() {\n if(this.searchSelection == \"user\")\n {\n this.getTweetsbyUser(this.searchValue,50);\n }\n else\n {\n this.getTweetsbyKeyword(this.searchValue, 50);\n }\n }\n\n getTweetsbyUser(userName: string, count: number){\n this.twitterService.getTweetsbyUser(userName, count).subscribe(response =>{\n this.tweets = response;\n this.infoLoaded = true;\n });\n }\n getTweetsbyKeyword(keyword: string, count: number){\n this.twitterService.getTweetsKeyword(keyword, count).subscribe(response =>{\n this.tweets = response;\n });\n }\n\n //overlay functions\n hideAll(){\n this.toolActive = false;\n this.showTwitter = false;\n }\n toolAction(selected: string): void {\n this.hideAll();\n this.twitterOverlay = false;\n this.toolActive = true;\n switch(selected)\n {\n case \"twitter\":\n this.showTwitter = true;\n setTimeout(() => {\n this.twitterOverlay = true;\n }, 725);\n break;\n }\n }\n toolClose(): void {\n this.twitterOverlay = false;\n setTimeout(() => {\n this.toolActive = false;\n }, 725)\n }\n}\n","\n
\n\n \n \n ![\"Card](\"{{tweet.extended_entities.media[0].media_url}}\")
\n
\n \n ![](\"{{tweet.user.profile_image_url}}\")
\n {{tweet.user.location}} - {{tweet.created_at}}\n
\n {{tweet.user.name}}
\n \n@{{tweet.user.screen_name}}
\n {{tweet.full_text}}\n\n {{tweet.user.location}} - {{tweet.created_at}}\n
\n
\n","import { Component, OnInit } from '@angular/core';\nimport { EmailapiService } from '../../services/emailapi.service';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { email } from '../../models/email_models';\nimport { NavigationEnd, Router } from '@angular/router';\n\ndeclare let ga: Function;\n@Component({\n selector: 'contactme',\n templateUrl: './contactme.component.html',\n styleUrls: ['./contactme.component.css']\n})\nexport class ContactmeComponent implements OnInit {\n\n public emailForm: FormGroup;\n public postForm: email;\n public alert: boolean;\n\n constructor(private emailService: EmailapiService, private formBuilder: FormBuilder, public router: Router) {\n ga('set', 'page', 'Contact');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.alert = false;\n this.createEmailForm();\n }\n\n createEmailForm(){\n this.emailForm = this.formBuilder.group({\n fname: \"\",\n lname: \"\",\n company: \"\",\n reason: \"\",\n email: \"\",\n reciept: \"no\",\n message: \"\"\n });\n }\n submit(){\n console.log(this.emailForm.value.email.indexOf(\".\"));\n if(this.emailForm.value.email.indexOf(\"@\") == -1 || this.emailForm.value.email.indexOf(\".\") == -1)\n {\n alert(\"Please enter a valid email address.\");\n this.alert = true;\n }\n else\n {\n this.postForm = new email();\n this.postForm.fName = this.emailForm.value.fname;\n this.postForm.lName = this.emailForm.value.lname;\n this.postForm.fromEmail = this.emailForm.value.email;\n this.postForm.company = this.emailForm.value.company;\n this.postForm.reason = this.emailForm.value.reason;\n this.postForm.reciept = this.emailForm.value.reciept;\n this.postForm.message = this.emailForm.value.message;\n this.emailService.postEmail(this.postForm).subscribe(response =>{\n let stringResponse = response;\n if(stringResponse = \"success\")\n {\n alert(\"Thanks for taking the time, I have sent the email!\")\n this.alert = false;\n this.createEmailForm();\n }\n });\n }\n }\n dismissAlert()\n {\n this.alert = false;\n }\n}\n","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'footer',\n templateUrl: './footer.component.html',\n styleUrls: ['./footer.component.css']\n})\nexport class FooterComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","","import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'header',\n templateUrl: './header.component.html',\n styleUrls: ['./header.component.css']\n})\nexport class HeaderComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n}\n","Please use the form below to send me an email about the site.
\n \n \n\n
\n","import { Component, OnInit } from '@angular/core';\nimport { Route, Router, NavigationStart } from '@angular/router';\n\n@Component({\n selector: 'navigation',\n templateUrl: './navigation.component.html',\n styleUrls: ['./navigation.component.css']\n})\nexport class NavigationComponent implements OnInit {\n\n navbarOpen = false;\n public homeActivated: boolean;\n public aboutActivated: boolean;\n public contactActivated: boolean;\n public examplesActivated: boolean;\n public blogreadActivated: boolean;\n public activatedRoute: string;\n\n constructor(private router: Router) { \n this.router.events.subscribe(value => {\n if (value instanceof NavigationStart) {\n this.homeActivated = false;\n this.aboutActivated = false;\n this.contactActivated = false;\n this.examplesActivated = false;\n this.blogreadActivated = false;\n switch(value.url)\n {\n case \"/home\":\n this.homeActivated = true;\n break; \n case \"/about\":\n this.aboutActivated = true;\n break; \n case \"/contact\":\n this.contactActivated = true;\n break; \n case \"/examples\":\n this.examplesActivated = true;\n break; \n case \"/blogread\":\n this.blogreadActivated = true;\n break; \n }\n }\n });\n }\n\n ngOnInit(): void {\n\n }\n\n toggleNavbar() {\n this.navbarOpen = !this.navbarOpen;\n }\n\n}\n","","import { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute, Router, NavigationEnd } from '@angular/router'\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'pagenotfound',\n templateUrl: './pagenotfound.component.html',\n styleUrls: ['./pagenotfound.component.css']\n})\nexport class PagenotfoundComponent implements OnInit {\n\n public routeName: string;\n\n constructor(private route: ActivatedRoute,\n private router: Router\n ) { \n this.router.events.forEach((event) => {\n if(event instanceof NavigationEnd)\n {\n this.ngOnInit();\n }\n });\n ga('set', 'page', 'Page_Not_Found');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n this.routeName = this.route.snapshot.url[0].path;\n }\n\n}\n","\n
\nConsole.WriteLine(\"Welcome!\")
\nA Coding Site for Jeffrey Heldridge
\n\n
\n\n","import { Component, OnInit } from '@angular/core';\nimport { NavigationEnd, Router } from '@angular/router';\n\ndeclare let ga: Function;\n\n@Component({\n selector: 'welcome',\n templateUrl: './welcome.component.html',\n styleUrls: ['./welcome.component.css']\n})\nexport class WelcomeComponent implements OnInit {\n\n constructor(public router: Router) { \n ga('set', 'page', 'Welcome');\n ga('send', 'pageview');\n }\n\n ngOnInit(): void {\n }\n\n}\n","Navigation Error
\nUnable to find a page called \"{{this.routeName}}\", please click here to get back to the home page
\n\n
","export class email {\r\n fromEmail: string;\r\n message: string;\r\n fName: string;\r\n lName: string;\r\n reason: string;\r\n company: string;\r\n reciept: string;\r\n}","import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http'\nimport { blog } from '../models/blog_models';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class BlogapiService {\n\n constructor(private http: HttpClient) { }\n\n public getBlogList()\n {\n return this.http.getThis Website:
\n\n Hello, and welcome to my site. This is a webapp I made to occupy some time with the corona virus going around and me self-isolating. Plus I can potentially use this to show off some skills as well as have a good reference for myself later on. The hope also is that one day might be able to use this in an interview setting, where it should be a good example of my code as I can just say go to my URL and look at my github.\n
\n\n Most of the good stuff in this site is on the code example pages, in them at least on desktop there is a tool overlay on the right that gives an explaination of what is being used. Its hidden on mobile as it takes up a lot of screen.\n
\n\n Stack used in this site:\n
\n \n \n \n \n
\n Some of the services used:\n
\n \n ![](\"../../../assets/media/analytics-logo.png\" "\\"Google"){kind=logo}
\n \n
\n Some of the languages used:\n
\n \n ![](\"../../../assets/media/csharp-logo.png\" "\\"C#\\"/"){kind=logo}
\n \n
\n I also hope you can get a sense of my overall style as all of this site is my HTML and CSS.\n
\n\n Current build is running an Angular 12.0 UI with a .Net/Core 6.0 backend, hosted on a Azure webservice.\n
\n