diff --git a/assets/main.css b/assets/main.css
new file mode 100644
index 0000000..6fddbae
--- /dev/null
+++ b/assets/main.css
@@ -0,0 +1,125 @@
+body{
+ background: rgb(102,208,40);
+background: linear-gradient(0deg, rgba(102,208,40,1) 0%, rgba(255,239,0,1) 100%);
+}
+
+g{
+ transition: all .2s;
+ stroke-dasharray: 290;
+ stroke-dashoffset: -40;
+ animation: g 3s linear forwards;
+}
+svg g{
+ opacity: 1;
+ transition: all 3s;
+}
+.removeElement{
+ opacity: 0.3;
+ transition: all 3s;
+}
+g line{
+ stroke-width: 1px;
+ fill: #333;
+ stroke: #555;
+ transition: all .2s;
+ stroke-dasharray: 250;
+ stroke-dashoffset: -30;
+ animation: dash 3s linear forwards;
+}
+.line-delete{
+ transition: all .2s;
+ stroke-dasharray: 250;
+ stroke-dashoffset: 5;
+ animation: animationDelete 3s linear alternate;
+}
+.line-delete ellipse{
+ stroke: red;
+}
+.line-won{
+ transition: all .2s;
+ stroke-dasharray: 640;
+ stroke-dashoffset: 982;
+ animation: animationWon 3s linear alternate;
+}
+.g-won{
+ stroke: red;
+ transition: all .2s;
+ stroke-dasharray: 200;
+ stroke-dashoffset: 50;
+ animation: gWon 3s cubic-bezier(0.55, 0.06, 0.68, 0.19) alternate;
+}
+
+g{
+ stroke: red;
+ fill: red;
+ transition: all .2s;
+ z-index: 111;
+}
+
+:not(svg) {
+ transform-origin: 0px 0px;
+}
+
+.d-none{
+ display:none;
+ transition: all .2s;
+}
+@keyframes dash {
+ from{
+ stroke-dasharray: 5;
+ stroke-dashoffset: -40;
+ }
+ to {
+ stroke-dasharray: 290;
+ stroke-dashoffset: -40;
+ }
+}
+@keyframes g {
+ from {
+ stroke-dasharray: 5;
+ stroke-dashoffset: 25;
+ }
+ to {
+ stroke-dasharray: 250;
+ stroke-dashoffset: 0;
+ }
+}
+@keyframes animationDelete {
+ from {
+ stroke-dasharray: 5;
+ stroke-dashoffset: 25;
+ }
+ to {
+ stroke-dasharray: 250;
+ stroke-dashoffset: 0;
+ stroke: red;
+ }
+}
+
+@keyframes animationWon{
+ from{
+ stroke-dasharray: 5;
+ stroke-dashoffset: 25;
+ }
+ to{
+ stroke-dasharray: 640;
+ stroke-dashoffset: 982;
+ }
+}
+@keyframes gWon{
+ from{
+ stroke-dasharray: 5;
+ stroke-dashoffset: 25;
+ }
+ to{
+ stroke-dasharray: 200;
+ stroke-dashoffset: 50;
+ }
+}
+
+.selectRange{
+ position: absolute;
+ top: 0;
+ left: 80px;
+ transform: rotate(90deg)!important;
+}
diff --git a/assets/main.js b/assets/main.js
new file mode 100644
index 0000000..37879e6
--- /dev/null
+++ b/assets/main.js
@@ -0,0 +1,87 @@
+var inputControl = false;
+ const sleep = (milliseconds) => {
+ return new Promise(resolve => setTimeout(resolve, milliseconds))
+ }
+ function josephProblemJs(l, d, controlVal){
+ let people = [];
+ let deathPeople = [];
+ var homosapiensSpace = 360 / controlVal;
+ for (let i = 1; i <= l; i++){
+ people.push(i);
+ }
+
+ /*People Add Place - Start*/
+ const addPeople = async (callback) => {
+ var yazdir = 1;
+ for(let peopleSvg = 0; peopleSvg < 360; peopleSvg +=homosapiensSpace){
+ $('.cloneLine').clone().removeClass('cloneLine d-none').appendTo( "#ekle" ).attr('transform', "rotate("+ (peopleSvg+10)+", 500, 500)");
+ if(yazdir < 10){
+ $('#ekle g:nth-child('+yazdir+') text[text-anchor]').attr('x','35')
+ }else{
+ $('#ekle g:nth-child('+yazdir+') text[text-anchor]').attr('x','30')
+ }
+ $('#ekle g:nth-child('+yazdir+') text[text-anchor]').text(yazdir)
+ yazdir = yazdir+1;
+ await sleep(20)
+ }
+ callback();
+ }
+ /*People Add Place - Finish*/
+
+ while (people.length !== 1) {
+ for (let i = 1; i < d; i++) {
+ people.push(people.shift());
+ /* console.log(people) */
+ $('#ekle g:nth-child('+i+') text[text-anchor]').text(i)
+ }
+ deathPeople.push(people.shift());
+ /* console.log(deathPeople) */
+
+ }
+
+ var time = 3000;
+ const removePeople = async (callback) => {
+ for(var i= 0; i < deathPeople.length; i++){
+ await sleep(time)
+ $('#ekle g:nth-child('+deathPeople[i]+')').addClass("line-delete removeElement")
+ time = 200;
+ }
+ callback();
+ }
+
+
+ addPeople(removePeople);
+
+ const wonPerson = async (callback) => {
+ await sleep(1000)
+ $('#ekle g:nth-child('+people[0]+')').addClass('g-won');
+ $('#ekle g:nth-child('+people[0]+') ellipse').addClass('g-won').attr('cx','300')
+ $('#ekle g:nth-child('+people[0]+') line').addClass('line-won')
+ $('#ekle g:nth-child('+people[0]+') text[text-anchor]').addClass('line-won').attr('x','295').attr('transform', 'rotate(213 300, 500)')
+ $('#peopleRange').removeAttr('disabled');
+ callback();
+ }
+
+ removePeople(wonPerson);
+
+
+ /* console.log("Death order is " + deathPeople.join(" ")); */
+ return people[0]; //survivor
+ }
+ $('.josephBtn').click(function(){
+ $('#ekle').html('')
+ var inputControl = $('#inputJoseph').val();
+ /* console.log("Hayatta kalan = " + josephProblemJs(inputControl, 2)) */
+ josephProblemJs(inputControl, 2, inputControl)
+ })
+ $('#peopleRange').click(function(){
+ $('#peopleRange').attr('disabled', 'disabled');
+ $('#ekle').html('');
+ var rangeVal = $(this).val();
+
+ josephProblemJs(rangeVal, 2, rangeVal)
+ console.log(inputControl)
+ if(inputControl == true){
+ $(this).attr('disabled');
+ }
+ })
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fe5fa9c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+ Josephus Problem | Fun solution with Javascript
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+