Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@theodoretnguyen
theodoretnguyen committed Feb 7, 2023
0 parents commit c1cb65e
Show file tree
Hide file tree
Showing 5 changed files with 284 additions and 0 deletions.
121 changes: 121 additions & 0 deletions app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
* {
font-family: Fira Sans;
background-color: #eeeeee;
}

main {
margin: auto;
max-width: 75%;
}

h1 {
text-align: center;
font-size: 20pt;
}

p {
font-size: 14pt;
}

figcaption {
font-size: 16pt;
margin: 12px 6px;
padding: 16px 32px;
border: 2px dotted #000000;
border-radius: 12px;
display: flexbox;
background-color: #fefee3;
}

img {
max-width: 40%;
height: auto;
}

#img_bg6 {
border: 2px solid #eb1c24;
border-radius: 12px;
}

#img_io {
border: 2px solid #6b80e9;
border-radius: 12px;
}

input {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16pt;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}

#button_bg6 {
background-color: #eb1c24;
color: white;
border: 2px solid #eb1c24;
border-radius: 12px;
}

#button_bg6:hover {
background-color: white;
color: #eb1c24;
}

#button_io {
background-color: #6b80e9;
color: white;
border: 2px solid #6b80e9;
border-radius: 12px;
}

#button_io:hover {
background-color: white;
color: #6b80e9;
}

#button_rev {
background-color: #555555;
color: white;
border: 2px solid #555555;
border-radius: 12px;
}

#button_rev:hover {
background-color: white;
color: #555555;
}

#button_reset {
background-color: black;
color: white;
border: 2px solid black;
border-radius: 12px;
}

#button_reset:hover {
background-color: white;
color: black;
}

td {
text-align: center;
display:flexbox;
}

.counter {
font-size: 40pt;
}

#red {
color: red;
background-color: #fefee3;
}

#blue {
color: blue;
background-color: #fefee3;
}
53 changes: 53 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const red_token_price = 2;
const blue_token_price = 3;

let tix_bg6 = 0;
document.getElementById('button_bg6').addEventListener('click',
function() {
document.getElementById('tix_bg6').innerHTML = `${++tix_bg6}`;
}
);

/* document.getElementById('button_bg6').addEventListener('click',
function() {
let rev_bg6 = tix_bg6 * 3 * red_token_price + tix_bg6 * 2 * blue_token_price;
document.getElementById('rev_bg6').innerHTML = `${rev_bg6}`;
}
); */

let tix_io = 0;
document.getElementById('button_io').addEventListener('click',
function() {
document.getElementById('tix_io').innerHTML = `${++tix_io}`;
}
);

/* document.getElementById('button_io').addEventListener('click',
function() {
let rev_io = tix_io * 2 * red_token_price + tix_io * 3 * blue_token_price;
document.getElementById('rev_io').innerHTML = `${rev_io}`;
}
); */

document.getElementById('button_rev').addEventListener('click',
function() {
let rev_bg6 = tix_bg6 * 3 * red_token_price + tix_bg6 * 2 * blue_token_price;
document.getElementById('rev_bg6').innerHTML = `${rev_bg6}`;

let rev_io = tix_io * 2 * red_token_price + tix_io * 3 * blue_token_price;
document.getElementById('rev_io').innerHTML = `${rev_io}`;
}
);

document.getElementById('button_reset').addEventListener('click',
function() {
tix_bg6 = 0;
document.getElementById('tix_bg6').innerHTML = ' ';
tix_io = 0;
document.getElementById('tix_io').innerHTML = ' ';
rev_bg6 = 0;
document.getElementById('rev_bg6').innerHTML = ' ';
rev_io = 0;
document.getElementById('rev_io').innerHTML = ' ';
}
);
Binary file added img/big-hero-6.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/inside-out.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 110 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
<script src="./app.js" defer></script>
<title>Movie Theater Equations</title>
</head>

<body>
<header>
<h1>Movie Theater Equations</h1>
</header>

<main>
<div style="text-align:center;">
<table>
<thead>
<tr>
<td>
<figure>
<img src="./img/big-hero-6.jpg" id="img_bg6" alt="Big Hero 6">
<figcaption>
Ticket Price:
<br>
3 <span id="red">red</span> tokens,
<br>
2 <span id="blue">blue</span> tokens
</figcaption>
</figure>
</td>
<td>
<figure>
<img src="./img/inside-out.jpg" id = "img_io" alt="Inside Out">
<figcaption>
Ticket Price:
<br>
2 <span id="red">red</span> tokens,
<br>
3 <span id="blue">blue</span> tokens
</figcaption>
</figure>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
Click on the button below to purchase a ticket for Big Hero 6!
</p>
<input type="button" id="button_bg6" value="Big Hero 6">
</td>
<td>
<p>
Click on the button below to purchase a ticket for Inside Out!
</p>
<input type="button" id="button_io" value="Inside Out">
</td>
</tr>
<tr>
<td>
<div>
<p>
Number of tickets sold for Big Hero 6:
<br>
<span class="counter" id="tix_bg6">&nbsp;</span>
</p>
<p>
Total revenue ($) for Big Hero 6:
<br>
<span class="counter" id="rev_bg6">&nbsp;</span>
</p>
</div>
</td>
<td>
<div>
<p>
Number of tickets sold for Inside Out:
<br>
<span class="counter" id="tix_io">&nbsp;</span>
</p>
<p>
Total revenue ($) for Inside Out:
<br>
<span class="counter" id="rev_io">&nbsp;</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<input type="button" id="button_rev" value="Click to show revenues">
<br>
<input type="button" id="button_reset" value="Reset">
</div>
</main>


</body>

<footer>
<hr>
&copy; <i>Theodore Nguyen, 2023</i>
</footer>
</html>

0 comments on commit c1cb65e

Please sign in to comment.