From 4be75693de8b461b75bddc7b1ae31ccc8995c846 Mon Sep 17 00:00:00 2001 From: Angela Yu <8798027+angelabauer@users.noreply.github.com> Date: Fri, 8 Mar 2024 12:14:01 +0000 Subject: [PATCH] Add files via upload --- index.html | 27 ++++++++++ index.js | 135 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/main.css | 61 ++++++++++++++++++++++ 3 files changed, 223 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 styles/main.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..8862918 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + Demo + + + +
+
Click to run the final project you will build.
+
+ +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..f9f7a68 --- /dev/null +++ b/index.js @@ -0,0 +1,135 @@ +//Current line +var CurrentId = undefined; + +var inputValues = []; +const inputPrompts = []; + +const logo = ` + / _ \\_ _ ___ ___ ___ /__ \\ |__ ___ /\\ \\ \\_ _ _ __ ___ | |__ ___ _ __ + / /_\\/ | | |/ _ \\/ __/ __| / /\\/ '_ \\ / _ \\ / \\/ / | | | '_ ' _ \\| '_ \\ / _ \\ '__| +/ /_\\\\| |_| | __/\\__ \\__ \\ / / | | | | __/ / /\\ /| |_| | | | | | | |_) | __/ | +\\____/ \\__,_|\\___||___/___/ \\/ |_| |_|\\___| \\_\\ \\/ \\__,_|_| |_| |_|_.__/ \\___|_| +`; + +const EASY_LEVEL_TURNS = 10; +const HARD_LEVEL_TURNS = 5; +let answer; +let turns; + +//Click Run +$(document).ready(function () { + $("#run-button").click(function () { + inputValues = []; + $("#Content").empty(); + restart(); + }); +}); + +function restart() { + answer = Math.floor(Math.random() * 100 + 1); + + NewLine(logo, false); + NewLine("Welcome to the Number Guessing Game!", false); + NewLine("I'm thinking of a number between 1 and 100.", false); + NewLine(`Pssst, the correct answer is ${answer}`); + NewLine("Choose a difficulty. Type 'easy' or 'hard': ", true); +} + +//Enter button +$(document).on("keydown", function (e) { + var x = event.which || event.keyCode; + if (x === 13 || x == 13) { + var consoleLine = $("#" + CurrentId + " input").val(); + inputValues.push({ id: CurrentId, val: consoleLine }); + + if (inputValues.length > 1) { + const guess = Number(inputValues[inputValues.length - 1].val); + if (guess != answer) { + turns -= 1; + + if (guess < answer) { + NewLine("Too low.", false); + } else if (guess > answer) { + NewLine("Too high.", false); + } + + if (turns == 0) { + $(".console-carrot").remove(); + NewLine("You've run out of guesses, you lose.", false); + return; + } else { + NewLine("Guess again.", false); + } + } else { + $(".console-carrot").remove(); + NewLine(`You got it! The answer was ${answer}.`, false); + return; + } + } else { + if (inputValues[0].val.toLowerCase().trim() == "easy") { + turns = 10; + } else if (inputValues[0].val.toLowerCase().trim() == "hard") { + turns = 5; + } + } + NewLine(`You have ${turns} attempts remaining to guess the number.`); + NewLine("Make a guess: ", true); + // $(".console-carrot").remove(); + // if (biddingShouldContinue) { + // NewLine(inputPrompts[inputValues.length - 1], true); + // } + } +}); +$(document).on("keydown", function (e) { + var x = event.which || event.keyCode; + var line = $("#" + CurrentId + " input"); + var length = line.val().length; + if (x != 8) { + line.attr("size", 1 + length); + } else { + line.attr("size", length * 0.95); + } + if (length === 0) { + $("#" + CurrentId + " input").attr("size", "1"); + } +}); +$(document).on("click", function (e) { + $("#" + CurrentId + " input").focus(); +}); + +//New line +function NewLine(text, isPrompt) { + $(".console-carrot").remove(); + if (CurrentId !== undefined) { + $("#" + CurrentId + " input").prop("disabled", true); + } + CurrentId = "consoleInput-" + GenerateId(); + + if (isPrompt) { + $("#Content").append( + //One Line + '
' + + text + + '
' + ); + $("#" + CurrentId + " input").focus(); + $("#" + CurrentId + " input").attr("size", "1"); + } else { + $("#Content").append('
' + text + "
"); + } + document.getElementById(CurrentId).scrollIntoView(); +} + +function GenerateId() { + return Math.random().toString(16).slice(2); +} + +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..214c38e --- /dev/null +++ b/styles/main.css @@ -0,0 +1,61 @@ +body { + background: #141414; +} + +button { + font-size: 30px; +} + +.content { + white-space: pre; +} + +.terminal { + font-family: "IBM Plex Mono", monospace; + color: rgb(187, 187, 187); + font-size: 30px; + font-weight: 100; +} + +.terminal-input { + background: rgba(0, 0, 0, 0); + font-family: monospace; + color: transparent; + font-size: 30px; + outline: none; + border: none; + -webkit-text-fill-color: rgb(187, 187, 187); +} + +.terminal-purple { + color: #5050f2; +} + +.console-line { + color: rgb(0, 178, 0); +} + +.login-line { + color: #fff; +} + +.console-carrot { + vertical-align: middle; + background: #fff; + height: 32px; + width: 17px; + margin-left: -7px; + display: inline-block; + animation: blink 1s step-start 0s infinite; +} + +::selection { + background-color: #fff; + color: #000; +} + +@keyframes blink { + 50% { + opacity: 0; + } +}