sahandghavidel · imrozkhan205 · Sep 18, 2024
diff --git a/projects/dice-roller/dice_images/Dice-1.png b/projects/dice-roller/dice_images/Dice-1.png
diff --git a/projects/dice-roller/dice_images/Dice-2.svg.png b/projects/dice-roller/dice_images/Dice-2.svg.png
diff --git a/projects/dice-roller/dice_images/Dice-3.svg.png b/projects/dice-roller/dice_images/Dice-3.svg.png
diff --git a/projects/dice-roller/dice_images/Dice-4.svg.png b/projects/dice-roller/dice_images/Dice-4.svg.png
diff --git a/projects/dice-roller/dice_images/Dice-5.svg.png b/projects/dice-roller/dice_images/Dice-5.svg.png
diff --git a/projects/dice-roller/dice_images/Dice-6.svg.png b/projects/dice-roller/dice_images/Dice-6.svg.png
diff --git a/projects/dice-roller/index.html b/projects/dice-roller/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css" >
+
+    <title>Document</title>
+</head>
+<body>
+    <div id="container" >
+        <h1>Dice Roller </h1>
+            <label># of dice:</label>
+            <input type="number" id="numOfDice"  value="1" min="1">
+            <button onclick="rollDice()" >Roll Dice</button>
+            <div id="diceResult"></div>
+            <div id="diceImages"></div>
+    </div>
+    <script src="script.js" ></script>
+</body>
+</html>
diff --git a/projects/dice-roller/script.js b/projects/dice-roller/script.js
@@ -0,0 +1,16 @@
+function rollDice(){
+    const numOfDice = document.getElementById("numOfDice").value;
+    const diceResult = document.getElementById("diceResult");
+    const diceImages = document.getElementById("diceImages");
+    const values = [];
+    const images = [];
+
+    for(let i = 0;i < numOfDice;i++){
+        const value = Math.floor(Math.random()*6)+1;
+        values.push(value);
+        images.push(`<img src="dice-images/${value}.png">`);    
+        }
+
+        diceResult.textContent = `dice: ${values.join(', ')}`;
+        diceImages.innerHTML = images.join('');
+    }
diff --git a/projects/dice-roller/styles.css b/projects/dice-roller/styles.css
@@ -0,0 +1,30 @@
+#container{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+
+}
+button{
+    font-size: 1.5rem;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    padding: 10px 15px;
+    border-radius: 10px;
+    border: none;
+    color: rgb(37, 37, 37);
+    font-weight:500;
+    cursor: pointer;
+    background: linear-gradient(to left bottom, lightgreen, lightblue);   
+}
+button:hover{
+    background:linear-gradient(to left bottom, rgb(104, 246, 104), rgb(139, 223, 250));
+}
+button:active{
+    background:linear-gradient(to left bottom, rgb(158, 235, 158), rgb(179, 224, 240)); 
+}
+input{
+    font-size: 2rem;
+    width: 150px;
+    text-align: center;
+    font-weight: bold;
+}
diff --git a/random-password-generator/index.html b/random-password-generator/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css" >
+    <script src="script.js" ></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/random-password-generator/script.js b/random-password-generator/script.js
@@ -0,0 +1,39 @@
+function generatePassword(length, includeLowercase, includeNumbers, includeSymbols, includeUppercase){
+    const lowercaseChars = "abscdefghijklopqrstuvwxyz";
+    const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+    const numberChars = "0123456789"
+    const symbolChars = "@._&";
+    let allowedChars = " ";
+    let password = "";
+    allowedChars += includeLowercase ? lowercaseChars: ""; 
+    allowedChars += includeUppercase ? uppercaseChars: ""; 
+    allowedChars += includeNumbers ? numberChars:"";
+    allowedChars += includeSymbols ? symbolChars:"";
+    console.log(allowedChars);
+    if(length <= 0){
+        return `(password length must be at least 1)`;
+    }
+    if(allowedChars.length === 0){
+        return `(At least 1 char needs to be selected)`
+    }
+    for(let i = 0; i<length; i++){
+        const randomIndex = Math.floor(Math.random() * allowedChars.length);
+        password += allowedChars[randomIndex];
+    }
+
+    return password;
+}
+
+
+const passwordLength = 12;
+const includeLowercase = true;
+const includeUppercase = true;
+const includeNumbers = true;
+const includeSymbols = true;
+
+const password = generatePassword(passwordLength, includeLowercase, 
+    includeNumbers,
+    includeUppercase,
+    includeSymbols);
+
+console.log(`Generated Password:${password}`);
diff --git a/random-password-generator/styles.css b/random-password-generator/styles.css