PromiViz - Visualize Promise APIs</tiFtle> </head> <body class="purple"> <main> <header> <h1>🤝 PromiViz</h1> <div> <span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰</span> </div> </header> <div id="sidenav-id" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a class="item" href="#" title="Clear Logs" onclick="clearLogs()">Clear Logs</a> <a class="item" href="#" title="Persist Logs"> Persist Logs <input type="checkbox" id="persist-logs" onclick="persistLogs()" /> </a> <div class="log-settings"> <a class="item" href="#">Set a Theme</a> <ui class="log-theme"> <li title="Set the blue theme" class="blue" onclick="setTheme('blue')"></li> <li title="Set the red theme" class="red" onclick="setTheme('red')"></li> <li title="Set the purple theme" class="purple" onclick="setTheme('purple')"></li> <li title="Set the green theme" class="green" onclick="setTheme('green')"></li> <li title="Set the black theme" class="black" onclick="setTheme('black')"></li> </ui> </div> <hr /> <div class="social"> <a href="https://github.com/atapas/promiviz" target="_blank" rel="noopener noreferrer" title="See the source code"> <img src='./images/github.png' width="30px" height="30px" /> </a> <a href="https://twitter.com/intent/tweet?text=🤝%20PromiViz%20-%20Visualize%20Promise%20APIs&url=https://promiviz.vercel.app/&hashtags=promise,devcommunity,promisviz,100daysofcode,javascript%20by%20@tapasadhikary" target="_blank" rel="noopener noreferrer" title="Tweet about it"> <img src='./images/twitter.png' width="30px" height="30px" /> </a> <a href="https://blog.greenroots.info/series/javascript-promises" target="_blank" rel="noopener noreferrer" title="Read about Promises"> <img src='./images/blog.png' width="30px" height="30px" /> </a> </div> </div> <div class="content"> <div class="config purple"> <section class="select-api"> <label for="apis-list-id">Select an API:</label> <select name="apis" id="apis-list-id" onchange="selectValue()"> <option value="select">------SELECT------</option> <option value="handleResolve">Promise.resolve</option> <option value="all">Promise.all</option> <option value="any">Promise.any</option> <option value="race">Promise.race</option> <option value="allSettled">Promise.allSettled</option> </select> </section> </div> <div id='explanation-id' class='explanation'> </div> <div class="colors"> <div> <p class="actions"> <label for="red-delays-id">Delay</label> <select name="red-delays" id="red-delays-id" onchange="selectDelay()"> <option value="1000" selected>1 sec</option> <option value="2000">2 secs</option> <option value="3000">3 secs</option> <option value="4000">4 secs</option> <option value="5000">5 secs</option> <option value="6000">6 secs</option> <option value="7000">7 secs</option> <option value="8000">8 secs</option> <option value="9000">9 secs</option> <option value="10000">10 secs</option> </select> | <label for="red-error-id"> Reject <input type="checkbox" id="red-error-id" onclick="rejectColor('red-error-id')" /> </label> </p> <span id="red-id" class="color-text"></span> </div> <div> <p class="actions"> <label for="green-delays-id">Delay</label> <select name="green-delays" id="green-delays-id" onchange="selectDelay()"> <option value="1000">1 sec</option> <option value="2000">2 secs</option> <option value="3000" selected>3 secs</option> <option value="4000">4 secs</option> <option value="5000">5 secs</option> <option value="6000">6 secs</option> <option value="7000">7 secs</option> <option value="8000">8 secs</option> <option value="9000">9 secs</option> <option value="10000">10 secs</option> </select> | <label for="green-error-id"> Reject <input type="checkbox" id="green-error-id" onclick="rejectColor('green-error-id')" /> </label> </p> <span id="green-id" class="color-text"></span> </div> <div> <p class="actions"> <label for="blue-delays-id">Delay</label> <select name="blue-delays" id="blue-delays-id" onchange="selectDelay()"> <option value="1000">1 sec</option> <option value="2000">2 secs</option> <option value="3000">3 secs</option> <option value="4000">4 secs</option> <option value="5000" selected>5 secs</option> <option value="6000">6 secs</option> <option value="7000">7 secs</option> <option value="8000">8 secs</option> <option value="9000">9 secs</option> <option value="10000">10 secs</option> </select> | <label for="blue-error-id"> Reject <input type="checkbox" id="blue-error-id" onclick="rejectColor('blue-error-id')" /> </label> </p> <span id="blue-id" class="color-text"></span> </div> </div> <div id="log-container" class="logs purple"> <div class="log-header"> <h2>Logs</h2> </div> <ul id='log-id'></ul> </div> <footer> Made with ❤️ by <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/tapasadhikary"> @tapasadhikary </a> </footer> </div> </main> <script src="./app.js"></script> </body> </html>