Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to make using table very easy

odiez

odiez

Coder
Good day
I have a webpage running on my laptop (using visual studio code).
I am making a webpage (only private) that where I can add/update cryptocurrency. A the moment is has nearly 50 in the table, and it is a lot of html and js scripts in this page. I am going to add more tokens.

Is there an easy way to use this code, so I can add or update table.
I have also search and test a few ideas on how to sort my data, but it does not work.

I will show a few lines of my html, scrips and css.
Can I get help wit this please

Css
CSS: 
.currencies-table td {
  border: 1px solid #DFCFBE;

  padding: 0.5em;
  margin: 0%;
}

.coin-value {
  color: #17202a;
  font-family: Comic Sans MS;
  font-weight: bold;
  background-color: #ebdef0;
  border-radius: 10px;
  padding: 0.5em;
}

.total-usd {
  color: red;
  font-family: Comic Sans MS;
  font-weight: bold;
  background-color: #070606;
  border-radius: 10px;
  padding: 0.5em;
}

Html table
HTML: 
  <table class="currencies-table">
            <tr>
                <td style="text-align: center;"><font color="#A0DAA9">Name</font></td>
                <td style="text-align: center;"><font color="#A0DAA9"></font></td>
                <td style="text-align: center;"><font color="#A0DAA9"></font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Value</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Day</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Week</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Month</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Year</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Coins</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Button</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">USD</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">Button</font></td>
                <td style="text-align: center;"><font color="#A0DAA9">ZAR</font></td>
            </tr>
      
      td><font color="#C3447A"><b><label for="firstNum50">KHAOS</label></b></FONT></td>
                <td><a href="https://nomics.com/assets/khaos-khaos-finance"',' target="_blank"><img src="./crypto/.png"></img></a></td>
                <td><img src="./crypto/binance.png"></img></td>
                <td><input class="coin-value" type="number50" id="firstNum50" name="firstNum50"></td>
                <td id="num50For24H"></td>
                <td id="num50For7D"></td>
                <td id="num50For30D"></td>
                <td id="num50For365D"></td>
                <td><font color="#BCC6CC"><b><label for="secondNum50">19,476,952.88</label></b></font></td>
                <input style="visibility:hidden" type="number50" id="secondNum50" name="secondNum50">
                <td><button class="glow-on-hover" type="button" onclick="multiply101()">Multiply</button></td>
                <td><input class="total-usd" type=" text" id="result101" name="result101" /></td>
                <input style="visibility:collapse" type="usdzar50" id="usd50" name="usd50">
                <font style="visibility:collapse" color="#BCC6CC"><b><label for="zar50"></label></b></font>
                <input style="visibility:collapse" type="usdzar50" id="gcw_valFnAj0a2vV1" name="zar50">
                <td><button class="glow-on-hover" type="button" onclick="multiply102()">Multiply</button></td>
                <td><input class="total-usd" type=" text" id="result102" name="result102" /></td>
                    </tr>   
<tr></tr>

<tr>
            <tr style="color: bisque;">

                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                 <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td align='right'>$</td>
                <td id="totalUsd">0.00</td>
                <td align='right'>R</td>
                <td id="totalZar">0.00</td>
            </tr>
        </table>
    </center>

Script
JavaScript: 
<script>
        function multiply99() {
            var num197 = document.getElementById("firstNum49").value;
            document.getElementById("secondNum49").value = 461832.6999649;
            var num198 = document.getElementById("secondNum49").value;
            var result99 = num197 * num198;
            document.getElementById("result99").value = result99.toLocaleString('en-US', { maximumFractionDigits: 8 });
            document.getElementById("result99").style.color = "lime";
            document.getElementById("result99").style.fontWeight = "900";
        }
    </script>
    <script>
        function multiply100() {
            var num199= document.getElementById("result99").value.replace(/,/g, ''); //remove any commas
            var num200 = document.getElementById("gcw_valFnAj0a2vV1").value;
            var result100 = num199 * num200;
            document.getElementById("result100").value = result100.toLocaleString('en-US', { maximumFractionDigits: 8 });
            document.getElementById("result100").style.color = "lime";
            document.getElementById("result100").style.fontWeight = "900";
        }
    </script>

Script2
JavaScript: 
<script>
        const currencies = 'PETS';
        const yourAPIKey = `fdf`;

        function updateCurrenciesValues() {
            const url = `https365d`;
            fetch(url).then(async (payload) => {
                const convertedPayload = await payload.json();
                convertedPayload.forEach(coin => {
                    switch (coin.id) {
case 'KHAOS':
                            document.getElementById("firstNum50").value = coin.price;
                            if (coin['1d']) {
                                const priceChangeCap = parseFloat(coin['1d'].price_change_pct);
                                document.getElementById("num50For24H").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
                            }
                            if (coin['7d']) {
                                const priceChangeCap = parseFloat(coin['7d'].price_change_pct);
                                document.getElementById("num50For7D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
                            }
                            if (coin['30d']) {
                                const priceChangeCap = parseFloat(coin['30d'].price_change_pct);
                                document.getElementById("num50For30D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
                            }
                            if (coin['365d']) {
                                const priceChangeCap = parseFloat(coin['365d'].price_change_pct);
                                document.getElementById("num50For365D").innerHTML = priceChangeCap < 0 ? getDownPriceChangeCapTemplate(priceChangeCap) : getUpPriceChangeCapTemplate(priceChangeCap);
                            }
 
Sort by date Sort by votes
Not knowing what you want to I can't help, but do see errors and have corrected a few.
Tables use captions, not labels.
headers are defines by <th>, not <td>.
In first row only 9 <td>s, corrected to 10.
Start with this:
Code: 
<style>
.currencies-table td {
    border: 1px solid #DFCFBE;
    padding: 0.5em;
    margin: 0%;
}
.coin-value {
    color: #17202a;
    font-family: Comic Sans MS;
    font-weight: bold;
    background-color: #ebdef0;
    border-radius: 10px;
    padding: 0.5em;
}
.total-usd {
    color: red;
[CODE]    function updateCurrenciesValues() {
        const url = `https365d`;
        fetch(url).then(async (payload) => {
            const convertedPayload = await payload.json();
            convertedPayload.forEach(coin => {
                switch (coin.id) {
font-family: Comic Sans MS;
font-weight: bold;
background-color: #070606;
border-radius: 10px;
padding: 0.5em;
}
th{
color:#A0DAA9;
}
</style>
</head>

<body>

<table class="currencies-table" border="1">
<caption>KHAOS</caption>
<tr>
<th style="text-align: center;">Name</th>
<th style="text-align: center;"></th>
<th style="text-align: center;"></th>
<th style="text-align: center;">Value</th>
<th style="text-align: center;">Day</th>
<th style="text-align: center;">Week</th>
<th style="text-align: center;">Month</th>
<th style="text-align: center;">Year</th>
<th style="text-align: center;">Coins</th>
<th style="text-align: center;">Button</th>
<th style="text-align: center;">USD</th>
<th style="text-align: center;">Button</th>
<th style="text-align: center;">ZAR</th>
</tr>

<tr>
<td><a href="https://nomics.com/assets/khaos-khaos-finance" target="_blank"><img src="./crypto/.png"></img></a></td>
<td><img src="./crypto/binance.png"></img></td>
<td><input class="coin-value" type="number50" id="firstNum50" name="firstNum50"></td>
<td id="num50For24H"></td>
<td id="num50For7D"></td>
<td id="num50For30D"></td>
<td id="num50For365D"></td>
<td><font color="#BCC6CC"><b><label for="secondNum50">19,476,952.88</label></b></font></td>
<input style="visibility:hidden" type="number50" id="secondNum50" name="secondNum50">
<td><button class="glow-on-hover" type="button" onclick="multiply101()">Multiply</button></td>
<td><input class="total-usd" type=" text" id="result101" name="result101" /></td>
<input style="visibility:collapse" type="usdzar50" id="usd50" name="usd50">
<font style="visibility:collapse" color="#BCC6CC"><b><label for="zar50"></label></b></font>
<input style="visibility:collapse" type="usdzar50" id="gcw_valFnAj0a2vV1" name="zar50">
<td><button class="glow-on-hover" type="button" onclick="multiply102()">Multiply</button></td>
<td><input class="total-usd" type=" text" id="result102" name="result102" /></td>
<td></td>
</tr> [/CODE]

Your JS is hogwash. You call a function with
onclick="multiply101()" and onclick="multiply102()". You don't have those functions, you have
function multiply99() {...} and function multiply100() {...}

This is wrong. No closing brackets:
Code: 
    function updateCurrenciesValues() {
        const url = `https365d`;
        fetch(url).then(async (payload) => {
            const convertedPayload = await payload.json();
            convertedPayload.forEach(coin => {
                switch (coin.id) {

My suggestion is to do a little more studying on javascript and with switch.
 
Upvote 0 Downvote
Not knowing what you want to do I can't help, but do see errors and have corrected a few.
Tables use captions, not labels.
headers are defines by <th>, not <td>.
In first row only 9 <td>s, corrected to 10.
Start with this:
Code: 
<style>
.currencies-table td {
    border: 1px solid #DFCFBE;
    padding: 0.5em;
    margin: 0%;
}
.coin-value {
    color: #17202a;
    font-family: Comic Sans MS;
    font-weight: bold;
    background-color: #ebdef0;
    border-radius: 10px;
    padding: 0.5em;
}
.total-usd {
    color: red;
    font-family: Comic Sans MS;
    font-weight: bold;
    background-color: #070606;
    border-radius: 10px;
    padding: 0.5em;
}
th{
    color:#A0DAA9;
}
</style>
</head>

<body>

<table class="currencies-table" border="1">
    <caption>KHAOS</caption>
    <tr>
        <th style="text-align: center;">Name</th>
        <th style="text-align: center;"></th>
        <th style="text-align: center;"></th>
        <th style="text-align: center;">Value</th>
        <th style="text-align: center;">Day</th>
        <th style="text-align: center;">Week</th>
        <th style="text-align: center;">Month</th>
        <th style="text-align: center;">Year</th>
        <th style="text-align: center;">Coins</th>
        <th style="text-align: center;">Button</th>
        <th style="text-align: center;">USD</th>
        <th style="text-align: center;">Button</th>
        <th style="text-align: center;">ZAR</th>
    </tr>

    <tr>
        <td><a href="https://nomics.com/assets/khaos-khaos-finance" target="_blank"><img src="./crypto/.png"></img></a></td>
        <td><img src="./crypto/binance.png"></img></td>
        <td><input class="coin-value" type="number50" id="firstNum50" name="firstNum50"></td>
        <td id="num50For24H"></td>
        <td id="num50For7D"></td>
        <td id="num50For30D"></td>
        <td id="num50For365D"></td>
        <td><font color="#BCC6CC"><b><label for="secondNum50">19,476,952.88</label></b></font></td>
        <input style="visibility:hidden" type="number50" id="secondNum50" name="secondNum50">
        <td><button class="glow-on-hover" type="button" onclick="multiply101()">Multiply</button></td>
        <td><input class="total-usd" type=" text" id="result101" name="result101" /></td>
        <input style="visibility:collapse" type="usdzar50" id="usd50" name="usd50">
        <font style="visibility:collapse" color="#BCC6CC"><b><label for="zar50"></label></b></font>
        <input style="visibility:collapse" type="usdzar50" id="gcw_valFnAj0a2vV1" name="zar50">
        <td><button class="glow-on-hover" type="button" onclick="multiply102()">Multiply</button></td>
        <td><input class="total-usd" type=" text" id="result102" name="result102" /></td>
        <td></td>
    </tr>

Your JS is hogwash. You call a function with
onclick="multiply101()" and onclick="multiply102()". You don't have those functions, you have
function multiply99() {...} and function multiply100() {...}

This is wrong. No closing brackets:
Code: 
    function updateCurrenciesValues() {
        const url = `https365d`;
        fetch(url).then(async (payload) => {
            const convertedPayload = await payload.json();
            convertedPayload.forEach(coin => {
                switch (coin.id) {

My suggestion is to do a little more studying on javascript and with switch.
 
Upvote 0 Downvote
Thank
OldMan said:
Not knowing what you want to do I can't help, but do see errors and have corrected a few.
Tables use captions, not labels.
headers are defines by <th>, not <td>.
In first row only 9 <td>s, corrected to 10.
Start with this:
Code: 
<style>
.currencies-table td {
    border: 1px solid #DFCFBE;
    padding: 0.5em;
    margin: 0%;
}
.coin-value {
    color: #17202a;
    font-family: Comic Sans MS;
    font-weight: bold;
    background-color: #ebdef0;
    border-radius: 10px;
    padding: 0.5em;
}
.total-usd {
    color: red;
    font-family: Comic Sans MS;
    font-weight: bold;
    background-color: #070606;
    border-radius: 10px;
    padding: 0.5em;
}
th{
    color:#A0DAA9;
}
</style>
</head>

<body>

<table class="currencies-table" border="1">
    <caption>KHAOS</caption>
    <tr>
        <th style="text-align: center;">Name</th>
        <th style="text-align: center;"></th>
        <th style="text-align: center;"></th>
        <th style="text-align: center;">Value</th>
        <th style="text-align: center;">Day</th>
        <th style="text-align: center;">Week</th>
        <th style="text-align: center;">Month</th>
        <th style="text-align: center;">Year</th>
        <th style="text-align: center;">Coins</th>
        <th style="text-align: center;">Button</th>
        <th style="text-align: center;">USD</th>
        <th style="text-align: center;">Button</th>
        <th style="text-align: center;">ZAR</th>
    </tr>

    <tr>
        <td><a href="https://nomics.com/assets/khaos-khaos-finance" target="_blank"><img src="./crypto/.png"></img></a></td>
        <td><img src="./crypto/binance.png"></img></td>
        <td><input class="coin-value" type="number50" id="firstNum50" name="firstNum50"></td>
        <td id="num50For24H"></td>
        <td id="num50For7D"></td>
        <td id="num50For30D"></td>
        <td id="num50For365D"></td>
        <td><font color="#BCC6CC"><b><label for="secondNum50">19,476,952.88</label></b></font></td>
        <input style="visibility:hidden" type="number50" id="secondNum50" name="secondNum50">
        <td><button class="glow-on-hover" type="button" onclick="multiply101()">Multiply</button></td>
        <td><input class="total-usd" type=" text" id="result101" name="result101" /></td>
        <input style="visibility:collapse" type="usdzar50" id="usd50" name="usd50">
        <font style="visibility:collapse" color="#BCC6CC"><b><label for="zar50"></label></b></font>
        <input style="visibility:collapse" type="usdzar50" id="gcw_valFnAj0a2vV1" name="zar50">
        <td><button class="glow-on-hover" type="button" onclick="multiply102()">Multiply</button></td>
        <td><input class="total-usd" type=" text" id="result102" name="result102" /></td>
        <td></td>
    </tr>

Your JS is hogwash. You call a function with
onclick="multiply101()" and onclick="multiply102()". You don't have those functions, you have
function multiply99() {...} and function multiply100() {...}

This is wrong. No closing brackets:
Code: 
    function updateCurrenciesValues() {
        const url = `https365d`;
        fetch(url).then(async (payload) => {
            const convertedPayload = await payload.json();
            convertedPayload.forEach(coin => {
                switch (coin.id) {

My suggestion is to do a little more studying on javascript and with switch.
Click to expand...
Thank you, my code is correct, I have so many of them,(50 at the moment, each one have their on script) I have accidently copy the wrong one.
Wh I did not add all my code, is the foum said we must not put a lot of code in the message, so it is difuclut to show all (3808 lines).

Did change the td to th.

The first thing I cannot get it to get the table sorted on certain columns, but cannot get it to sort at all.

Do you need the file from me
The
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom