JS Projects Archive

A collection of personal mini projects

Mini Linter

Task: Pseudo Word processing software - to improve the quality of a paragraph and gather some information about that paragraph.

Skill: Iterate over arrays

let story = 'Last weekend, I took literally the most beautiful bike ride of my life. The route is called "The 9W to Nyack" and it actually stretches all the way from Riverside Park in Manhattan to South Nyack, New Jersey. It\'s really an adventure from beginning to end! It is a 48 mile loop and it basically took me an entire day. I stopped at Riverbank State Park to take some extremely artsy photos. It was a short stop, though, because I had a really long way left to go. After a quick photo op at the very popular Little Red Lighthouse, I began my trek across the George Washington Bridge into New Jersey.  The GW is actually very long - 4,760 feet! I was already very tired by the time I got to the other side.  An hour later, I reached Greenbrook Nature Sanctuary, an extremely beautiful park along the coast of the Hudson.  Something that was very surprising to me was that near the end of the route you actually cross back into New York! At this point, you are very close to the end.';
//sample text to filter, story

const storyWords = story.split(' ');

let overusedWords = ['really', 'very', 'basically'];
let unnecessaryWords = ['extremely', 'literally', 'actually' ];
// Now to filter out unnecesary words, elements thats true goes to new array
let filteredWords = storyWords.filter(function(word) {
  return !unnecessaryWords.includes(word)
  //<name of list you WANT>.includes(<NAME OF ARRAY TO FILTER>
  //grab words NOT included in unneccesary words, include ! sign
})

//to let user know how many times they have overused words
let countWord = (i =>{
  count = 0;
  for (j in overusedWords){
    if(j===i){
      count ++
    } else {
      return count
    }
  }
})

console.log(filteredWords);

Number Guesser Game

Task: User input number from 0-9, computer random gen 0-9, secret target established, whoever closer to secret number wins

Comprises of 4 files, game.js, script.js (main game logic), index.html and css

//script.js
let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// generate target 0-9
const generateTarget = () =>{
  return Math.floor(Math.random()*10);
}

//verify who wins
const compareGuesses = (human,com,secretnum) =>{
//get the absolute differences btwn human, comp and secretnum
let diffhuman = Math.abs(human - secretnum);
let diffcom = Math.abs(com - secretnum);
  if(diffhuman < diffcom ){
    return true;
  } else if (diffhuman == diffcom) {
    return true;
  } else {
    return false;
  }}

//Score increases with each win
const updateScore = (i) =>{
  if (i == 'human'){
    humanScore +=1;
  } else if(i =='computer'){
    computerScore +=1;
  }
}

//round number updates
const advanceRound = () =>{
  currentRoundNumber +=1
}

// game.js
let target;

const humanGuessInput = document.getElementById('human-guess');

const roundNumberDisplay = document.getElementById('round-number');

const computerGuessDisplay = document.getElementById('computer-guess');
const humanScoreDisplay = document.getElementById('human-score');
const computerScoreDisplay = document.getElementById('computer-score');
const targetNumberDisplay = document.getElementById('target-number');
const computerWinsDisplay = document.getElementById('computer-wins');

const guessButton = document.getElementById('guess');
const nextRoundButton = document.getElementById('next-round')

guessButton.addEventListener('click', () => {
  // Generate the target value
  target = generateTarget();
  // Retrieve the player's guess
  const currentHumanGuess = humanGuessInput.value;
  // Make a random 'computer guess'
  const computerGuess = Math.floor(Math.random() * 10);

  // Display the computer guess and the target
  computerGuessDisplay.innerText = computerGuess;
  targetNumberDisplay.innerText = target;
  
  // Determine if the human or computer wins:
  const humanIsWinner = compareGuesses(currentHumanGuess, computerGuess, target)
  const winner = humanIsWinner ? 'human' : 'computer'

  // Update the correct score:
  updateScore(winner);

  // Display the winner
  if (humanIsWinner) {
    guessButton.innerText = 'You Win!!!!!';
    guessButton.classList.toggle('winning-text')
  } else {
    computerWinsDisplay.innerText = 'Computer Wins!!!';
  }

  // winnerDisplay.innerText = humanIsWinner ? 'You win!' : 'Computer wins!';

  // Display the current scores:
  humanScoreDisplay.innerText = humanScore;
  computerScoreDisplay.innerText = computerScore;
  
  // Set the correct disabled state for the buttons
  guessButton.setAttribute('disabled', true)
  nextRoundButton.removeAttribute('disabled');
});

nextRoundButton.addEventListener('click', () => {
  // Increase the round number
  advanceRound();
  // Display the new round number
  roundNumberDisplay.innerText = currentRoundNumber;

  // Set the correct disabled state for the buttons
  nextRoundButton.setAttribute('disabled', true);
  guessButton.removeAttribute('disabled');

  // Reset the guess input box and the target number display:
  targetNumberDisplay.innerText = '?';
  guessButton.innerText = 'Make a Guess';
  humanGuessInput.value = '';
  computerGuessDisplay.innerText = '?';
  computerWinsDisplay.innerText = '';
  guessButton.classList.remove('winning-text');
});

const addButton = document.getElementById('add');
const subtractButton = document.getElementById('subtract');

addButton.addEventListener('click', () => {
  humanGuessInput.value = +humanGuessInput.value + 1;
  handleValueChange(humanGuessInput.value);
});

subtractButton.addEventListener('click', () => {
  humanGuessInput.value = +humanGuessInput.value - 1;
  handleValueChange(humanGuessInput.value);
});

const handleValueChange = value => {
  if (value > 0 && value <= 9) {
    subtractButton.removeAttribute('disabled');
    addButton.removeAttribute('disabled');
  } else if (value > 9) {
    addButton.setAttribute('disabled', true);
  } else if (value <= 0) {
    subtractButton.setAttribute('disabled', true);
  }
}

humanGuessInput.addEventListener('input', function(e) {
  handleValueChange(e.target.value);
});

<!doctype html>

<html>
  <head>
    <title>Number Guesser</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div class="game-container">
      <header>
        <h1>Number Guesser!</h1>
      </header>
      
      <div class="rounds">
        <p class="round-label">Round <span id="round-number">1</span></p>
        <p class="guess-label">Target Number: <span id="target-number">?</span></p>
      </div>

      <div class="guessing-area">
        <div class="guess computer-guess">
          <div class="guess-title">
            <p class="guess-label">Computer</p>
            <p class="score-label">Score: <span id="computer-score">0</span></p>
          </div>
          <p id="computer-guess">?</p>
          <p class="winning-text" id="computer-wins"></p>
        </div>
        <div class="guess human-guess">
          <div class="guess-title">
            <p class="guess-label">You</p>
            <p class="score-label">Score: <span id="human-score">0</span></p>
          </div>
          <input type="number" id="human-guess" min=0 max=9 value=0>
          <div class="number-controls">
            <button class="number-control left" id="subtract" disabled>-</button>
            <button class="number-control right" id="add">+</button>
          </div>
          <button class="button" id="guess">Make a Guess</button>
        </div>
      </div>

      <div class="next-round-container">
        <button class="button" id="next-round" disabled>Next Round</button>
      </div>

    </div>
    
    <div class="instructions">
      <div class="instruction">
        <h3>Step 1</h3>
        <p>Input a number between 0 and 9</p>
      </div>
      <div class="instruction">
        <h3>Step 2</h3>
        <p>Click "Make a Guess" to submit your guess and see who won the round.</p>
      </div>
      <div class="instruction">
        <h3>Step 3</h3>
        <p>Click "Next Round" to play again.</p>
      </div>
    </div>

    <script src="./script.js"></script>
    <script src="./game.js"></script>
  </body>
</html>

* {
  font-family: 'Nunito Sans';
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 3px;
  background-color: #fff;
}

.game-container {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

header {
  display: flex;
  justify-content: center
}

.rounds {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.round-label {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 0px;
}

.guess {
  min-width: 303px;
  height: 328px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 19px;
}

.guessing-area {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-bottom: 60px;
}

.guess-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.guess-label {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.score-label {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.target-guess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.computer-guess {
  background-color: #ececec;
}

#computer-guess {
  font-size: 50px;
  font-weight: 700;
  color: #a5a5a5;
}

.human-guess {
  border: 1px solid #979797;
}

.guess input {
  height: 90px;
  width: 90px;
  font-size: 30px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 7px;
}

.number-controls {
  font-size: 0;
  margin-bottom: 23px;
}

.number-control {
  border: solid 1px #4c7ef3;
  display: inline-block;
  width: 45px;
  height: 35px;
  font-size: 24px;
  font-weight: 700;
  color: #4c7ef3;
  cursor: pointer;
}

.number-controls button[disabled] {
  color: #dfdfdf;
  cursor: default;
}

.left {
  border-top-left-radius: 22.5px;
  border-bottom-left-radius: 22.5px;
}

.right {
  border-top-right-radius: 22.5px;
  border-bottom-right-radius: 22.5px;
  border-left-width: 0px;
}

.controls {
  display: flex;
  justify-content: space-around;
}

.button {
  background-color: #4c7ef3;
  color: #fff;
  cursor: pointer;
}

#guess {
  padding: 20px;
  width: 169px;
  height: 59px;
  border: none;
  font-weight: 700;
  font-size: 14px;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#next-round {
  width: 179px;
  height: 64px;
  font-size: 18px;
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
  
.button[disabled] {
  background-color: #d2d2d2;
  color: #a0a0a0;
  cursor: default;
}

.instructions {
  background-color: #ececec;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.instruction {
  width: 180px;
  padding: 2px;
  text-align: center;
}

.instructions h3 {
  font-size: 14px;
}


.winning-text, .winning-text[disabled] {
  color: #ec3636;
  font-weight: 700;
}

Intermediate JS : Modules - Super - Encoder

1. Message-Mixer.js (Input Output Logic)

// Import the functions from encryptors.js here.
const encryptors = require('./encryptors.js')

//destructuring language
const { caesarCipher, symbolCipher, reverseCipher } = encryptors; 
// User Input / Output Logic
/////////////////////////////////////////////

const encryptionMethod = getEncryptionMethod();
process.stdin.on('data', (userInput) => {
  displayEncryptedMessage(encryptionMethod, userInput);
});

/* Helper function for determining which cipher method
the user chose when they ran the program. */
function getEncryptionMethod() {
  let encryptionMethod;
  
  const encryptionType = process.argv[2];  
  if (encryptionType === 'symbol') {
    encryptionMethod = symbolCipher;
  } else if (encryptionType === 'reverse') {
    encryptionMethod = reverseCipher;
  } else if (encryptionType === 'caesar') {
    let amount = Number(process.argv[3]);
    if (Number.isNaN(amount)) {
      process.stdout.write(`Try again with a valid amount argument. \n`)
      process.exit();  
    }
    encryptionMethod = (str) => caesarCipher(str, amount);
  } 
  else {
    process.stdout.write(`Try again with a valid encryption type. \n`)
    process.exit();
  }

  process.stdout.write('Enter the message you would like to encrypt...\n> ');
  return encryptionMethod;
}

/* Helper function for displaying the encrypted message to the user. */
function displayEncryptedMessage(encryptionMethod, userInput) {
  let str = userInput.toString().trim();    
  let output = encryptionMethod(str);
  process.stdout.write(`\nHere is your encrypted message:\n> ${output}\n`)
  process.exit();
}

2. Encryption Function encryptors.js

// Declare and export the functions here.
const caesarCipher = (str, amount = 0) => {
  if (amount < 0) {
    return caesarCipher(str, amount + 26);
  }
  let output = '';
  for (let i = 0; i < str.length; i++) {
    let char = str[i];
    if (char.match(/[a-z]/i)) {
      let code = str.charCodeAt(i);
      if (code >= 65 && code <= 90) {
        char = String.fromCharCode(((code - 65 + amount) % 26) + 65);
      } else if (code >= 97 && code <= 122) {
        char = String.fromCharCode(((code - 97 + amount) % 26) + 97);
      }
    }
    output += char;
  }
  return output;
};

const symbolCipher = (str) => {
  const symbols = {
    'i': '!',
    '!': 'i',
    'l': '1',
    '1': 'l',
    's': '$',
    '$': 's',
    'o': '0',
    '0': 'o',
    'a': '@',
    '@': 'a',
    'e': '3',
    '3': 'e',
    'b': '6',
    '6': 'b'
  }

  let output = '';
  for (let i = 0; i < str.length; i++) {
    let char = str.toLowerCase()[i];

    if (symbols[char]) {
      output += symbols[char]
    } else {
      output += char;
    }
  }
  return output;
}

const reverseCipher = (sentence) => {
  let words = sentence.split(' ');
  for (let i = 0; i < words.length; i++) {
    words[i] = words[i].split('').reverse().join('');
  }
   return words.join(' ');
};

module.exports.caesarCipher = caesarCipher;
module.exports.reverseCipher = reverseCipher;
module.exports.symbolCipher = symbolCipher;

3. super-encoder.js (Chaining encoding together)

// Import the encryptors functions here.
const encryptors = require('./encryptors.js');

const { caesarCipher, symbolCipher, reverseCipher } = encryptors;

const encodeMessage = (str) => {
  // Use the encryptor functions here.
  return reverseCipher(symbolCipher(caesarCipher(str,4)));
}

const decodeMessage = (str) => {
  // Use the encryptor functions here.
  return caesarCipher(symbolCipher(reverseCipher(str)), -4);
}

// User input / output.

const handleInput = (userInput) => {
  const str = userInput.toString().trim();
  let output;
  if (process.argv[2] === 'encode') {
    output = encodeMessage(str);
  } 
  if (process.argv[2] === 'decode') {
    output = decodeMessage(str);
  } 
  
  process.stdout.write(output + '\n');
  process.exit();
}

// Run the program.
process.stdout.write('Enter the message you would like to encrypt...\n> ');
process.stdin.on('data', handleInput);

Results