We Keep Coding

Filling next available box with a random number, if first box is occupied - JS

Very new to coding and this website in particular.
I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.
I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.
The goal is to populate the next card slot every time I click, not all slots at once.
I am using JS. Please see attached code.
Apologies in advance for errors as this is my first post!
HTML:
//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function(){
genLargeNumber();
}
//FUNCTIONS//
//Generate random small number from array
function genSmallNumber(){
var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}
//Generate random large number from array
function genLargeNumber(){
var largeArray = Array(25,50,75,100);
var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}
```
*{
font-family: monospace, 'Courier New';
}
html{
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder{
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container{
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box{
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box{
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target{
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button{
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active{
top: 5px;
border-bottom: none;
}
#selection_box{
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box{
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6{
margin-right: 0;
}
#whiteboard{
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area{
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box{
float: left;
width: 275px;
height: 120px;
}
#large_number_box{
float: right;
width: 275px;
height: 120px;
}
.number_card{
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active{
bottom: 5px;
border-bottom: none;
}
#small_number_card{
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card{
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
Thanks in advance! Please avoid JQuery type answers - I'm a noob!

you need to make variable cardSlot as global or put it outside the function
var cardSlot = 1; // ==> make it global
document.getElementById("small_number_card").onclick = function() {
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function() {
genLargeNumber();
}
//FUNCTIONS//
function checkResetCardSlot() {
if (cardSlot > 6) {
cardSlot = 1;
// comment or remove below if you want to keep previous value
document.querySelectorAll('#selection_box .box').forEach(function(box) {
box.textContent = "";
})
}
}
//Generate random small number from array
function genSmallNumber() {
var smallArray = Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10);
var smallNumber = smallArray[Math.floor(Math.random() * smallArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = smallNumber;
cardSlot++; // update the number here
}
//Generate random large number from array
function genLargeNumber() {
var largeArray = Array(25, 50, 75, 100);
var largeNumber = largeArray[Math.floor(Math.random() * largeArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = largeNumber;
cardSlot++; // and here
}
``` * {
font-family: monospace, 'Courier New';
}
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder {
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container {
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box {
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box {
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target {
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active {
top: 5px;
border-bottom: none;
}
#selection_box {
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box {
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6 {
margin-right: 0;
}
#whiteboard {
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area {
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box {
float: left;
width: 275px;
height: 120px;
}
#large_number_box {
float: right;
width: 275px;
height: 120px;
}
.number_card {
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active {
bottom: 5px;
border-bottom: none;
}
#small_number_card {
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card {
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>

Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/

You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

Keep tooltip within parent container?

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)

Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

Is it possible to draw diagrams using html, css and js

How can we draw a benchmark like this using html,css and js
Benchmark of user score with Jee Mains and Advance:

A small demo to get started, but don't expect to get everything from this site. Explore for yourself:
You have to modify the left and width properties to manipulate the diagram.
This is just the layout; CSS, images and other stuff you have to discover.
* {
box-sizing: border-box;
}
.outer {
background-color: #ccc;
width: 100%;
height: 50px;
}
.inner {
background-color: yellow;
width: 65%;
height: 50px;
float: left;
position: absolute;
}
.flag-1 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 30%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
.flag-2 {
border-left: 2px solid #777;
height: 70px;
position: absolute;
left: 80%;
float: left;
padding-top: 60px;
padding-bottom: 20px;
padding-left: 5px;
}
<div class="outer">
<div class="inner">
</div>
<div class="flag-1">
This is one
</div>
<div class="flag-2">
This is two
</div>
</div>

Textarea gettong outside the container

Please check the below fiddle :
https://jsfiddle.net/a13nd32u/3/
<textarea rows="5" cols="50" style="width:95%;height:90%;overflow:hidden">
What's on your mind?
</textarea>
Here when I am trying to expand the textarea vertically then it box is getting outside the box. I want to implement it such that whenever the user expand the textarea vertically , the div background should also be expand with it. Can anyone please provide a solution

HTML
<div class="divv">
<textarea rows="4" cols="65"></textarea>
<h4>
space
</h4>
</div>
CSS
.divv{
background-color:green;
}
textarea {
resize: vertical;
overflow: auto;
}
JSFIddle
See if it helps
Thank you

Use This
#container {
background-color: #e6e6e6;
border-style: double;
float: left;
height: auto;
min-height: 160px;
padding-top: 5px;
width: 470px;
}

Maybe something like this? https://jsfiddle.net/aa0mkvfz/:
#container {
border-style: double;
width: 470px;
height: 160px;
background-color: #E6E6E6;
padding-top: 5px;
overflow: auto;
}
hr {
border-color: #FAFAFA;
padding: 0;
margin: 0
}
#upper_space {
color: #3b5998;
margin: 0;
padding-top: 6px;
padding-bottom: 5px;
padding-left: 10px;
}
#textbox {
background-color: white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
overflow: auto;
}
#post_part {
display: inline;
padding: 6px 9px;
float: right;
font-size: 15px
}
select {
width: 80px;
height: 21px;
padding-right: 10px;
display: inline
}
#button1 {
display: inline;
padding-left: 10px
}
#post_button {
height: 24px;
width: 70px;
font-size: 14px;
-webkit-appearance: none;
}
All I did was add an overflow:auto; on the required divs, this creates a new block formatting context, please check this document to learn more about it:
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/