test slider

4e42547f · gabriel · cd8e5a8d · 4e42547f · 4e42547f · 4e42547f
Commit 4e42547f authored 2 years ago by gabriel
--- a/angular.json
+++ b/angular.json
@@ -94,5 +94,8 @@
        }
      }
    }
+  },
+  "cli": {
+    "analytics": "0bc6e4f8-bb1c-416f-b778-24cb5a0c67cc"
  }
 }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,10 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { ChangePageComponent } from './change-page/change-page.component';

 @NgModule({
  declarations: [
-    AppComponent
+    AppComponent,
+    ChangePageComponent
  ],
  imports: [
    BrowserModule,

--- a/src/app/change-page/change-page.component.css
+++ b/src/app/change-page/change-page.component.css
+.background{
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.border{
+    background-color: brown;
+    height: 100vh;
+    width: 92vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(.02,1,1,.98);
+    border: 0px !important;
+}
+.border2{
+    background-image: linear-gradient(red, yellow);
+    height: 100vh;
+    width: 800vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    transition-timing-function: cubic-bezier(.02,1,1,.98);
+    border: 0px;
+}
+
+.border:hover {
+    background-color: brown;
+    height: 100vh;  
+    width: 112vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    border: 0px;
+}
+.bordertest{
+    background-color:brown;
+    height: 100vh;
+    width: 800vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-duration: cubic-bezier(.02,1,1,.98);
+    border: 0px;
+}
+.bordertest2{
+    background-image: linear-gradient(red, yellow);
+    height: 100vh;
+    width: 92vw;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    
+}
+.bordertest2:hover{
+    background-image: linear-gradient(red, yellow);
+    height: 100vh;
+    width: 112vw;
+    padding: 0px;
+    margin: 0px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    border: 0px;
+}
\ No newline at end of file
--- a/src/app/change-page/change-page.component.html
+++ b/src/app/change-page/change-page.component.html
+
+    <div class="background">
+    <div class="border" id="border" (click)="changeclass()"></div>
+    <div class="border2" id="border2" (click)="changeclass()"></div>
+    </div>
--- a/src/app/change-page/change-page.component.spec.ts
+++ b/src/app/change-page/change-page.component.spec.ts
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangePageComponent } from './change-page.component';
+
+describe('ChangePageComponent', () => {
+  let component: ChangePageComponent;
+  let fixture: ComponentFixture<ChangePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChangePageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChangePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/change-page/change-page.component.ts
+++ b/src/app/change-page/change-page.component.ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-change-page',
+  templateUrl: './change-page.component.html',
+  styleUrls: ['./change-page.component.css']
+})
+export class ChangePageComponent {
+  changeclass(): void {
+    var b1 = document.getElementById("border")  
+    if(b1 != null)
+    {
+      var b2 = document.getElementById("border2")
+      if(b2 != null){
+        if(b1.className == "border"){
+          b1.className="bordertest"
+          b2.className="bordertest2"}
+        
+        else{
+          b1.className="border"
+          b2.className="border2"
+        }
+      }
+    } 
+    
+}
+}
--- a/src/index.html
+++ b/src/index.html
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>Slider</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
 </head>
-<body>
+<body style="background-color: bisque; margin: 0px;">
  <app-root></app-root>
 </body>
 </html>