sadikturan/komple-web-gelistirme-dersleri

Sıfırdan ileri seviyeye 'Web Geliştirme': Html, Css, Sass, Flexbox, Javascript, Bootstrap,JQuery,Asp.Net Mvc ve Core Mvc

komple-web-gelistirme-dersleri's Issues

TS(2322) Error When Using Observable

Hi @sadikturan,

The getMovie() method defined in the movie.service.ts file in the relevant section of the Movie application causes the ts(2322) error. I fixed the problem by updating this method as follows:

  /* It should be noted that the getMovie() method may return "null" or "undefined" values. */
  getMovie( id: number ) : Observable<Movie | null | undefined > 
  {
    this.loggingService.add( 'MovieService: get detail by id = ' + id );

    return of( Movies.find( movie => movie.id === id ) );
  }

Have a nice working day.

Resources

• TS(232) Error When Using Observable in Angular 12

Non-critical Fix Suggestion

Hi @sadikturan,

Although preventDefault() is used to disable the default action when the submit event occurs on the <form> element in some sessions, the website refreshes itself. I couldn't understand the reason for this situation.

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/8-ES6 Class- Course Uygulaması/8-Local Storage' dan Kayıt Silme/Course-App/appES6.js

Line 135 in 4e9ed3c

e.preventDefault();

In my research to prevent this situation, I saw that the onsubmit attribute of the <form> element was assigned a return false value. In some sessions, I have silenced this problem, which I don't understand in this way. So I changed the code below in the index.html page.

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/8-ES6 Class- Course Uygulaması/8-Local Storage' dan Kayıt Silme/Course-App/index.html

Line 21 in 4e9ed3c

<form id="new-course">

Non-critical fix suggestion:

<-- Added "onsubmit" attribute to <form> element  -->
<form id="new-course" onsubmit="return false">
    <!-- other codes -->
</form>

Have a nice working day.

Bootstrap Version Issue in Angular Section

Hi @sadikturan,

The web interface defined in the movies.component.html file doesn't work correctly because the Bootstrap library in the Angular section is loaded into the project without providing the version information. The image below shows this error:

Click to see the picture.

To fix this error, I took advantage of the Bootstrap v5.1 documentation and edited the movies.component.html file as follows:

<movie-detail [movie]="selectedMovie"></movie-detail>

<div class="card">
  <div class="card-header">
    {{ title }}
  </div>
  <ul class="list-group list-group-flush">
    <li *ngFor="let movie of movies" (click)="onSelect(movie)" class="list-group-item" [class.active]="movie===selectedMovie">

      <!-- I edited the following two lines. -->
      <span class="badge badge-primary bg-primary ">{{movie.id}}</span> {{movie.name}}          
      <button type="button" class="btn-close btn-sm float-end" aria-label="Close"></button>

    </li>
  </ul>
</div>

After the change, the relevant part of the Angular application is rendered as follows:

Click to see the picture.

Have a nice working day.

Resources

• Bootstrap v5.1 - Close Button
• Bootstrap v5.1 - Badges

Responsive Web Page Example Not Working

Hi @sadikturan,

Responsive image themed sample project defined in image-gallery directory (index.html and responsive-image.html) doesn't work in Google Chrome (v92.0.4515.107 64-Bit) browser. This problem solved by adding the following line of code to the HTML file as you have stated before:

<!-- The following declaration should be added to file responsive-image.html and file index.html. -->
<meta name="viewport" content="width=device-width">

Thank you for your contributions to the community. I wish you good work.

TypeScript Error When Transpiling

Hi @sadikturan,

An error occurs in the TypeScript>Properties section of the tutorial on Udemy; I couldn't reference it because the codes aren't available in this repository. When I enter the tsc properties.ts command on the command line to transpile TypeScript code to JavaScript code, I get the following error:

properties.ts:48:9 - error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

48     get location()

properties.ts:53:9 - error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

53     set location(value: Point)

To solve this problem, it was necassary to explicitly specify he target ECMAScript version in the command line call:

tsc -t es5 properties.ts

Have a nice working day.

Resources

• Accessors are only available when targeting ECMAScript 5 and higher
  
• Create TypeScript Project With tsconfig.json

Error Using set() and get() Functions in Object.defineProperty() Method

Hi @sadikturan,

The program doesn't work correctly due to the following line of code:

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/5-Javascript Nesne & Fonksiyonlar/13-Getter & Setters/script.js

Line 8 in 4e9ed3c

get function() {

When I examined the Object.defineProperty() method in MDN Web Docs, I learned that the get() function has two different uses:

/* ES2015 Feature: Shorthand Method Names */
Object.defineProperty( object, property, {
   get: function() {
      return propertyValue;
   }

/* Other Method */
Object.defineProperty( object, property, {
   get() { 
      return propertyValue;
   }

The same error occurs when using the set() function. Applying the usage from the MDN Web Docs for the set() function resolves the issue:

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/5-Javascript Nesne & Fonksiyonlar/13-Getter & Setters/script.js

Line 11 in 4e9ed3c

set function(value){

/* ES2015 Feature: Shorthand Method Names */
Object.defineProperty( object, property, {
   set: function() {
      return propertyValue;
   }

/* Other Method */
Object.defineProperty( object, property, {
   set() { 
      return propertyValue;
   }

The issue is resolved when the fullName property for the person object is provided by one of the following methods:

/* Method-1 */
Object.defineProperty( person, 'fullName', {
   get: function() {
      return `${this.firstName} ${this.lastName}`;
   },
   set: function( value ) {
      const parts = value.split( ' ' );
      this.firstName = parts[ 0 ];
      this.lastName = parts[ 1 ];
   },
} );

/* Method-2 */
Object.defineProperty( person, 'fullName', {
   get() {
      return `${this.firstName} ${this.lastName}`;
   },
   set( value ) {
      const parts = value.split( ' ' );
      this.firstName = parts[ 0 ];
      this.lastName = parts[ 1 ];
   },
} );

/**
 * Note:  In the program you wrote, the "fullName" property of the "person" object is shown on the console 
 *        as "undefined" in the 2nd and 3rd lines below.
 */
person.fullName = 'John Nash';   /* Uses the object's set() member function */
console.log( typeof person );
console.log( person.fullName );   /* Uses the object's get() member function */

Thank you for your contributions to the community.

Fix Suggestion

Hi @sadikturan,

I notice a deficiency in this application, where you describe the suspension of some processes in the queue in asynchronous programming using callback functions in JavaScript. If the callback function didn't return an error code after the addProduct() function was called, you would have to call the getProducts() function.

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/9-Asekron Programlama & AJAX/7-Callback Fonksiyonları ile Asekron Programlama/script.js

Line 30 in 4e9ed3c

addProduct({id:4,name:"Samsung S5",price:500},function(err,data){

To make up for this deficiency, I added the getProducts() function call inside the anonymous function in the addProduct() function call to be called when no errors occur:

addProduct( { id: 4, name: "Samsung S5", price: 500 }, function( error, data ) {
    if( error)
    {
        console.log( error );
    }
    else 
    {
        console.log( data );

        /* getProducts() function should be called when the operation is successful */
        getProducts();
    }
}

Have a nice working day.

Fix Suggestion

Hi @sadikturan,

I noticed that there is an ambiguity in the program when the condition is false in the code block below.

Click to see the code.

komple-web-gelistirme-dersleri/src/9-Javascript/8-ES6 Class- Course Uygulaması/8-Local Storage' dan Kayıt Silme/Course-App/appES6.js

Line 33 in 4e9ed3c

deleteCourse(element){

Although it hasn't caused an error yet, I think the method should return false when the condition is false. So I revised the deleteCourse() method as below:

class UI 
{
    /* other codes */
    
    deleteCourse(element)
    {
        if(element.classList.contains('delete'))
        {
            element.parentElement.parentElement.remove();
            return true;
        }

        /* I just added the following line of code to the program. */
        return false;
    }
}

Have a nice working day.

Third Party JavaScript Libraries Not Working in ASP.NET Core MVC Project

Hi @sadikturan,

Third party javascript libraries (jquery-validation, jquery-validation-unobtrusive, ckeditor) added to the project (Client-Side Validation and HTML Editor) aren't working. According to the results of the research, the <environment> tag is used in ASP.NET Core to include third-party scripts in the project. Therefore, I deleted the third party libraries defined as a @section Scripts and added the following usage to the _Layout.cshtml file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="~/modules/bootstrap/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
    <link rel="stylesheet" href="~/css/style.css">

    <!-- Added the following lines of code to the _Layout.cshtml file. -->
    <environment include="Development">
      <script src="/modules/jquery-validation/dist/jquery.validate.min.js" crossorigin></script>
      <script src="/modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js" crossorigin></script>
      <script src="/modules/ckeditor/ckeditor.js" crossorigin></script>
    </environment>

    <title>Shop Application</title>
</head>
<body>
   <!-- Other Lines of Code -->
</body>
</html>

Have a nice day.

Resources

• ASP.NET Core: Unobtrusive Validation Not Working