application-site/feature.html at main · KesterJJ/application-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body onload="fadeInStart()">
<header>
<h1 id="heading">Kester<br>Jones</h1>
<div id="menuButton" onmouseover="lighten()" onmouseout="darken()" onclick="openMenu()">
<div id="one"><pre> </pre>
</div>
<div id="two"><pre> </pre>
</div>
<div id="three"><pre> </pre>
</div>
</div>
</header>
<br>
<h2 id="title">FEATURE</h2>
<p id="writing">Welcome to my feature! Here we have a deck of cards. It can be used to work out strategies for card games or solve maths problems involving cards. You can add or remove cards and see the likelihood of drawing any particular card with what is left. Enjoy!</p>
<div id="container">
    <div id="cardBox">
        <figure>
    <img id="deckBack" src="img/back.jpg" alt="Deck of cards">
    <img id="back" src="img/back.jpg" alt="Back of card">
    <img id="card" alt="Card">
    <figcaption id="cardCount">Cards: 52</figcaption>
    </figure>
</div>
<br>

</div>
<div id="options">
        <button onclick="shuffleDeck()" class="options">Shuffle Deck</button>
        <button onclick="showCard()" class="options">Show Card</button>
        <button onclick="hideCard()" class="options">Hide Card</button>
        <button onclick="takeAway()" class="options">Remove Current Card</button>
        <button onclick="removeSuit('clubs')" class="options">Remove Clubs</button>
        <button onclick="removeSuit('spades')" class="options">Remove Spades</button>
        <button onclick="removeSuit('diamonds')" class="options">Remove Diamonds</button>
        <button onclick="removeSuit('hearts')" class="options">Remove Hearts</button>
        <button onclick="takeInLast()" class="options">Retrieve Last Card</button>
        <button onclick="takeInBottom()" class="options">Retrieve Bottom Card</button>
        <button onclick="takeInRandom()" class="options">Retrieve Random Card</button>
        <button onclick="retrieveSuit('clubs')" class="options">Retrieve Clubs</button>
        <button onclick="retrieveSuit('spades')" class="options">Retrieve Spades</button>
        <button onclick="retrieveSuit('diamonds')" class="options">Retrieve Diamonds</button>
        <button onclick="retrieveSuit('hearts')" class="options">Retrieve Hearts</button>

        </div>


<div id="right"></div>
<div id="left"></div>


<div id="menu">
<a class="buttons" href="javascript:delay('project-gallery.html')" onclick="linkClick()" onmouseover="brighten(gallery)" onmouseout="unbrighten(gallery)" id="gallery">GALLERY</a>
<br>
<a class="buttons" href="javascript:delay('challenges.html')" onclick="linkClick()" onmouseover="brighten(challenges)" onmouseout="unbrighten(challenges)" id="challenges">CHALLENGES</a>
<br>
<a class="buttons" href="javascript:delay('feature.html')" onclick="linkClick()" onmouseover="brighten(feature)" onmouseout="unbrighten(feature)" id="feature">FEATURE</a>
<br>
<a class="buttons" href="javascript:delay('index.html')" onclick="linkClick()" onmouseover="brighten(about)" onmouseout="unbrighten(about)" id="about">ABOUT</a>
<br>
</div>

<script src="script.js"></script>
</body>
</html>