jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<content>
<div class="column">
  <div class="section">
    <span class="Title">Business Problem</span>
    <span class="description">What problem does the business have that you are trying to solve? (Hint: Consider your current offerings and how they deliver value, changes in the market, delivery channels, competitive threats and customer behavior.)</span>
    <textarea></textarea>
    <div class="numSection">1</div>
  </div>
  <div class="section">
    <span class="Title">Users</span>
    <span class="description">What types (i.e., personas) of users and customers should you focus on first?
(Hint: Who buys your product or service? Who uses it? Who configures it? Etc)</span>
<textarea></textarea>
<div class="numSection">3</div>
  </div>
  <div class="section">
    <span class="Title">Hypotheses</span>
    <span class="description">Combine the assumptions from 2, 3, 4 & 5 into the following hypothesis statement: “We believe that [business outcome] will be achieved if [user] attains [benefit] with [feature].”
(Hint: Each hypothesis should focus on one feature only.)</span>
<textarea></textarea>
<div class="numSection">6</div>
  </div>
</div>
<div class="column">
  <div class="section">
    <span class="Title">Solutions</span>
    <span class="description">What can we make that will solve our business problem and meet the needs of our customers at the same time? List product, feature, or enhancement ideas here. </span>
    <textarea></textarea>
    <div class="numSection">5</div>
  </div>
  <div class="section">
    <span class="Title">What’s the most important
thing we need to learn first?</span>
<span class="description">For each hypothesis from Box 6, identify its riskiest assumptions. Then determine the riskiest one right now. This is the assumption that will cause the entire idea to fail if it’s wrong. 

(Hint: In the early stages of a hypothesis focus on risks to...

CSS

*{
  margin: 0;
  padding: 0;
}
content{
  display: flex;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
}
.column{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    flex-direction: column;
    height: calc(100vh - 10px);
}
.section {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    height: 100%;
    padding: 10px;
}
.Title {
    font-size: 20px;
    font-weight: 600;
}
.description {
    font-size: 12px;
}
.section textarea {
    width: 100%;
    height: 100%;
    background: transparent;
}
.numSection {
    position: absolute;
    font-size: 150px;
    text-align: center;
    width: 33%;
    z-index: -1;
    color: #ccc;
    margin-top: 100px;
    overflow: hidden;
}