Domů Procházet Nápověda
Registrovat se Přihlásit se
lee
/
leemorgan-dev
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Procházet zdrojové kódy

Add birthday paradox to projects.

Lee Morgan před 5 roky
rodič
61ecce60f2
revize
55f2ce986b
6 změnil soubory, kde provedl 184 přidání a 1 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 7 1
      routes.js
  2. 71 0
      views/birthdayParadox/index.css
  3. 30 0
      views/birthdayParadox/index.html
  4. 70 0
      views/birthdayParadox/index.js
  5. binární
      views/images/birthday.jpg
  6. 6 0
      views/main/index.html

+ 7 - 1
routes.js
Zobrazit soubor 

@@ -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`)});
 
 }

+ 71 - 0
views/birthdayParadox/index.css
Zobrazit soubor 

@@ -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);
 
+    }

+ 30 - 0
views/birthdayParadox/index.html
Zobrazit soubor 

@@ -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>

+ 70 - 0
views/birthdayParadox/index.js
Zobrazit soubor 

@@ -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();

binární
views/images/birthday.jpg
Zobrazit soubor


+ 6 - 0
views/main/index.html
Zobrazit soubor 

@@ -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;">