diff --git a/index.html b/index.html index 479c9b4..8d8fd62 100644 --- a/index.html +++ b/index.html @@ -1,471 +1,32 @@ - - - - - - Zero to Mastery: Our HTML Project - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
-
-
-
-
-

- -

- Zero To Mastery -

- - View - Courses -

-
-
-
-
-

Why take this course? -

-
-
-
- Zero To Mastery - - View - Courses -
-
-
-
-
-

Why take this course? -

-
-
-
- Course image -
-
-

- You envision a future in web development but not sure how to start. -

-
-
-
-
-
- Course image -
-
-

- You want to learn from the basics, and then get up and running quickly. -

-
-
-
-
-
- Course image -
-
-

- You want to start profitting from your new skills, passion and grow business - online. -

-
-
-
-
-
-
-

In this course you will learn the basics of the following technologies:

-
-
- -
-
-
-
HTML 5
-

- HTML 5 -

-
-
-
- - -
-
-
-
CSS 3
-

- CSS 3 -

-
-
-
- - -
-
-
-
Bootstrap 4.5
-

- Bootstrap 4 -

-
-
-
- - -
-
-
-
Javascript
-

- Pure JavaScript/ -

-
-
-
- - -
-
-
-
React
-

- react -

-
-
-
- - -
-
-
-
Git + Github
-

- Git + Github -

-
-
-
- - -
-
-
-
Node JS
-

- Node.js -

-
-
-
- - -
-
-
-
Express JS
-

- Express js -

-
-
-
- - -
-
-
-
NPM
-

- NPM -

-
-
-
- - -
-
-
-
PostgresSQL
-

- PostgresSQL -

-
-
-
- - -
-
-
-
SQL
-

- SQL -

-
-
-
- - -
-
-
-
GraphQL
-

- GraphQL -

-
-
-
- - -
-
-
-
Vue Js
-

- VUE JS -

-
-
-
- - -
-
-
-
React Native
-

- React Native -

-
-
-
- -

- The industry is always changing with better technologies, frameworks and resources. Not - to worry, this course is constantly being updated and contains everything to become an - amazing developer in this evolving world ! -

-
-
-
-

Our grateful students

-
-
-
- Carl Smith -
- Carl Smith -

for all levels of skill and experience.

-
-
-
- John Doe -
- Nikola Buzadzija -

I am very happy that i have the opportunity to contribute to this open source project! YEAAAHHHHH!!!!

-
-
-
- Jane Johnson -
- Jane Johnson -

Fantastic instructor, great atmosphere during the course! - Absolutely worth recommending!

-
- -
-
-
-
-
- - - -
-
-
If you enjoyed the course like I did, share it so more people can enjoy it!
-
- - - - -
-
- -
-
- - Git Icon - -
- Made by CWD © All rights reserved by ZTM ! -
-
-
+ + + + + + Number Guessing Game + + + + + +
+

Number guessing game

+

Try and guess a random number between 1 and 100.

+

You have 10 attempts to guess the right number.

+
+
+ Guess a number + + + + +
+

Previous Guesses:

+

Guesses Remaining: 10

+

-
- - - - - - - - - - - - - - - - - - - - - - +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..42b96b0 --- /dev/null +++ b/script.js @@ -0,0 +1,93 @@ + +let randomNumber = parseInt(Math.random() * 100 + 1); + +const submit = document.querySelector('#subt'); +const userInput = document.querySelector('#guessField'); +const guessSlot = document.querySelector('.guesses'); +const remaining = document.querySelector('.lastResult'); +const lowOrHi = document.querySelector('.lowOrHi'); +const startOver = document.querySelector('.resultParas'); + +const p = document.createElement('p'); + +let prevGuess = []; +let numGuess = 1; + +let playGame = true; + +if (playGame) { + submit.addEventListener('click', function (e) { + e.preventDefault(); + const guess = parseInt(userInput.value); + console.log(guess); + validateGuess(guess); + }); +} + +function validateGuess(guess) { + if (isNaN(guess)) { + alert('PLease enter a valid number'); + } else if (guess < 1) { + alert('PLease enter a number more than 1'); + } else if (guess > 100) { + alert('PLease enter a number less than 100'); + } else { + prevGuess.push(guess); + if (numGuess === 11) { + displayGuess(guess); + displayMessage(`Game Over. Random number was ${randomNumber}`); + endGame(); + } else { + displayGuess(guess); + checkGuess(guess); + } + } +} + +function checkGuess(guess) { + if (guess === randomNumber) { + displayMessage(`You guessed it right`); + endGame(); + } else if (guess < randomNumber) { + displayMessage(`Number is TOOO low`); + } else if (guess > randomNumber) { + displayMessage(`Number is TOOO High`); + } +} + +function displayGuess(guess) { + userInput.value = ''; + guessSlot.innerHTML += `${guess}, `; + numGuess++; + remaining.innerHTML = `${11 - numGuess} `; +} + +function displayMessage(message) { + lowOrHi.innerHTML = `

${message}

`; +} + +function endGame() { + userInput.value = ''; + userInput.setAttribute('disabled', ''); + p.classList.add('button'); + p.innerHTML = `

Start new Game

`; + startOver.appendChild(p); + playGame = false; + newGame(); +} + +function newGame() { + const newGameButton = document.querySelector('#newGame'); + newGameButton.addEventListener('click', function (e) { + randomNumber = parseInt(Math.random() * 100 + 1); + prevGuess = []; + numGuess = 1; + guessSlot.innerHTML = ''; + remaining.innerHTML = `${11 - numGuess} `; + userInput.removeAttribute('disabled'); + startOver.removeChild(p); + + playGame = true; + }); +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..917b8ab --- /dev/null +++ b/style.css @@ -0,0 +1,92 @@ +html { + font-family: sans-serif; + } + + body { + width: 300px; + max-width: 750px; + min-width: 480px; + margin: 0 auto; + background-color: #212121; + } + + .lastResult { + color: white; + padding: 7px; + } + + .guesses { + color: white; + padding: 7px; + } + + button { + background-color: #141414; + color: #fff; + width: 250px; + height: 50px; + border-radius: 25px; + font-size: 30px; + border-style: none; + margin-top: 30px; + /* margin-left: 50px; */ + } + + #subt { + background-color: #161616; + color: #ffffff; + width: 200px; + height: 50px; + border-radius: 10px; + font-size: 20px; + border-style: none; + margin-top: 50px; + /* margin-left: 75px; */ + } + + #guessField { + color: #000; + width: 250px; + height: 50px; + font-size: 30px; + border-style: none; + margin-top: 25px; + + /* margin-left: 50px; */ + border: 5px solid #6c6d6d; + text-align: center; + } + + #guess { + font-size: 55px; + /* margin-left: 90px; */ + margin-top: 120px; + color: #fff; + } + + .guesses { + background-color: #7a7a7a; + } + + #wrapper { + box-sizing: border-box; + text-align: center; + width: 450px; + height: 584px; + background-color: #474747; + color: #fff; + font-size: 25px; + } + + h1 { + background-color: #161616; + + color: #fff; + text-align: center; + } + + p { + font-size: 16px; + text-align: center; + } + \ No newline at end of file