Adarsh Posts - Answer Overflow

Adarsh

Posts Comments

KPCKevin Powell - Community

•Created by Adarsh on 2/21/2024 in #front-end

How to create this animation using CSS

I wanted to know how to create this animation using CSS only. Is it possible?

7 replies

KPCKevin Powell - Community

•Created by Adarsh on 12/5/2023 in #front-end

Text overflowing, need it to be scrollable

5 replies

KPCKevin Powell - Community

•Created by Adarsh on 8/4/2023 in #front-end

How do I extend the content to full width

5 replies

KPCKevin Powell - Community

•Created by Adarsh on 7/13/2023 in #front-end

How to remove the blank space in the component

1 replies

KPCKevin Powell - Community

•Created by Adarsh on 7/7/2023 in #front-end

How to use text-wrap css property

So I used overflow-wrap and word-wrap to wrap my text in a div. But in smaller devices words are getting broken down. So I found out about text-wrap, but I don't know how to use it. I tried it out like this.

text-wrap: balance;

text-wrap: balance;

But it is showing Unknown property: 'text-wrap'. What am I doing wrong? Here is the link to the docs - https://developer.chrome.com/blog/css-text-wrap-balance/

4 replies

KPCKevin Powell - Community

•Created by Adarsh on 2/14/2023 in #front-end

How to add a bootstrap toast message when internet is not connected

I have a code which shows an alert when Internet is not there. I want to add a bootstrap toast instead of the alert. Does anybody know how to achieve that. Here is my internet status code.

constructor(private connectionService: ConnectionService) {
    this.connectionService.monitor().subscribe((isConnected) => {
      this.isConnected = isConnected.hasInternetAccess;
      if (!this.isConnected) {
        this.status = 'The web-app is offline';
        alert(this.status);
      }
    });
}

constructor(private connectionService: ConnectionService) {
    this.connectionService.monitor().subscribe((isConnected) => {
      this.isConnected = isConnected.hasInternetAccess;
      if (!this.isConnected) {
        this.status = 'The web-app is offline';
        alert(this.status);
      }
    });
}

1 replies

KPCKevin Powell - Community

•Created by Adarsh on 2/11/2023 in #front-end

Not able to display data in local storage to form

I was creating a way to save form data even when navigating to another component. The data gets saved to local storage but I'm not able to pre-fill the form using the data stored in local storage. It was working yesterday but today it is'nt working. Can anyone show me what I'm doing wrong. Here is the code for it.

  ngOnInit() {
    this.createRegForm();

    // predraft form retrieved from local storage
    const draft = localStorage.getItem('STEP_1');

    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }
    // predraft form saved to local storage
    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) => localStorage.setItem('STEP_1', JSON.stringify(val)));
  }

  ngOnInit() {
    this.createRegForm();

    // predraft form retrieved from local storage
    const draft = localStorage.getItem('STEP_1');

    if (draft) {
      this.formData.setValue(JSON.parse(draft));
    }
    // predraft form saved to local storage
    this.formData.valueChanges
      .pipe(filter(() => this.formData.valid))
      .subscribe((val) => localStorage.setItem('STEP_1', JSON.stringify(val)));
  }

22 replies

KPCKevin Powell - Community

•Created by Adarsh on 2/10/2023 in #front-end

Type 'ConnectionState' is not assignable to type 'boolean'

I am getting this error when I use a function to monitor whether the internet is there or not. Can anyone help me to resolve this error? Here is the app,component.ts file

import { Component } from '@angular/core';
import { ConnectionService, ConnectionState } from 'ng-connection-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'finalProject';
  status = 'ONLINE'; //initializing as online by default
  isConnected: ConnectionState = false;

  constructor(private connectionService: ConnectionService) {
    this.connectionService.monitor().subscribe((isConnected) => {
      this.isConnected = isConnected;
      if (this.isConnected) {
        this.status = 'ONLINE';
      } else {
        this.status = 'OFFLINE';
      }
      alert(this.status);
    });
  }
}

import { Component } from '@angular/core';
import { ConnectionService, ConnectionState } from 'ng-connection-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'finalProject';
  status = 'ONLINE'; //initializing as online by default
  isConnected: ConnectionState = false;

  constructor(private connectionService: ConnectionService) {
    this.connectionService.monitor().subscribe((isConnected) => {
      this.isConnected = isConnected;
      if (this.isConnected) {
        this.status = 'ONLINE';
      } else {
        this.status = 'OFFLINE';
      }
      alert(this.status);
    });
  }
}

11 replies

KPCKevin Powell - Community

•Created by Adarsh on 1/6/2023 in #front-end

Not able to display data in browser but able to display it in codepen

18 replies

KPCKevin Powell - Community

•Created by Adarsh on 1/5/2023 in #front-end

Whole DOM getting deleted when using display 'none' property for an id element

I want a specific id element to be deleted when I onclick a button. But when clicking the "Hide Images" button, instead of the id element the whole DOM is getting deleted. Does anybody have any idea why it is behaving like this. Here is the codepen - https://codepen.io/adarsh88/pen/vYaXwbN

7 replies

KPCKevin Powell - Community

•Created by Adarsh on 1/3/2023 in #front-end

Unable to add data array into left side of the documentation page

I have a data array that consists of the items on the left side nav. I tried using several methods but I'm not able to add the data array items as list elements. Here is my codepen to check out my code - https://codepen.io/adarsh88/pen/gOjMEvz. I want to add the list items with the class "nav-link" inside the ul id of listElem (Add the list items under JS Documentation). Can someone guide me on how to do it?

33 replies

KPCKevin Powell - Community

•Created by Adarsh on 12/27/2022 in #front-end

Not able to maintain aspect ratio of image in small screens

8 replies

KPCKevin Powell - Community

•Created by Adarsh on 12/27/2022 in #front-end

Not able to span for the entire height of the viewport

I have got three divs that have specified heights. I spanned the entire width using width:100%, but the height of 100vh is not working. I want to span for the entire height of the viewport. Here is the codepen for reference - https://codepen.io/adarsh88/pen/xxJZGvq

18 replies

KPCKevin Powell - Community

•Created by Adarsh on 10/21/2022 in #front-end

How to recreate this layout

2 replies

Gaming

Programming