Skip to content

Commit 0748a28

Browse files
author
[Christopher Andrew Topalian]
committed
update
0 parents  commit 0748a28

14 files changed

Lines changed: 758 additions & 0 deletions

File tree

‎CATopalian_JavaScript_Frames_Per_Second.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!-- Dedicated to God the Father -->
2+
<!-- All Rights Reserved Christopher Andrew Topalian Copyright 2000-2025 -->
3+
<!-- https://github.com/ChristopherTopalian -->
4+
<!-- https://github.com/ChristopherAndrewTopalian -->
5+
<!-- CATopalian_JavaScript_Frames_Per_Second.html -->
6+
7+
<html>
8+
<head>
9+
<title> CATopalian JavaScript Frames Per Second </title>
10+
11+
<link rel = 'stylesheet' href = 'src/css/style001.css'>
12+
13+
<script src = 'src/js/1shortcuts/shortcuts.js'></script>
14+
15+
<script src = 'src/js/2worldVariables/worldVariables.js'></script>
16+
17+
<script src = 'src/js/dataFunctions/extractFileName.js'></script>
18+
19+
<script src = 'src/js/sound/sound.js'></script>
20+
21+
<script src = 'src/js/make/makeInterface.js'></script>
22+
23+
<script src = 'src/js/make/makeTitleOfApp.js'></script>
24+
25+
<script src = 'src/js/gameLoop/gameLoop.js'></script>
26+
27+
<script src = 'src/js/fps/changeFps.js'></script>
28+
29+
<script src = 'src/js/whenLoaded/whenLoaded.js'></script>
30+
31+
<body onload = "whenLoaded();">
32+
33+
</body>
34+
35+
</html>
36+

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# CATopalian JavaScript Frames Per Second
2+
A JavaScript application that changes the FPS in real time using a slider and input to set the value.
3+
4+
If you enjoy my apps and tutorials please consider buying me a coffee at [paypal.me/keystonermarch](https://www.paypal.com/paypalme/keystonermarch)
5+
6+
---
7+
8+
### How to Download this App
9+
1. Click the green Code Button on this github page
10+
2. Choose Download ZIP
11+
3. Save the Zip File
12+
4. Extract All
13+
5. Double click the HTML file to start the App
14+
15+
---
16+
17+
Happy Scripting :-)
18+

‎index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!-- Dedicated to God the Father -->
2+
<!-- All Rights Reserved Christopher Andrew Topalian Copyright 2000-2025 -->
3+
<!-- https://github.com/ChristopherTopalian -->
4+
<!-- https://github.com/ChristopherAndrewTopalian -->
5+
<!-- index.html -->
6+
7+
<html>
8+
<head>
9+
<title> index </title>
10+
11+
<style>
12+
13+
body
14+
{
15+
background-color: rgb(0, 0, 0);
16+
font-family: Arial;
17+
color: rgb(255, 255, 255);
18+
}
19+
20+
</style>
21+
22+
<script>
23+
24+
// shortcuts.js
25+
26+
function ge(whichId)
27+
{
28+
let result = document.getElementById(whichId);
29+
return result;
30+
}
31+
32+
function ce(whichType)
33+
{
34+
let result = document.createElement(whichType);
35+
return result;
36+
}
37+
38+
function ba(whichElement)
39+
{
40+
let result = document.body.append(whichElement);
41+
return result;
42+
}
43+
44+
function cl(whichMessage)
45+
{
46+
let result = console.log(whichMessage);
47+
return result;
48+
}
49+
50+
function ct(whichText)
51+
{
52+
let result = document.createTextNode(whichText);
53+
return result;
54+
}
55+
56+
function gr(whichId)
57+
{
58+
let result = ge(whichId).getBoundingClientRect();
59+
return result;
60+
}
61+
62+
//----//
63+
64+
// Dedicated to God the Father
65+
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2025
66+
// https://github.com/ChristopherTopalian
67+
// https://github.com/ChristopherAndrewTopalian
68+
// https://sites.google.com/view/CollegeOfScripting
69+
70+
//-//
71+
72+
function makeAppLink()
73+
{
74+
let theLink = 'CATopalian_JavaScript_Frames_Per_Second.html';
75+
76+
let mainDiv = ce('div');
77+
mainDiv.style.display = 'flex';
78+
mainDiv.style.flexDirection = 'column';
79+
mainDiv.style.margin = 10 + 'px';
80+
ba(mainDiv);
81+
82+
//-//
83+
84+
let instructions = ce('div');
85+
instructions.textContent = 'Click on the Link Below to Open the Application';
86+
mainDiv.append(instructions);
87+
88+
//-//
89+
90+
let appLink = ce('a');
91+
appLink.href = theLink;
92+
appLink.textContent = 'Start Application';
93+
appLink.style.fontSize = 50 + 'px';
94+
appLink.style.fontWeight = 'bold';
95+
mainDiv.append(appLink);
96+
}
97+
98+
function whenLoaded()
99+
{
100+
makeAppLink();
101+
}
102+
103+
</script>
104+
105+
</head>
106+
107+
<body onload = 'whenLoaded();'>
108+
109+
</body>
110+
111+
</html>
112+

‎src/_instructions/HowToCombineJSFiles.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Dedicated to God the Father
2+
3+
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024
4+
5+
// https://github.com/ChristopherTopalian
6+
7+
// https://github.com/ChristopherAndrewTopalian
8+
9+
// HowToCombineJSFiles.js
10+
11+
TUTORIAL:
12+
How to Combine all .js files in all folders that are in our js folder.
13+
14+
Getting things ready:
15+
We should add two new lines at the end every script. This way they will combine nicely with a line break in between each script.
16+
17+
Step One: Open our js folder
18+
19+
Step Two: Type in the address bar of the js folder, cmd, press Enter
20+
21+
This opens our js folder in the command prompt
22+
23+
Step Three: Type the command shown below in the command prompt and then press Enter
24+
25+
for /r "%CD%" %i in (*.js) do type "%i" >> main.js
26+
27+
Now we have a newly created .js file named main.js that has all of our js files included into one file.
28+
29+
This makes it easy to upload our application and easy to find out how many lines of code our project is.
30+
31+
To use our main.js file, we include it in our html file code:
32+
<script src = 'js/main.js'></script>
33+
34+
Happy Scripting :-)

‎src/css/style001.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* Dedicated to God the Father */
2+
3+
/* All Rights Reserved Christopher Andrew Topalian Copyright 2000-2024 */
4+
5+
/* https://github.com/ChristopherTopalian */
6+
7+
/* https://github.com/ChristopherAndrewTopalian */
8+
9+
/* style001.css */
10+
11+
body
12+
{
13+
background-color: rgb(40, 40, 40);
14+
font-family: Arial;
15+
font-size: 20px;
16+
color: rgb(255, 255, 255);
17+
}
18+
19+
hr
20+
{
21+
margin: 5px;
22+
}
23+
24+
a
25+
{
26+
text-decoration: none;
27+
font-weight: bold;
28+
color: rgb(70, 70, 70);
29+
}
30+
31+
.mainDiv
32+
{
33+
position: fixed;
34+
left: 10px;
35+
top: 5px;
36+
margin: 5px;
37+
border: solid 1px;
38+
border-radius: 8px;
39+
padding: 4px;
40+
text-align: right;
41+
transition: opacity 4.0s ease-in-out;
42+
}
43+
44+
.counterLabel
45+
{
46+
padding-right: 6.5px;
47+
}
48+
49+
.counterTextbox
50+
{
51+
background-color: rgb(0, 0, 0);
52+
border: solid 1px rgb(255, 255, 255);
53+
border-radius: 8px;
54+
padding-left: 10px;
55+
padding-right: 10px;
56+
padding-top: 2px;
57+
padding-bottom: 2px;
58+
font-size: 20px;
59+
color: rgb(255, 255, 255);
60+
text-align: right;
61+
}
62+
63+
.fpsLabel
64+
{
65+
padding-right: 5px;
66+
}
67+
68+
.fpsTextbox
69+
{
70+
width: 60px;
71+
background-color: rgb(0, 0, 0);
72+
border: solid 1px rgb(255, 255, 255);
73+
border-radius: 8px;
74+
padding-left: 10px;
75+
padding-right: 10px;
76+
padding-top: 2px;
77+
padding-bottom: 2px;
78+
font-size: 20px;
79+
color: rgb(255, 255, 255);
80+
text-align: center;
81+
}
82+
83+
input[type = "range"]
84+
{
85+
-webkit-appearance: none;
86+
appearance: none;
87+
width: 100%;
88+
height: 10px;
89+
background: linear-gradient(to right, rgb(10, 25, 47), rgb(0, 180, 255));
90+
border-radius: 5px;
91+
outline: none;
92+
opacity: 0.7;
93+
-webkit-transition: .2s;
94+
transition: opacity .2s;
95+
}
96+
97+
input[type = "range"]:hover
98+
{
99+
opacity: 1;
100+
}
101+
102+
/* chrome and chromium */
103+
input[type = "range"]::-webkit-slider-thumb
104+
{
105+
-webkit-appearance: none;
106+
appearance: none;
107+
width: 20px;
108+
height: 20px;
109+
background:rgb(0, 180, 255);
110+
border: solid 2px rgb(20, 20, 20);
111+
border-radius: 50%;
112+
cursor: pointer;
113+
}
114+
115+
/* mozilla */
116+
input[type = "range"]::-moz-range-thumb
117+
{
118+
width: 16px;
119+
height: 16px;
120+
background: rgb(255, 255, 255);
121+
border-width: 0px;
122+
border-radius: 50%;
123+
cursor: pointer;
124+
}
125+

‎src/js/1shortcuts/shortcuts.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// shortcuts.js
2+
3+
function ge(whichId)
4+
{
5+
let result = document.getElementById(whichId);
6+
return result;
7+
}
8+
9+
function ce(whichType)
10+
{
11+
let result = document.createElement(whichType);
12+
return result;
13+
}
14+
15+
function ba(whichElement)
16+
{
17+
let result = document.body.append(whichElement);
18+
return result;
19+
}
20+
21+
function cl(whichMessage)
22+
{
23+
let result = console.log(whichMessage);
24+
return result;
25+
}
26+
27+
function ct(whichText)
28+
{
29+
let result = document.createTextNode(whichText);
30+
return result;
31+
}
32+
33+
function gr(whichId)
34+
{
35+
let result = ge(whichId).getBoundingClientRect();
36+
return result;
37+
}
38+
39+
//----//
40+
41+
// Dedicated to God the Father
42+
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2025
43+
// https://github.com/ChristopherTopalian
44+
// https://github.com/ChristopherAndrewTopalian
45+
// https://sites.google.com/view/CollegeOfScripting
46+

‎src/js/2worldVariables/worldVariables.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// worldVariables.js
2+
3+
let counter = 1;
4+
5+
let timerId;
6+
7+
let fps = 1000 / 5;
8+
9+
//----//
10+
11+
// Dedicated to God the Father
12+
// All Rights Reserved Christopher Andrew Topalian Copyright 2000-2025
13+
// https://github.com/ChristopherTopalian
14+
// https://github.com/ChristopherAndrewTopalian
15+
// https://sites.google.com/view/CollegeOfScripting
16+

0 commit comments

Comments
 (0)