Guess-my-number-Project Live-site

Description:

• Created a simple guess my number game using JavaScript DOM.
• Used SCSS for writing clean CSS.
• Made use of JS functions to write reusable pieces of code.

> In this game the user need to input the number between 1 and 20 in the input field and check whether the number generated is exactly equal to the "SECRET NUMBER".
> If any other number is entered the game displays that the number is not a valid number.
> The user will get a maximum of 20 chances to get the correct number.
> The game also consists of hints as if the number entered is higher than the "SECRET NUMBER" then it shows that the number entered is too high and in case the number is lower than the "SECRET NUMBER" it shows that the number entered is too low.

Project Overwiew:

• Build a simple JS DOM game using HTML, SCSS, JavaScript and NodeJS.
• Made use of SassyCSS(SCSS) and strutured the layout using modern CSS grid and Flexbox.
• No CSS Framework.
• Made use of BEM notation to name the classes.
• Used SCSS 7 in 1 architecture to style the different elemnets of the layout that helps to make them easily manageable and maintainable.
• Deplyoed using Netlify.

Selecting the different design elements and sketching a basic layout.

1. Design Inspiration: Source: Jonas Schmedtmann - JavaScript course Udemy

2. Typography:

   Source:Google Fonts

• Merriweather -> Family: serif , Font-weight used : 300,400,700.
• Nunito -> Family: sans-serif , Font-weight used : 400,500,600,700.

3. Colors: Source : OpenColors , Coolors

Tints and Shades: Source: Tints and Shades generator

• color1: #e76f51

• color1-light: #ec8c74

• color1-dark: #b95941

• color2-light: #f5dda8

• color2-dark: #f3d89d

-color3-light: #e0441b -color3-dark: #c62a02

4. Images: Source: Unsplash , Pexels

Setting the development environment

• To make the website responsive from start I used relative units for lengths such as rem, percentage instead of px.

• Set the font-size of the root element of the page to 62.5% to make it easier for calculation(Default font size of browser is 16px so, 62.5% will convert it into 10px and thus 1 rem = 10px).

• Installed node and npm in the project.

• Added Sass to the project and used the 7 in 1 architecture.

• Created 5 folders named "abstracts, base, components, layout, pages" inside the sass folder and a main.scss file that contains all the different elements.

• Code Editor: VS Code.

• Deployed using Netlify.

This is my take on the project, I would appreciate any further knowledge on how to write good codes..