TechHack3 · AbiFranklin · Oct 2, 2023 · Oct 2, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js
@@ -1,8 +1,8 @@
 contributors = [
   {
     id: 1,
-    fullname: "sample 1",
-    username: "https://github.com/TechHack3",
+    fullname: "Abi Franklin",
+    username: "https://github.com/AbiFranklin",
   },
    {
     id: 2,

diff --git a/projects/Dice Roller/index.html b/projects/Dice Roller/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dice Roller</title>
+    <link rel="stylesheet" href="main.css">
+    <script src="main.js" defer></script>
+    <!-- Defer attribute to make sure document is loaded before executing JS -->
+</head>
+
+<body>
+    <div class="dice-container"></div>
+    <div class="row"><h1>Total:&nbsp;</h1><h1 class="total"></h1></body></div>
+    <div class="dice-inputs">
+        <label for="numberOfDice">Number of Dice</label>
+        <input class="numberOfDice" name="numberofDice" />
+
+        <label for="dieSize">Choose a size:</label>
+
+        <select name="diesizes" id="dieSize">
+            <option value="d4">D4</option>
+            <option value="d6">D6</option>
+            <option value="d10">D10: 1-10</option>
+            <option value="d100">D10: 10-100</option>
+            <option value="d12">D12</option>
+            <option value="d20">D20</option>
+        </select>
+        <label for="modifier">Modifier</label>
+        <input class="modifier" name="modifier" />
+    </div>
+    <div class="row"><button type="button" class="btn-roll-dice">Roll Dice</button>&nbsp;<button type="button" class="reset">Reset</button></div>
+</body>
+
+</html>
diff --git a/projects/Dice Roller/main.css b/projects/Dice Roller/main.css
@@ -0,0 +1,73 @@
+body {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+.row {
+    display: flex;
+}
+
+.dice-container {
+    display: flex;
+}
+
+.die {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    margin: 10px;
+    font-size: 56px;
+    color: black;
+    font-weight: bold;
+    text-align: center;
+    line-height: 80px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    text-shadow: 4px 4px 10px grey;
+}
+
+
+.d4 {
+    opacity: .7;
+    background-image: url("./src/D4.png");
+  }
+
+  .d6 {
+    opacity: .7;
+    background-image: url("./src/D6.png");
+  }
+
+  .d8 {
+    opacity: .7;
+    background-image: url("./src/D8.png");
+  }
+
+  .d10 {
+    opacity: .7;
+    background-image: url("./src/D10.png");
+  }
+
+  .d12 {
+    opacity: .7;
+    background-image: url("./src/D12.png");
+  }
+
+  .d20 {
+    opacity: .7;
+    background-image: url("./src/D20.png");
+  }
+
+.dice-inputs {
+    margin-top: 10px;
+
+}
+
+.numberOfDice {
+    width: 80px;
+}
+
+.btn-roll-dice, .reset {
+    margin-top: 10px;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+
+}
diff --git a/projects/Dice Roller/main.js b/projects/Dice Roller/main.js
@@ -0,0 +1,92 @@
+const diceContainer = document.querySelector(".dice-container");
+const btnRollDice = document.querySelector(".btn-roll-dice");
+const reset = document.querySelector(".reset");
+const total = document.querySelector(".total");
+
+
+//Initial set of all 0 dice
+function initialize() {
+    diceContainer.innerHTML = "";
+    const dice4 = createDice('R');
+    dice4.classList.add("d4")
+    diceContainer.appendChild(dice4);
+    const dice6 = createDice('O');
+    dice6.classList.add("d6")
+    diceContainer.appendChild(dice6);
+    const dice8 = createDice("L");
+    dice8.classList.add("d8")
+    diceContainer.appendChild(dice8);
+    const dice10 = createDice("L");
+    dice10.classList.add("d10")
+    diceContainer.appendChild(dice10);
+    const dice12 = createDice("E");
+    dice12.classList.add("d12")
+    diceContainer.appendChild(dice12);
+    const dice20 = createDice("M");
+    dice20.classList.add("d20")
+    diceContainer.appendChild(dice20);
+    total.innerText = 0
+}
+
+initialize()
+
+
+
+function createDice(number) {
+    const die = document.createElement("div");
+    die.classList.add("die")
+    die.innerText = number;
+
+    return die;
+}
+
+function randomizeDice(diceContainer, numberOfDice, size) {
+    diceContainer.innerHTML = "";
+    total.innerText = null;
+    let diceTotal = 0
+    const modifier = parseInt(document.querySelector(".modifier").value);
+    for (let i = 0; i < numberOfDice; i++) {
+        let faces = size.split("d")[1]
+        if (faces == 100) {
+            let random = Math.round((Math.random() * (100 - 10) + 10) / 10) * 10;
+            let dice = createDice(random);
+            faces = 10;
+            dice.classList.add(`d${faces}`)
+            diceContainer.appendChild(dice);
+            diceTotal += random;
+        } else {
+            let random = Math.floor((Math.random() * faces) + 1);
+            let dice = createDice(random);
+            dice.classList.add(`d${faces}`)
+            diceContainer.appendChild(dice);
+            diceTotal += random;
+        }
+    }
+    if (modifier > -1) {
+        const die = document.createElement("div");
+        die.classList.add("die")
+        die.innerText = `+${modifier}`;
+        diceContainer.appendChild(die);
+    } else {
+        diceContainer.appendChild(createDice(modifier))
+    }
+    diceTotal += modifier
+    total.innerText = diceTotal
+}
+
+btnRollDice.addEventListener("click", () => {
+    if (document.querySelector(".numberOfDice").value) {
+        let numberOfDice = document.querySelector(".numberOfDice").value
+        let dieSize = document.getElementById("dieSize").value;
+        randomizeDice(diceContainer, numberOfDice, dieSize);
+    } else {
+        alert("Please enter the number of dice you wish to roll.")
+    }
+})
+
+reset.addEventListener("click", () => {
+    initialize()
+    document.querySelector(".numberOfDice").value = null;
+    document.getElementById("dieSize").value = "d4";
+    document.querySelector(".modifier").value = null;
+})
diff --git a/projects/Dice Roller/src/D10.png b/projects/Dice Roller/src/D10.png
diff --git a/projects/Dice Roller/src/D12.png b/projects/Dice Roller/src/D12.png
diff --git a/projects/Dice Roller/src/D20.png b/projects/Dice Roller/src/D20.png
diff --git a/projects/Dice Roller/src/D4.png b/projects/Dice Roller/src/D4.png
diff --git a/projects/Dice Roller/src/D6.png b/projects/Dice Roller/src/D6.png
diff --git a/projects/Dice Roller/src/D8.png b/projects/Dice Roller/src/D8.png