Math Trick

Developer
Mikita
Size
3,970 Kb
Views
8,096
  1. Math Trick Previews
  2. Math Trick HTML Codes
  3. Math Trick CSS Codes
  4. Math Trick JS Codes

How do I make an math trick?

What is a math trick? How do you make a math trick? This script and codes were developed by Mikita on 19 January 2023, Thursday.

Math Trick Previews
IQ Test

Math Trick - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Math Trick</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='title'> Pick a number between 1 and 30 and then select all the cards that contain this number. And then let Mathy read your mind and show you the number you have chosen. <br> Let the math happen!
</div>
<div class='wrapper'> <input class='checkbox' id='0' type='checkbox'> <label class='card card_1' for='0'> <span>01</span> <span>03</span> <span>05</span> <span>07</span> <span>09</span> <span>11</span> <span>13</span> <span>15</span> <span>17</span> <span>19</span> <span>21</span> <span>23</span> <span>25</span> <span>27</span> <span>29</span> </label> <input class='checkbox' id='1' type='checkbox'> <label class='card card_2' for='1'> <span>02</span> <span>03</span> <span>06</span> <span>07</span> <span>10</span> <span>11</span> <span>14</span> <span>15</span> <span>18</span> <span>19</span> <span>22</span> <span>23</span> <span>26</span> <span>27</span> <span>30</span> </label> <input class='checkbox' id='2' type='checkbox'> <label class='card card_3' for='2'> <span>04</span> <span>05</span> <span>06</span> <span>07</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>20</span> <span>21</span> <span>22</span> <span>23</span> <span>28</span> <span>29</span> <span>30</span> </label> <input class='checkbox' id='3' type='checkbox'> <label class='card card_4' for='3'> <span>08</span> <span>09</span> <span>10</span> <span>11</span> <span>12</span> <span>13</span> <span>14</span> <span>15</span> <span>24</span> <span>25</span> <span>26</span> <span>27</span> <span>28</span> <span>29</span> <span>30</span> </label> <input class='checkbox' id='4' type='checkbox'> <label class='card card_5' for='4'> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> <span>21</span> <span>22</span> <span>23</span> <span>24</span> <span>25</span> <span>26</span> <span>27</span> <span>28</span> <span>29</span> <span>30</span> </label> <div class='result'></div> <button class='button'> Find </button>
</div> <script src="js/index.js"></script>
</body>
</html>

Math Trick - Script Codes CSS Codes

body { background: #e4eae0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh;
}
body * { box-sizing: border-box;
}
.title { text-align: center; font-size: 24px; margin: 10px 0; padding: 0 10px; width: 100%; max-width: 920px;
}
.wrapper { padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.checkbox { opacity: 0; position: absolute; top: 0; left: 0; width: 0; height: 0;
}
.card { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: #fff; padding: 10px; border-radius: 4px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; min-width: 230px; max-width: 230px; margin: 5px; position: relative;
}
.card:hover { opacity: .8; cursor: pointer;
}
.card:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out;
}
:checked + .card:after { opacity: .5;
}
.card_1 { background: #F79F79;
}
.card_2 { background: #F7D08A;
}
.card_3 { background: #E3F09B;
}
.card_4 { background: #87B6A7;
}
.card_5 { background: #ADA97B;
}
.card span { width: calc(19%); padding: 10px; font-size: 14px; line-height: 1; text-align: center; background: rgba(255, 255, 255, 0.2); border-radius: 4px; margin: 1px;
}
.button { font-size: 18px; border-radius: 0; background: #333; color: #fff; border: 0; padding: 4px 20px; margin: 10px; cursor: pointer;
}
.result { font-size: 60px; height: 70px; display: block; width: 100%; text-align: center;
}

Math Trick - Script Codes JS Codes

var result = document.querySelector('.result'), button = document.querySelector('.button'), parsedResult;
button.addEventListener('click', function() { var checkboxes = document.querySelectorAll('.checkbox:checked'), template = [0, 0, 0, 0, 0]; for(var i = 0, len = checkboxes.length; i < len; i++) { template[checkboxes[i].id] = 1; } parsedResult = parseInt(template.reverse().join(''), 2); result.innerHTML = parsedResult > 30 ? 0: parsedResult;
});
Math Trick - Script Codes
Math Trick - Script Codes
Home Page Home
Developer Mikita
Username MikitaLisavets
Uploaded January 19, 2023
Rating 3
Size 3,970 Kb
Views 8,096
Do you need developer help for Math Trick?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikita (MikitaLisavets) Script Codes
Name
Jquery.scrollbar
Spin menu
Blur
Graph
Cards Menu
Angular chart directive
Tree search
Loader
Hamburger Menu
Note scales
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!