Level 51
Wrap it all in backticks, properly first and then people might give up their time. I suggest something like this... https://github.com/PHP-CS-Fixer/PHP-CS-Fixer
Aug 21, 2023
1
Level 1
Request for better clean code
Hi, would you please help me to make this code is more clean and shortest than the follwing? i make the follwing js code to change a contents every time i click different li. JS: let accIcon = document.getElementById("account_icon"); let aboutIcon = document.getElementById("about-icon"); let workIcon = document.getElementById("work-icon"); let mailIcon = document.getElementById("mail-icon"); let overIcon = document.getElementById('over-icon')
let viewPort = document.querySelector(".st_viewport"); let viewPortTwo = document.querySelector(".st_viewportTwo"); let viewPortThree = document.querySelector(".st_viewportThree"); let viewPortFour = document.querySelector(".st_viewportFour"); let viewPortFive = document.querySelector(".st_viewportFive");
accIcon.addEventListener("click", (event) => { viewPort.style.display = "block"; accIcon.style.backgroundImage = "linear-gradient(to left,#649632,#649632)"; viewPortTwo.style.display = "none"; aboutIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; viewPortThree.style.display = "none"; viewPortFour.style.display = "none"; viewPortFive.style.display = "none" workIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; mailIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; overIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; }); aboutIcon.addEventListener("click", (event) => { viewPort.style.display = "none"; accIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; viewPortTwo.style.display = "block"; aboutIcon.style.backgroundImage = "linear-gradient(to left,#649632,#649632)"; viewPortThree.style.display = "none"; viewPortFour.style.display = "none"; viewPortFive.style.display = "none" workIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; mailIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; overIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; }); workIcon.addEventListener("click", (event) => { viewPort.style.display = "none"; viewPortTwo.style.display = "none"; viewPortThree.style.display = "block"; viewPortFour.style.display = "none"; viewPortFive.style.display = "none" workIcon.style.backgroundImage = "linear-gradient(to left,#649632,#649632)"; accIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; aboutIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; mailIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; overIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; }); mailIcon.addEventListener("click", (event) => { viewPort.style.display = "none"; viewPortTwo.style.display = "none"; viewPortThree.style.display = "none"; viewPortFour.style.display = "block"; viewPortFive.style.display = "none"; workIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; accIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; aboutIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; mailIcon.style.backgroundImage = "linear-gradient(to left,#649632,#649632)"; overIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; }); overIcon.addEventListener("click", (event) => { viewPort.style.display = "none"; viewPortTwo.style.display = "none"; viewPortThree.style.display = "none"; viewPortFour.style.display = "none"; viewPortFive.style.display = "block"; workIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; accIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; aboutIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; mailIcon.style.backgroundImage = "linear-gradient(to left,#210e7f,#080808)"; overIcon.style.backgroundImage = "linear-gradient(to left,#649632,#649632)"; });
HTML:
</main>
<main id="notification" class="st_viewportTwo js-target js_hidden table_view">
<div class="row_title">
<div class="ranking_title">Egyptian Women Players Ranking</div><a
class="fa-button -outline -blur full_list" href="" target="_self"><span>See
The Full List</span><i class="fa-solid fa-arrow-right"></i></a>
</div>
<table id="exampleTwo" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>PLAYER'S NAME</th>
<th>CURRENT TEAM RELATED</th>
<th>CURRENT SCORE</th>
<th>LAST SCORE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Soha Mostafa</td>
<td>Heliopolis El Shorouk Club</td>
<td>395</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>Pauline Salib</td>
<td>Gezira Sporting Club</td>
<td>305</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>Amany Hassan</td>
<td>Gezira Sporting Club</td>
<td>280</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>Abeer Mostafa</td>
<td>Egyptian Shooting Club</td>
<td>275</td>
<td>-</td>
</tr>
<tr>
<td>5</td>
<td>Noha Mamdouh</td>
<td>El Zohour Sporting Club</td>
<td>240</td>
<td>-</td>
</tr>
<tr>
<td>6</td>
<td>Maram Nabil</td>
<td>Sporting Club</td>
<td>225</td>
<td>-</td>
</tr>
<tr>
<td>7</td>
<td>Perihan Elwy</td>
<td>El Zohour Sporting Club</td>
<td>220</td>
<td>-</td>
</tr>
<tr>
<td>8</td>
<td>Jana Mohamed</td>
<td>Egyptian Shooting Club</td>
<td>215</td>
<td>-</td>
</tr>
<!-- <tr>
<td>9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">€1.750,00</td>
</tr>
<tr>
<td>10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">€400,00</td>
</tr> -->
</tbody>
</table>
</main>
<main id="favList" class="st_viewportThree js-target js_hidden table_view">
<div class="row_title">
<div class="ranking_title">International Ranking</div><a
class="fa-button -outline -blur full_list" href="" target="_self"><span>See
The Full List</span><i class="fa-solid fa-arrow-right"></i></a>
</div>
<table id="exampleThree" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>PLAYER'S NAME</th>
<th>COUNTRY</th>
<th>MAX DGRADE</th>
<th>GAMES</th>
<th>WINS</th>
<th>%WINS</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ROBERT FLETCHER</td>
<td>AUSTRALIA</td>
<td>2658</td>
<td>60</td>
<td>56</td>
<td>93</td>
</tr>
<tr>
<td>2</td>
<td>MOHAMED NASR</td>
<td>EGYPT</td>
<td>2644</td>
<td>45</td>
<td>35</td>
<td>78</td>
</tr>
<tr>
<td>3</td>
<td>REG BAMFORD</td>
<td>SOUTH AFRICA</td>
<td>2634</td>
<td>62</td>
<td>50</td>
<td>81</td>
</tr>
<tr>
<td>4</td>
<td>AHMED ELMAHDY</td>
<td>EGYPT</td>
<td>2587</td>
<td>36</td>
<td>31</td>
<td>86</td>
</tr>
<tr>
<td>5</td>
<td>YASSER SAYED</td>
<td>EGYPT</td>
<td>2567</td>
<td>40</td>
<td>34</td>
<td>85</td>
</tr>
<tr>
<td>6</td>
<td>HAMY ERIAN</td>
<td>EGYPT</td>
<td>2565</td>
<td>49</td>
<td>36</td>
<td>73</td>
</tr>
<tr>
<td>7</td>
<td>MOHAMED KAREM</td>
<td>EGYPT</td>
<td>2544</td>
<td>66</td>
<td>48</td>
<td>73</td>
</tr>
<tr>
<td>8</td>
<td>JOHN-PAUL MOBERLY</td>
<td>ENGLAND</td>
<td>2534</td>
<td>34</td>
<td>22</td>
<td>65</td>
</tr>
</tbody>
</table>
</main>
<main id="ordersTracking" class="st_viewportFour js-target js_hidden table_view">
<div class="row_title">
<div class="ranking_title">Under 21s International Ranking</div><a
class="fa-button -outline -blur full_list" href="" target="_self"><span>See
The Full List</span><i class="fa-solid fa-arrow-right"></i></a>
</div>
<table id="exampleFour" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>PLAYER'S NAME</th>
<th>COUNTRY</th>
<th>MAX DGRADE</th>
<th>GAMES</th>
<th>WINS</th>
<th>%WINS</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ASTON WADE</td>
<td>ENGLAND</td>
<td>2451</td>
<td>145</td>
<td>102</td>
<td>70</td>
</tr>
<tr>
<td>2</td>
<td>FAWZY HELMY</td>
<td>EGYPT</td>
<td>2437</td>
<td>64</td>
<td>52</td>
<td>81</td>
</tr>
<tr>
<td>3</td>
<td>JACK GOOD</td>
<td>ENGLAND</td>
<td>2415</td>
<td>63</td>
<td>50</td>
<td>79</td>
</tr>
<tr>
<td>4</td>
<td>LEVI FRANKS</td>
<td>NEW ZEALAND</td>
<td>2332</td>
<td>83</td>
<td>68</td>
<td>82</td>
</tr>
<tr>
<td>5</td>
<td>JOSH WINTER</td>
<td>NEW ZEALAND</td>
<td>2317</td>
<td>73</td>
<td>53</td>
<td>73</td>
</tr>
<tr>
<td>6</td>
<td>CALLUM JOHNSON</td>
<td>ENGLAND</td>
<td>2299</td>
<td>82</td>
<td>46</td>
<td>52</td>
</tr>
<tr>
<td>7</td>
<td>NADINE ELMENOUFY</td>
<td>EGYPT</td>
<td>2288</td>
<td>21</td>
<td>13</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>JANA MOHAMED SAAID</td>
<td>EGYPT</td>
<td>2248</td>
<td>121</td>
<td>71</td>
<td>59</td>
</tr>
</tbody>
</table>
</main>
<main id="overFifty" class="st_viewportFive js-target js_hidden table_view">
<div class="row_title">
<div class="ranking_title">Over 50s International Ranking</div><a
class="fa-button -outline -blur full_list" href="" target="_self"><span>See
The Full List</span><i class="fa-solid fa-arrow-right"></i></a>
</div>
<table id="exampleFive" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>PLAYER'S NAME</th>
<th>COUNTRY</th>
<th>MAX DGRADE</th>
<th>GAMES</th>
<th>WINS</th>
<th>%WINS</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>REG BAMFORD</td>
<td>SOUTH AFRICA</td>
<td>2643</td>
<td>63</td>
<td>50</td>
<td>81</td>
</tr>
<tr>
<td>2</td>
<td>AHMED ELMAHDY</td>
<td>EGYPT</td>
<td>2587</td>
<td>36</td>
<td>31</td>
<td>86</td>
</tr>
<tr>
<td>3</td>
<td>STEPHEN MULLINER</td>
<td>ENGLAND</td>
<td>2501</td>
<td>135</td>
<td>98</td>
<td>73</td>
</tr>
<tr>
<td>4</td>
<td>JENNY CLARKE</td>
<td>NEW ZEALAND</td>
<td>2332</td>
<td>83</td>
<td>68</td>
<td>82</td>
</tr>
<tr>
<td>5</td>
<td>OMAR FAHMY</td>
<td>EGYPT</td>
<td>2427</td>
<td>53</td>
<td>38</td>
<td>74</td>
</tr>
<tr>
<td>6</td>
<td>DANNY HUNEYCUTT</td>
<td>USA</td>
<td>2408</td>
<td>14</td>
<td>12</td>
<td>86</td>
</tr>
<tr>
<td>7</td>
<td>SHERIF ABDELWAHAB</td>
<td>USA</td>
<td>2405</td>
<td>21</td>
<td>18</td>
<td>86</td>
</tr>
<tr>
<td>8</td>
<td>YASSER FATHY</td>
<td>EGYPT</td>
<td>2393</td>
<td>48</td>
<td>33</td>
<td>69</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
</div>
Please or to participate in this conversation.