问:
floating action button ripple doesn't work
I am having trouble achieving a ripple effect on my floating action button
i have followed exactly what it says online but i cant see the ripple effect</p>

```<code><com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/new_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:clickable="true"
            android:src="@drawable/add_chat"
            android:tooltipText="Start a new chat"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="56dp"
            app:rippleColor="@color/pastel_red" />
</code>```

答:
add this to your styles.xml

```<code><style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/pastel_red</item>
</style>

<style name="SelectableItemBackground">
    <item name="android:theme">@style/SelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>  #this makes it round, if you want square, remove the word "Borderless"
</style>
</code>```

And then

```<code><com.google.android.material.floatingactionbutton.FloatingActionButton
            style="@style/SelectableItemBackground"
            android:id="@+id/new_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:clickable="true"
            android:src="@drawable/add_chat"
            android:tooltipText="Start a new chat"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="56dp" />
</code>```

Body:
I am having trouble achieving a ripple effect on my floating action button
i have followed exactly what it says online but i cant see the ripple effect

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/new_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:clickable="true"
            android:src="@drawable/add_chat"
            android:tooltipText="Start a new chat"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="56dp"
            app:rippleColor="@color/pastel_red" />

Body:
add this to your styles.xml

<style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/pastel_red</item>
</style>

<style name="SelectableItemBackground">
    <item name="android:theme">@style/SelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackgroundBorderless</item>  #this makes it round, if you want square, remove the word "Borderless"
</style>

And then

<com.google.android.material.floatingactionbutton.FloatingActionButton
            style="@style/SelectableItemBackground"
            android:id="@+id/new_chat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="16dp"
            android:clickable="true"
            android:src="@drawable/add_chat"
            android:tooltipText="Start a new chat"
            app:fabSize="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:maxImageSize="56dp" />


来源: stackexchange

问:
How do you troubleshoot character encoding problems?
If all you see is the ugly no-char boxes, what tools or strategies do you use to figure out what went wrong?

(The specific scenario I'm facing is no-char boxes within a <select> when it should be showing Japanese chars.)

答:
If the data you send to the browser becomes mangled (moji-bake) you will get trash characters. Also, if you specify the wrong character set in your META headers, your browser will render the page incorrectly, causing moji-bake again, sometimes in random places on the page.

When handling CJK character sets, you must be sure to use UTF8 character encoding throughout the lifetime of your program (data storage, retrieval, data manipulation in your code, displaying in the browsser etc...)

What is UTF8?
UTF8 handles binary streams of data, not strings. This means the bit combinations can have variable length. ASCII characters have a fixed length of 8 bits representing 1 byte, however UTF8 characters can be composed of 6bits, 8bits, 12bits, etc... As such, UTF8 is prone to what Japanese call "mojibake".

As a coder, from database to codebase to browser, you should try and use UTF8 completely. For email you can use UTF8, but you will probably find most mail servers and clients are still old and use a mishmash of different character sets (e.g. ISO9022X).

Database Settings
If you are a mysql user, then make sure you have to ensure all connections to the DB use UTF8, and that all tables/fields use UTF8. By default mysql uses Latin (Swedish) character sets. Those kooky swedes love their sense of humour!!

Checking your Codebase
In my experience editors like Notepad++, Notepad2, UltraEdit, e, etc... all have UTF8 support problems. They mostly work, but since their developers don't use CJK languages themselves, they are not perfected. Issues like turning off BOM (Byte Order Mark), mangled tabs, poor character set conversion, etc ... all present problems.

I highly recommend using a proven UTF8 editor like Maruo. This is made by a Japanese company, but there is an English version (and a trial version) at http://www.hidemaru.interlink.or.jp/software/

Lastly, you may need to convert your source files into UTF8. Especially if the codebase itself has CJK language strings contained therein.

Manipulating Strings
Any string function need to multibyte safe. Notice I didn't say double-byte. UTF8 is not a double byte but multibyte, depending on the total number of bits used to represent a character. In PHP you need to call the MB string functions specifically. Ruby and other languages have more transparent support, but you need to check the docs for your flavour of application server!

META Tags
Check out google.co.jp or yahoo.co.jp for their META headers. These are sites that know how to to it properly. Basically include the following META tag the doucment

<meta http-equiv="content-type" content="text/html; charset=utf-8">

It is usually safe to mix English HTML document type attributes with the above character too. So adding the META tag above seems to work in a HTML document that has:

Email
This is a wholly different can of worms. UTF8 works a lot, but many older Japanese clients use ISO2022X more. This is not worth covering here.

Debugging UTF8 Issues
Once you have a reliable UTF8 editor like Maruo, you can create static pages and resolve your issues.

Hope that helps

OwnerDisplayName: Larsenal

ContentLicense: CC BY-SA 2.5

Body:
If the data you send to the browser becomes mangled (moji-bake) you will get trash characters. Also, if you specify the wrong character set in your META headers, your browser will render the page incorrectly, causing moji-bake again, sometimes in random places on the page.

When handling CJK character sets, you must be sure to use UTF8 character encoding throughout the lifetime of your program (data storage, retrieval, data manipulation in your code, displaying in the browsser etc...)

What is UTF8?
UTF8 handles binary streams of data, not strings. This means the bit combinations can have variable length. ASCII characters have a fixed length of 8 bits representing 1 byte, however UTF8 characters can be composed of 6bits, 8bits, 12bits, etc... As such, UTF8 is prone to what Japanese call "mojibake".

As a coder, from database to codebase to browser, you should try and use UTF8 completely. For email you can use UTF8, but you will probably find most mail servers and clients are still old and use a mishmash of different character sets (e.g. ISO9022X).

Database Settings
If you are a mysql user, then make sure you have to ensure all connections to the DB use UTF8, and that all tables/fields use UTF8. By default mysql uses Latin (Swedish) character sets. Those kooky swedes love their sense of humour!!

Checking your Codebase
In my experience editors like Notepad++, Notepad2, UltraEdit, e, etc... all have UTF8 support problems. They mostly work, but since their developers don't use CJK languages themselves, they are not perfected. Issues like turning off BOM (Byte Order Mark), mangled tabs, poor character set conversion, etc ... all present problems.

I highly recommend using a proven UTF8 editor like Maruo. This is made by a Japanese company, but there is an English version (and a trial version) at http://www.hidemaru.interlink.or.jp/software/

Lastly, you may need to convert your source files into UTF8. Especially if the codebase itself has CJK language strings contained therein.

Manipulating Strings
Any string function need to multibyte safe. Notice I didn't say double-byte. UTF8 is not a double byte but multibyte, depending on the total number of bits used to represent a character. In PHP you need to call the MB string functions specifically. Ruby and other languages have more transparent support, but you need to check the docs for your flavour of application server!

META Tags
Check out google.co.jp or yahoo.co.jp for their META headers. These are sites that know how to to it properly. Basically include the following META tag the doucment <HEAD>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

It is usually safe to mix English HTML document type attributes with the above character too. So adding the META tag above seems to work in a HTML document that has:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Email
This is a wholly different can of worms. UTF8 works a lot, but many older Japanese clients use ISO2022X more. This is not worth covering here.

Debugging UTF8 Issues
Once you have a reliable UTF8 editor like Maruo, you can create static pages and resolve your issues.

Hope that helps

OwnerDisplayName: pchapman

ContentLicense: CC BY-SA 3.0


问:
What does the "?:^" regular expression mean?
I am looking at this sub-expression (this is in JavaScript):

```<code>(?:^|.....)
</code>```

I know that ? means "zero or one times" when it follows a character, but not sure what it means in this context.

答:
"(?:x) Matches 'x' but does not remember the match."

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Regular_Expressions

OwnerDisplayName: levik

Body:
I am looking at this sub-expression (this is in JavaScript):

(?:^|.....)

I know that ? means "zero or one times" when it follows a character, but not sure what it means in this context.

LastEditorDisplayName: levik


问:
c++ self in initialisation list
i have this code snippet

```<code>class Osoba{
         Osoba(char* imie,int wiek){
                     this->imie=new char[strlen(imie)+1];
                     strcpy(this->imie,imie);
                     this->wiek=wiek;
                     cout<<"Utworzono Osobe "<<this->imie<<endl;
         }
         Osoba(Osoba& x){
                 Osoba(x.imie,x.wiek);
         }
[...]
</code>```

and when i call the copy constructor it doesnt work (creates and destroyes object).

Edit:
if i use

```<code>         Osoba(Osoba& x): Osoba(x.imie,x.wiek){
</code>```

i get type 'class Osoba' is not a direct base of 'Osoba'

how is this done ?

答:
You have to initialize the members of Osoba, the same way as you are doing in the other constructor.

You can only reuse constructors (with other syntax) in C++2011.

Title: c++ self in initialisation list

Body:
i have this code snippet

class Osoba{
         Osoba(char* imie,int wiek){
                     this->imie=new char[strlen(imie)+1];
                     strcpy(this->imie,imie);
                     this->wiek=wiek;
                     cout<<"Utworzono Osobe "<<this->imie<<endl;
         }
         Osoba(Osoba& x){
                 Osoba(x.imie,x.wiek);
         }
[...]

and when i call the copy constructor it doesnt work (creates and destroyes object).

Edit:
if i use

         Osoba(Osoba& x): Osoba(x.imie,x.wiek){

i get type 'class Osoba' is not a direct base of 'Osoba'

how is this done ?


问:
I have a problem in java method code which returns the division of two numbers
In this code a division method is implemented, so i want to handle 3 cases where division is undefined using try catch and throws, but it gives me an error message that the division method must return float .
package calculator3;

//Class implements interface
public class implementation  implements calc {

```<code>//Add function
    public int add(int x, int y) {
        int ans1 = x + y ;
        return ans1 ;

    }

    //Divide function
    public float divide(int x, int y) throws RuntimeException{
        try {
            if(y == Double.POSITIVE_INFINITY || y == Double.NEGATIVE_INFINITY || y == 0 ) {
                throw new ArithmeticException("invalid_division");

            }
            else {
                return x / y ;
            }

        }catch  (ArithmeticException invalid_division ) {
            System.out.println("invalid_division");
        }
}
}
</code>```

答:
Your not actually throwing the exception once catching it so the compiler will complain that your missing a return in your divide() method.

add:

throw e;

to your catch clause

ContentLicense: CC BY-SA 4.0

Body:
In this code a division method is implemented, so i want to handle 3 cases where division is undefined using try catch and throws, but it gives me an error message that the division method must return float .
package calculator3;

//Class implements interface
public class implementation  implements calc {

//Add function
    public int add(int x, int y) {
        int ans1 = x + y ;
        return ans1 ;

    }

    //Divide function
    public float divide(int x, int y) throws RuntimeException{
        try {
            if(y == Double.POSITIVE_INFINITY || y == Double.NEGATIVE_INFINITY || y == 0 ) {
                throw new ArithmeticException("invalid_division");

            }
            else {
                return x / y ;
            }

        }catch  (ArithmeticException invalid_division ) {
            System.out.println("invalid_division");
        }
}
}


问:
Conditional Postgres Query
The PG table looks like this:

```<code>id - name   - type
1  - Name 1 - Type A
2  - Name 1 - Type B
3  - Name 2 - Type A
4  - Name 2 - Type B
5  - Name 3 - Type A
</code>```

I would like to write a query that only lists rows in which Name has a 'Type A' record but not a Type B record.

This is the result I am hoping for:

```<code>5  - Name 3 - Type A
</code>```

答:
You can use a nested select:</p>

```<code>select t.*
from table_name t
where not exists(
    select 1
    from table_name it
    where t.name = it.name
    and it.type = 'Type B'
)
and t.type = 'Type A'
</code>```

Title: Conditional Postgres Query

Body:
The PG table looks like this:

id - name   - type
1  - Name 1 - Type A
2  - Name 1 - Type B
3  - Name 2 - Type A
4  - Name 2 - Type B
5  - Name 3 - Type A

I would like to write a query that only lists rows in which Name has a 'Type A' record but not a Type B record.

This is the result I am hoping for:

5  - Name 3 - Type A

Body:
You can use a nested select:

select t.*
from table_name t
where not exists(
    select 1
    from table_name it
    where t.name = it.name
    and it.type = 'Type B'
)
and t.type = 'Type A'


问:
Excluding intervals from a real number line
A long time ago I asked the following question:

Python: delete substring by indices

Last week I was asked a very similar question, but with continuous real-number line.

Imagine you are given an interval (X, Y), and a bunch of sub-intervals blocks=[(x1, y1), (x2, y2), ...]. Your goal is to find a list of intervals remaining=[(a1, b1), (a2, b2), ..] that is (1) in (X, Y), but (2) not in any of the sub-intervals in blocks. The intervals in blocks can overlap.

In other words, the function signature looks something like:

```<code>def delete_blocks_from_interval(X, Y, blocks):
    ```
    X: start of the given interval
    Y: end of the given interval
    blocks: list of intervals (x, y) to be removed, can overlap

    returns remaining = [(a, b), ...] intervals remaining after removal of blocks
    ```
    pass
</code>```

I can construct a graph of connected intervals in blocks, and find both the minimum of the start and the maximum of end for each connected component in the graph. But this is quadratic in length of blocks. I wonder if there is a better-runtime algorithm.

Please also discuss what code routine you think is more efficient for the algorithm if you will.

Many many thanks.

As requested, please consider the following illustrative inputs:

X = -1

Y = 20

blocks = [(1, 10), (4, 5), (9, 11), (16, 17.5)]

the expected output is remaining = [(-1, 1), (11, 16), (17.5, 20)]

答:
Sort the blocks;

check if there is a gap between X and item 0 of the first block; save if there is;

iterate over blocks in pairs,

get the first and second item

if item 1 of the first block is less than item 0 of the second block,

save this interval (first[1],second[0]) ;

or if they overlap,

compare the last items,

if the last item of the second tuple is bigger than the last item of the first - expand the first tuple range,

get the third/next item, repeat the comparison(s)

repeat til you get to the end of the (X,Y) interval or you run out of blocks.

Body:
A long time ago I asked the following question:

Python: delete substring by indices

Last week I was asked a very similar question, but with continuous real-number line.

Imagine you are given an interval (X, Y), and a bunch of sub-intervals blocks=[(x1, y1), (x2, y2), ...]. Your goal is to find a list of intervals remaining=[(a1, b1), (a2, b2), ..] that is (1) in (X, Y), but (2) not in any of the sub-intervals in blocks. The intervals in blocks can overlap.

In other words, the function signature looks something like:

def delete_blocks_from_interval(X, Y, blocks):
    ```
    X: start of the given interval
    Y: end of the given interval
    blocks: list of intervals (x, y) to be removed, can overlap

    returns remaining = [(a, b), ...] intervals remaining after removal of blocks
    ```
    pass

I can construct a graph of connected intervals in blocks, and find both the minimum of the start and the maximum of end for each connected component in the graph. But this is quadratic in length of blocks. I wonder if there is a better-runtime algorithm.

Please also discuss what code routine you think is more efficient for the algorithm if you will.

Many many thanks.

As requested, please consider the following illustrative inputs:

X = -1

Y = 20

blocks = [(1, 10), (4, 5), (9, 11), (16, 17.5)]

the expected output is remaining = [(-1, 1), (11, 16), (17.5, 20)]


问:
How do you make a div shaped like an ellipse in CSS?
I am trying to make the following shapes with css. I don't know how I can do this, can you help?

答: You can do this with clip-path, but you will likely need to use a custom path rather than a simple shape since these are drawn off axis. Alternately, you may be able to get away with doing a clip-path: ellipse(…) and then transform: rotate(…) on the div, then another transform: rotate(…) with the opposite value on the contents to keep them aligned horizontally.


问:
Two Inputs side by side CSS
I'm currently practicing some WebDev and I'm working on an interactive food pyramid. I've been able to align the other inputs but the inputs on top of the triangle are giving me trouble, I've tried everything from floats to flex and inline blocks. Nothing seems to work, any help would be greatly appreciated.

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: block;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}</code>```

      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />

      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>

      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>

      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>

      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>

      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>

Enter Date of Submission:
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

```

答:
I would go with flex and center.

```<code>.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
}
</code>```

and change to display: flex on hover

```<code>#p6:hover .inside-text6 {
  display: flex;
}
</code>```

You should also improve your code with only one increment/decrement function with element id as a parameter.
Something like that

```<code>function incrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(el).value = value;
}

function decrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>0)
    {
        value--;
    }
    document.getElementById(el).value = value;
}
</code>```

And you would call it as

```<code><input type="button" onclick="decrementValue('number1')" value="-" id="b1" />
<input type="button" onclick="decrementValue('number2')" value="-" id="b2" />
<input type="button" onclick="decrementValue('number3')" value="-" id="b3" />
...
</code>```

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: flex;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}</code>```

      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />

      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>

      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>

      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>

      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>

      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>

Enter Date of Submission:
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

```

Title: Two Inputs side by side CSS

Body:
I'm currently practicing some WebDev and I'm working on an interactive food pyramid. I've been able to align the other inputs but the inputs on top of the triangle are giving me trouble, I've tried everything from floats to flex and inline blocks. Nothing seems to work, any help would be greatly appreciated.

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}

.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: block;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}

      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />

      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>

      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>

      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>

      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>

      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>

Enter Date of Submission:
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

Body:
I would go with flex and center.

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
}

and change to display: flex on hover

#p6:hover .inside-text6 {
  display: flex;
}

You should also improve your code with only one increment/decrement function with element id as a parameter.
Something like that

function incrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById(el).value = value;
}

function decrementValue(el)
{
    let value = parseInt(document.getElementById(el).value, 10);
    value = isNaN(value) ? 0 : value;
    if(value>0)
    {
        value--;
    }
    document.getElementById(el).value = value;
}

And you would call it as

<input type="button" onclick="decrementValue('number1')" value="-" id="b1" />
<input type="button" onclick="decrementValue('number2')" value="-" id="b2" />
<input type="button" onclick="decrementValue('number3')" value="-" id="b3" />
...

function incrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number1').value = value;
}

function decrementValue1() {
  let value = parseInt(document.getElementById('number1').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number1').value = value;
}

function incrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number2').value = value;
}

function decrementValue2() {
  let value = parseInt(document.getElementById('number2').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number2').value = value;
}

function incrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number3').value = value;
}

function decrementValue3() {
  let value = parseInt(document.getElementById('number3').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number3').value = value;
}

function incrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number4').value = value;
}

function decrementValue4() {
  let value = parseInt(document.getElementById('number4').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number4').value = value;
}

function incrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number5').value = value;
}

function decrementValue5() {
  let value = parseInt(document.getElementById('number5').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number5').value = value;
}

function incrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number6').value = value;
}

function decrementValue6() {
  let value = parseInt(document.getElementById('number6').value, 10);
  value = isNaN(value) ? 0 : value;
  if (value > 0) {
    value--;
  }
  document.getElementById('number6').value = value;
}

var colors = ["red", "blue", "green", "yellow", "purple", "gold", "pink", "grey", "turquoise", "aqua"];
var i = 0;
var selectedColor;

function changeColour() {
  selectedColor = colors[i];
  document.getElementById("number" + 1).style.backgroundColor = selectedColor;
  i++;
  if (i > colors.length)
    i = 0;
}

function printDate() {
  let value = document.getElementById("date").value;
  document.getElementById("check").innerHTML = "Date: " + value;
}

.container {
  text-align: center;
  position: relative;
  top: 40%;
}

.inside-text1 {
  display: none;
  position: absolute;
  top: 20px;
  left: 248px;
  text-align: center;
  bottom: -65px;
}

.inside-text {
  display: none;
  position: relative;
  text-align: center;
  bottom: -25px;
}

.inside-text6 {
  display: none;
  position: relative;
  text-align: center;
  bottom: -120px;
  align-items: center;
  justify-content: center;
  /*float: left;*/
}

#p6 {
  border-bottom: 200px solid blue;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  height: 0;
  width: 0;
  margin-right: auto;
  margin-left: auto;
}

#p5-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 10px;
  margin-right: auto;
  margin-left: auto;
}

#p5 {
  border-bottom: 80px solid black;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 220px;
  margin-right: auto;
  margin-left: auto;
}

#p4-5 {
  border-bottom: 20px solid white;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 240px;
  margin-right: auto;
  margin-left: auto;
}

#p4 {
  border-bottom: 80px solid purple;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 330px;
  margin-right: auto;
  margin-left: auto;
}

#p3 {
  border-bottom: 80px solid green;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 420px;
  margin-right: auto;
  margin-left: auto;
}

#p2 {
  border-bottom: 80px solid yellow;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 510px;
  margin-right: auto;
  margin-left: auto;
}

#p1 {
  position: relative;
  top: 40%;
  border-bottom: 80px solid red;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0;
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

#p1:hover .inside-text1 {
  display: block;
}

#p2:hover .inside-text {
  display: block;
}

#p3:hover .inside-text {
  display: block;
}

#p4:hover .inside-text {
  display: block;
}

#p5:hover .inside-text {
  display: block;
}

#p6:hover .inside-text6 {
  display: flex;
}

.button {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

#b1 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number1 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  background-color: grey;
  text-align: center;
}

#b2 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b3 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number2 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b4 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b5 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number3 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b6 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b7 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number4 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b8 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b9 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number5 {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b10 {
  display: inline-block;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b11 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#number6 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#b12 {
  /*display: inline-flex;*/
  float: left;
  height: 25px;
  width: 30px;
  border-radius: 50%;
  border: solid red;
  text-align: center;
}

#check {
  display: block;
  position: center;
  height: 25px;
  width: 125px;
  /*border-radius: 50%;*/
  border: solid red;
  text-align: center;
}

<div class="container">
  <div id="p6">
    <div class="inside-text6">
      <input type="button" onclick="decrementValue6()" value="-" id="b11" />
      <label for="number6"></label><input type="text" id="number6" value="0" />
      <input type="button" onclick="incrementValue6()" value="+" id="b12" />
    </div>
  </div>

  <div id="p5-5"></div>

  <div id="p5">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue5()" value="-" id="b9" />
        <label for="number5"></label><input type="text" id="number5" value="1" />
        <input type="button" onclick="incrementValue5()" value="+" id="b10" />
      </form>
    </div>
  </div>

  <div id="p4-5"></div>

  <div id="p4">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue4()" value="-" id="b7" />
        <label for="number4"></label><input type="text" id="number4" value="2" />
        <input type="button" onclick="incrementValue4();" value="+" id="b8" />
      </form>
    </div>
  </div>

  <div id="p3">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue3()" value="-" id="b5" />
        <label for="number3"></label><input type="text" id="number3" value="3" />
        <input type="button" onclick="incrementValue3()" value="+" id="b6" />
      </form>
    </div>
  </div>

  <div id="p2">
    <div class="inside-text">
      <form>
        <input type="button" onclick="decrementValue2()" value="-" id="b3" />
        <label for="number2"></label><input type="text" id="number2" value="4" />
        <input type="button" onclick="incrementValue2()" value="+" id="b4" />
      </form>
    </div>
  </div>
  <div id="p1">
    <div class="inside-text1">
      <form>
        <input type="button" onclick="decrementValue1('number6');changeColour()" value="-" id="b2" />
        <input type="text" id="number1" value="6" />
        <input type="button" onclick="incrementValue1();changeColour()" value="+" id="b1" />
      </form>
    </div>
  </div>
</div>

<label for="date">Enter Date of Submission:</label>
<input type="date" id="date" value="0" />
<input type="button" onclick="printDate()" value="Record" />

<div id="check"></div>


问:
Do modals with for-loop on Vue
I want to create modals for cards with loops. I tried v-bind:id="masa._id" and v-bind:data-target="'#'+masa._id" but modal not working ... how to do modals in loops?

Here is my html code:

```<code>        <div class="row">

      <div class="col" v-for="masa in Bahce1grupA_data">

           <!-- The Masa Modal -->
          <div class="modal fade"  v-bind:id="masa._id">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title">[[masa.siparis_grup]]-[[masa.siparis_masano]]</h4>
                  <button type="button" class="close" data-dismiss="modal">×</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                      deneme
                      <span class="badge badge-primary badge-pill">5</span>
                      4
                    </li>
                  </ul>
                  Toplam Fiyat : 30
                  Kişi Sayısı : 2

                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary">Hesabı Kapat</button>
                  <button type="button" class="btn btn-info">Masayı Değiştir</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>
                </div>

              </div>
            </div>
          </div>

          <div class="card text-white mb-3" v-bind:class="getClass(masa.hesap_durumu)">
            <div class="card-body">
              <h5 class="card-title">[[masa.siparis_grup]]-[[masa.siparis_masano]]</h5>
              <button type="button" class="btn btn-light" data-toggle="modal" v-bind:data-target="'#'+masa._id">Hesabı Aç</button>
            </div>
          </div>

      </div>
</code>```

I concatenated # with masa._id to make sure not to interpret them as a plain string. And values of _id are totally unique for each.

and Vue part of my code is:

```<code>      var vm = new Vue({
      el: '#app2',
      delimiters: ['[[',']]'],
      data: {
        Bahce1grupA_data: {},
        Bahce1grupB_data: {},
        Bahce1grupC_data: {},
        Bahce1grupD_data: {},
      },
      mounted: function() {
              polling1=setInterval(()=> {
              axios.get('/getBahce1grupA')
                  .then((response)=> {
                      this.Bahce1grupA_data = response.data;
                  })
          }, 5000);
</code>```

答: I added prefix as such : v-bind:id="'kimlik'+masa._id" and v-bind:data-target="'#kimlik'+masa._id" just because _id starts with numbers. And it worked.</p>

Title: Do modals with for-loop on Vue

Body:
I want to create modals for cards with loops. I tried v-bind:id="masa._id" and v-bind:data-target="'#'+masa._id" but modal not working ... how to do modals in loops?

Here is my html code:

[[masa.siparis_grup]]-[[masa.siparis_masano]]

                  <button type="button" class="close" data-dismiss="modal">×</button>

                      deneme
                      5
                      4

                  Toplam Fiyat : 30
                  Kişi Sayısı : 2

                  <button type="button" class="btn btn-primary">Hesabı Kapat</button>
                  <button type="button" class="btn btn-info">Masayı Değiştir</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button>

[[masa.siparis_grup]]-[[masa.siparis_masano]]

              <button type="button" class="btn btn-light" data-toggle="modal" v-bind:data-target="'#'+masa._id">Hesabı Aç</button>

I concatenated # with masa._id to make sure not to interpret them as a plain string. And values of _id are totally unique for each.

and Vue part of my code is:

      var vm = new Vue({
      el: '#app2',
      delimiters: ['[[',']]'],
      data: {
        Bahce1grupA_data: {},
        Bahce1grupB_data: {},
        Bahce1grupC_data: {},
        Bahce1grupD_data: {},
      },
      mounted: function() {
              polling1=setInterval(()=> {
              axios.get('/getBahce1grupA')
                  .then((response)=> {
                      this.Bahce1grupA_data = response.data;
                  })
          }, 5000);


问:
Create a numpy matrix from content in dictionary labelled by i,j
Suppose I have a dictionary:

```<code>d = {(0,0): 1, (0,1): 2, (1,0): 3, (1,1): 4}
</code>```

I want to make this into the array (i.e. the keys correspond to array indices)

```<code>array([[1, 2],
       [3, 4]])
</code>```

Is there a better way to do this than for loops?
(I tried np.fromfunction but it did not work.)

答:
items gives a list of the keys and values, which you can easily use to assign values to a preallocated array.

```<code>In [624]: d = {(0,0): 1, (0,1): 2, (1,0): 3, (1,1): 4}
In [625]: list(d.items())
Out[625]: [((0, 0), 1), ((0, 1), 2), ((1, 0), 3), ((1, 1), 4)]
In [626]: res = np.zeros((2,2),int)
In [627]: for id,val in d.items():
     ...:     res[id]=val
     ...:
In [628]: res
Out[628]:
array([[1, 2],
       [3, 4]])
</code>```

Alternatively assign elements with the keys and values list:

```<code>In [640]: k,v = list(d.keys()), list(d.values())
In [641]: res[tuple(np.transpose(k))]=v
In [642]: res
Out[642]:
array([[1, 2],
       [3, 4]])

In [643]: np.transpose(k)
Out[643]:
array([[0, 0, 1, 1],
       [0, 1, 0, 1]])
</code>```

Body:
Suppose I have a dictionary:

d = {(0,0): 1, (0,1): 2, (1,0): 3, (1,1): 4}

I want to make this into the array (i.e. the keys correspond to array indices)

array([[1, 2],
       [3, 4]])

Is there a better way to do this than for loops?
(I tried np.fromfunction but it did not work.)

Body:
items gives a list of the keys and values, which you can easily use to assign values to a preallocated array.

In [624]: d = {(0,0): 1, (0,1): 2, (1,0): 3, (1,1): 4}
In [625]: list(d.items())
Out[625]: [((0, 0), 1), ((0, 1), 2), ((1, 0), 3), ((1, 1), 4)]
In [626]: res = np.zeros((2,2),int)
In [627]: for id,val in d.items():
     ...:     res[id]=val
     ...:
In [628]: res
Out[628]:
array([[1, 2],
       [3, 4]])

Alternatively assign elements with the keys and values list:

In [640]: k,v = list(d.keys()), list(d.values())
In [641]: res[tuple(np.transpose(k))]=v
In [642]: res
Out[642]:
array([[1, 2],
       [3, 4]])

In [643]: np.transpose(k)
Out[643]:
array([[0, 0, 1, 1],
       [0, 1, 0, 1]])


问:
Get Build date in unity standalone build
I am looking for a way to get build DateTime so that a user/QA can get the executable release date. For this reason, I can make a variable or a textfile where I update the DateTime when building the executable. Then later I retrieve the date from the file or variable. The problem is, with each build I have to update the DateTime in a file or in a variable. Is there any Built-in way available in Unity or Application class to do this? I found nothing related to this.

I found this code snippet on Stack form but is returning nothing:

```<code>string GetPlayerBuildDate()
{
    var version = Assembly.GetEntryAssembly().GetName().Version;
    DateTime buildDateTime = new DateTime(2000, 1, 1).Add(new TimeSpan(
    TimeSpan.TicksPerDay * version.Build + // days since 1 January 2000
    TimeSpan.TicksPerSecond * 2 * version.Revision));
    Debug.Log("GetPlayerDate Assembly" + buildDateTime);
    return buildDateTime.Year.ToString();
}
</code>```

答:
As mentioned in my earlier comment earlier you can completely automate including a .txt file with your build containing the date/time of the build by using the Build Player PipeLine. Without the need to create your own build system with UI (unless I misunderstood, and you have your own build system. But even then it can be incorporated into that as well).

Important: The post processor script needs to be in a folder called Editor, if it is not it will throw errors when building. In my example the script is in /Assets/Scripts/Editor/PostBuildScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEditor.Callbacks;
using System;
using System.IO;

public class BuildScript
{
    //Script is called after the building process, BuildTarget and string pathToBuiltProject are mandatory arguments
    [PostProcessBuildAttribute(1)]
    public static void OnPostprocessBuild(BuildTarget target, string pathToBuiltProject)
    {
        //Give the user a file folder pop-up asking for the location you wish to save the file to
        string path = EditorUtility.SaveFolderPanel("Save location", "", "");
        //Alternative you can also just hardcode the path..
        //string path = "C:/Dev/Unity/MyProject/MyBuilds/

        //Get the current datetime and convert it to a string with some explanatory text
        string date = string.Format("Build date: {0}", DateTime.Now.ToString());

        //Write the date to a text file called "BuildDate.txt" at the selected location
        File.WriteAllText(path + "BuildDate.txt", date);
    }
}
```

Now after building the "BuildDate.txt" file will be included in the selected location, containing the DateTime of the build (e.g Build date: 19/02/2020 20:29:30)

Body:
I am looking for a way to get build DateTime so that a user/QA can get the executable release date. For this reason, I can make a variable or a textfile where I update the DateTime when building the executable. Then later I retrieve the date from the file or variable. The problem is, with each build I have to update the DateTime in a file or in a variable. Is there any Built-in way available in Unity or Application class to do this? I found nothing related to this.

I found this code snippet on Stack form but is returning nothing:

string GetPlayerBuildDate()
{
    var version = Assembly.GetEntryAssembly().GetName().Version;
    DateTime buildDateTime = new DateTime(2000, 1, 1).Add(new TimeSpan(
    TimeSpan.TicksPerDay * version.Build + // days since 1 January 2000
    TimeSpan.TicksPerSecond * 2 * version.Revision));
    Debug.Log("GetPlayerDate Assembly" + buildDateTime);
    return buildDateTime.Year.ToString();
}

Body:
As mentioned in my earlier comment earlier you can completely automate including a .txt file with your build containing the date/time of the build by using the Build Player PipeLine. Without the need to create your own build system with UI (unless I misunderstood, and you have your own build system. But even then it can be incorporated into that as well).

Important: The post processor script needs to be in a folder called Editor, if it is not it will throw errors when building. In my example the script is in /Assets/Scripts/Editor/PostBuildScript.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using UnityEditor.Callbacks;
using System;
using System.IO;

public class BuildScript
{
    //Script is called after the building process, BuildTarget and string pathToBuiltProject are mandatory arguments
    [PostProcessBuildAttribute(1)]
    public static void OnPostprocessBuild(BuildTarget target, string pathToBuiltProject)
    {
        //Give the user a file folder pop-up asking for the location you wish to save the file to
        string path = EditorUtility.SaveFolderPanel("Save location", "", "");
        //Alternative you can also just hardcode the path..
        //string path = "C:/Dev/Unity/MyProject/MyBuilds/

        //Get the current datetime and convert it to a string with some explanatory text
        string date = string.Format("Build date: {0}", DateTime.Now.ToString());

        //Write the date to a text file called "BuildDate.txt" at the selected location
        File.WriteAllText(path + "BuildDate.txt", date);
    }
}

Now after building the "BuildDate.txt" file will be included in the selected location, containing the DateTime of the build (e.g Build date: 19/02/2020 20:29:30)


问:
Rename dataframe in Python for loop
I am trying to rename a dataframe in each iteration of my for loop. For column "item" in the "data" dataframe, I would like to generate dataframes up to the number of unique items in "item" column.</p>

```<code>for item in data.item.unique():
    data+"item" = data[data["item"] == item]
</code>```

答:
Use a dictionary:</p>

```<code>frames = {}
for item in data['item'].unique():
    frames[item] = data[data['item'] == item]
</code>```

Title: Rename dataframe in Python for loop

Body:
I am trying to rename a dataframe in each iteration of my for loop. For column "item" in the "data" dataframe, I would like to generate dataframes up to the number of unique items in "item" column.

for item in data.item.unique():
    data+"item" = data[data["item"] == item]

Body:
Use a dictionary:

frames = {}
for item in data['item'].unique():
    frames[item] = data[data['item'] == item]


问:
If the number of letters is low, why doesn't elasticsearch work?
```<code>$params = [
            'from' => $from,
            'size' => config('app.pagination'),
            'index' => $index,
            //'type' => $this->type,
            'body' => [
                'query' => [
                    'bool' => [
                        'filter' => [
                            'term' => $where
                        ],
                        'must' => [
                            'multi_match' => [
                                'query' => $match,
                                'fields'=>$fields,
                                'fuzziness' => "AUTO:1,5",
                            ]
                        ]
                    ],
                ]
            ]
        ];
</code>```

Hello, I don't have a problem with my query above.

For example, I am looking for a pizza. I am writing pizaz again.
These queries return the correct records to me.

But I have a problem.
It doesn't return anything when you type piz.

How can I solve this problem? I want it to work when I write it missing.

答:
Add minimum_should_match  parameter to your query.

Using minimum_should_match sets a threshold (absolute number, percentage, or combination of these) for matching clauses in boolean queries.

As you know from docs

If the bool query includes at least one should clause and no must or
  filter clauses, the default value is 1. Otherwise, the default value
  is 0.

Body:
$params = [
            'from' => $from,
            'size' => config('app.pagination'),
            'index' => $index,
            //'type' => $this->type,
            'body' => [
                'query' => [
                    'bool' => [
                        'filter' => [
                            'term' => $where
                        ],
                        'must' => [
                            'multi_match' => [
                                'query' => $match,
                                'fields'=>$fields,
                                'fuzziness' => "AUTO:1,5",
                            ]
                        ]
                    ],
                ]
            ]
        ];

Hello, I don't have a problem with my query above.

For example, I am looking for a pizza. I am writing pizaz again.
These queries return the correct records to me.

But I have a problem.
It doesn't return anything when you type piz.

How can I solve this problem? I want it to work when I write it missing.


问:
How can I capture a value that comes through POST to execute a procedure stored in Spring Boot
I am working with Spring Boot, in which I am relatively new, and in this case I am doing a database validation through a Stored Procedue, which I could already solve, the reality is that until now I had done the tests sent the parameter of entry (a mobile number) by GET, but it is required for project reasons, send the parameter through POST, that is to say in a Body with the method:

Method Get

With a Body using the POST Method:

Request

```<code>{
  "movil":"04242374781";
}
</code>```

Reponse:

```<code>{
    "result": "Cliente no encontrado",
    "code": "NA22003"
}
</code>```

mobile is an attribute of the database where the Stored Procedure is executed, for this case it is only necessary to pass that parameter to execute the SP, which returns a response that is not the same object of the database in which it is mobile, then you will see it in the code.

I understand that you can send the parameter for consultation with POST, but in my case try to guide me according to what I got on the internet, but I got an error:

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain' not supported]

My Code

Main class

```<code>package com.app.validacion;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}
</code>```

My controller

```<code>package com.app.validacion.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RestController;

import com.app.validacion.dao.DriverBonificadosRepository;
import com.app.validacion.entity.RespuestaVo;

@RestController
public class DriverBonificadosController {

    @Autowired   // Inyeccion de Dependecia, en este caso del Respository
    private DriverBonificadosRepository dao;

    @GetMapping("/service/{movil}")
    public RespuestaVo  ConsultarMovil(@PathVariable("movil") String movil) {
        System.out.println(movil);
        return dao.validarClienteBonifiado(movil);

    }

    /*
       the code I was trying to use to send a request in JSON and try to get the mobile parameter,but
       I got an error:
       Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type
        'text/plain' not supported]
    /*
     * @PostMapping(value = "/service",consumes = "application/json", produces="application/json")
     * public RespuestaVo ValidateClient(@RequestBody DriverBonificados driver) {
     * System.out.println(driver.getMovil());
     *   return dao.validarClienteBonifiado(driver.getMovil());
      } */

    }
</code>```

My Repository

```<code>package com.app.validacion.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;

import com.app.validacion.entity.DriverBonificados;
import com.app.validacion.entity.RespuestaVo;

@Repository
public interface DriverBonificadosRepository extends JpaRepository<DriverBonificados, Integer> {

    @Query(nativeQuery = true,value = "call ValidacionClienteBonificado(:movil)")
    RespuestaVo validarClienteBonifiado(@Param("movil") String pMovil);

    }
</code>```

My Entity

```<code>package com.app.validacion.entity;

import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="DriveBonificados")
public class DriverBonificados {

    @Id
    private int id;
    private String movil;
    private String contador;
    private Date fecha_driver;
    private Date fecha_alta;
    private Date fecha_fin;
    private Date codigo_transaccion;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getMovil() {
        return movil;
    }
    public void setMovil(String movil) {
        this.movil = movil;
    }
    public String getContador() {
        return contador;
    }
    public void setContador(String contador) {
        this.contador = contador;
    }
    public Date getFecha_driver() {
        return fecha_driver;
    }
    public void setFecha_driver(Date fecha_driver) {
        this.fecha_driver = fecha_driver;
    }
    public Date getFecha_alta() {
        return fecha_alta;
    }
    public void setFecha_alta(Date fecha_alta) {
        this.fecha_alta = fecha_alta;
    }
    public Date getFecha_fin() {
        return fecha_fin;
    }
    public void setFecha_fin(Date fecha_fin) {
        this.fecha_fin = fecha_fin;
    }
    public Date getCodigo_transaccion() {
        return codigo_transaccion;
    }
    public void setCodigo_transaccion(Date codigo_transaccion) {
        this.codigo_transaccion = codigo_transaccion;
    }

}
</code>```

My Model Response

```<code>package com.app.validacion.entity;

public interface RespuestaVo {

    String getCode();
    String getResult();

}
</code>```

答:
Nice post, but the (first encountered problem) solution is trivial:

With:

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain' not supported]

and with this postman request, You need to:

postman specific: switch the (request>body) content type from "Text" to "JSON (application/json)"

generally: add a (http) header to Your request like

```<code>Content-Type: application/json;...
</code>```

Body:
I am working with Spring Boot, in which I am relatively new, and in this case I am doing a database validation through a Stored Procedue, which I could already solve, the reality is that until now I had done the tests sent the parameter of entry (a mobile number) by GET, but it is required for project reasons, send the parameter through POST, that is to say in a Body with the method:

Method Get

With a Body using the POST Method:

Request

{
  "movil":"04242374781";
}

Reponse:

{
    "result": "Cliente no encontrado",
    "code": "NA22003"
}

mobile is an attribute of the database where the Stored Procedure is executed, for this case it is only necessary to pass that parameter to execute the SP, which returns a response that is not the same object of the database in which it is mobile, then you will see it in the code.

I understand that you can send the parameter for consultation with POST, but in my case try to guide me according to what I got on the internet, but I got an error:

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain' not supported]

My Code

Main class

package com.app.validacion;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

My controller

package com.app.validacion.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RestController;

import com.app.validacion.dao.DriverBonificadosRepository;
import com.app.validacion.entity.RespuestaVo;

@RestController
public class DriverBonificadosController {

    @Autowired   // Inyeccion de Dependecia, en este caso del Respository
    private DriverBonificadosRepository dao;

    @GetMapping("/service/{movil}")
    public RespuestaVo  ConsultarMovil(@PathVariable("movil") String movil) {
        System.out.println(movil);
        return dao.validarClienteBonifiado(movil);

    }

    /*
       the code I was trying to use to send a request in JSON and try to get the mobile parameter,but
       I got an error:
       Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type
        'text/plain' not supported]
    /*
     * @PostMapping(value = "/service",consumes = "application/json", produces="application/json")
     * public RespuestaVo ValidateClient(@RequestBody DriverBonificados driver) {
     * System.out.println(driver.getMovil());
     *   return dao.validarClienteBonifiado(driver.getMovil());
      } */

    }

My Repository

package com.app.validacion.dao;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Repository;

import com.app.validacion.entity.DriverBonificados;
import com.app.validacion.entity.RespuestaVo;

@Repository
public interface DriverBonificadosRepository extends JpaRepository<DriverBonificados, Integer> {

    @Query(nativeQuery = true,value = "call ValidacionClienteBonificado(:movil)")
    RespuestaVo validarClienteBonifiado(@Param("movil") String pMovil);

    }

My Entity

package com.app.validacion.entity;

import java.util.Date;

import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="DriveBonificados")
public class DriverBonificados {

    @Id
    private int id;
    private String movil;
    private String contador;
    private Date fecha_driver;
    private Date fecha_alta;
    private Date fecha_fin;
    private Date codigo_transaccion;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getMovil() {
        return movil;
    }
    public void setMovil(String movil) {
        this.movil = movil;
    }
    public String getContador() {
        return contador;
    }
    public void setContador(String contador) {
        this.contador = contador;
    }
    public Date getFecha_driver() {
        return fecha_driver;
    }
    public void setFecha_driver(Date fecha_driver) {
        this.fecha_driver = fecha_driver;
    }
    public Date getFecha_alta() {
        return fecha_alta;
    }
    public void setFecha_alta(Date fecha_alta) {
        this.fecha_alta = fecha_alta;
    }
    public Date getFecha_fin() {
        return fecha_fin;
    }
    public void setFecha_fin(Date fecha_fin) {
        this.fecha_fin = fecha_fin;
    }
    public Date getCodigo_transaccion() {
        return codigo_transaccion;
    }
    public void setCodigo_transaccion(Date codigo_transaccion) {
        this.codigo_transaccion = codigo_transaccion;
    }

}

My Model Response

package com.app.validacion.entity;

public interface RespuestaVo {

    String getCode();
    String getResult();

}

Body:
Nice post, but the (first encountered problem) solution is trivial:

With:

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain' not supported]

and with this postman request, You need to:

postman specific: switch the (request>body) content type from "Text" to "JSON (application/json)"

generally: add a (http) header to Your request like

Content-Type: application/json;...


问:
How to call a Laravel controller's method from other class
I need to call a public method of a Laravel controller from another class.

Given this controller method:

class MyController extends Controller
{
    public function examplefunction(){

       //stuff

    }
}
```
<p>Elsewhere in my project I need to do this:</p>
<pre class="lang-php prettyprint-override"><code>public function otherfunctioninothercontroller(){
    // I need to run MyController::examplefunction() here
}
</code>```

How do I do this?

答:
A call to a  controller from inside  another controller is a bad idea. There is no sense of meaning of controllers then. You should just redirect to web.php to save safe whole  architecture like this:</p>

```<code>class MyController {
  public function aSwitchCaseFunction(Request $requestPrm){
    ...
    //getting path string from request here
    ...
    switch($myCase){
        case CASE_1:
             return redirect()->route('/a/route/path');
        ....
    }
  }
}
</code>```

Body:
I need to call a public method of a Laravel controller from another class.

Given this controller method:

class MyController extends Controller
{
    public function examplefunction(){

       //stuff

    }
}

Elsewhere in my project I need to do this:

public function otherfunctioninothercontroller(){
    // I need to run MyController::examplefunction() here
}

How do I do this?

Body:
A call to a  controller from inside  another controller is a bad idea. There is no sense of meaning of controllers then. You should just redirect to web.php to save safe whole  architecture like this:

class MyController {
  public function aSwitchCaseFunction(Request $requestPrm){
    ...
    //getting path string from request here
    ...
    switch($myCase){
        case CASE_1:
             return redirect()->route('/a/route/path');
        ....
    }
  }
}


问:
Ansible OpenShift shell command fails, but works outside of Ansible
I have an Ansible playbook that includes an OpenShift CLI login:

```<code>- name: "OpenShift CLI login"
  shell: oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://{{ groups['boot'][0] }}:6443
</code>```

It fails with (hostname has been replaced below):

```<code>fatal: [<host>]: FAILED! => {"changed": true, "cmd": "oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://<host>:6443", "delta": "0:00:00.228068", "end": "2020-02-19 09:47:32.651617", "msg": "non-zero return code", "rc": 1, "start": "2020-02-19 09:47:32.423549", "stderr": "error: The server is using a certificate that does not match its hostname: x509: certificate is valid for kubernetes, kubernetes.default, kubernetes.default.svc, kubernetes.default.svc.cluster.local, openshift, openshift.default, openshift.default.svc, openshift.default.svc.cluster.local, 172.30.0.1, not <host>", "stderr_lines": ["error: The server is using a certificate that does not match its hostname: x509: certificate is valid for kubernetes, kubernetes.default, kubernetes.default.svc, kubernetes.default.svc.cluster.local, openshift, openshift.default, openshift.default.svc, openshift.default.svc.cluster.local, 172.30.0.1, not <host>"], "stdout": "", "stdout_lines": []}
</code>```

But if I run the command directly, it works:

```<code>oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://<host>:6443
Login successful.
You have access to 55 projects, the list has been suppressed. You can list all projects with 'oc projects'
Using project "openshift-image-registry".
</code>```

Any thoughts on why it fails under Ansible?  Ansible version is 2.4.2.0.

答:
The shell module runs a /bin/sh shell.

You are probably running /bin/bash and you have config in .bashrc that is not being activated.

Try something like this:

```<code>- name: "OpenShift CLI login"
  shell: /bin/bash oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://{{ groups['boot'][0] }}:6443
</code>```

Body:
I have an Ansible playbook that includes an OpenShift CLI login:

- name: "OpenShift CLI login"
  shell: oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://{{ groups['boot'][0] }}:6443

It fails with (hostname has been replaced below):

fatal: [<host>]: FAILED! => {"changed": true, "cmd": "oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://<host>:6443", "delta": "0:00:00.228068", "end": "2020-02-19 09:47:32.651617", "msg": "non-zero return code", "rc": 1, "start": "2020-02-19 09:47:32.423549", "stderr": "error: The server is using a certificate that does not match its hostname: x509: certificate is valid for kubernetes, kubernetes.default, kubernetes.default.svc, kubernetes.default.svc.cluster.local, openshift, openshift.default, openshift.default.svc, openshift.default.svc.cluster.local, 172.30.0.1, not <host>", "stderr_lines": ["error: The server is using a certificate that does not match its hostname: x509: certificate is valid for kubernetes, kubernetes.default, kubernetes.default.svc, kubernetes.default.svc.cluster.local, openshift, openshift.default, openshift.default.svc, openshift.default.svc.cluster.local, 172.30.0.1, not <host>"], "stdout": "", "stdout_lines": []}

But if I run the command directly, it works:

oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://<host>:6443
Login successful.
You have access to 55 projects, the list has been suppressed. You can list all projects with 'oc projects'
Using project "openshift-image-registry".

Any thoughts on why it fails under Ansible?  Ansible version is 2.4.2.0.

Body:
The shell module runs a /bin/sh shell.

You are probably running /bin/bash and you have config in .bashrc that is not being activated.

Try something like this:

- name: "OpenShift CLI login"
  shell: /bin/bash oc login -u kubeadmin -p $(cat /root/auth/kubeadmin-password) https://{{ groups['boot'][0] }}:6443


问:
SQL how to convert MM-DD-YYYY string value to date
I have a datetime variable in string format in the following form:

```<code>01-04-2020 11:50:44:569
01-03-2020 12:50:44:589
01-03-2020 01:50:44:579
</code>```

How do I extract the date part and select a range of dates?

I tried to use:

```<code>cast(substring(value,1,10) as date) as date1
date1 between '2020-01-01' and '2020-01-05'
</code>```

But it returns 0 records.

However this code worked on datetime string value in the following format:

```<code>2020-01-03T11:50:24:529Z
</code>```

It will extract the date part and store it as a timestamp and extracts records within the range, but does not work on the first example.

I'm just trying to find a method to convert string value to date value, I have no intention of confusing anyone. As for sample dataset, I think the first part of the question with the 3 records should be enough for testing because all the values under the same variable are all in the same format.

答:
Looks like the field is just in datetime format and I believe simply casting as date might do the trick here:

```<code>cast(value as date) between '2020-01-01' and '2020-01-05'
</code>```

I tested it out for a sample string and it seems to work:

```<code>DECLARE @date char(25)
SET @date = '01-04-2020 11:50:44:569'

select cast(@date as date)
</code>```

Body:
I have a datetime variable in string format in the following form:

01-04-2020 11:50:44:569
01-03-2020 12:50:44:589
01-03-2020 01:50:44:579

How do I extract the date part and select a range of dates?

I tried to use:

cast(substring(value,1,10) as date) as date1
date1 between '2020-01-01' and '2020-01-05'

But it returns 0 records.

However this code worked on datetime string value in the following format:

2020-01-03T11:50:24:529Z

It will extract the date part and store it as a timestamp and extracts records within the range, but does not work on the first example.

I'm just trying to find a method to convert string value to date value, I have no intention of confusing anyone. As for sample dataset, I think the first part of the question with the 3 records should be enough for testing because all the values under the same variable are all in the same format.

Body:
Looks like the field is just in datetime format and I believe simply casting as date might do the trick here:

cast(value as date) between '2020-01-01' and '2020-01-05'

I tested it out for a sample string and it seems to work:

DECLARE @date char(25)
SET @date = '01-04-2020 11:50:44:569'

select cast(@date as date)


问:
How to add a new row to Excel file using unmanaged C++?
How can I add a new row (with contents) to an existing Excel .xls file using unmanaged C++ running on Windows?

I don't mind using OLE, COM, or any external free library, whatever is the easiest way.

答: I've used this one: ExcelFormatLib, it's great and simple to use, C++, well maintained, compiles and works without any trouble.</p>