GME Stock - CSS

Introduction

The GME (GameStop) stock recently gained a lot of attention due to a battle between professional investors and Reddit users. The stock's value skyrocketed, resulting in a large influx of speculators. To commemorate this historical event, we created a CSS GME stock ticker that displays in-real-time GME stock data.

Features

• Responsive Design: adjusts to different screen sizes.
• In-Real-Time Updates: updates automatically every 10 seconds.
• Price Change Indicators: displays in blue or red to indicate stock gains or losses.
• Dynamic Color Design: creates a visually-appealing stock ticker.

Implementation

The GME Stock CSS ticker is implemented using CSS and HTML with the help of JavaScript. The core parts of the program are:

• The API Call: The program uses the Alpha Vantage API to obtain the real-time GME stock data (including the stock price and price change).
• The CSS Implementation: The program uses various CSS properties and selectors to stylize the stock ticker.
• The JavaScript Code: The JavaScript code is responsible for calling the API and updating the HTML and CSS based on the returned data.

<div class="stock-ticker">
    <div class="stock-name">
        <div>GameStop Corp.</div>
        <div class="stock-symbol">GME</div>
    </div>
    <div class="stock-quote">
        <div class="stock-price">$</div>
        <div class="price-data"></div>
        <div class="price-change"></div>
    </div>
</div>

CSS Code

The CSS code is responsible for implementing the stock ticker's design. Here's a snippet of the code:

.stock-ticker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: sans-serif;
  padding: .75rem;
  color: #fff;
  background-color: #2c2f33;
  border-radius: 10px;
}

.stock-ticker .stock-name {
  text-transform: uppercase;
  font-weight: bold;
  font-size: .875rem;
  letter-spacing: -.025rem;
  margin-right: 1rem;
}

.stock-ticker .stock-quote {
  display: flex;
  align-items: center;
}

.stock-ticker .stock-price {
  font-size: 1.25rem;
  font-weight: bold;
  padding-right: .25rem;
}

.stock-ticker .price-data {
  font-size: 1.5rem;
  font-weight: bold;
  padding-right: .5rem;
}

.stock-ticker .price-change {
  font-size: 1.125rem;
  font-weight: bold;
  padding-left: .5rem;
  border-radius: .25rem;
  text-transform: uppercase;
}

Conclusion

The GME Stock CSS ticker is a fun and informative way to display the GME stock data. Its dynamic design and real-time updates make it a great addition to any website or blog that pertains to financial news.