gpa calculator with my real academic grades using react

So this is a mini tool I built to calculate my GPA. Below is the real course grades that I have obtained in NTU. LOL. Feel free to clear all the data and make use of it. You may export your input as a JSON file and import again for future usage!

Declaration: All the data is not stored by this website and all the calculations are done by your browser!

The app is

built using React (Actually it’s my first time using React)
hosted using Azure web app services (Free tier!!)
source controlled using GitHub (React GPA Calculator)

Enjoy the mini app~

</p> <div class="wbp-cbm" wb-share-url="http://it.newban.cn/?p=73561"><a class="wb-btn-dwqr wb-btn-like j-dwqr-like-btn" data-count="0"><svg class="wb-icon wbsico-like"><use xlink:href="#wbsico-dwqr-like"></use></svg><span class="like-count">赞</span></a><a class="wb-btn-dwqr wb-share-poster j-dwqr-poster-btn"><svg class="wb-icon wbsico-poster"><use xlink:href="#wbsico-dwqr-poster"></use></svg><span>微海报</span></a><a class="wb-btn-dwqr wb-btn-share j-dwqr-social-btn"><svg class="wb-icon wbsico-share"><use xlink:href="#wbsico-dwqr-share"></use></svg><span>分享</span></a></div>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-2626449904708114" data-ad-slot="9471729671"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </article> <div class="sidebar"> <div class="sb-inner"> <section id="search-2" class="spmg-bottom widget widget_search"><form class="search-form" id="searchform" action="http://it.newban.cn/" method="get"> <button type="button" class="btn-search" id="searchsubmit"><svg class="wb-icon wbsico-search"><use xlink:href="#wbsico-search"></use></svg></button> <input type="text" class="form-control" name="s" id="s" placeholder="搜索" /> </form></section> <section id="recent-posts-2" class="spmg-bottom widget widget_recent_entries"> <h2 class="widgettitle">近期文章</h2> <ul> <li> <a href="http://it.newban.cn/archives/151996">MYSQL单表数据达2000万性能严重下降，为什么？</a> </li> <li> <a href="http://it.newban.cn/archives/151994">EasyExcel的使用一、介绍和入门使用1、Excel</a> </li> <li> <a href="http://it.newban.cn/archives/151992">处理Exception的几种实践，被很多团队采纳！</a> </li> <li> <a href="http://it.newban.cn/archives/151990">带你学Dubbo—Dubbo监控中心详解Dubbo监控</a> </li> <li> <a href="http://it.newban.cn/archives/151988">项目开发框架-SSM1.Spring2.SpringM</a> </li> </ul> </section><section id="recent-comments-2" class="spmg-bottom widget widget_recent_comments"><h2 class="widgettitle">近期评论</h2> <ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='http://118.31.15.172:7779' rel='external nofollow ugc' class='url'>songjianzaina</a></span>发表在《<a href="http://it.newban.cn/archives/7#comment-3">pycharm激活码更新时间2020年10月1日</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='http://www.diandian100.cn' rel='external nofollow ugc' class='url'>tony</a></span>发表在《<a href="http://it.newban.cn/archives/7#comment-2">pycharm激活码更新时间2020年10月1日</a>》</li></ul></section>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2626449904708114" data-ad-slot="4736415929" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="widget widget-tags"> <h3 class="widgettitle">标签</h3> <div class="hot-tags"> <a href="http://it.newban.cn/tag/8307" rel="tag">academic</a><a href="http://it.newban.cn/tag/2893" rel="tag">calculator</a><a href="http://it.newban.cn/tag/40524" rel="tag">gpa</a><a href="http://it.newban.cn/tag/18210" rel="tag">Grades</a><a href="http://it.newban.cn/tag/1640" rel="tag">my</a><a href="http://it.newban.cn/tag/6996" rel="tag">react</a><a href="http://it.newban.cn/tag/3123" rel="tag">real</a><a href="http://it.newban.cn/tag/966" rel="tag">using</a><a href="http://it.newban.cn/tag/698" rel="tag">with</a> </div> </div> <section class="widget widget-hot"> <h3 class="widgettitle">热门</h3><ul class="post-list"><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/10"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/20200928120429.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/10">Idea 激活码更新时间2020年10月1日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">1518</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/2536"><img src="http://it.newban.cn/wp-content/themes/inpandora/images/wbolt_def_cover.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/2536">android逆向反编译工具包下载</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">598</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/24"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/u=922994232,1212480397&fm=26&gp=0.jpg" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/24">jdk-8u251-macosx-x64 安装包下载</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">589</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/7"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="https://cdn.jsdelivr.net/gh/songjianzaina/SavePicGoPic/img/20200927220448.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/7">pycharm激活码更新时间2020年10月1日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">258</em></p> </div> </li><li class="post"> <div class="media-pic"><a href="http://it.newban.cn/archives/81377"><img src="http://it.newban.cn/wp-content/themes/inpandora/images/wbolt_def_cover.png" alt=""></a></div> <div class="media-body"> <a class="title" href="http://it.newban.cn/archives/81377">Idea 激活码 active code 更新时间2021年9月3日</a> <p class="post-metas"><svg class="wb-icon wbsico-download"><use xlink:href="#wbsico-download"></use></svg><em class="meta-dl">195</em></p> </div> </li></ul></section> <section id="archives-2" class="spmg-bottom widget widget_archive"><h2 class="widgettitle">文章归档</h2> <ul> <li><a href='http://it.newban.cn/archives/date/2021/12'>2021年12月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/10'>2021年10月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/09'>2021年9月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/08'>2021年8月</a></li> <li><a href='http://it.newban.cn/archives/date/2021/01'>2021年1月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/12'>2020年12月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/11'>2020年11月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/10'>2020年10月</a></li> <li><a href='http://it.newban.cn/archives/date/2020/09'>2020年9月</a></li> </ul> </section><section id="categories-2" class="spmg-bottom widget widget_categories"><h2 class="widgettitle">分类目录</h2> <ul> <li class="cat-item cat-item-15"><a href="http://it.newban.cn/catchdata">catchdata</a> </li> <li class="cat-item cat-item-8"><a href="http://it.newban.cn/elasticsearch">elasticsearch</a> </li> <li class="cat-item cat-item-10"><a href="http://it.newban.cn/git">git</a> </li> <li class="cat-item cat-item-9"><a href="http://it.newban.cn/idea">idea</a> </li> <li class="cat-item cat-item-5"><a href="http://it.newban.cn/ideacode">ideacode</a> </li> <li class="cat-item cat-item-252"><a href="http://it.newban.cn/ideaseo">idea激活码</a> </li> <li class="cat-item cat-item-253"><a href="http://it.newban.cn/ideacodeseo">idea激活码2020最新</a> </li> <li class="cat-item cat-item-17"><a href="http://it.newban.cn/itarticle">itarticle</a> </li> <li class="cat-item cat-item-2"><a href="http://it.newban.cn/jdk">jdk</a> </li> <li class="cat-item cat-item-7"><a href="http://it.newban.cn/maven">maven</a> </li> <li class="cat-item cat-item-4"><a href="http://it.newban.cn/mysql">mysql</a> </li> <li class="cat-item cat-item-12"><a href="http://it.newban.cn/pip">pip</a> </li> <li class="cat-item cat-item-16"><a href="http://it.newban.cn/proxytools">proxytools</a> </li> <li class="cat-item cat-item-6"><a href="http://it.newban.cn/pycharmcode">pycharmcode</a> </li> <li class="cat-item cat-item-21"><a href="http://it.newban.cn/pycharmcodeseo">pycharm激活码</a> </li> <li class="cat-item cat-item-22"><a href="http://it.newban.cn/pycharmcodeseoe">pycharm激活码2020最新</a> </li> <li class="cat-item cat-item-13"><a href="http://it.newban.cn/python">python</a> </li> <li class="cat-item cat-item-3"><a href="http://it.newban.cn/redis">redis</a> </li> <li class="cat-item cat-item-14"><a href="http://it.newban.cn/sqltools">sqltools</a> </li> <li class="cat-item cat-item-1"><a href="http://it.newban.cn/uncategorized">Uncategorized</a> </li> <li class="cat-item cat-item-1326"><a href="http://it.newban.cn/fby">反编译工具</a> </li> <li class="cat-item cat-item-41130"><a href="http://it.newban.cn/fanq">梯子工具下载</a> </li> </ul> </section><section id="meta-2" class="spmg-bottom widget widget_meta"><h2 class="widgettitle">功能</h2> <ul> <li><a href="http://it.newban.cn/wp-login.php">登录</a></li> <li><a href="http://it.newban.cn/feed">条目feed</a></li> <li><a href="http://it.newban.cn/comments/feed">评论feed</a></li> <li><a href="https://cn.wordpress.org/">WordPress.org</a></li> </ul> </section> </div> </div> </div> </div> </div> <footer class="footer"> <nav class="nav-footer"> <ul id="J_footerNav" class="nav-ft"><li><a href="http://it.newban.cn/jdk">JDK下载</a></li> <li><a href="http://it.newban.cn/mysql">MySql下载</a></li> <li><a href="http://it.newban.cn/redis">Redis下载</a></li> <li><a href="http://it.newban.cn/idea">Idea下载</a></li> <li><a href="http://it.newban.cn/python">Python下载</a></li> <li><a href="http://it.newban.cn/ideacode">Idea激活码</a></li> <li><a href="http://it.newban.cn/git">Git下载</a></li> <li><a href="http://it.newban.cn/maven">Maven下载</a></li> <li><a href="http://it.newban.cn/elasticsearch">ElasticSearch下载</a></li> <li><a href="http://it.newban.cn/pip">Pip下载</a></li> <li><a href="http://it.newban.cn/sqltools">数据库工具</a></li> <li><a href="http://it.newban.cn/proxytools">免费代理工具</a></li> <li><a href="http://it.newban.cn/pycharmcode">Pycharm激活码</a></li> <li><a href="http://it.newban.cn/itarticle">技术文章</a></li> <li><a href="http://it.newban.cn/fby">反编译工具</a></li> <li><a href="http://it.newban.cn/fanq">梯子工具下载</a></li> </ul> </nav> <div class="copyright"> <span class="ib">Copyright © 2024 <a href="http://it.newban.cn/" rel="home">IT汇</a></span> <span class="ib sppd-h">All Rights Reserved</span> </div> <span class="ib pwb wk" data-theme-code="inpandora">Design by <a href="https://www.wbolt.com?ref=inpandora" target="_blank">闪电博</a></span> </div> </footer> <link rel='stylesheet' id='wbs-dwqr-css-css' href='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/wbp_donate.css?ver=1.4.0' type='text/css' media='all' /> <script type='text/javascript' src='http://it.newban.cn/wp-content/themes/inpandora/js/base.js?ver=202009' id='wbolt-base-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-includes/js/wp-embed.min.js?ver=5.5.6' id='wp-embed-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/qrious.min.js?ver=1.4.0' id='qrious-js-js'></script> <script type='text/javascript' id='wbs-front-dwqr-js-before'> var dwqr_opt="1.4.0|http%3A%2F%2Fit.newban.cn%2Fwp-content%2Fplugins%2Fdonate-with-qrcode%2F|0|http%3A%2F%2Fit.newban.cn%2Fwp-admin%2Fadmin-ajax.php|73561"; var poster_theme=0, poster_ratio="3:2";var wb_dwqr_donate_html='<div class="tab-navs"></div><div class="tab-conts"></div>';var wb_dwqr_share_html='<div class="wb-share-list" data-cover="https://www.dazhuanlan.com/webchat.jpg"><a class="share-logo icon-weixin" data-cmd="weixin" title="分享到微信" rel="nofollow"><svg class="wb-icon wbsico-dwqr-weixin"><use xlink:href="#wbsico-dwqr-weixin"></use></svg></a><a class="share-logo icon-weibo" data-cmd="weibo" title="分享到微博" rel="nofollow"><svg class="wb-icon wbsico-dwqr-weibo"><use xlink:href="#wbsico-dwqr-weibo"></use></svg></a><a class="share-logo icon-qzone" data-cmd="qzone" title="分享到QQ空间" rel="nofollow"><svg class="wb-icon wbsico-dwqr-qzone"><use xlink:href="#wbsico-dwqr-qzone"></use></svg></a><a class="share-logo icon-qq" data-cmd="qq" title="分享到QQ" rel="nofollow"><svg class="wb-icon wbsico-dwqr-qq"><use xlink:href="#wbsico-dwqr-qq"></use></svg></a>'; </script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/donate-with-qrcode/assets/wbp_front.js?ver=1.4.0' id='wbs-front-dwqr-js'></script> <script type='text/javascript' src='http://it.newban.cn/wp-content/plugins/baidu-submit-link/assets/baidu_push.js' id='wb-baidu-push-js'></script> <a class="bktop" id="J_backTop" href="javascript:;" rel="nofollow" title="Back to top"><svg xmlns="http://www.w3.org/2000/svg" width="23" height="12"><path fill-rule="evenodd" d="M21.58 12L11.5 2.33 1.42 12 0 10.63 10.79.28c.4-.37 1.03-.37 1.42 0L23 10.63 21.58 12z"/></svg></a> </body> </html>