5 yıl önce · 55f2ce986b
--- a/routes.js
+++ b/routes.js
@@ -13,9 +13,15 @@ module.exports = function(app){
 
				     app.get("/images/subline", (req, res)=>{res.sendFile(`${views}/images/subline.png`)});
			
 
				     app.get("/images/budgeteer", (req, res)=>{res.sendFile(`${views}/images/budgeteer.jpeg`)});
			
 
				     app.get("/images/sudoku", (req, res)=>{res.sendFile(`${views}/images/sudoku.png`)});
			
 
				+    app.get("/images/birthday", (req, res)=>{res.sendFile(`${views}/images/birthday.jpg`)});
			
 
				 
			
 
				-    //Sudoku
			
 
				+    //SUDOKU
			
 
				     app.get("/sudoku", (req, res)=>{res.sendFile(`${views}/sudoku/index.html`)});
			
 
				     app.get("/sudoku/style", (req, res)=>{res.sendFile(`${views}/sudoku/index.css`)});
			
 
				     app.get("/sudoku/code", (req, res)=>{res.sendFile(`${views}/sudoku/index.js`)});
			
 
				+
			
 
				+    //BIRTHDAY PARADOX
			
 
				+    app.get("/birthdayparadox", (req, res)=>{res.sendFile(`${views}/birthdayParadox/index.html`)});
			
 
				+    app.get("/birthdayparadox/style", (req, res)=>{res.sendFile(`${views}/birthdayParadox/index.css`)});
			
 
				+    app.get("/birthdayparadox/code", (req, res)=>{res.sendFile(`${views}/birthdayParadox/index.js`)});
			
 
				 }
			
--- a/views/birthdayParadox/index.css
+++ b/views/birthdayParadox/index.css
@@ -0,0 +1,71 @@
 
				+body{
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+}
			
 
				+
			
 
				+    body > *{
			
 
				+        margin: 15px;
			
 
				+    }
			
 
				+
			
 
				+.text{
			
 
				+    max-width: 75vw;
			
 
				+    font-size: 20px;
			
 
				+}
			
 
				+
			
 
				+.interactive{
			
 
				+    display: flex;
			
 
				+    justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+    .interactive > *{
			
 
				+        margin: 10px;
			
 
				+    }
			
 
				+
			
 
				+    .button{
			
 
				+        border: 3px solid black;
			
 
				+        font-weight: bold;
			
 
				+        font-size: 20px;
			
 
				+        box-shadow: 5px 5px 5px gray;
			
 
				+        transition: 0.4s;
			
 
				+        transition: transform 0s;
			
 
				+        padding: 5px;
			
 
				+        cursor: pointer;
			
 
				+    }
			
 
				+
			
 
				+        .button:hover{
			
 
				+            background: black;
			
 
				+            border: 3px solid white;
			
 
				+            color: white;
			
 
				+        }
			
 
				+
			
 
				+        .button:active{
			
 
				+            transform: translateY(3px);
			
 
				+            box-shadow: 3px 3px 3px black;
			
 
				+        }
			
 
				+
			
 
				+    #partiers{
			
 
				+        text-align: center;
			
 
				+        font-size: 20px;
			
 
				+        max-width: 75px;
			
 
				+    }
			
 
				+
			
 
				+#datesDiv{
			
 
				+    display: flex;
			
 
				+    justify-content: space-around;
			
 
				+    flex-wrap: wrap;
			
 
				+}
			
 
				+
			
 
				+    .date{
			
 
				+        min-width: 100px;
			
 
				+        border: 2px solid black;
			
 
				+        text-align: center;
			
 
				+        margin: 25px;
			
 
				+        padding: 25px;
			
 
				+    }
			
 
				+
			
 
				+    .match{
			
 
				+        background: rgb(0, 91, 188);
			
 
				+        color: rgb(255, 214, 0);
			
 
				+        border: 2px solid rgb(255, 214, 0);
			
 
				+    }
			
--- a/views/birthdayParadox/index.html
+++ b/views/birthdayParadox/index.html
@@ -0,0 +1,30 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <meta charset="utf-8">
			
 
				+        <title>Birthday Paradox</title>
			
 
				+        <meta charset="utf-8">
			
 
				+        <link rel="stylesheet" href="/birthdayparadox/style">
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <h1>The Birthday Paradox</h1>
			
 
				+        
			
 
				+        <p class="text"><a href="https://en.m.wikipedia.org/wiki/Birthday_problem" target="_blank">The birthday paradox</a> is the idea that if there are 23 people in a room, there is about a 50% chance that two people in the room have the same birthday.  While counterintuitive it is very true.  This page shows this by creating random "birthdays" and then showing the matches, if any.  Play around with the number of people to see different odds.</p>
			
 
				+
			
 
				+        <p class="text">Watch an explanation <a href="https://www.youtube.com/watch?v=ofTb57aZHZs" target="_blank">here</a>.</p>
			
 
				+
			
 
				+        <div class="interactive">
			
 
				+            <label>Number of people:
			
 
				+                <input id="partiers" type="number" step="1">
			
 
				+            </label>
			
 
				+
			
 
				+            <button id="tryAgain" class="button">Try Again</button>
			
 
				+        </div>
			
 
				+
			
 
				+        <h3></h3>
			
 
				+
			
 
				+        <div id="datesDiv"></div>
			
 
				+
			
 
				+        <script src="/birthdayparadox/code"></script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/views/birthdayParadox/index.js
+++ b/views/birthdayParadox/index.js
@@ -0,0 +1,70 @@
 
				+let partiers = 23;
			
 
				+let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
			
 
				+
			
 
				+display = ()=>{
			
 
				+    let datesDiv = document.querySelector("#datesDiv");
			
 
				+
			
 
				+    document.querySelector("#partiers").value = partiers;
			
 
				+
			
 
				+    while(datesDiv.children.length > 0){
			
 
				+        datesDiv.removeChild(datesDiv.firstChild);
			
 
				+    }
			
 
				+
			
 
				+    let nums = [];
			
 
				+    for(let i = 0; i < partiers; i++){
			
 
				+        let num = Math.floor((Math.random() * 366) + 1);
			
 
				+        if(num === 60){
			
 
				+            i--;
			
 
				+        }else{
			
 
				+            nums.push(num);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    let matches = [];
			
 
				+    for(let i = 0; i < nums.length; i++){
			
 
				+        for(let j = i + 1; j < nums.length; j++){
			
 
				+            if(nums[i] === nums[j]){
			
 
				+                matches.push(nums[i]);
			
 
				+                break;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    for(let num of nums){
			
 
				+        let date = new Date(2020, 0);
			
 
				+        date = new Date(date.setDate(num));
			
 
				+
			
 
				+        let para = document.createElement("p");
			
 
				+        para.classList = "date";
			
 
				+        para.innerText = `${months[date.getMonth()]} ${date.getDate()}`;
			
 
				+        datesDiv.appendChild(para);
			
 
				+
			
 
				+        for(let match of matches){
			
 
				+            if(match === num){
			
 
				+                para.classList += " match";
			
 
				+                break;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    calculateChance();
			
 
				+},
			
 
				+
			
 
				+calculateChance = ()=>{
			
 
				+    let chance = document.querySelector("h3");
			
 
				+    let input = document.querySelector("#partiers");
			
 
				+    
			
 
				+    partiers = input.value;
			
 
				+    
			
 
				+
			
 
				+    let percent = 1
			
 
				+    for(let i = 1; i < partiers; i++){
			
 
				+        percent *= (365 - i) / 365;
			
 
				+    }
			
 
				+
			
 
				+    chance.innerText = `${((1 - percent) * 100).toFixed(4)}% chance of a match`;
			
 
				+}
			
 
				+
			
 
				+document.getElementById("partiers").onchange = ()=>{calculateChance()};
			
 
				+document.getElementById("tryAgain").onclick = ()=>{display()};
			
 
				+display();
			
--- a/views/images/birthday.jpg
+++ b/views/images/birthday.jpg
--- a/views/main/index.html
+++ b/views/main/index.html
@@ -98,6 +98,12 @@
 
				                     <img src="/images/sudoku" alt="Sudoku">
			
 
				                     <p>Stuck on a particularly difficult game of sudoku? Enter any sudoku puzzle and have it solved immediately.</p>
			
 
				                 </a>
			
 
				+
			
 
				+                <a class="card" href="/birthdayparadox">
			
 
				+                    <h2>The Birthday Paradox</h2>
			
 
				+                    <img src="/images/birthday" alt="Birthday Hat">
			
 
				+                    <p>A demonstration of the counterintuitive birthday paradox.</p>
			
 
				+                </a>
			
 
				             </div>
			
 
				 
			
 
				             <div id="about" style="display:none;">