html
html
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
<!DOCTYPE html>
<html>
<head>
<title>React-Template</title>
<!--
author: Burey
date: 30/09/2017
description: React.js template including redux and axios CDN links
how to use:
keep all of your JSX code inside the script tag in the JS tab
-->
</head>
<body>
<div id="loader" class="fade">
<h1>Loading...</h1>
</div>
<div id="root"></div>
<!--
babel polyfill are required for older devices to run React
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<!--
it is important that the scripts come after the loader div element.
without this the loader will not show as the program will be busy loading the scripts and transpiling any JSX code we have in the Javascript tab and we'll end up with a long white loading screen and no indication if the app is even running.
Enter to Rename, Shift+Enter to Preview
css
css
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
#root {
width:100%;
display:flex;
justify-content:center;
}
.Container {
display:flex;
background: black;
justify-content:center;
text-align:center;
flex-direction:row;
}
.Input {
flex:1;
width:250px;
margin:25px;
height:100px;
}
.Number {
width:40px;
height:20px;
margin-top:65px;
}
@media only screen and (max-width:700px) {
.Container {
flex-direction:column;
}
.Number {
Enter to Rename, Shift+Enter to Preview
js
js
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
//</script><script type="text/babel">
document.getElementById("loader").style.display = "none";
class App extends React.Component {
constructor(props){
super(props);
this.state = {
normal:'',
caesar:'',
shift:0
}
}
handleChange(e) {
const str = e.target.value;
const caesar = str.split("").map(x=> {
const y = Number(x.charCodeAt(0));
const z = Number(this.state.shift);
if((y>=65&&y<=90)||(y>=97&&y<=122)) {
if((y+z>=65&&y+z<=90)||(y+z>=97&&y+z<=122)) {
return String.fromCharCode(y+z);
} else if (y>=65&&y<=90&&y+z>90) {
return String.fromCharCode(64+y+z-90);
} else if ((y>=97&&y<=122&&y+z>122)) {
return String.fromCharCode(96+y+z-122);
}
} else {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run