ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor: jquery switch page with show and hide

Browse Source 
use two div to group the init page and result page to increase readability
This commit is contained in:
lifeadventurer
2023-11-25 22:23:10 +08:00
parent b6375dadeb
commit 4ae5d372cb
2 changed files with 59 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
fortune_generator/fortune.js
View File

@@ -67,15 +67,7 @@ async function init_page(){
await fetch_data();
// hide the elements of show fortune page
$('#ip-to-fortune').hide();
$('#l-1-event').hide();
$('#l-1-desc').hide();
$('#l-2-event').hide();
$('#l-2-desc').hide();
$('#r-1-event').hide();
$('#r-1-desc').hide();
$('#r-2-event').hide();
$('#r-2-desc').hide();
$('#result-page').hide();
// show date before button pressed
const showMonth = `<span style='font-size:10vmin; color:${dateColor}; -webkit-writing-mode:vertical-lr;'><b>${chineseMonth[month - 1] + "月"}</b></span>`;
@@ -123,27 +115,13 @@ const bad_span = event => `<span style='font-size:5.6vmin; color:${badColor};'><
const desc_span = desc => `<span style='font-size:3.5vmin; color:${descColor};'>${desc}</span>`;
function Appear() {
//change page
$('#title').html(title);
$('#month').hide();
$('#date').hide();
$('#weekday').hide();
$('#special-day').hide();
$('#upcoming-event-1').hide();
$('#upcoming-event-2').hide();
$('#btn').html('打卡成功');
// toggle the elements on show status page
$('#ip-to-fortune').show();
$('#l-1-event').show();
$('#l-1-desc').show();
$('#l-2-event').show();
$('#l-2-desc').show();
$('#r-1-event').show();
$('#r-1-desc').show();
$('#r-2-event').show();
$('#r-2-desc').show();
// disable the btn
$('#btn').attr("disabled", "disabled");
//change page
$('#init-page').hide();
$('#result-page').show();
// transform ip to four numbers
let num = ip.split(".").map(num => parseInt(num));

104
fortune_generator/index.html
View File

@@ -16,68 +16,74 @@
<p id="title"></p>
</div>
<!-- init page start -->
<div class="row">
<div class="col-3">
<p id="month"></p>
<div id="init-page">
<div class="row">
<div class="col-3">
<p id="month"></p>
</div>
<div class="col-6">
<p id="date"></p>
</div>
<div class="col-3">
<p id="weekday"></p>
</div>
</div>
<div class="col-6">
<p id="date"></p>
<div class="row">
<div class="col">
<p id="special-day"></p>
</div>
</div>
<div class="col-3">
<p id="weekday"></p>
<div class="row">
<p id="upcoming-event-1"></p>
</div>
</div>
<div class="row">
<div class="col">
<p id="special-day"></p>
<div class="row">
<p id="upcoming-event-2"></p>
</div>
</div>
<div class="row">
<p id="upcoming-event-1"></p>
</div>
<div class="row">
<p id="upcoming-event-2"></p>
</div>
<!-- init page end -->
<div class="row">
<p id="ip-to-fortune"></p>
</div>
<div class="row">
<div class="col">
<div class="row">
<p id="l-1-event"></p>
<!-- page after button clicked start -->
<div id="result-page">
<div class="row">
<p id="ip-to-fortune"></p>
</div>
<div class="row">
<div class="col">
<div class="row">
<p id="l-1-event"></p>
</div>
<div class="row">
<p id="l-1-desc"></p>
</div>
</div>
<div class="row">
<p id="l-1-desc"></p>
<div class="col">
<div class="row">
<p id="r-1-event"></p>
</div>
<div class="row">
<p id="r-1-desc"></p>
</div>
</div>
</div>
<div class="col">
<div class="row">
<p id="r-1-event"></p>
<div class="row">
<div class="col">
<div class="row">
<p id="l-2-event"></p>
</div>
<div class="row">
<p id="l-2-desc"></p>
</div>
</div>
<div class="row">
<p id="r-1-desc"></p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<p id="l-2-event"></p>
</div>
<div class="row">
<p id="l-2-desc"></p>
</div>
</div>
<div class="col">
<div class="row">
<p id="r-2-event"></p>
</div>
<div class="row">
<p id="r-2-desc"></p>
<div class="col">
<div class="row">
<p id="r-2-event"></p>
</div>
<div class="row">
<p id="r-2-desc"></p>
</div>
</div>
</div>
</div>
<!-- page after button click end -->
<button id="btn" onclick="getLuck()">點擊打卡</button>
</div>
<canvas id="Matrix"></canvas>