Adding javascript to my code

@deebratforlife wrote:

Hi friends,

I am trying to create cards in Dash with ability to flip 180 degrees on click. For that, I have Dash code, some CSS and 4 lines of javascript. Upon running, the app recognizes the CSS (stored in assets folder), but it doesn’t recognize javascript. Any ideas how to do this?

Here is the code:

Dash:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

card = dbc.Container([

    dbc.Row(
    [
        dbc.Card(
		   dbc.CardImg(src="/assets/img_avatar3.png", alt="Avatar", style={"width":"100%"}),
		       className="front"), 

         dbc.Card(
		   dbc.CardImg(src="/assets/img_avatar2.png", alt="Avatar", style={"width":"100%"}),
		       className="back"), 

       
    ],
    className="card",
), ], 
    className="container",
	 )

cards = html.Div([card])

app.layout = cards


if __name__ == '__main__':
    app.run_server(debug=True)

CSS:

html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: #00a5f7;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-orient: vertical;
  flex-direction: column;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
}
.container {
  width: 300px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
  border-radius: 4px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
.card div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 6px;
  background: #fff;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #47525d;
}
.card .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card.flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

Javascript:

$('.container').on('click', function () {
  $('.card').toggleClass('flipped');
});

Thanks!!!

Posts: 2

Participants: 2

Read full topic