-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
2,450 additions
and
59 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset='utf-8'> | ||
| <meta name='og:viewport' content='width=device-width,initial-scale=1'> | ||
| <meta name="og:description" content="Data Structures Visualizer - Hashmap Chaining"> | ||
| <title>Data Structures Visualizer - Hashmap Chaining</title> | ||
| <link rel="stylesheet" href="../css/index.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link rel="icon" type="image/x-icon" href="../assets/favicon.png"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Finlandica&display=swap" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <nav id="nav1"> | ||
| <ul class="nav-items navleft"> | ||
| <li class="headername">Hashmap Chaining</li> | ||
| </ul> | ||
| <ul class="nav-items navcenter" id="nav"> | ||
| <li><a class="larget" href="../index.html">Main Menu</a></li> | ||
| <li><a class="larget" href="../ds/list.html">List</a></li> | ||
| <li><a class="larget" href="../ds/linkedlist.html">Linked List</a></li> | ||
| <li><a class="larget" href="../ds/stack.html">Stack</a></li> | ||
| <li><a class="larget" href="../ds/queue.html">Queue</a></li> | ||
| <li><a class="larget" href="../ds/binarytree.html">Binary Tree</a></li> | ||
| <li><a class="larget" href="../ds/bstmap.html">BST Map</a></li> | ||
| <li><a class="larget" href="../ds/hashmapchaining.html">Hash Map Chaining</a></li> | ||
| <li><a class="larget" href="../ds/hashmapprobing.html">Hash Map Probing</a></li> | ||
| </ul> | ||
| <ul class="nav-items navright"> | ||
| <li title="Settings"><a onclick="openprefs(); openscreen();"><img src="../assets/settings.png" height="30px" class="logo"></a></li> | ||
| <li title="Help"><a onclick="openel('instructions'); openscreen();" ><img src="../assets/help.png" height="30px" class="logo"></a></li> | ||
| <li title="Report bug"><a href="https://github.com/skparab1/arfaoui/issues/new" target="_blank"><img src="../assets/reportbuggy.png" height="30px" class="logo"></a></li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| <div class="fullwidth"> | ||
| <h1 id='head' style="font-size: 30px; color: rgba(0,0,0,0);">e</h1> | ||
| </div> | ||
|
|
||
| <h2 style="text-align: center;" id="hashfunction">MAD Hash Function: </h2> | ||
|
|
||
|
|
||
| <div id="treeholder"> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="connectors"> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <div id='res' class="results"> | ||
| <div class="fullwidth"> | ||
| <div class="quarterleft" id="codebank" style="border-right: 3px solid var(--main); height: 355px;"> | ||
| <h2>Code Bank</h2> | ||
| </div> | ||
| <div class="halfleft"> | ||
| <div class="larget" onclick="runadd([null,null,['quickbuttonadd']]);" style="display: fixed; width: 14%; margin-left: 84.5%;">Add <input onclick="event.stopPropagation();" class="littleinputlarge" id="quickbuttonadd"></div> | ||
| <h2 style="margin-top: -33px;">Current Code</h2> | ||
| <div class="codestatementholder" id="currentcode"> | ||
| </div> | ||
| </div> | ||
| <div class="quarterleft" id="codebank" style="text-align: center; border-left: 3px solid var(--main); height: 100%;"> | ||
| <h2>Run Controls</h2> | ||
| <div id="run1" class="coolbuttonrun" onclick="if (!muted2 && !muted3){runall();}">Run All</div> | ||
| <div id="run2" class="coolbuttonrun" onclick="if (!muted3){mutecontrols2(); animrunall();}">Slowly Run All</div> | ||
| <div id="run3" class="coolbuttonrun" onclick="if (!muted2){mutecontrols3(); stepforward();}">Step</div> | ||
| <h2 id="runnotif" class="runnotif"></h2> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
| <div id="screen" class="screen"></div> | ||
|
|
||
| <div class="largenotif" id="preferences" style="height: fit-content;"> | ||
| <h1 style="font-size: 25px;">Settings</h1> | ||
| <h3 style="font-size: 15px; margin-bottom: 5px; margin-top: 0px;" id="theme">Theme: (Dark)</h3> | ||
| <label class="switch" onclick="toggletheme();"> | ||
| <input type="checkbox"> | ||
| <span class="slider round"></span> | ||
| </label> | ||
|
|
||
| <h3 style="font-size: 15px; margin-bottom: 0px; margin-top: 0px;" id="animwait">Light-up animation delay time: 2750ms</h3> | ||
| <div class="slide2container" style="margin-top: -20px;"> | ||
| <input type="range" min="100" max="5000" value="2750" step="10" class="slider2" name="waittime" id="waittime" oninput="document.getElementById('animwait').textContent = 'Light-up animation delay time: '+document.getElementById('waittime').value+'ms'; localStorage.setItem('btspeed',document.getElementById('waittime').value);"> | ||
| </div> | ||
|
|
||
| <div class="close" onclick="closeprefs(); closescreen();">Close</div> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="largenotif" id="randomtree" style="height: min-content; top: 15%;"> | ||
|
|
||
| <h1 style="margin-bottom: 0px; font-size: 25px;">Generate random tree</h1> | ||
|
|
||
| <h3 style="margin-bottom: 0px; font-size: 25px;">Max number of levels</h3> | ||
| <select class='guess' name="numnodes" id="numnodes" onchange="initnums();"> | ||
| <option value=2>2</option> | ||
| <option value=3>3</option> | ||
| <option value=4>4</option> | ||
| <option value=5>5</option> | ||
| </select> | ||
|
|
||
| <h3 style="margin-bottom: 0px; font-size: 25px;">Tree type</h3> | ||
| <select class='guess' name="treetype" id="treetype" onchange="localStorage.setItem('treetype',document.getElementById('treetype').value);"> | ||
| <option value="alpha">Alphabetical</option> | ||
| <option value="numeric">Numerical</option> | ||
| <option value="rand">Random</option> | ||
| </select> | ||
| <div class="close" onclick="closeel('randomtree'); closescreen(); root = randtree(); redrawtree();">Generate</div> | ||
| <div class="close" onclick="closeel('randomtree'); closescreen();">Cancel</div> | ||
| </div> | ||
|
|
||
| <div class="largenotif" id="instructions" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;"> | ||
| <h1 style='font-size: 25px; margin: 10px;'>How to use</h1> | ||
| <h5 style='font-size: 15px; margin: 10px;'>1. Reload the page to generate new hash functions.</h5> | ||
| <h5 style='font-size: 15px; margin: 10px;'>2. Drag blocks of code from the code bank to the current code.</h5> | ||
| <h5 style='font-size: 15px; margin: 10px;'>3. Click the digits in blue to change the function inputs.</h5> | ||
| <h5 style='font-size: 15px; margin: 10px;'>4. Press "run all" to run all the code instantly.</h5> | ||
| <h5 style='font-size: 15px; margin: 10px;'>5. Press "slowly run all" to run the code with delays between each block.</h5> | ||
| <h5 style='font-size: 15px; margin: 10px;'>6. Press "step" to run one one block of code at a time.</h5> | ||
| <div class="close" onclick="closeinstructions(); closescreen();">Close</div> | ||
| </div> | ||
|
|
||
| <div class="largenotif" id="sharetree" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;"> | ||
| <h1 style='font-size: 25px; margin: 10px;'>Share Tree</h1> | ||
|
|
||
| <h5 style='font-size: 15px; margin: 18px;'>Send the following URL to someone to share your tree with them.</h5> | ||
|
|
||
| <div id="copysharelink" class="coolbutton" onclick="copyshare()">Copy link</div> | ||
|
|
||
| <h5 id="shareurldisp" style='font-size: 20px; margin: 15px; padding: 10px; border-radius: 25px; color: var(--main); background-color: var(--bg);'></h5> | ||
|
|
||
| <div class="close" onclick="closeel('sharetree'); closescreen();">Close</div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <!-- <img class="standaloneicon" id="x1" src="assets/redx.png" height="75px" alt="large red x"> | ||
| <img class="standaloneicon" id="x2" src="assets/redx.png" height="75px" alt="large red x"> | ||
| <img class="standaloneicon" id="x3" src="assets/redx.png" height="75px" alt="large red x"> | ||
| <img class="standaloneicon" id="check1" src="assets/greencheck.png" height="75px" alt="green check"> | ||
| <img class="standaloneicon" id="check2" src="assets/greencheck.png" height="75px" alt="green check"> | ||
| <img class="standaloneicon" id="check3" src="assets/greencheck.png" height="75px" alt="green check"> --> | ||
| <script src="../js/hashmapchaining.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.