Assignment 7

 

1. Task: Create a simple website and upload it to a web hosting space. The completed steps are as follows:

 

(1) Download a responsive website template (Bootstrap 4) 

¤U¸üÅTÀ³¦¡ºô­¶¼ÒªOºô¯¸(Bootstrap 4)

 

Source: Template King

¼ÒªO¤ý

 

(2) Modify the website's title, encoding, heading, and copyright statement.

 

(3) Create six hyperlinks on the website:

 

(3-1) Homepage: **index.htm**

 

(3-2) Task 1: Random Numbers

Note: Since the template is based on Bootstrap 4, you must refer to the Bootstrap 4 website for instructions.

Generate a random number between 0 and 1: Math.random()
Generate a random number between 1 and 10 (Method 1): Math.ceil(Math.random() * 10)
Generate a random number between 1 and 10 (Method 2): Math.floor(Math.random() * 10) + 1

 

Bootstrap layout parameters: container ¡X row ¡X col-n (1 to 12)

<div class="container">

<div class="row">

< div  class=" col-5">²£

<div col-6 offset-1">  

</div>

Note: A row can have a maximum of 12 columns (col-12).
Each element's width can be defined, e.g., col-3 (occupies 3 spaces).
The space between elements can be controlled using offset, e.g., offset-3 (3 spaces between elements).

How to set up space layout in Bootstrap4

Bootstrap4¦p¦ó³]©wªÅ¶¡±Æª©

 

 

(3-3) Task 2: Draw Poker Cards 

Download poker card images.

¤U¸ü¼³§JµP¹Ï¤ù

 

 

(3-4) Task 3: Player vs Banker Poker Comparison

±Æª©³]©w

1.¨â­Órow:

<div class=¡¨row¡¨>

<div class=¡¨row¡¨>

 

Layout Settings:

1.Two rows:

<div class=¡¨row¡¨>

<div class=¡¨row¡¨>

 

 

2.Control the position of the picture

<img class=¡¨col-3 offset-1¡§

<img class=¡¨col-3 offset-4¡§

col-3: Indicates the element occupies 3 column spaces.
offset-1: Indicates the element is offset by 1 space from the previous one.

 

3. There are two types of JavaScript variables:

Local variable: n1

Global variable: var n1

 

(3-5) Task 4: Create multiple collapsible messages.

 

Reference: Bootstrap Collapsible Components 

Refer to the method for creating one collapsible component, and then turn it into two collapsible message components.

 

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">

                ¥xÆW¤H¤f¼Æ¡H

</a>

</p>

<div class="collapse" id="collapseExample1">

  <div class="card card-body">

    ¥xÆW¤H¤f¦³2300¸U¤H

  </div>

 

 

(5) Paste the URL into Zuvio 

Submit the URL in the assignment section on Zuvio to complete the task.