Главная Обзор Помощь
Регистрация Вход
lee
/
leemorgan-dev
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

Add birthday paradox to projects.

Lee Morgan 5 лет назад
Родитель
61ecce60f2
Сommit
55f2ce986b
6 измененных файлов с 184 добавлено и 1 удалено
Единый вид Показать статистику Diff
  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
      views/images/birthday.jpg
  6. 6 0
      views/main/index.html

+ 7 - 1
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/subline", (req, res)=>{res.sendFile(`${views}/images/subline.png`)});
 
     app.get("/images/budgeteer", (req, res)=>{res.sendFile(`${views}/images/budgeteer.jpeg`)});
 
     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/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", (req, res)=>{res.sendFile(`${views}/sudoku/index.html`)});
 
     app.get("/sudoku/style", (req, res)=>{res.sendFile(`${views}/sudoku/index.css`)});
 
     app.get("/sudoku/style", (req, res)=>{res.sendFile(`${views}/sudoku/index.css`)});
 
     app.get("/sudoku/code", (req, res)=>{res.sendFile(`${views}/sudoku/index.js`)});
 
     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
Просмотреть файл 

@@ -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
Просмотреть файл 

@@ -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
Просмотреть файл 

@@ -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
views/images/birthday.jpg
Просмотреть файл


+ 6 - 0
views/main/index.html
Просмотреть файл 

@@ -98,6 +98,12 @@
 
                     <img src="/images/sudoku" alt="Sudoku">
 
                     <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>
 
                     <p>Stuck on a particularly difficult game of sudoku? Enter any sudoku puzzle and have it solved immediately.</p>
 
                 </a>
 
                 </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>
 
 
 
             <div id="about" style="display:none;">
 
             <div id="about" style="display:none;">