simpo-component-library 2.0.96 → 2.0.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2022/lib/sections/registration-form/registration-form.component.mjs +29 -19
  2. package/esm2022/lib/sections/view-blog/view-blog.component.mjs +924 -1
  3. package/esm2022/lib/services/rest.service.mjs +7 -1
  4. package/fesm2022/simpo-component-library.mjs +945 -7
  5. package/fesm2022/simpo-component-library.mjs.map +1 -1
  6. package/lib/sections/registration-form/registration-form.component.d.ts +3 -1
  7. package/lib/services/rest.service.d.ts +2 -0
  8. package/package.json +1 -1
  9. package/simpo-component-library-2.0.98.tgz +0 -0
  10. package/simpo-component-library-2.0.96.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -3828,6 +3828,12 @@ class RestService {
3828
3828
  createAdmission(payload) {
3829
3829
  return this.http.post(this.BASE_URL + `crm/registration/admission?registrationId=${payload?.registrationId || ''}`, payload);
3830
3830
  }
3831
+ createPaymentForAdmission(payload) {
3832
+ return this.http.post(this.BASE_URL + `crm/registration/admission/payment`, payload);
3833
+ }
3834
+ createRegistrationForPayment(payload) {
3835
+ return this.http.post(this.BASE_URL + `crm/registration/registration/payment`, payload);
3836
+ }
3831
3837
  getSubscriptionForFeeStructure(gradeId) {
3832
3838
  const businessId = localStorage.getItem('businessId');
3833
3839
  return this.http.get(this.BASE_URL + `crm/subscription/plan/list?businessId=${businessId}&gradeId=${gradeId}`);
@@ -6492,6 +6498,929 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
6492
6498
  class ViewBlogComponent {
6493
6499
  constructor(_eventService) {
6494
6500
  this._eventService = _eventService;
6501
+ this.responseData = {
6502
+ "displayId": "BG1285",
6503
+ "updatedTimeStamp": "2024-12-14T17:04:14.000+00:00",
6504
+ "readTime": "8",
6505
+ "wordCount": 1608,
6506
+ "totalVisits": 0,
6507
+ "id": "1efba3d1-5cac-692c-8486-4505201f8678",
6508
+ "time": 0.0,
6509
+ "version": "",
6510
+ "blocks": [
6511
+ {
6512
+ "id": "6z2AphuRaq",
6513
+ "type": "paragraph",
6514
+ "data": {
6515
+ "text": "<span style=\"font-size:16pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">A Complete Guide to the Top 5 Web Development Frameworks for Novices</span>"
6516
+ }
6517
+ },
6518
+ {
6519
+ "id": "hEM1ub64il",
6520
+ "type": "paragraph",
6521
+ "data": {
6522
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Overview</span>"
6523
+ }
6524
+ },
6525
+ {
6526
+ "id": "OkgSbNjWvv",
6527
+ "type": "paragraph",
6528
+ "data": {
6529
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">The article's goal</span>"
6530
+ }
6531
+ },
6532
+ {
6533
+ "id": "8aLKC67NDP",
6534
+ "type": "paragraph",
6535
+ "data": {
6536
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Selecting the best framework in the constantly changing field of web development can be difficult, particularly for novices. By outlining the features and advantages of some of the greatest web development frameworks on the market today, this post seeks to assist novices in choosing the one that would best meet their requirements.</span>"
6537
+ }
6538
+ },
6539
+ {
6540
+ "id": "Q-lcDNxfID",
6541
+ "type": "paragraph",
6542
+ "data": {
6543
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;An Overview of Frameworks for Web Development</span>"
6544
+ }
6545
+ },
6546
+ {
6547
+ "id": "wKrSxt4XMV",
6548
+ "type": "paragraph",
6549
+ "data": {
6550
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Web development frameworks are collections of best practices, libraries, and tools designed to make creating websites and apps easier. They give developers a clear structure and pre-built components to help them create applications more rapidly and effectively.</span>"
6551
+ }
6552
+ },
6553
+ {
6554
+ "id": "3p4EODCtRd",
6555
+ "type": "paragraph",
6556
+ "data": {
6557
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Relevance for Novices</span>"
6558
+ }
6559
+ },
6560
+ {
6561
+ "id": "FjGjIfQupa",
6562
+ "type": "paragraph",
6563
+ "data": {
6564
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Frameworks are a means for novice web developers to avoid writing the same code over and over again. They also assist in resolving some of the most common issues, allowing one to concentrate on learning and improving his abilities rather than making a new discovery.</span>"
6565
+ }
6566
+ },
6567
+ {
6568
+ "id": "CRdm6fFkP2",
6569
+ "type": "paragraph",
6570
+ "data": {
6571
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;The intended audience</span>"
6572
+ }
6573
+ },
6574
+ {
6575
+ "id": "aLUXXN6bCi",
6576
+ "type": "paragraph",
6577
+ "data": {
6578
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;This course is perfect for:&nbsp;</span>"
6579
+ }
6580
+ },
6581
+ {
6582
+ "id": "UO06Fqzbdy",
6583
+ "type": "paragraph",
6584
+ "data": {
6585
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">● Novice web developers who wish to begin their careers</span>"
6586
+ }
6587
+ },
6588
+ {
6589
+ "id": "1fSaoLtmFI",
6590
+ "type": "paragraph",
6591
+ "data": {
6592
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">● Students and hobbyists who wish to learn web development as a pastime or career.</span>"
6593
+ }
6594
+ },
6595
+ {
6596
+ "id": "4KIezvDnLX",
6597
+ "type": "paragraph",
6598
+ "data": {
6599
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">An overview of the article</span>"
6600
+ }
6601
+ },
6602
+ {
6603
+ "id": "29dySrByJF",
6604
+ "type": "paragraph",
6605
+ "data": {
6606
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Each framework will be covered in the manner described below:</span>"
6607
+ }
6608
+ },
6609
+ {
6610
+ "id": "WEWoWWlvj2",
6611
+ "type": "paragraph",
6612
+ "data": {
6613
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;A synopsis of the framework and its background&nbsp;</span>"
6614
+ }
6615
+ },
6616
+ {
6617
+ "id": "VatZ_RsLjy",
6618
+ "type": "paragraph",
6619
+ "data": {
6620
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">● Benefits for novices&nbsp;</span>"
6621
+ }
6622
+ },
6623
+ {
6624
+ "id": "ICP_OEcFRo",
6625
+ "type": "paragraph",
6626
+ "data": {
6627
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">● Educational materials and advice on how to get started</span>"
6628
+ }
6629
+ },
6630
+ {
6631
+ "id": "6FqPF85-1S",
6632
+ "type": "paragraph",
6633
+ "data": {
6634
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;1. React 1.1 React Overview</span>"
6635
+ }
6636
+ },
6637
+ {
6638
+ "id": "n5FQGCCR1U",
6639
+ "type": "paragraph",
6640
+ "data": {
6641
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">React: What is it?</span>"
6642
+ }
6643
+ },
6644
+ {
6645
+ "id": "k_Vb466Z4h",
6646
+ "type": "paragraph",
6647
+ "data": {
6648
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;A popular JavaScript package for creating user interfaces, particularly for single-page apps, is called React. It lets programmers make massive web apps that can update data without requiring a page reload.</span>"
6649
+ }
6650
+ },
6651
+ {
6652
+ "id": "GJjjiQIHD0",
6653
+ "type": "paragraph",
6654
+ "data": {
6655
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;A Synopsis of Development and History</span>"
6656
+ }
6657
+ },
6658
+ {
6659
+ "id": "J8rdZylegP",
6660
+ "type": "paragraph",
6661
+ "data": {
6662
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Facebook created React in 2013 to improve the speed and usability of creating intricate user interfaces. It is run by Facebook and has a large community. It has become incredibly popular.</span>"
6663
+ }
6664
+ },
6665
+ {
6666
+ "id": "srRVuEHgua",
6667
+ "type": "paragraph",
6668
+ "data": {
6669
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;React Virtual DOM's salient features include: Because React will just render the modified content, this is what improves performance.</span>"
6670
+ }
6671
+ },
6672
+ {
6673
+ "id": "WzHtZP0vvp",
6674
+ "type": "paragraph",
6675
+ "data": {
6676
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Component-Based Architecture: It facilitates easier maintenance and reuse.</span>"
6677
+ }
6678
+ },
6679
+ {
6680
+ "id": "vZh0fzzfqm",
6681
+ "type": "paragraph",
6682
+ "data": {
6683
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;1.2 Advantages of React for Novices</span>"
6684
+ }
6685
+ },
6686
+ {
6687
+ "id": "RwxYz5qsXk",
6688
+ "type": "paragraph",
6689
+ "data": {
6690
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Architecture Based on Components: Beginners may more easily break down their applications into smaller pieces with React.</span>"
6691
+ }
6692
+ },
6693
+ {
6694
+ "id": "93V-qnE525",
6695
+ "type": "paragraph",
6696
+ "data": {
6697
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Big Ecosystem and Community: React is used by millions of developers, and there is a wealth of third-party tools, forums, and lesson content available.</span>"
6698
+ }
6699
+ },
6700
+ {
6701
+ "id": "bhy5WMnYGr",
6702
+ "type": "paragraph",
6703
+ "data": {
6704
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Comprehensive Resources and Documentation: The people who manage the official tool have produced several very good resources, particularly for new users, including:</span>"
6705
+ }
6706
+ },
6707
+ {
6708
+ "id": "p5bJkb8cGl",
6709
+ "type": "paragraph",
6710
+ "data": {
6711
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;1.3 The Learning Curve</span>"
6712
+ }
6713
+ },
6714
+ {
6715
+ "id": "N9eT_cKnZ5",
6716
+ "type": "paragraph",
6717
+ "data": {
6718
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Beginners' First Steepness</span>"
6719
+ }
6720
+ },
6721
+ {
6722
+ "id": "R9HmsqyUy5",
6723
+ "type": "paragraph",
6724
+ "data": {
6725
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;But even with its simplicity, JSX, its components, and its lifecycle can be confusing.</span>"
6726
+ }
6727
+ },
6728
+ {
6729
+ "id": "P-3HWcz7DB",
6730
+ "type": "paragraph",
6731
+ "data": {
6732
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Learning Resources and Tutorials Available</span>"
6733
+ }
6734
+ },
6735
+ {
6736
+ "id": "jkYgAUOe5S",
6737
+ "type": "paragraph",
6738
+ "data": {
6739
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;● The official React documentation is the ideal starting point.&nbsp;</span>"
6740
+ }
6741
+ },
6742
+ {
6743
+ "id": "jMYvQRJIXZ",
6744
+ "type": "list",
6745
+ "data": {
6746
+ "style": "unordered",
6747
+ "items": [
6748
+ "Both Codecademy and freeCodeCamp provide beginner courses."
6749
+ ]
6750
+ }
6751
+ },
6752
+ {
6753
+ "id": "NGr8G8BF29",
6754
+ "type": "paragraph",
6755
+ "data": {
6756
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Usability in Relation to Other Frameworks</span>"
6757
+ }
6758
+ },
6759
+ {
6760
+ "id": "6_0pCELwKP",
6761
+ "type": "paragraph",
6762
+ "data": {
6763
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;React is particularly popular with new users since it has a less steep learning curve than Angular.</span>"
6764
+ }
6765
+ },
6766
+ {
6767
+ "id": "psn72vsGsf",
6768
+ "type": "paragraph",
6769
+ "data": {
6770
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;2. The Vue.js</span>"
6771
+ }
6772
+ },
6773
+ {
6774
+ "id": "xT13vElMbW",
6775
+ "type": "paragraph",
6776
+ "data": {
6777
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">2.1 Overview of the Framework Vue.js</span>"
6778
+ }
6779
+ },
6780
+ {
6781
+ "id": "L49yNPlfXV",
6782
+ "type": "paragraph",
6783
+ "data": {
6784
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;A progressive JavaScript framework for creating user interfaces and single-page apps is called Vue.js.</span>"
6785
+ }
6786
+ },
6787
+ {
6788
+ "id": "soXo-6ypFq",
6789
+ "type": "paragraph",
6790
+ "data": {
6791
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Fundamental Ideas of Vue.js</span>"
6792
+ }
6793
+ },
6794
+ {
6795
+ "id": "9RjPayjPtg",
6796
+ "type": "paragraph",
6797
+ "data": {
6798
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;It emphasizes adaptability and simplicity, which developers may progressively incorporate into their current projects.</span>"
6799
+ }
6800
+ },
6801
+ {
6802
+ "id": "5CIhGysy3P",
6803
+ "type": "paragraph",
6804
+ "data": {
6805
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Comparing Angular with React</span>"
6806
+ }
6807
+ },
6808
+ {
6809
+ "id": "3oFFZ49nDu",
6810
+ "type": "paragraph",
6811
+ "data": {
6812
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Compared to React and Angular, Vue is praised for being easier to integrate, making it a more gradual introduction for novices.</span>"
6813
+ }
6814
+ },
6815
+ {
6816
+ "id": "Kx2RhGANZQ",
6817
+ "type": "paragraph",
6818
+ "data": {
6819
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;2.2 Advantages for Novice Developers</span>"
6820
+ }
6821
+ },
6822
+ {
6823
+ "id": "42_Ii7x6oN",
6824
+ "type": "paragraph",
6825
+ "data": {
6826
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Basic Design and Syntax: New developers may easily and quickly learn the syntax of Vue.</span>"
6827
+ }
6828
+ },
6829
+ {
6830
+ "id": "ecx1UsJm1L",
6831
+ "type": "paragraph",
6832
+ "data": {
6833
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Lightweight Framework: This improves user experience by ensuring that the page loads quickly.</span>"
6834
+ }
6835
+ },
6836
+ {
6837
+ "id": "KniDdRn7Li",
6838
+ "type": "paragraph",
6839
+ "data": {
6840
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Flexibility and Scalability Options: Vue works well for small projects as well as larger ones.</span>"
6841
+ }
6842
+ },
6843
+ {
6844
+ "id": "UUqevHV7TS",
6845
+ "type": "paragraph",
6846
+ "data": {
6847
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;2.3 Vue Learning Resources.Official Documentation for JSON:&nbsp;</span>"
6848
+ }
6849
+ },
6850
+ {
6851
+ "id": "b6r1UFYVmc",
6852
+ "type": "paragraph",
6853
+ "data": {
6854
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">It is thorough and highly beginner-friendly.</span>"
6855
+ }
6856
+ },
6857
+ {
6858
+ "id": "WoXEmQPNJT",
6859
+ "type": "paragraph",
6860
+ "data": {
6861
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Suggested Basic Courses:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> Websites such as Coursera and Udemy offer structured learning pathways.</span>"
6862
+ }
6863
+ },
6864
+ {
6865
+ "id": "Bql0i0LJnr",
6866
+ "type": "paragraph",
6867
+ "data": {
6868
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Support and Community Forums:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> Stack Overflow and other forums are good places to connect with Vue's friendly community.</span>"
6869
+ }
6870
+ },
6871
+ {
6872
+ "id": "RVh3cX2L2m",
6873
+ "type": "paragraph",
6874
+ "data": {
6875
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;3. Angular</span>"
6876
+ }
6877
+ },
6878
+ {
6879
+ "id": "BZ14DeKTKj",
6880
+ "type": "paragraph",
6881
+ "data": {
6882
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;3.1 An Overview of Angular</span>"
6883
+ }
6884
+ },
6885
+ {
6886
+ "id": "rZsUY9TS0e",
6887
+ "type": "paragraph",
6888
+ "data": {
6889
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">The Angular Framework explained</span>"
6890
+ }
6891
+ },
6892
+ {
6893
+ "id": "q1rzjU1WO6",
6894
+ "type": "paragraph",
6895
+ "data": {
6896
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Angular is a framework and platform for creating HTML and TypeScript-based single-page client applications.</span>"
6897
+ }
6898
+ },
6899
+ {
6900
+ "id": "qhPwzbQNPK",
6901
+ "type": "paragraph",
6902
+ "data": {
6903
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Key characteristics of angular two-way data binding include: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">simplifying the model-view synchronization procedure.</span>"
6904
+ }
6905
+ },
6906
+ {
6907
+ "id": "1beOsXKlgq",
6908
+ "type": "paragraph",
6909
+ "data": {
6910
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Injection of Dependency:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> Angular's integrated dependency system improves modularity.</span>"
6911
+ }
6912
+ },
6913
+ {
6914
+ "id": "gLuAX7Gclz",
6915
+ "type": "paragraph",
6916
+ "data": {
6917
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Its Development History.</span>"
6918
+ }
6919
+ },
6920
+ {
6921
+ "id": "VBTmM6Bqgt",
6922
+ "type": "paragraph",
6923
+ "data": {
6924
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">It was first created by Google in 2010. Since then, Angular has undergone significant changes to rank among web developers' top options.</span>"
6925
+ }
6926
+ },
6927
+ {
6928
+ "id": "WCRkowdWCL",
6929
+ "type": "paragraph",
6930
+ "data": {
6931
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;3.2 As a Novice, Why Pick Angular?</span>"
6932
+ }
6933
+ },
6934
+ {
6935
+ "id": "gaS6Yt11oe",
6936
+ "type": "paragraph",
6937
+ "data": {
6938
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;You don't need to know a lot of libraries because Angular provides everything you need to create a web application.</span>"
6939
+ }
6940
+ },
6941
+ {
6942
+ "id": "eGUVhGboCL",
6943
+ "type": "paragraph",
6944
+ "data": {
6945
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Strongly typed with TypeScript:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> even if it gets more complicated, knowing TypeScript could help you advance as an engineer.</span>"
6946
+ }
6947
+ },
6948
+ {
6949
+ "id": "hXXe00D_dr",
6950
+ "type": "paragraph",
6951
+ "data": {
6952
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Real-time updates and two-way data binding ensure smooth and simple data administration.</span>"
6953
+ }
6954
+ },
6955
+ {
6956
+ "id": "GySevVEO3P",
6957
+ "type": "paragraph",
6958
+ "data": {
6959
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;3.3 How to Begin Using Angular</span>"
6960
+ }
6961
+ },
6962
+ {
6963
+ "id": "8QM95ySPbk",
6964
+ "type": "paragraph",
6965
+ "data": {
6966
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Instructions for Setting Up</span>"
6967
+ }
6968
+ },
6969
+ {
6970
+ "id": "klSo7wB7Qt",
6971
+ "type": "paragraph",
6972
+ "data": {
6973
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;For installation, you will need Angular CLI and Node.js. Using the official guide can simplify things.</span>"
6974
+ }
6975
+ },
6976
+ {
6977
+ "id": "2v4N4jeIDU",
6978
+ "type": "paragraph",
6979
+ "data": {
6980
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Educational Materials</span>"
6981
+ }
6982
+ },
6983
+ {
6984
+ "id": "Tj6ghSK5am",
6985
+ "type": "paragraph",
6986
+ "data": {
6987
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;For novices, the official Angular documentation is helpful.</span>"
6988
+ }
6989
+ },
6990
+ {
6991
+ "id": "GXxhUPQOiK",
6992
+ "type": "paragraph",
6993
+ "data": {
6994
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;YouTube channels and online tutorials offer video support.</span>"
6995
+ }
6996
+ },
6997
+ {
6998
+ "id": "lD2ns5RdG1",
6999
+ "type": "paragraph",
7000
+ "data": {
7001
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Typical Errors to Avoid as a Novice</span>"
7002
+ }
7003
+ },
7004
+ {
7005
+ "id": "OeYuutbVvY",
7006
+ "type": "paragraph",
7007
+ "data": {
7008
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Avoid ignoring TypeScript's foundational ideas since they will speed up your learning of Angular.</span>"
7009
+ }
7010
+ },
7011
+ {
7012
+ "id": "MhYPzCCTl7",
7013
+ "type": "paragraph",
7014
+ "data": {
7015
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;4. Django</span>"
7016
+ }
7017
+ },
7018
+ {
7019
+ "id": "sjx8OS39B8",
7020
+ "type": "paragraph",
7021
+ "data": {
7022
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;4.1 Overview of Django</span>"
7023
+ }
7024
+ },
7025
+ {
7026
+ "id": "Ek6Tq0ZB_c",
7027
+ "type": "paragraph",
7028
+ "data": {
7029
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Overview of the Web Framework Django</span>"
7030
+ }
7031
+ },
7032
+ {
7033
+ "id": "y1K9pPfGzk",
7034
+ "type": "paragraph",
7035
+ "data": {
7036
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;A high-level Python web framework called Django promotes quick development and simple, straightforward design.</span>"
7037
+ }
7038
+ },
7039
+ {
7040
+ "id": "RMyUvKc24F",
7041
+ "type": "paragraph",
7042
+ "data": {
7043
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Important Concepts (DRY, ORM, etc.)</span>"
7044
+ }
7045
+ },
7046
+ {
7047
+ "id": "95pf_ytY6Q",
7048
+ "type": "paragraph",
7049
+ "data": {
7050
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Django adheres to the \"Don't Repeat Yourself\" (DRY) concept, which advocates for code reuse. Database management has been greatly simplified by its ORM.</span>"
7051
+ }
7052
+ },
7053
+ {
7054
+ "id": "9cCS8KT9_x",
7055
+ "type": "paragraph",
7056
+ "data": {
7057
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;When to utilize Django</span>"
7058
+ }
7059
+ },
7060
+ {
7061
+ "id": "0b0cfLM1Ie",
7062
+ "type": "paragraph",
7063
+ "data": {
7064
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Select Django for the rapid construction of complex online applications, such as social media platforms and content management systems.</span>"
7065
+ }
7066
+ },
7067
+ {
7068
+ "id": "AiFVFqfdE_",
7069
+ "type": "paragraph",
7070
+ "data": {
7071
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">4.2 Benefits of Django for Novices</span>"
7072
+ }
7073
+ },
7074
+ {
7075
+ "id": "cwSyfMSYnT",
7076
+ "type": "paragraph",
7077
+ "data": {
7078
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Quick Development Skills: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">You can create applications quickly thanks to a number of built-in capabilities.</span>"
7079
+ }
7080
+ },
7081
+ {
7082
+ "id": "RComdVUvy8",
7083
+ "type": "paragraph",
7084
+ "data": {
7085
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Integrated Admin Panel: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">A useful tool for managing application data without the need for further coding.</span>"
7086
+ }
7087
+ },
7088
+ {
7089
+ "id": "0RK7Flimc1",
7090
+ "type": "paragraph",
7091
+ "data": {
7092
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Robust Security Features: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Django upholds sound security procedures, which may reassure more junior developers.</span>"
7093
+ }
7094
+ },
7095
+ {
7096
+ "id": "m5LNICKEez",
7097
+ "type": "paragraph",
7098
+ "data": {
7099
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;4.3 Resources for Learning the Official Django Documentation and Tutorials: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">An ideal place for any developer to start.</span>"
7100
+ }
7101
+ },
7102
+ {
7103
+ "id": "JSrudPFcaO",
7104
+ "type": "paragraph",
7105
+ "data": {
7106
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Django-Specific Online Courses: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Courses on websites such as Coursera and Udemy are highly structured.</span>"
7107
+ }
7108
+ },
7109
+ {
7110
+ "id": "RmeuyOXYfl",
7111
+ "type": "paragraph",
7112
+ "data": {
7113
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Community and Support Resources: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">The Django community, particularly on Reddit and other sites, is friendly and willing to help.</span>"
7114
+ }
7115
+ },
7116
+ {
7117
+ "id": "N9kHvi68Sl",
7118
+ "type": "paragraph",
7119
+ "data": {
7120
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;5. The flask</span>"
7121
+ }
7122
+ },
7123
+ {
7124
+ "id": "0epcv2bQc-",
7125
+ "type": "paragraph",
7126
+ "data": {
7127
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;5.1 Overview of Flask</span>"
7128
+ }
7129
+ },
7130
+ {
7131
+ "id": "Jy-5pwTvCR",
7132
+ "type": "paragraph",
7133
+ "data": {
7134
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">An explanation of the Flask Framework</span>"
7135
+ }
7136
+ },
7137
+ {
7138
+ "id": "S-WNQo0YGa",
7139
+ "type": "paragraph",
7140
+ "data": {
7141
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Flask is a lightweight, straightforward Python microweb framework.</span>"
7142
+ }
7143
+ },
7144
+ {
7145
+ "id": "sb5DyFDBlK",
7146
+ "type": "paragraph",
7147
+ "data": {
7148
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Comparing Django</span>"
7149
+ }
7150
+ },
7151
+ {
7152
+ "id": "uxFsjDiGwe",
7153
+ "type": "paragraph",
7154
+ "data": {
7155
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Django is a complete framework, however Flask allows you to select your components more freely.</span>"
7156
+ }
7157
+ },
7158
+ {
7159
+ "id": "ujwGMDrqFN",
7160
+ "type": "paragraph",
7161
+ "data": {
7162
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Fundamental Flask Routing Features: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Applications' responses to web requests are easily controllable.</span>"
7163
+ }
7164
+ },
7165
+ {
7166
+ "id": "ayqy1gLAmt",
7167
+ "type": "paragraph",
7168
+ "data": {
7169
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Templating:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> It makes use of the user-friendly and adaptable Jinja2 framework.</span>"
7170
+ }
7171
+ },
7172
+ {
7173
+ "id": "2BM3aUImT_",
7174
+ "type": "paragraph",
7175
+ "data": {
7176
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">5.2 The Reason Flask Is Novice Amiable</span>"
7177
+ }
7178
+ },
7179
+ {
7180
+ "id": "ynBDuveBCZ",
7181
+ "type": "paragraph",
7182
+ "data": {
7183
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Simplicity and Minimalism:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> Because it is lightweight, there is less initial complexity.</span>"
7184
+ }
7185
+ },
7186
+ {
7187
+ "id": "kUOJBjnB6_",
7188
+ "type": "paragraph",
7189
+ "data": {
7190
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Adaptability in Component Selection: </span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Learning will be more efficient if you only select the resources you require.</span>"
7191
+ }
7192
+ },
7193
+ {
7194
+ "id": "AOVaOTxCxq",
7195
+ "type": "paragraph",
7196
+ "data": {
7197
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Installation and Setup Ease:</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\"> Just a few commands are needed to get going.</span>"
7198
+ }
7199
+ },
7200
+ {
7201
+ "id": "CA-8e21K6c",
7202
+ "type": "paragraph",
7203
+ "data": {
7204
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;5.3 Introduction to Flask</span>"
7205
+ }
7206
+ },
7207
+ {
7208
+ "id": "4vdJYqlnjk",
7209
+ "type": "paragraph",
7210
+ "data": {
7211
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Suggested Software and Tools</span>"
7212
+ }
7213
+ },
7214
+ {
7215
+ "id": "OHMpNWDAg2",
7216
+ "type": "paragraph",
7217
+ "data": {
7218
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Actually, all you'll need to start programming locally is Flask and Python.</span>"
7219
+ }
7220
+ },
7221
+ {
7222
+ "id": "IRKn7EowfW",
7223
+ "type": "paragraph",
7224
+ "data": {
7225
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Excellent Flask Instructions for Novices</span>"
7226
+ }
7227
+ },
7228
+ {
7229
+ "id": "W2ZncQ8izQ",
7230
+ "type": "paragraph",
7231
+ "data": {
7232
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;There are many useful examples in the official Flask documentation, which is a wonderful place to start.</span>"
7233
+ }
7234
+ },
7235
+ {
7236
+ "id": "BAUD9Ibjta",
7237
+ "type": "paragraph",
7238
+ "data": {
7239
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Many of the YouTube videos that are available are quite helpful.</span>"
7240
+ }
7241
+ },
7242
+ {
7243
+ "id": "GVbGwbQKhQ",
7244
+ "type": "paragraph",
7245
+ "data": {
7246
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Beneficial Forums and Communities</span>"
7247
+ }
7248
+ },
7249
+ {
7250
+ "id": "vTDH6RUYuh",
7251
+ "type": "paragraph",
7252
+ "data": {
7253
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;The wonderful community of Flask truly flourishes on support. For guidance, consult Stack Overflow and Reddit.</span>"
7254
+ }
7255
+ },
7256
+ {
7257
+ "id": "HQlnu8W8zQ",
7258
+ "type": "paragraph",
7259
+ "data": {
7260
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;In conclusion</span>"
7261
+ }
7262
+ },
7263
+ {
7264
+ "id": "UCEKXjOweb",
7265
+ "type": "paragraph",
7266
+ "data": {
7267
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;An overview of the frameworks</span>"
7268
+ }
7269
+ },
7270
+ {
7271
+ "id": "hX3DDv9m2s",
7272
+ "type": "paragraph",
7273
+ "data": {
7274
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;In conclusion, we discussed five excellent frameworks: Flask, Django, Angular, Vue.js, and React. Each of them has advantages and can serve as a solid foundation for your web development endeavors.</span>"
7275
+ }
7276
+ },
7277
+ {
7278
+ "id": "R-luOykisv",
7279
+ "type": "paragraph",
7280
+ "data": {
7281
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">How to Pick the Ideal Framework</span>"
7282
+ }
7283
+ },
7284
+ {
7285
+ "id": "eBepeuEj5o",
7286
+ "type": "paragraph",
7287
+ "data": {
7288
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;The ideal framework is determined by your own objectives and the kind of projects you wish to construct. As you get better, start with the easy and work your way up to the harder.</span>"
7289
+ }
7290
+ },
7291
+ {
7292
+ "id": "Cn4NWTK6zt",
7293
+ "type": "paragraph",
7294
+ "data": {
7295
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Concluding Remarks on Web Development</span>"
7296
+ }
7297
+ },
7298
+ {
7299
+ "id": "5EoA4But4R",
7300
+ "type": "paragraph",
7301
+ "data": {
7302
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Since progress occurs when mistakes are made, learn from them and don't be afraid of them. Explore web programming while continuously learning new frameworks and technologies. You have only just begun your journey!</span>"
7303
+ }
7304
+ },
7305
+ {
7306
+ "id": "vLKrOczs4d",
7307
+ "type": "paragraph",
7308
+ "data": {
7309
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;FAQs</span>"
7310
+ }
7311
+ },
7312
+ {
7313
+ "id": "GmYWFU8_cZ",
7314
+ "type": "paragraph",
7315
+ "data": {
7316
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Which framework is the simplest for a novice?</span>"
7317
+ }
7318
+ },
7319
+ {
7320
+ "id": "Zv7wQl8G0w",
7321
+ "type": "paragraph",
7322
+ "data": {
7323
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Vue.js is the easiest to use because of its straightforward syntax and ease of use.</span>"
7324
+ }
7325
+ },
7326
+ {
7327
+ "id": "PnvwjfSnz2",
7328
+ "type": "paragraph",
7329
+ "data": {
7330
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">Is it possible for me to switch web frameworks later on in my development career?</span>"
7331
+ }
7332
+ },
7333
+ {
7334
+ "id": "UV1tXiNGRo",
7335
+ "type": "paragraph",
7336
+ "data": {
7337
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Of course! As they develop and their project's requirements evolve, developers frequently switch frameworks.</span>"
7338
+ }
7339
+ },
7340
+ {
7341
+ "id": "JGENKf2cs3",
7342
+ "type": "paragraph",
7343
+ "data": {
7344
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Does using these frameworks require my knowledge of programming languages?</span>"
7345
+ }
7346
+ },
7347
+ {
7348
+ "id": "JJS9VCbEqf",
7349
+ "type": "paragraph",
7350
+ "data": {
7351
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Yes, mastering these frameworks will benefit greatly by having a basic understanding of Python or JavaScript.</span>"
7352
+ }
7353
+ },
7354
+ {
7355
+ "id": "p6mT7ZkgFM",
7356
+ "type": "paragraph",
7357
+ "data": {
7358
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Does each framework have any particular projects that I should begin with?</span>"
7359
+ }
7360
+ },
7361
+ {
7362
+ "id": "g9lzRQ7xbK",
7363
+ "type": "paragraph",
7364
+ "data": {
7365
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Start with something basic, like a portfolio website constructed using the framework you choose, a personal blog, or a to-do list application.</span>"
7366
+ }
7367
+ },
7368
+ {
7369
+ "id": "bHpNK_2OOh",
7370
+ "type": "paragraph",
7371
+ "data": {
7372
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;</span><span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">To what extent does the community play a role in framework selection?</span>"
7373
+ }
7374
+ },
7375
+ {
7376
+ "id": "lbqsoESpxP",
7377
+ "type": "paragraph",
7378
+ "data": {
7379
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;Crucial! More information, lessons, and assistance when you run into problems are all part of a robust community.</span>"
7380
+ }
7381
+ },
7382
+ {
7383
+ "id": "R-uKQn30Tv",
7384
+ "type": "paragraph",
7385
+ "data": {
7386
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;By: Gaurav Sharma</span>"
7387
+ }
7388
+ },
7389
+ {
7390
+ "id": "eSjeLO8MWe",
7391
+ "type": "paragraph",
7392
+ "data": {
7393
+ "text": "<span style=\"font-size:11pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;\">&nbsp;&nbsp;(Founder “Tejsoft”)</span>"
7394
+ }
7395
+ }
7396
+ ],
7397
+ "createdBy": "Simpo",
7398
+ "postSummary": " Selecting the best framework in the constantly changing field of web development can be difficult, particularly for novices. By outlining the features and advantages of some of the greatest web development frameworks on the market today, this post seeks to assist novices in choosing the one that would best meet their requirements.",
7399
+ "postTitle": "A Complete Guide to the Top 5 Web Development Frameworks for Novices",
7400
+ "newPostTitle": "A-Complete-Guide-to-the-Top-5-Web-Development-Frameworks-for-Novices",
7401
+ "blogMeta": {
7402
+ "metaTitle": "",
7403
+ "metaDescription": {
7404
+ "name": "description",
7405
+ "content": ""
7406
+ }
7407
+ },
7408
+ "createdTimeStamp": "2024-12-14T17:01:38.000+00:00",
7409
+ "publishedDate": null,
7410
+ "blogScheduledDate": "2024-12-14T00:00:00.000+00:00",
7411
+ "blogScheduleTime": "22:34:14",
7412
+ "keyWords": {
7413
+ "name": "keywords",
7414
+ "content": " web development framework, technology, business needs"
7415
+ },
7416
+ "author": {
7417
+ "name": "author",
7418
+ "content": "Gaurav Sharma"
7419
+ },
7420
+ "blogStatus": "PUBLISH",
7421
+ "businessId": "1ef595b4-d80d-66de-9df6-13a8e47644dd",
7422
+ "blogType": "BUSINESS"
7423
+ };
6495
7424
  }
6496
7425
  ngOnInit() {
6497
7426
  }
@@ -7943,11 +8872,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
7943
8872
  }] } });
7944
8873
 
7945
8874
  class RegistrationFormComponent extends BaseSection {
7946
- constructor(restService, snackBar, _eventService) {
8875
+ constructor(restService, snackBar, _eventService, router) {
7947
8876
  super();
7948
8877
  this.restService = restService;
7949
8878
  this.snackBar = snackBar;
7950
8879
  this._eventService = _eventService;
8880
+ this.router = router;
7951
8881
  this.Object = Object;
7952
8882
  this.payload = {
7953
8883
  "businessDetails": {
@@ -7960,6 +8890,12 @@ class RegistrationFormComponent extends BaseSection {
7960
8890
  this.subscriptionsData = [];
7961
8891
  }
7962
8892
  ngOnInit() {
8893
+ this.router.queryParams.subscribe((param) => {
8894
+ if (param['eId'])
8895
+ this.payload['enquiryId'] = param['eId'];
8896
+ if (param['rId'])
8897
+ this.payload['registrationId'] = param['rId'];
8898
+ });
7963
8899
  this.businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId");
7964
8900
  this.content = this.data?.content;
7965
8901
  this.styles = this.data?.styles;
@@ -7986,13 +8922,15 @@ class RegistrationFormComponent extends BaseSection {
7986
8922
  this.data?.sectionType === 'registrationForm' ? this.createRegistration() : this.createAdmission();
7987
8923
  }
7988
8924
  createRegistration() {
7989
- this.registrationSubscription = this.restService.createRegistration(this.payload).subscribe((res) => {
7990
- this.snackBar.open('Registration created successfully', 'close', { duration: 2000 });
8925
+ this.registrationSubscription = this.restService.createRegistrationForPayment(this.payload).subscribe((res) => {
8926
+ // this.snackBar.open('Registration created successfully', 'close', {duration: 2000});
8927
+ this._eventService.cashFreeEvent.emit({ reponse: res, paymentType: 'REGISTRATION' });
7991
8928
  });
7992
8929
  }
7993
8930
  createAdmission() {
7994
- this.registrationSubscription = this.restService.createAdmission(this.payload).subscribe((res) => {
7995
- this.snackBar.open('Admission created successfully', 'close', { duration: 2000 });
8931
+ this.registrationSubscription = this.restService.createPaymentForAdmission(this.payload).subscribe((res) => {
8932
+ // this.snackBar.open('Admission created successfully', 'close', {duration: 2000});
8933
+ this._eventService.cashFreeEvent.emit({ reponse: res, paymentType: 'ADMISSION' });
7996
8934
  });
7997
8935
  }
7998
8936
  convertToListOfFields() {
@@ -8087,7 +9025,7 @@ class RegistrationFormComponent extends BaseSection {
8087
9025
  }
8088
9026
  return response;
8089
9027
  }
8090
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
9028
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
8091
9029
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <section class=\"main-section\">\r\n <div>\r\n <div class=\"subTabs_section\">\r\n <div class=\"list_tabs d-flex align-items-center\">\r\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n {{key | titlecase}}\r\n </div>\r\n </ng-container>\r\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n Payment\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n {{group}}\r\n </div>\r\n <div class=\"row mt-1\">\r\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\">*</span> <br>\r\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n <simpo-payment-details [admissionData]=\"payload\"\r\n [subscriptionsData]=\"subscriptionsData\"></simpo-payment-details>\r\n </div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n (data?.sectionType === 'registrationForm' &&\r\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\"\r\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </section>\r\n\r\n <ng-template #inputData let-field=\"data\">\r\n <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n <div class=\"image-box\">\r\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n (click)=\"fileInput.click()\" alt=\"\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n upload</span>\r\n </div>\r\n </div>\r\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n </div>\r\n <div *ngIf=\"field.dataType === 'TEXT'\">\r\n <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'MONEY'\">\r\n <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DATE'\">\r\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n </ng-container>\r\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
8092
9030
  //directive
8093
9031
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
@@ -8122,7 +9060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
8122
9060
  MatSelectModule,
8123
9061
  FormsModule
8124
9062
  ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <section class=\"main-section\">\r\n <div>\r\n <div class=\"subTabs_section\">\r\n <div class=\"list_tabs d-flex align-items-center\">\r\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n {{key | titlecase}}\r\n </div>\r\n </ng-container>\r\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n Payment\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"body\" *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : []\">\r\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n {{group}}\r\n </div>\r\n <div class=\"row mt-1\">\r\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\">*</span> <br>\r\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n <simpo-payment-details [admissionData]=\"payload\"\r\n [subscriptionsData]=\"subscriptionsData\"></simpo-payment-details>\r\n </div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n (data?.sectionType === 'registrationForm' &&\r\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\"\r\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </section>\r\n\r\n <ng-template #inputData let-field=\"data\">\r\n <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n <div class=\"image-box\">\r\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n (click)=\"fileInput.click()\" alt=\"\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n upload</span>\r\n </div>\r\n </div>\r\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n </div>\r\n <div *ngIf=\"field.dataType === 'TEXT'\">\r\n <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'MONEY'\">\r\n <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DATE'\">\r\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\">\r\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\">{{item.label}}</mat-option>\r\n </ng-container>\r\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}\n"] }]
8125
- }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }, { type: EventsService }], propDecorators: { data: [{
9063
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }, { type: EventsService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
8126
9064
  type: Input
8127
9065
  }], index: [{
8128
9066
  type: Input