Stock Card

Developer
Thomas Hare
Size
4,263 Kb
Views
14,168
  1. Stock Card Previews
  2. Stock Card HTML Codes
  3. Stock Card CSS Codes
  4. Stock Card JS Codes

How do I make an stock card?

What is a stock card? How do you make a stock card? This script and codes were developed by Thomas Hare on 17 November 2022, Thursday.

Stock Card Previews
IQ Test

Stock Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stock Card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card green">	<div class="head">	<img src="https://www.google.com/finance/getchart?q=NVDA">	<div class="inner">	<span class="ticker">NVDA</span>	<span class="price">97.15</span>	<span class="movement">+ 12.08</span>	<div class="chart" id="chart1"></div>	</div>	</div>	<div class="body">	<div class="inner">	<span class="title"><i class="fa fa-exchange"></i> Positions:</span>	<ul class="positions">	<li><i class="fa fa-clock-o"></i> 10:28 AM in at 35.26 x 30 <span class="growth">(967.80)</span></li>	<li><i class="fa fa-clock-o"></i> 9:45 AM out at 20.18 x 10 <span class="growth">+ 201.80</span></li>	<li><i class="fa fa-clock-o"></i> 8:04 AM in at 12.40 x 10 <span class="growth">(124.00)</span></li>	<li><a href="#">...more</a></li>	</ul>	</div>	</div>
</div>
<div class="card red">	<div class="head">	<img src="https://www.google.com/finance/getchart?q=AMD">	<div class="inner">	<span class="ticker">AMD</span>	<span class="price">12.18</span>	<span class="movement">- 1.08</span>	<div class="chart" id="chart2"></div>	</div>	</div>	<div class="body">	<div class="inner">	<span class="title"><i class="fa fa-exchange"></i> Positions:</span>	<ul class="positions">	<li><i class="fa fa-clock-o"></i> Jan 9, 2:04 PM in at 35.26 x 30 <span class="growth">(967.80)</span></li>	<li><i class="fa fa-clock-o"></i> Jan 8, 3:04 PM out at 20.18 x 10 <span class="growth">+ 201.80</span></li>	<li><i class="fa fa-clock-o"></i> December 24, 3:30 PM in at 12.40 x 10 <span class="growth">(124.00)</span></li>	<li><a href="#">...more</a></li>	</ul>	</div>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Stock Card - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
body { margin: 50px auto; width: 800px;
}
.text-right { text-align: right;
}
.card { box-shadow: 0 0 10px rgba(0,0,0,0.15); border-radius: 3px; float: left; font-family: 'Open Sans', sans-serif; overflow: hidden; width: 49%;
}
.card:nth-child(even) { margin-left: 2%;
}
.card.green .head { background-color: #2a4;
}
.card.red .head { background-color: #c23;
}
.card .head { border-radius: 4px 4px 0 0; box-shadow: inset 0 -1px 10px rgba(0,0,0,0.25); color: rgba(255,255,255,0.95); overflow: hidden; position: relative; text-align: center; text-shadow: 0 0 5px rgba(0,0,0,0.15); z-index: 2;
}
.card .head img { border-radius: inherit; left: 0; max-height: 100%; min-width: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.15; position: absolute; top: 0; z-index: 1;
}
.card .head .inner { padding: 20px 0 50px; position: relative; top: 0; z-index: 2;
}
.card .head .inner .ticker,
.card .head .inner .price,
.card .head .inner .movement,
.card .head .inner .chart { display: block;
}
.card .head .inner .ticker { font-size: 1.25em; font-weight: 600;
}
.card .head .inner .price { font-size: 2.5em; font-weight: 600; margin-top: 5px;
}
.card .head .inner .chart { height: 150px; margin: 10px auto 0;
}
.card .body { margin-top: -25px; padding: 15px; position: relative; z-index: 3;
}
.card .body .inner { background: #fff; border-radius: 3px; box-shadow: 0 -1px 10px rgba(0,0,0,0.05); margin-top: -25px; padding: 10px;
}
.card .body .inner .title { color: rgba(0,0,0,0.7); font-weight: 600; margin: 0;
}
.card .body .inner .positions { font-size: 0.9em; list-style: none; margin: 5px 0 0 0; padding: 0;
}
.card .body .inner .positions li { display: block; padding: 5px 0;
}
.card .body .inner .positions li .growth { float: right;
}
.card .body .inner .positions li:not(:first-child) { margin-top: 4px;
}
.card .body .inner .positions li:nth-child(odd) { background-color: rgba(0,0,0,0.025);
}

Stock Card - Script Codes JS Codes

window.onload = function() {	// set bats referrer header	Object.defineProperty(document, "referrer", {get : function(){ return "bats.com/us/equities/market_statistics/book/aapl/"; }});	var json_data = 'http://bats.com/json/bzx/book/AAPL';	$.getJSON( json_data, function( data ) {	var items = [];	$.each( data, function( key, val ) {	items.push( "<li id='" + key + "'>" + val + "</li>" );	});	$( "<ul/>", {	"class": "my-new-list",	html: items.join( "" )	}).appendTo( "body" );	});	var chart1 = new CanvasJS.Chart("chart1", {	backgroundColor: null,	height: 160,	width: 390,	theme: "theme4",	title: {	text: ""	},	axisY: {	title: "",	tickLength: 0,	lineThickness: 0,	margin: 0,	valueFormatString: " "	},	axisX: {	lineColor: "#FFF",	labelFontColor: "#FFF",	labelFontSize: 12,	tickColor: "#FFF"	},	data: [	{	color: "#FFF",	type: "line",	lineThickness: 1,	markerSize: 8,	yValueFormatString: "$####.##",	dataPoints: [	{ x: 2014, y: 10 },	{ x: 2015, y: 15 },	{ x: 2016, y: 25 },	{ x: 2017, y: 30 }	]	}	]	}).render();	var chart2 = new CanvasJS.Chart("chart2", {	backgroundColor: null,	height: 160,	width: 390,	theme: "theme4",	title: {	text: ""	},	axisY: {	title: "",	tickLength: 0,	lineThickness: 0,	margin: 0,	valueFormatString: " "	},	axisX: {	lineColor: "#FFF",	labelFontColor: "#FFF",	labelFontSize: 12,	tickColor: "#FFF"	},	data: [	{	color: "#FFF",	type: "line",	lineThickness: 1,	markerSize: 8,	yValueFormatString: "$####.##",	dataPoints: [	{ x: 2014, y: 10 },	{ x: 2015, y: 8 },	{ x: 2016, y: 13.15 },	{ x: 2017, y: 12.90 }	]	}	]	}).render();	$.getJSON(	"http://bats.com/json/bzx/book/AAPL",	function(err, data) {	if (err != null) {	alert("Something went wrong: " + err);	} else {	alert("Your query count: " + data.query.count);	}	}	);
};
Stock Card - Script Codes
Stock Card - Script Codes
Home Page Home
Developer Thomas Hare
Username tommyhare
Uploaded November 17, 2022
Rating 3
Size 4,263 Kb
Views 14,168
Do you need developer help for Stock Card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Hare (tommyhare) Script Codes
Name
Material UI
Swipe View
Space Ashley
Simple Login
The Initiator
12 Column Grid Framework In 12 Lines of Code
Random Drawing
Table Classes
Simple Passwords
Bootstrap Form Fun
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!